:root {
  --page: #f2f2f0;
  --paper: #ffffff;
  --ink: #303842;
  --muted: #667180;
  --black: #1d2027;
  --black-2: #272b34;
  --red: #d11111;
  --orange: #f06d22;
  --line: #d7d9dd;
  --row: #f7f7f7;
  --row-alt: #eeeeef;
  --soft: #fafafa;
  --blue: #2a4e75;
  --shadow: 0 18px 48px rgba(30, 36, 44, 0.14);
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) {
  --page: #191c21;
  --paper: #23272e;
  --ink: #d9e0e8;
  --muted: #a8b2bf;
  --black: #111419;
  --black-2: #171b21;
  --line: #3b414b;
  --row: #262b33;
  --row-alt: #20252c;
  --soft: #1d2128;
  --blue: #b8d4ff;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

:root[data-theme="cutesy"] {
  --page: #fff1f7;
  --paper: #fffafd;
  --ink: #63304c;
  --muted: #986a82;
  --black: #a91861;
  --black-2: #7d1047;
  --red: #ee3f91;
  --orange: #ff82b9;
  --line: #efbfd5;
  --row: #fff7fb;
  --row-alt: #ffedf6;
  --soft: #fff4f9;
  --blue: #c34786;
  --shadow: 0 18px 48px rgba(185, 47, 112, 0.16);
}

:root[data-theme="cutesy-dark"] {
  --page: #1c121b;
  --paper: #291824;
  --ink: #ffe7f2;
  --muted: #d7a7bf;
  --black: #170d16;
  --black-2: #24101f;
  --red: #ff5ba8;
  --orange: #ff8bc2;
  --line: #573247;
  --row: #30202c;
  --row-alt: #251821;
  --soft: #21151e;
  --blue: #ffb1d4;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 0, 0, 0.045), transparent 24%),
    linear-gradient(180deg, #fbfbfa 0, var(--page) 360px, #e9e9e7);
  overflow-x: hidden;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) body {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.05), transparent 24%),
    linear-gradient(180deg, #15181d 0, var(--page) 360px, #111419);
}

:root[data-theme="cutesy"] body {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 151, 198, 0.32), transparent 25%),
    radial-gradient(circle at 86% 5%, rgba(255, 220, 237, 0.52), transparent 23%),
    linear-gradient(180deg, #fffafd 0, var(--page) 360px, #ffe7f2);
}

:root[data-theme="cutesy-dark"] body {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 80, 158, 0.19), transparent 27%),
    radial-gradient(circle at 86% 5%, rgba(179, 47, 115, 0.15), transparent 24%),
    linear-gradient(180deg, #150c14 0, var(--page) 360px, #100a0f);
}

button,
input,
textarea {
  font: inherit;
}

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

button { cursor: pointer; }

button:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.app-modal {
  width: min(620px, calc(100vw - 28px));
  max-width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}

.app-modal::backdrop {
  background: rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(2px);
}

.app-modal-box {
  margin: 0;
}

.app-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: var(--black);
  color: #fff;
  border-bottom: 1px solid var(--line);
}

.app-modal-head h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
}

.app-modal-close {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}

.app-modal-close:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.app-modal-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--paper);
}

.app-modal-copy {
  color: var(--ink);
  line-height: 1.55;
}

.app-modal-copy p {
  margin: 0;
}

.app-modal-field {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 800;
}

.app-modal-field em {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
}

.app-modal-field input,
.app-modal-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--ink);
  padding: 11px 12px;
  outline: 0;
}

.app-modal-field textarea {
  min-height: 92px;
  resize: vertical;
}

.app-modal-field input:focus,
.app-modal-field textarea:focus {
  border-color: var(--orange);
  box-shadow: inset 3px 0 0 var(--orange);
}

.app-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
  background: var(--row);
}

.app-modal-actions .primary-action,
.app-modal-actions .secondary-action,
.app-modal-actions .danger-action {
  min-width: 104px;
  min-height: 40px;
}

.app-modal-actions .danger-action {
  border: 1px solid #a80f0f;
  background: var(--red);
  color: #fff;
  font-weight: 950;
}

.security-incident-notice {
  width: min(720px, calc(100vw - 24px));
  max-width: 100%;
  padding: 0;
  border: 1px solid #8f1717;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.52);
}

.security-incident-notice::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}

.security-incident-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 18px;
  padding: 24px;
  border-top: 7px solid #b31313;
}

.security-incident-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 3px solid #b31313;
  border-radius: 50%;
  color: #b31313;
  font-size: 2rem;
  font-weight: 1000;
}

.security-incident-kicker {
  margin: 0 0 5px;
  color: #a20f0f;
  font-size: 0.78rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.security-incident-content h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.15;
}

.security-incident-copy {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  line-height: 1.58;
}

.security-incident-copy p,
.security-incident-countdown,
.security-incident-error {
  margin: 0;
}

.security-incident-countdown {
  margin-top: 18px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  background: var(--soft);
  font-weight: 800;
}

.security-incident-error {
  margin-top: 10px;
  color: #b31313;
  font-weight: 900;
}

.security-incident-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.security-incident-actions button {
  min-height: 44px;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .security-incident-notice {
  background: #20252c;
  color: #eef5ff;
  border-color: #e24848;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .security-incident-countdown {
  background: #161a21;
  border-color: #3b414b;
}

@media (max-width: 560px) {
  .security-incident-card {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .security-incident-icon {
    width: 48px;
    height: 48px;
    font-size: 1.65rem;
  }
  .security-incident-actions {
    display: grid;
  }
  .security-incident-actions button {
    width: 100%;
  }
}

.thread-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0;
  padding: 10px 0;
}

.thread-pagination a,
.thread-pagination span {
  min-width: 34px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--blue);
  font-weight: 950;
  text-decoration: none;
  padding: 0 10px;
}

.thread-pagination span {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-pagination a {
  background: #20252c;
  border-color: #3b414b;
  color: #dce9ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-pagination span {
  background: #0f1217;
  border-color: #586171;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal {
  background: #20252c;
  color: #eef5ff;
  border-color: #3b414b;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.68);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal-head {
  background: #111419;
  border-color: #3b414b;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal-body {
  background: #20252c;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal-copy,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal-field {
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal-field input,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal-field textarea {
  background: #161a21;
  color: #eef5ff;
  border-color: #3b414b;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal-actions {
  background: #181d24;
  border-color: #3b414b;
}

.rich-editor {
  position: relative;
  min-width: 0;
  border: 1px solid #c9cdd4;
  background: #fff;
}

.editor-toolbar {
  min-height: 38px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #eef0f2;
  border-bottom: 1px solid #d7d9de;
}

.editor-toolbar button {
  min-height: 28px;
  border: 1px solid transparent;
  background: transparent;
  color: #303842;
  padding: 0 8px;
  font-weight: 900;
}

.editor-toolbar select,
.editor-toolbar input[type="color"] {
  min-height: 28px;
  border: 1px solid #d7d9de;
  background: #fff;
  color: #303842;
  font-weight: 850;
}

.editor-toolbar input[type="color"] {
  width: 36px;
  padding: 2px;
}

.editor-toolbar button:hover {
  background: #fff;
  border-color: #d7d9de;
}

.rich-editor textarea {
  width: 100%;
  min-height: 120px;
  border: 0;
  background: #fff;
  color: #26313c;
  padding: 14px 18px;
  resize: vertical;
}

.editor-surface {
  width: 100%;
  min-height: 120px;
  border: 0;
  background: #fff;
  color: #26313c;
  padding: 14px 18px;
  outline: 0;
  line-height: 1.65;
  overflow: auto;
}

.editor-surface:empty::before {
  content: attr(data-placeholder);
  color: #8a94a3;
  pointer-events: none;
}

.editor-surface p {
  margin: 0 0 12px;
}

.editor-surface .bbcode-img,
.editor-surface img {
  max-width: 100%;
  height: auto;
}

.editor-surface img.is-selected {
  outline: 1px solid #6f93c4;
}

.editor-resize-box {
  position: absolute;
  pointer-events: none;
  border: 1px solid #6f93c4;
  z-index: 5;
}

.editor-resize-box span {
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--paper);
  border: 1px solid var(--ink);
  pointer-events: auto;
}

.editor-resize-box [data-resize-handle="nw"] {
  left: -6px;
  top: -6px;
  cursor: nwse-resize;
}

.editor-resize-box [data-resize-handle="ne"] {
  right: -6px;
  top: -6px;
  cursor: nesw-resize;
}

.editor-resize-box [data-resize-handle="sw"] {
  left: -6px;
  bottom: -6px;
  cursor: nesw-resize;
}

.editor-resize-box [data-resize-handle="se"] {
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
}

.rich-editor textarea::placeholder {
  color: #8a94a3;
}

.editor-preview {
  padding: 14px 18px;
  border-top: 1px solid #d7d9de;
  background: #fff;
  color: #26313c;
}

.attach-button {
  width: max-content;
  display: inline-grid !important;
  margin: 0 !important;
  min-height: 36px;
  place-items: center;
  border: 1px solid #6b7280;
  background: #fff;
  color: #26313c !important;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 900 !important;
}

.editor-note {
  margin: 0 !important;
  color: #657183 !important;
  font-size: 12px !important;
}

.editor-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #e2e4e8;
}

.editor-submit {
  min-height: 36px;
  width: auto !important;
  padding: 0 14px;
}

.editor-footer .editor-note {
  flex: 1 1 240px;
}

.comment-form .rich-editor textarea {
  min-height: 74px;
}

.reply-box .rich-editor textarea {
  min-height: 96px;
}

.upload-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #657183;
  font-size: 13px;
  font-weight: 700;
}

.upload-inline input[type="file"] {
  max-width: 100%;
  color: inherit;
  font-weight: 800;
}

.upload-inline input[type="file"]::file-selector-button {
  min-height: 30px;
  margin-right: 8px;
  border: 1px solid #c9cdd4;
  background: #fff;
  color: #11161d;
  padding: 0 10px;
  font-weight: 850;
}

[data-name-effect] {
  background-size: 300% 100% !important;
  will-change: background-position, filter, text-shadow;
}

[data-name-effect="hot-pink"] {
  text-shadow: 0 0 4px rgba(255,255,255,0.65), 0 0 10px rgba(255,20,147,0.9), 0 0 18px rgba(255,20,147,0.65);
}

[data-name-effect="prism"] {
  animation: name-prism-shift 12s linear infinite;
}

[data-name-effect="inferno"] {
  animation: name-inferno-burn 1.8s ease-in-out infinite alternate;
  text-shadow: 0 0 4px rgba(255,210,90,0.75), 0 0 12px rgba(255,76,0,0.82), 0 0 22px rgba(180,20,0,0.55);
}

[data-name-effect="aurora"] {
  animation: name-aurora-drift 7.5s ease-in-out infinite;
  text-shadow: 0 0 7px rgba(124,205,255,0.55);
}

[data-name-effect="chromatic"] {
  animation: name-chromatic-rainbow 5s linear infinite, name-chromatic-glow 2.3s ease-in-out infinite alternate;
  text-shadow: 0 0 5px rgba(255,255,255,0.8), 0 0 14px rgba(0,220,255,0.75), 0 0 24px rgba(255,0,180,0.55);
}

[data-name-effect="holographic"],
[data-name-effect="platinum"],
[data-name-effect="rose-gold"],
[data-name-effect="onyx"],
[data-name-effect="ice"],
[data-name-effect="amethyst"],
[data-name-effect="coral"],
[data-name-effect="galaxy"],
[data-name-effect="blood-gold"],
[data-name-effect="skeleton"],
[data-name-effect="ghostface"],
[data-name-effect="nebula"],
[data-name-effect="emerald-storm"],
[data-name-effect="sunburst"],
[data-name-effect="moonlight"],
[data-name-effect="cyberpunk"],
[data-name-effect="obsidian-void"] {
  animation: vip-name-flow 5.4s linear infinite, vip-name-glow 2.8s ease-in-out infinite alternate;
  text-shadow: 0 0 4px rgba(255,255,255,0.7), 0 0 10px var(--vip-glow, rgba(120,210,255,0.85)), 0 0 18px var(--vip-glow, rgba(120,210,255,0.45));
}

[data-name-effect="platinum"] { --vip-glow: rgba(210,230,255,0.95); }
[data-name-effect="rose-gold"] { --vip-glow: rgba(255,135,160,0.95); }
[data-name-effect="onyx"] { --vip-glow: rgba(125,135,155,0.9); }
[data-name-effect="ice"] { --vip-glow: rgba(80,245,255,0.95); }
[data-name-effect="amethyst"] { --vip-glow: rgba(205,105,255,0.95); }
[data-name-effect="coral"] { --vip-glow: rgba(255,110,100,0.95); }
[data-name-effect="galaxy"] { --vip-glow: rgba(120,140,255,0.96); animation: vip-name-flow 6.6s linear infinite, vip-name-glow 2.6s ease-in-out infinite alternate, galaxyTwinkle 2.2s ease-in-out infinite; }
[data-name-effect="blood-gold"] { --vip-glow: rgba(255,196,65,0.96); animation: vip-name-flow 3.6s linear infinite, inferno-flicker 1.6s ease-in-out infinite alternate; }
[data-name-effect="skeleton"] { --vip-glow: rgba(0,0,0,0); position: relative; display: inline-block; animation: none; text-shadow: 0 1px 0 rgba(255,255,255,.22), 0 1px 4px rgba(50,45,40,.18); filter: saturate(.88) contrast(1.02); }
[data-name-effect="skeleton"]::before,
[data-name-effect="skeleton"]::after { content: "🦴"; position: absolute; top: 52%; transform: translateY(-50%); font-size: .7em; opacity: .72; filter: grayscale(.2); }
[data-name-effect="skeleton"]::before { left: -1.05em; }
[data-name-effect="skeleton"]::after { right: -1.05em; }
[data-name-effect="ghostface"] { --vip-glow: rgba(255,255,255,.72); position: relative; display: inline-block; padding: 0 .08em; animation: vip-name-flow 6.2s linear infinite, ghostfacePulse 3.1s ease-in-out infinite alternate; text-shadow: 0 0 2px rgba(255,255,255,.5), 0 0 10px rgba(0,0,0,.35); }
[data-name-effect="ghostface"]::after { content: ""; position: absolute; inset: -3px -8px; pointer-events: none; background:
  radial-gradient(circle at 8% 26%, rgba(255,255,255,.9) 0 1.2px, transparent 1.8px),
  radial-gradient(circle at 22% 80%, rgba(235,235,235,.8) 0 1.1px, transparent 1.7px),
  radial-gradient(circle at 44% 18%, rgba(255,255,255,.86) 0 1.2px, transparent 1.8px),
  radial-gradient(circle at 65% 82%, rgba(220,220,220,.76) 0 1.05px, transparent 1.7px),
  radial-gradient(circle at 88% 36%, rgba(255,255,255,.95) 0 1.2px, transparent 1.9px),
  radial-gradient(circle at 74% 12%, rgba(255,255,255,.88) 0 1.15px, transparent 1.7px);
  animation: ghostSparkle 2.7s ease-in-out infinite;
}
[data-name-effect="nebula"] { --vip-glow: rgba(165,120,255,0.95); animation: vip-name-flow 5.2s linear infinite, nebulaPulse 3.1s ease-in-out infinite alternate; }
[data-name-effect="emerald-storm"] { --vip-glow: rgba(70,255,205,0.95); animation: vip-name-flow 4.8s linear infinite, emeraldShimmer 2.8s ease-in-out infinite alternate; }
[data-name-effect="sunburst"] { --vip-glow: rgba(255,182,60,0.98); animation: vip-name-flow 3.2s linear infinite, sunburstFlare 1.9s ease-in-out infinite alternate; }
[data-name-effect="moonlight"] { --vip-glow: rgba(200,220,255,0.95); animation: vip-name-flow 7s linear infinite, moonlightFloat 3.8s ease-in-out infinite alternate; }
[data-name-effect="cyberpunk"] { --vip-glow: rgba(0,245,255,0.95); animation: vip-name-flow 2.6s linear infinite, cyberpunkFlicker 1.2s steps(2, end) infinite; }
[data-name-effect="obsidian-void"] { --vip-glow: rgba(120,130,155,0.92); animation: vip-name-flow 8.4s linear infinite, voidBreath 4.2s ease-in-out infinite alternate; }

@keyframes vip-name-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes vip-name-glow {
  from { filter: saturate(1); }
  to { filter: saturate(1.35) brightness(1.1); }
}

@keyframes galaxyTwinkle {
  0%,100% { text-shadow: 0 0 4px rgba(255,255,255,.75), 0 0 10px rgba(120,140,255,.82), 0 0 18px rgba(70,30,120,.45); }
  50% { text-shadow: 0 0 4px rgba(255,255,255,.95), 0 0 16px rgba(255,255,255,.95), 0 0 26px rgba(120,140,255,.75); }
}
@keyframes inferno-flicker {
  from { filter: saturate(1) brightness(1); }
  to { filter: saturate(1.45) brightness(1.16); }
}
@keyframes ghostSparkle {
  0%,100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(-1px); opacity: .98; }
}
@keyframes ghostfacePulse {
  from { filter: brightness(1) contrast(1); }
  to { filter: brightness(1.08) contrast(1.08); }
}
@keyframes nebulaPulse {
  from { filter: hue-rotate(0deg) saturate(1); }
  to { filter: hue-rotate(14deg) saturate(1.24) brightness(1.08); }
}
@keyframes emeraldShimmer {
  from { filter: saturate(1) brightness(1); }
  to { filter: saturate(1.3) brightness(1.12) drop-shadow(0 0 6px rgba(80,255,220,.32)); }
}
@keyframes sunburstFlare {
  from { filter: brightness(1) saturate(1); }
  to { filter: brightness(1.22) saturate(1.45); }
}
@keyframes moonlightFloat {
  from { filter: brightness(1) saturate(1); }
  to { filter: brightness(1.12) saturate(1.08) drop-shadow(0 0 8px rgba(210,225,255,.36)); }
}
@keyframes cyberpunkFlicker {
  0%,100% { opacity: 1; }
  45% { opacity: .92; }
  50% { opacity: .68; }
  55% { opacity: .96; }
}
@keyframes voidBreath {
  from { filter: brightness(.96) saturate(.9); }
  to { filter: brightness(1.07) saturate(1.08); }
}

@keyframes name-prism-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes name-inferno-burn {
  0% { background-position: 0% 50%; filter: brightness(1) saturate(1.05); }
  45% { background-position: 120% 50%; filter: brightness(1.12) saturate(1.28); }
  100% { background-position: 260% 50%; filter: brightness(1.02) saturate(1.18); }
}

@keyframes name-aurora-drift {
  0%, 100% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  50% { background-position: 220% 50%; filter: hue-rotate(18deg) brightness(1.08); }
}

@keyframes name-chromatic-rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes name-chromatic-glow {
  from { filter: saturate(1.1) brightness(1); }
  to { filter: saturate(1.45) brightness(1.15); }
}

a {
  color: inherit;
}

.site-shell {
  width: min(1180px, calc(100% - 34px));
  margin: 20px auto 40px;
  background: var(--paper);
  box-shadow: var(--shadow);
  overflow-x: clip;
}

.masthead {
  min-height: 144px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
    repeating-radial-gradient(circle at 10% 20%, #d9d5cb 0 1px, transparent 1px 4px),
    #e7e2d8;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  font-size: clamp(48px, 6vw, 70px);
  line-height: 0.95;
  letter-spacing: 0;
  font-weight: 950;
}

.wordmark-black { color: #050505; }
.wordmark-red { color: var(--red); }

.mast-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.mast-btn {
  min-width: 106px;
  height: 92px;
  border: 0;
  border-bottom: 3px solid var(--orange);
  background: rgba(255, 255, 255, 0.78);
  color: #333;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
}

.mast-link {
  text-decoration: none;
}

.mast-btn:hover,
.mast-btn:focus-visible {
  background: #fff;
  outline: none;
}

.mast-btn.compact {
  min-width: 92px;
}

.account-card {
  min-width: 150px;
  height: 92px;
  display: grid;
  align-content: center;
  padding: 0 18px;
  border-bottom: 3px solid var(--orange);
  background: rgba(255, 255, 255, 0.78);
}

.account-card strong,
.account-card span {
  display: block;
}

.account-card strong {
  color: #1f252d;
  font-size: 15px;
  font-weight: 950;
}

.account-card a {
  text-decoration: none;
}

.account-card span {
  margin-top: 3px;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-chip,
.top-icon,
.account-link {
  min-height: 52px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-bottom: 3px solid var(--orange);
  background: rgba(255, 255, 255, 0.78);
  color: #20242b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.account-chip {
  grid-template-columns: auto auto;
  gap: 8px;
  min-width: 0;
  max-width: 180px;
  padding: 0 12px;
  overflow: hidden;
}

.account-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: #242831;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  border-bottom: 2px solid var(--orange);
  overflow: hidden;
}

.top-icon {
  position: relative;
  width: 48px;
  font-size: 22px;
  line-height: 1;
}

.top-icon b {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.account-link {
  min-width: 74px;
  padding: 0 12px;
  text-transform: uppercase;
  line-height: 1;
}

/* Keep the account control icon-only on desktop as well as mobile. */
.account-link[href="#/account"] {
  width: 52px;
  min-width: 52px;
  padding: 0;
  font-size: 0;
}

.account-link[href="#/account"]::before {
  content: "\2699";
  display: block;
  font-size: 20px;
  line-height: 1;
}

button.account-link {
  cursor: pointer;
}

.nav-bar {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: stretch;
  background: var(--black);
  overflow-x: auto;
  overflow-y: hidden;
}

.nav-bar a {
  display: grid;
  place-items: center;
  min-width: max-content;
  padding: 0 18px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 900;
  border-bottom: 3px solid transparent;
}

.nav-bar a:hover,
.nav-bar a.active {
  border-bottom-color: var(--orange);
  background: #16191f;
}

main {
  min-height: 560px;
  padding: 22px 0 30px;
  outline: 0;
}

.utility-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px 18px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 750;
}

.utility-row a,
.breadcrumb a,
.forum-copy a,
.thread-copy a,
.last-post a {
  text-decoration: none;
}

.utility-row a:hover,
.breadcrumb a:hover,
.forum-copy a:hover,
.thread-copy a:hover,
.last-post a:hover,
.member-name:hover {
  text-decoration: underline;
}

.member-name {
  color: var(--blue);
  font-weight: 900;
  text-decoration: none;
}

.search {
  margin-left: auto;
  width: min(320px, 45vw);
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--line);
  background: #fff;
  color: #79818c;
}

.search input,
.wide-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
}

.forum-card,
.thread-list {
  margin: 0 0 28px;
  border-top: 1px solid var(--black);
}

.thread-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px 300px;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  background: var(--black);
  color: #fff;
}

.forum-table-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px 90px 90px 300px;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  background: var(--black);
  color: #fff;
}

.forum-table-head h1 {
  grid-column: 1 / 4;
}

.forum-table-head h1,
.thread-list-head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1;
}

.forum-table-head span,
.thread-list-head span {
  font-size: 14px;
  font-weight: 800;
}

.forum-row,
.thread-row {
  display: grid;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 18px;
  background: var(--row);
  border-bottom: 1px solid var(--line);
}

.forum-row {
  grid-template-columns: 42px minmax(0, 1fr) 28px 90px 90px 300px;
}

.thread-row {
  grid-template-columns: 42px minmax(0, 1fr) 90px 90px 300px;
}

.forum-row:nth-child(even),
.thread-row:nth-child(even) {
  background: var(--row-alt);
}

.forum-row:hover,
.thread-row:hover {
  background: #fff;
}

.forum-status {
  width: 18px;
  height: 18px;
  background: #34383f;
  margin-left: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.forum-status.locked::after {
  content: "";
  display: block;
  width: 8px;
  height: 5px;
  margin: 6px auto 0;
  border: 2px solid #fff;
  border-top: 0;
}

.forum-copy,
.thread-copy,
.last-post {
  min-width: 0;
}

.forum-copy a,
.thread-copy a,
.last-post a {
  display: block;
  max-width: 100%;
  color: #3b3f47;
  text-align: left;
  font-weight: 900;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.last-post a {
  color: var(--blue);
  font-size: 14px;
}

.last-post .last-post-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  color: var(--blue);
  line-height: 1.25;
}

.last-post .last-post-title > span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
}

.last-post-meta,
.last-post-date {
  margin-top: 2px !important;
}

.last-post-meta .member-name {
  display: inline;
  font-size: inherit;
}

.forum-copy p,
.thread-copy p,
.last-post p,
.online-block p,
.subforum-title p,
.thread-hero p,
.info-panel p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.subforums {
  color: #454d58;
  font-size: 13px;
}

.rss {
  width: 18px;
  height: 18px;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: var(--orange);
  color: transparent;
  position: relative;
}

.rss::before,
.rss::after {
  content: "";
  position: absolute;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
}

.rss::before {
  width: 10px;
  height: 10px;
  right: 3px;
  bottom: 3px;
}

.rss::after {
  width: 4px;
  height: 4px;
  left: 3px;
  bottom: 3px;
  background: #fff;
}

.count {
  color: #4e5968;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  border-left: 1px solid #fff;
}

.last-post {
  padding-left: 10px;
  border-left: 1px solid #fff;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px 18px;
  color: #526071;
  font-size: 14px;
}

.subforum-title,
.thread-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px 20px;
}

.subforum-title h1,
.thread-hero h1,
.info-panel h1 {
  margin: 0;
  color: #343b46;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.1;
  letter-spacing: 0;
}

.primary-action,
.secondary-action,
.dialog-submit {
  min-height: 38px;
  border: 0;
  padding: 0 16px;
  display: inline-grid;
  place-items: center;
  background: var(--black);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
}

.secondary-action {
  background: #eef0f2;
  color: #303842;
  border: 1px solid #d5d9de;
}

.danger-action {
  min-height: 38px;
  border: 0;
  padding: 0 16px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.thread-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.thread-move-form {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.thread-move-form label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid #d5d9de;
  background: #fff;
  color: #526071;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.thread-move-form select {
  height: 28px;
  border: 1px solid #cbd0d7;
  background: #fff;
  color: #303842;
  font: inherit;
  font-size: 12px;
  text-transform: none;
}

.pin {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 6px;
  background: #eef0f2;
  color: #4c5664;
  border: 1px solid #d4d7dc;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  vertical-align: middle;
}

.thread-prefix {
  display: inline-grid;
  place-items: center;
  min-height: 22px;
  flex: 0 0 auto;
  margin-right: 6px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 950;
  vertical-align: middle;
  line-height: 1;
  white-space: nowrap;
}

.thread-hero h1 .thread-prefix {
  min-height: 30px;
  padding: 4px 10px;
  margin-right: 12px;
  font-size: 18px;
  transform: translateY(-2px);
}

.mention-menu {
  position: fixed;
  z-index: 2147483647;
  width: min(310px, calc(100vw - 20px));
  display: none;
  padding: 6px;
  border: 1px solid #d7d9de;
  background: #fff;
  box-shadow: 0 12px 30px rgba(30, 36, 44, 0.16);
  max-height: min(300px, calc(100vh - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mention-menu.open {
  display: grid;
  gap: 3px;
}

.mention-menu button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  border: 0;
  padding: 6px 8px;
  background: transparent;
  color: #26313c;
  text-align: left;
  font-weight: 850;
}

.mention-menu button.active,
.mention-menu button:hover {
  background: #eef0f2;
}

.mention-menu span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xf-thread {
  display: grid;
  gap: 16px;
  padding: 0 18px 18px;
}

.xf-post {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  border: 1px solid #d6d9de;
  background: #fff;
  box-shadow: 0 10px 28px rgba(30, 36, 44, 0.08);
}

.post-author {
  padding: 18px;
  background: linear-gradient(180deg, #f6f7f8, #edf0f3);
  border-right: 1px solid #d6d9de;
}

.avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  background: #242831;
  color: #fff;
  font-size: 26px;
  font-weight: 950;
  border-bottom: 3px solid var(--orange);
  overflow: hidden;
}

.chip-avatar img,
.avatar img,
.profile-avatar img,
.mini-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.post-author strong,
.post-author span {
  display: block;
}

.post-author strong {
  font-size: 16px;
  color: #1f252d;
}

.post-author span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.admin-avatar {
  background: #11141a;
  color: #fff;
  border-bottom-color: var(--red);
}

.rank-admin {
  color: var(--red) !important;
  font-weight: 950;
  text-transform: uppercase;
}

.staff-badge {
  width: max-content;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px !important;
  padding: 0 8px;
  background: var(--red);
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 950;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

.post-content {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.post-content header,
.post-content footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 18px;
  background: #fafafa;
  border-bottom: 1px solid #e2e4e8;
  color: #657183;
  font-size: 13px;
}

.post-content footer {
  justify-content: flex-start;
  border-top: 1px solid #e2e4e8;
  border-bottom: 0;
}

.post-content footer button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 800;
}

.reaction-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.reaction-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reaction-trigger.has-reacted {
  color: var(--red);
}

.reaction-picker {
  position: absolute;
  left: -8px;
  bottom: calc(100% + 8px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 5px 7px;
  border: 1px solid #cbd0d7;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 36, 44, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease;
}

.reaction-control:hover .reaction-picker,
.reaction-control:focus-within .reaction-picker {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.reaction-picker button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #1f252d;
  font-size: 23px;
  line-height: 1;
}

.reaction-picker button:hover,
.reaction-picker button:focus-visible {
  background: #eef3ff;
  transform: translateY(-2px) scale(1.08);
}

.reaction-picker button span {
  display: block;
  line-height: 1;
}

.reaction-picker button span {
  white-space: nowrap;
}

img.reaction-icon {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
}

img.reaction-trigger-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  object-fit: contain;
  vertical-align: -4px;
  margin-right: 4px;
}

img.reaction-line-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 3px;
}

img.reaction-based {
  width: 42px;
  height: auto;
  border-radius: 0;
}

img.reaction-trigger-icon.reaction-based,
img.reaction-line-icon.reaction-based {
  width: 34px;
  height: auto;
  vertical-align: -2px;
}

.reaction-picker button[title="Based"] {
  width: auto;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
  color: #f05b18;
}

.reaction-control.is-disabled .reaction-picker {
  display: none;
}

.post-body {
  padding: 22px 20px;
  color: #27313d;
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.post-body p {
  margin: 0 0 14px;
}

.post-body p:last-child {
  margin-bottom: 0;
}

.post-header-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.post-tool-button {
  border: 0;
  background: transparent;
  color: #526071;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}

.post-tool-button:hover,
.post-tool-button:focus-visible {
  color: var(--blue);
}

.bbcode-quote {
  margin: 0 0 4px;
  padding: 0 0 0 14px;
  border-left: 3px solid #737985;
  background: #eef0f2;
  color: #3d4652;
}

.bbcode-quote cite {
  display: block;
  padding: 10px 12px 4px;
  border-bottom: 1px solid #cbd0d7;
  color: #657183;
  font-style: normal;
  font-weight: 850;
}

.bbcode-quote > .bbcode-quote-body {
  padding: 8px 12px 12px;
}

.bbcode-spoiler {
  margin: 0 0 14px;
  border: 1px solid #cbd0d7;
  background: #f1f2f4;
}

.bbcode-spoiler summary {
  cursor: pointer;
  padding: 9px 12px;
  background: #20242b;
  color: #fff;
  font-weight: 900;
}

.bbcode-spoiler > div {
  padding: 12px;
  color: #26313c;
}

.bbcode-code {
  margin: 0 0 14px;
  padding: 12px;
  overflow-x: auto;
  border: 1px solid #2d333c;
  background: #161a20;
  color: #cbd7e2;
}

.bbcode-code code {
  font-family: Consolas, Monaco, monospace;
}

.bbcode-img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  margin: 8px 0;
  border: 1px solid #cbd0d7;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .site-shell,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .forum-row,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-row,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .reply-box,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .info-panel,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-panel,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-post,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-side,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-hero,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-details,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .settings-card,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .security-card,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .alerts-panel,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-sidebar,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-thread,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-benefits,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .auth-dialog,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .topic-dialog {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .masthead {
  background:
    linear-gradient(rgba(35, 39, 46, 0.86), rgba(35, 39, 46, 0.86)),
    repeating-radial-gradient(circle at 10% 20%, #3a3f48 0 1px, transparent 1px 4px),
    #242830;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .forum-row:nth-child(even),
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-row:nth-child(even),
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-comments,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .settings-label,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-menu,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-message {
  background: var(--row-alt);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .forum-row:hover,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-row:hover,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-preview,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor textarea,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .topic-form input,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .topic-form textarea,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .auth-dialog input,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .auth-dialog textarea,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-details input,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-details select,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-details textarea,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .side-input,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .mention-menu {
  background: var(--soft);
  color: var(--ink);
  border-color: var(--line);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-quote {
  background: #2b3139;
  color: #d7dee8;
  border-left-color: #788394;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-quote cite,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-post-body > p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .last-post-date,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .last-post-meta,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-note {
  color: var(--muted) !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-quote cite {
  border-bottom-color: #47505c;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-spoiler {
  background: #252a31;
  border-color: var(--line);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-spoiler div,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-bbcode,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-body {
  color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .reaction-tabs,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .purchased-upgrades h2,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bookmark-labels span {
  background: var(--row-alt);
  border-color: var(--line);
  color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bookmark-row,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .received-reaction-row,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .purchased-upgrades {
  background: var(--paper);
  border-color: var(--line);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bookmark-row button {
  background: var(--soft);
  color: var(--ink);
  border-color: var(--line);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .purchased-upgrades p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bookmark-copy small,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .received-reaction-row small {
  color: var(--muted);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .mention-menu button {
  color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .mention-menu button.active,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .mention-menu button:hover {
  background: #303640;
}

.rich-editor .bbcode-img {
  border-color: #4c535e;
}

.profile-bbcode {
  margin-bottom: 10px;
  color: #26313c;
  font-size: 16px;
  line-height: 1.45;
}

.reaction-line {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #e2e4e8;
  color: var(--blue);
  font-size: 13px;
  font-weight: 850;
}

.reaction-line-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 6px;
}

.reply-box,
.info-panel,
.admin-panel {
  margin: 0 18px;
  padding: 18px;
  border: 1px solid #d7d9de;
  background: #fbfbfb;
}

.rules-doc {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.rules-doc section {
  border: 1px solid #d7d9de;
  background: #fff;
}

.rules-doc h2 {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid #d7d9de;
  background: #f0f1f2;
  color: #1f252d;
  font-size: 18px;
}

.rules-doc p,
.rules-doc ul,
.rules-doc dl {
  margin: 0;
  padding: 12px 14px;
  color: #36404c;
  line-height: 1.55;
}

.rules-doc ul {
  padding-left: 34px;
}

.rules-doc li + li {
  margin-top: 8px;
}

.legal-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
  font-size: 12px;
  line-height: 1.45;
}

.legal-confirmation input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
}

.rules-doc dt {
  margin-top: 10px;
  color: #1f252d;
  font-weight: 950;
}

.rules-doc dt:first-child {
  margin-top: 0;
}

.rules-doc dd {
  margin: 4px 0 0;
  color: #526071;
}

.rules-doc .rules-note {
  color: #6a7482;
  font-weight: 850;
}

.rules-table {
  width: calc(100% - 28px);
  margin: 12px 14px;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}

.rules-table th,
.rules-table td {
  border: 1px solid #d7d9de;
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

.rules-table th {
  background: #1c2028;
  color: #fff;
  font-weight: 950;
}

.rules-table td:first-child {
  font-weight: 850;
}

.reply-box h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

.admin-panel h1,
.admin-panel h2 {
  margin: 0;
}

.admin-panel > p {
  margin: 8px 0 18px;
  color: var(--muted);
}

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

.admin-users-section {
  grid-column: 1 / -1;
}

.admin-grid section {
  min-width: 0;
}

.admin-grid h2 {
  padding: 12px 14px;
  background: var(--black);
  color: #fff;
  font-size: 15px;
}

.admin-table {
  border: 1px solid var(--line);
  border-top: 0;
}

.admin-table article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border-top: 1px solid var(--line);
}

.admin-table article.admin-user-row {
  grid-template-columns: minmax(260px, 1fr);
  align-items: start;
}

.admin-user-main {
  min-width: 0;
}

.admin-table article:nth-child(even) {
  background: #f3f4f5;
}

.admin-table strong {
  color: #25303b;
}

.admin-table p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: break-word;
}

.admin-grid section:not(.admin-users-section) .admin-table article {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
}

.admin-user-row .admin-actions {
  display: grid;
  grid-template-columns: 76px 62px 90px 110px 78px 78px minmax(260px, 1fr);
  align-items: end;
  gap: 8px;
  width: 100%;
}

.admin-actions button {
  min-height: 30px;
  border: 1px solid #cdd1d6;
  background: #fff;
  color: #26313c;
  font-size: 12px;
  font-weight: 850;
}

.admin-user-row .admin-actions button {
  width: 100%;
}

.admin-actions label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.admin-actions select {
  min-height: 30px;
  border: 1px solid #cdd1d6;
  background: #fff;
  color: #26313c;
  font-size: 12px;
  font-weight: 800;
}

.admin-user-row .admin-actions select {
  width: 100%;
}

.admin-actions input {
  width: 76px;
  min-height: 30px;
  border: 1px solid #cdd1d6;
  padding: 0 8px;
}

.admin-user-row .admin-actions input {
  width: 100%;
}

.admin-identity-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) 112px;
  gap: 8px;
  align-items: end;
}

.admin-danger-zone {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.admin-danger-zone .danger-action {
  max-width: 160px;
}

.badge-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 8px 12px;
  font-size: 11px;
}

.badge-picker label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  white-space: nowrap;
}

.badge-picker input {
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
}

.quick-user-tool {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 140px 100px 100px auto;
  gap: 8px;
  margin: 0 0 18px;
}

.admin-search-tool {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.quick-user-tool input,
.quick-user-tool select {
  min-height: 38px;
  border: 1px solid #cdd1d6;
  padding: 0 10px;
}

.members-layout,
.profile-layout,
.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 18px;
  padding: 0 18px;
}

.members-main,
.profile-main,
.profile-side,
.account-menu,
.account-details {
  min-width: 0;
}

.members-main h1,
.profile-side h2,
.account-details h1 {
  margin: 0 0 14px;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.member-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  background: #fff;
  text-decoration: none;
}

.member-card strong,
.member-card span {
  display: block;
}

.member-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.profile-side {
  align-self: start;
  padding: 14px;
  border: 1px solid #d7d9de;
  background: #fbfbfb;
}

.profile-side h2 {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}

.side-input {
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  border: 1px solid #c9cdd4;
  padding: 0 10px;
}

.color-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 900;
}

.profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 170px;
  padding: 18px;
  border: 1px solid #d7d9de;
  background:
    linear-gradient(90deg, rgba(29,32,39,0.88), rgba(29,32,39,0.54)),
    repeating-radial-gradient(circle at 20% 10%, rgba(255,255,255,0.18) 0 1px, transparent 1px 5px),
    #3b414b;
  color: #fff;
}

.profile-avatar,
.mini-avatar {
  display: grid;
  place-items: center;
  background: #242831;
  color: #fff;
  font-weight: 950;
  border-bottom: 3px solid var(--orange);
  overflow: hidden;
}

.profile-avatar {
  width: 58px;
  height: 58px;
  font-size: 26px;
}

.profile-avatar.large {
  width: 126px;
  height: 126px;
  font-size: 54px;
}

.mini-avatar {
  width: 42px;
  height: 42px;
  font-size: 18px;
}

.mini-avatar.tiny {
  width: 28px;
  height: 28px;
  font-size: 12px;
  border-bottom-width: 2px;
}

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

.profile-name-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.profile-identity h1 {
  margin: 0 0 6px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
}

.profile-name-line > span {
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.profile-identity p {
  margin: 5px 0;
  color: rgba(255,255,255,0.9);
}

.mention-link {
  color: #1e5c9a;
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px solid rgba(30,92,154,0.35);
}
/* Mention links — lighter blue on dark/cutesy-dark so they read well on dark surfaces. */
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .mention-link {
  color: #91c4ff;
  border-bottom-color: rgba(145, 196, 255, 0.4);
}
:root[data-theme="cutesy"] .mention-link {
  color: #1c5a82;
  border-bottom-color: rgba(28, 90, 130, 0.4);
}

.mention-link:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.24);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.role-badge.admin {
  background: var(--red);
  border-color: var(--red);
}

.badge-row.small {
  margin-top: 8px;
}

.badge-row.small .role-badge {
  background: #eef0f2;
  border-color: #d4d7dc;
  color: #303842;
}

.role-badge.badge-reputable,
.badge-row.small .role-badge.badge-reputable {
  background: #f0c400;
  border-color: #d8af00;
  color: #fff;
}

.role-badge.badge-established,
.badge-row.small .role-badge.badge-established {
  background: #2f80ff;
  border-color: #246ee2;
  color: #fff;
}

.role-badge.badge-vip,
.badge-row.small .role-badge.badge-vip {
  background: #66bfff;
  border-color: #44a8ef;
  color: #fff;
}

.profile-actions {
  display: flex;
  gap: 8px;
  align-self: start;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #d7d9de;
  border-top: 0;
  background: #fff;
}

.profile-stats div {
  padding: 14px;
  border-left: 1px solid var(--line);
}

.profile-stats div:first-child {
  border-left: 0;
}

.profile-stats span,
.profile-stats strong {
  display: block;
}

.profile-stats span {
  color: var(--muted);
  font-size: 12px;
}

.profile-stats strong {
  margin-top: 4px;
  font-size: 20px;
}

.profile-tabs {
  display: flex;
  gap: 18px;
  padding: 0 14px;
  border: 1px solid #d7d9de;
  border-top: 0;
  background: #f4f5f6;
}

.profile-tabs a {
  padding: 13px 0 10px;
  color: #526071;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.profile-tabs a.active {
  color: #1f252d;
  border-bottom-color: var(--orange);
  font-weight: 900;
}

.profile-feed {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.profile-status,
.profile-post {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid #d7d9de;
  background: #fff;
}

.profile-status input,
.comment-form input,
.account-details input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #c9cdd4;
  padding: 0 10px;
}

.profile-status {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
}

.profile-status .rich-editor,
.comment-form .rich-editor {
  width: 100%;
}

.comment-form:has(.rich-editor) {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.profile-status:has(.rich-editor) {
  grid-template-columns: auto minmax(0, 1fr);
}

.profile-status:has(.rich-editor) .primary-action {
  grid-column: 2;
  width: max-content;
}

.profile-status .rich-editor textarea,
.comment-form .rich-editor textarea {
  min-height: 90px;
}

.profile-post-body > p {
  margin: 0 0 8px;
  color: var(--muted);
}

.profile-post-body > strong,
.profile-bbcode {
  display: block;
  margin-bottom: 10px;
  color: #26313c;
  font-size: 16px;
  line-height: 1.45;
}

.post-tools {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.post-tools button,
.comment-form button,
.account-menu button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 850;
}

.profile-comments {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  background: #f3f4f5;
  border: 1px solid #e0e2e5;
}

.profile-comments p {
  margin: 0 0 3px;
  color: var(--muted);
}

.comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.account-layout {
  grid-template-columns: 240px minmax(0, 1fr);
}

.account-menu {
  display: grid;
  align-content: start;
  border: 1px solid #d7d9de;
  background: #f5f6f7;
}

.account-menu a,
.account-menu button {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid #d7d9de;
  background: transparent;
  color: #26313c;
  text-align: left;
  text-decoration: none;
  font-weight: 850;
}

.account-menu .active {
  background: #fff;
  border-left: 3px solid var(--orange);
}

.account-details {
  padding: 18px;
  border: 1px solid #d7d9de;
  background: #fbfbfb;
}

.account-details label,
.account-details fieldset {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  color: #526071;
  font-weight: 850;
}

.account-details fieldset {
  border: 0;
  padding: 0;
}

.account-details fieldset label {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  margin: 0;
}

.account-menu strong {
  padding: 12px 14px;
  background: var(--black);
  color: #fff;
  font-size: 13px;
}

.account-note {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.45;
}

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

.following-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7d9de;
  background: #fff;
  text-decoration: none;
}

.following-card span,
.following-card strong,
.following-card small {
  min-width: 0;
  display: block;
}

.following-card strong,
.following-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.following-card small {
  margin-top: 3px;
  color: var(--muted);
}

.settings-panel {
  padding: 0;
  overflow: hidden;
}

.settings-panel h1 {
  padding: 18px 18px 0;
}

.settings-card {
  border-top: 1px solid #d7d9de;
  background: #fff;
}

.settings-card h2 {
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid #d7d9de;
  color: #647083;
  font-size: 16px;
}

.settings-row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid #d7d9de;
}

.settings-label {
  color: #526071;
  font-size: 16px;
  font-weight: 850;
  text-align: right;
}

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

.settings-stack select,
.select-setting select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #c9cdd4;
  background: #fff;
  color: #26313c;
  padding: 0 12px;
  font: inherit;
}

.check-setting,
.notification-setting,
.select-setting {
  margin: 0;
  color: #26313c;
}

.account-details .check-setting,
.account-details .notification-setting,
.account-details .select-setting {
  margin: 0;
}

.check-setting {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-weight: 500;
}

.check-setting.indent {
  margin-left: 28px;
  color: #6a7482;
}

.check-setting input,
.notification-setting input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.check-setting strong {
  display: block;
  font-size: 16px;
}

.check-setting small {
  display: block;
  margin-top: 4px;
  color: #526071;
  font-size: 13px;
  line-height: 1.4;
}

.settings-copy {
  margin: 0;
  color: #3f4b59;
  line-height: 1.55;
}

.settings-grid {
  display: grid;
  gap: 14px;
}

.select-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 290px);
  align-items: center;
  gap: 16px;
}

.select-setting span,
.notification-setting > span {
  color: #526071;
  font-size: 16px;
  font-weight: 850;
}

.notification-setting {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid #d7d9de;
  align-items: center;
}

.notification-setting > span {
  text-align: right;
}

.notification-setting strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.settings-save {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #eef0f2;
  border-top: 1px solid #d7d9de;
}

.settings-save .primary-action {
  min-width: 150px;
}

.upgrades-panel {
  padding: 0;
  overflow: hidden;
}

.upgrades-panel h1 {
  padding: 18px 18px 12px;
  border-bottom: 1px solid #d7d9de;
}

.upgrade-list {
  display: grid;
}

.upgrade-row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid #d7d9de;
  background: #fff;
}

.upgrade-summary {
  text-align: right;
}

.upgrade-summary h2 {
  margin: 0 0 4px;
  color: #1f252d;
  font-size: 18px;
}

.upgrade-summary p {
  margin: 0;
  color: #657183;
}

.upgrade-body {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.purchase-button {
  min-height: 36px;
  border: 0;
  background: #000;
  color: #fff;
  padding: 0 14px;
  font-weight: 950;
}

.purchase-button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.upgrade-body .purchase-button[disabled] {
  display: none;
}

.purchase-button span {
  margin-right: 6px;
}

.payment-result {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #d7d9de;
  background: #f7f8f9;
  color: #26313c;
  line-height: 1.45;
}

.payment-result code {
  overflow-wrap: anywhere;
}

.vip-benefits {
  width: 100%;
  border: 1px solid #d7d9de;
  background: #fff;
}

.vip-benefits h3 {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid #d7d9de;
  font-size: 20px;
}

.vip-benefits ul {
  margin: 0;
  padding: 12px 20px 14px 34px;
  font-weight: 850;
  line-height: 1.45;
}

.manual-payment-box {
  margin-bottom: 18px;
  border: 1px solid #d7d9de;
  background: #fff;
}

.manual-payment-box h2 {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid #d7d9de;
  font-size: 18px;
}

.manual-payment-box p {
  margin: 0;
  padding: 12px 14px;
  color: var(--muted);
  line-height: 1.45;
}

.wallet-address {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 14px;
}

.wallet-address code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 10px;
  background: #f4f5f6;
  border: 1px solid #d7d9de;
  color: #20242b;
}

.wallet-address button {
  min-height: 38px;
  border: 0;
  background: #111;
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
}

.upgrade-note {
  margin: 0;
  padding: 14px 18px;
  background: #eef0f2;
}

.purchased-upgrades {
  margin: 18px;
  border: 1px solid #d7d9de;
  background: #fff;
}

.purchased-upgrades h2 {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid #d7d9de;
  background: #f0f1f2;
  font-size: 18px;
}

.purchased-upgrades p {
  margin: 0;
  padding: 14px;
  color: #526071;
}

.bookmark-list,
.received-reaction-list {
  display: grid;
}

.bookmark-row,
.received-reaction-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-top: 1px solid #d7d9de;
}

.received-reaction-row {
  grid-template-columns: 58px minmax(0, 1fr);
}

.bookmark-row:first-child,
.received-reaction-row:first-child {
  border-top: 0;
}

.bookmark-copy a,
.received-reaction-row a {
  color: var(--blue);
  font-weight: 900;
}

.bookmark-copy p,
.received-reaction-row p {
  margin: 0 0 6px;
  line-height: 1.5;
}

.bookmark-copy small,
.received-reaction-row small {
  color: #657183;
}

.bookmark-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.bookmark-labels span {
  border: 1px solid #d7d9de;
  background: #eef0f2;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 900;
}

.bookmark-row button {
  min-height: 32px;
  border: 1px solid #d7d9de;
  background: #fff;
  color: #303842;
  font-weight: 900;
}

.reaction-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 16px;
  border-bottom: 1px solid #d7d9de;
  background: #f0f1f2;
  color: #526071;
  line-height: 1.4;
}

.reaction-tabs span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.security-panel {
  display: grid;
  gap: 16px;
}

.security-card {
  border: 1px solid #d7d9de;
  background: #fff;
}

.security-card header {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  background: #f0f1f2;
  border-bottom: 1px solid #d7d9de;
}

/* Security-card header — theme-aware so the gray header strip doesn't stay light in dark mode. */
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .security-card header {
  background: var(--row-alt);
  border-bottom-color: var(--line);
}
:root[data-theme="cutesy"] .security-card header {
  background: var(--row-alt);
  border-bottom-color: var(--line);
}

.security-card > p,
.passkey-list {
  margin: 0;
  padding: 12px 14px;
  color: var(--muted);
}

.security-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  background: var(--row);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 11px;
}

.two-step-card form {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
}

.two-step-card label {
  display: grid;
  gap: 5px;
  font-weight: 850;
}

.two-step-card input {
  min-height: 38px;
  border: 1px solid #c9cdd4;
  padding: 0 10px;
}

.two-step-card input[readonly] {
  font-family: Consolas, monospace;
  letter-spacing: 1px;
}

.passkey-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.passkey-list button,
.password-row button {
  min-height: 34px;
  border: 1px solid #cdd1d6;
  background: #f7f8f9;
  color: #26313c;
  font-weight: 850;
}

.password-card {
  padding: 0;
}

.setting-row,
.password-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.password-row span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.password-row input {
  min-height: 38px;
  border: 1px solid #c9cdd4;
  padding: 0 10px;
}

.password-card .primary-action {
  margin: 12px 14px;
}

.success-message {
  color: #1f8a3b !important;
}

.message-compose {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 16px;
}

.message-compose textarea {
  grid-column: 1 / -2;
  min-height: 90px;
  resize: vertical;
}

.message-compose input,
.message-compose textarea {
  border: 1px solid #c9cdd4;
  padding: 10px;
}

.pm-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  margin: 0 18px;
}

.pm-sidebar,
.pm-conversation {
  border: 1px solid #d7d9de;
  background: #fbfbfb;
}

.pm-sidebar h2,
.pm-conversation header {
  margin: 0;
  padding: 12px 14px;
  background: var(--black);
  color: #fff;
}

.pm-conversation header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pm-conversation h1 {
  margin: 0;
  font-size: 18px;
}

.pm-thread {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  color: #26313c;
  text-decoration: none;
  background: #fff;
}

.pm-thread.active {
  border-left: 4px solid var(--orange);
  background: #fff7f4;
}

.pm-thread span,
.pm-post span {
  color: var(--muted);
  font-size: 12px;
}

.pm-posts {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.pm-post {
  display: grid;
  gap: 4px;
  max-width: 78%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: #fff;
}

.pm-post.mine {
  justify-self: end;
  background: #f3f7ff;
}

.pm-post p {
  margin: 0;
  line-height: 1.45;
}

.conversation-compose {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  padding: 14px;
  border-top: 1px solid var(--line);
  background: #f2f3f5;
}

.conversation-compose textarea {
  grid-column: auto;
}

.locked-choice {
  opacity: 0.45;
}

.alerts-panel {
  margin: 0 18px;
  padding: 18px;
  border: 1px solid #d7d9de;
  background: #fbfbfb;
}

.alerts-panel h1 {
  margin: 0 0 14px;
}

.alert-row {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  color: #26313c;
  text-decoration: none;
  background: #fff;
}

.alert-row.is-unread {
  padding-left: 32px;
  background: #fff7f4;
}

.alert-row.is-unread::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
}

.alert-row.is-read {
  opacity: 0.72;
}

.alert-row span {
  color: var(--muted);
  font-size: 13px;
}

.reply-box textarea,
.topic-form textarea,
.topic-form input,
.topic-form select,
.auth-dialog input,
.auth-dialog textarea,
.wide-search {
  width: 100%;
  border: 1px solid #c9cdd4;
  background: #fff;
  color: var(--ink);
}

.reply-box textarea,
.topic-form textarea,
.auth-dialog textarea {
  resize: vertical;
  padding: 12px;
  margin-bottom: 12px;
}

.wide-search {
  display: grid;
  gap: 8px;
  padding: 12px;
  margin-top: 14px;
  color: #526071;
  font-weight: 800;
}

.foot-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 34px 0 18px;
  color: var(--blue);
  font-size: 14px;
}

.foot-links a + a::before {
  content: "|";
  color: #777;
  margin-right: 14px;
}

.login-strip,
.online-block {
  padding: 0 18px 16px;
  margin: 0 0 16px;
  border-top: 1px solid #c8c8c8;
}

.login-strip h2,
.online-block h2 {
  margin: 0;
  padding: 8px 0 7px;
  color: #313943;
  text-transform: uppercase;
  font-size: 14px;
}

.login-strip form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #4b5563;
  font-size: 14px;
}

.login-strip input {
  height: 26px;
  border: 1px solid #bfc3c9;
  background: #f5f5f5;
}

.remember {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.login-strip button {
  height: 26px;
  border: 1px solid #333;
  background: #fff;
  font-weight: 800;
}

/* Legacy compact login form on the forum index footer — theme-aware overrides. */
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .login-strip input {
  background: var(--soft);
  border-color: var(--line);
  color: var(--ink);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .login-strip button {
  background: var(--black);
  border-color: var(--line);
  color: #fff;
}
:root[data-theme="cutesy"] .login-strip input {
  background: var(--soft);
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme="cutesy"] .login-strip button {
  background: var(--black);
  border-color: var(--black-2);
  color: #fff;
}

.member-list {
  max-width: 1050px;
}

.mobile-statline {
  display: none;
}

dialog {
  border: 0;
  padding: 0;
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.auth-dialog,
.topic-dialog {
  width: min(560px, calc(100% - 28px));
  background: #fff;
  color: var(--ink);
}

.close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 1px solid #cfd3d8;
  background: #fff;
  font-weight: 900;
}

#authContent,
.topic-form {
  padding: 24px;
}

#authContent h2,
.topic-form h2 {
  margin: 0 0 16px;
}

#authContent label,
.topic-form label {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  font-weight: 800;
}

#authContent input,
.topic-form input {
  height: 38px;
  padding: 0 10px;
}

.reply-box .rich-editor textarea,
.topic-form .rich-editor textarea,
.message-compose .rich-editor textarea,
.conversation-compose .rich-editor textarea,
.profile-status .rich-editor textarea,
.comment-form .rich-editor textarea {
  border: 0;
  background: #fff;
  color: #26313c;
  padding: 14px 18px;
}

.dialog-submit {
  width: 100%;
}

.form-error {
  min-height: 18px;
  margin: 0 0 12px;
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
}

.turnstile-wrap {
  margin: 12px 0 8px;
  min-height: 65px;
  display: flex;
  align-items: center;
}

.turnstile-wrap .cf-turnstile {
  max-width: 100%;
}

.empty {
  padding: 22px;
  background: var(--row);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 880px) {
  .site-shell {
    width: 100%;
    margin: 0;
  }

  .masthead {
    min-height: 116px;
    padding: 20px;
  }

  .mast-actions {
    gap: 8px;
  }

  .nav-bar {
    overflow-x: auto;
    white-space: nowrap;
    justify-content: flex-start;
  }

  .pm-layout {
    grid-template-columns: 1fr;
  }

  .pm-sidebar {
    order: 2;
  }

  .pm-conversation {
    order: 1;
  }

  .mast-btn {
    min-width: 84px;
    height: 70px;
  }

  .account-card {
    height: 70px;
  }

  .forum-table-head,
  .thread-list-head {
    display: none;
  }

  .forum-row {
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    align-items: start;
  }

  .thread-row {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
  }

  .count,
  .last-post {
    grid-column: 2 / -1;
    border-left: 0;
    padding-left: 0;
    text-align: left;
  }

  .count {
    display: inline-block;
    margin-right: 10px;
  }

  .last-post {
    margin-top: 4px;
  }

  .utility-row {
    flex-wrap: wrap;
  }

  .search {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .xf-post {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: calc(100vw - 36px);
    overflow: hidden;
  }

  .post-author,
  .post-content,
  .post-content header,
  .post-content footer {
    width: calc(100vw - 36px);
    max-width: calc(100vw - 36px);
  }

  .post-body {
    width: calc(100vw - 86px);
    max-width: calc(100vw - 86px);
  }

  .post-author {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
    align-items: start;
    padding: 14px;
    border-right: 0;
    border-bottom: 1px solid #d6d9de;
  }

  .avatar {
    grid-row: 1 / 4;
    justify-self: start;
    margin: 0;
  }

  .post-author strong,
  .post-author > span:not(.staff-badge) {
    grid-column: 2;
    align-self: center;
    margin-top: 0;
  }

  .post-author .staff-badge {
    grid-column: 2;
    margin-top: 2px !important;
  }

  .post-author .badge-row.small {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
  }

  .post-author .badge-row.small .role-badge {
    min-height: 26px;
    align-items: center;
    line-height: 1;
  }

  .members-layout,
  .profile-layout,
  .account-layout {
    grid-template-columns: 1fr;
  }

  .profile-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .profile-actions {
    grid-column: 1 / -1;
  }

  .setting-row,
  .password-row,
  .message-compose {
    grid-template-columns: 1fr;
  }

  .message-compose textarea {
    grid-column: auto;
  }

  .admin-search-tool {
    grid-template-columns: 1fr;
  }

  .admin-user-row .admin-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .badge-picker {
    grid-column: 1 / -1;
  }

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

  .admin-danger-zone .danger-action {
    max-width: none;
  }
}

@media (max-width: 560px) {
  body,
  .site-shell,
  main {
    width: 100%;
    max-width: 100vw;
  }

  .site-shell {
    overflow-x: hidden;
  }

  .masthead {
    align-items: flex-start;
    flex-direction: column;
  }

  .wordmark {
    font-size: clamp(38px, 14vw, 48px);
  }

  .mast-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mast-btn {
    flex: 1;
    height: 56px;
  }

  .nav-bar a {
    padding: 0 14px;
    font-size: 13px;
    flex: 0 0 auto;
    min-width: 0;
  }

  .nav-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .breadcrumb,
  .thread-hero,
  .subforum-title,
  .xf-thread,
  .reply-box,
  .info-panel,
  .admin-panel {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .thread-actions,
  .thread-move-form {
    width: 100%;
    justify-content: flex-start;
  }

  .thread-move-form label {
    flex: 1 1 auto;
    min-width: 0;
  }

  .thread-move-form select {
    width: 100%;
    min-width: 0;
  }

  .bookmark-row,
  .received-reaction-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .bookmark-row button {
    grid-column: 2;
    justify-self: start;
  }

  .reaction-tabs {
    gap: 8px 12px;
    padding: 10px 14px;
  }

  .post-body {
    padding: 18px 14px;
    font-size: 15px;
    line-height: 1.58;
  }

  .subforum-title,
  .thread-hero {
    display: grid;
    align-items: start;
  }

  .primary-action,
  .secondary-action {
    width: 100%;
  }

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

  .admin-panel {
    margin: 0 10px;
    padding: 12px;
  }

  .profile-status,
  .profile-post {
    grid-template-columns: 1fr;
  }

  .profile-status {
    align-items: stretch;
  }

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

  .profile-tabs {
    flex-wrap: wrap;
  }

  .profile-avatar.large {
    width: 84px;
    height: 84px;
    font-size: 36px;
  }

  .admin-table article {
    grid-template-columns: 1fr;
  }

  .admin-actions {
    justify-content: flex-start;
  }

  .admin-user-row .admin-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .badge-picker {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .pm-layout,
  .alerts-panel {
    margin: 0 10px;
  }

  .pm-post {
    max-width: 100%;
  }

  .conversation-compose {
    grid-template-columns: 1fr;
  }

  .pm-conversation header {
    align-items: flex-start;
    flex-direction: column;
  }

  .login-strip form {
    display: grid;
  }
}

@media (max-width: 560px) {
  body {
    background: #f4f4f4;
    font-size: 14px;
  }

  .site-shell {
    box-shadow: none;
  }

  .masthead {
    min-height: 70px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 10px 12px;
    gap: 10px;
  }

  .wordmark {
    font-size: clamp(34px, 11vw, 44px);
    line-height: 1;
    white-space: nowrap;
  }

  .mast-actions {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    overflow: visible;
  }

  .account-chip,
  .top-icon,
  .account-link,
  .mast-btn {
    min-height: 38px;
    height: 38px;
    min-width: 38px;
    width: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.86);
    border-bottom-width: 2px;
    font-size: 0;
    line-height: 1;
  }

  .mast-btn {
    width: auto;
    min-width: 74px;
    padding: 0 10px;
    font-size: 12px;
  }

  .account-chip {
    grid-template-columns: 1fr;
  }

  .account-chip > span:last-child {
    display: none;
  }

  .chip-avatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .top-icon {
    font-size: 18px;
    text-align: center;
  }

  .account-link[href="#/account"] {
    width: 38px;
    min-width: 38px;
    padding: 0;
    font-size: 0;
  }

  .account-link[href="#/account"]::before {
    content: "\2699";
    font-size: 18px;
    line-height: 1;
    display: block;
  }

  button.account-link[data-logout] {
    display: none;
  }

  .nav-bar {
    min-height: 42px;
    padding: 0;
    scrollbar-width: none;
  }

  .nav-bar::-webkit-scrollbar {
    display: none;
  }

  .nav-bar a {
    min-height: 42px;
    padding: 0 13px;
    font-size: 12px;
  }

  .utility-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 12px;
  }

  .utility-row a {
    font-size: 14px;
  }

  .search {
    grid-column: 1 / -1;
    height: 40px;
  }

  .forum-card,
  .thread-list {
    margin-bottom: 14px;
  }

  .forum-table-head,
  .thread-list-head {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 42px;
    padding: 0 12px;
  }

  .forum-table-head span,
  .thread-list-head span {
    display: none;
  }

  .forum-table-head h1,
  .thread-list-head h2 {
    grid-column: auto;
    font-size: 14px;
  }

  .forum-row,
  .thread-row {
    grid-template-columns: 22px minmax(0, 1fr) 20px;
    column-gap: 8px;
    row-gap: 6px;
    min-height: 0;
    padding: 11px 12px;
    align-items: start;
  }

  .forum-status {
    width: 14px;
    height: 14px;
    margin: 5px auto 0;
  }

  .forum-copy a,
  .thread-copy a {
    font-size: 15px;
    line-height: 1.2;
  }

  .forum-copy p,
  .thread-copy p,
  .last-post p {
    font-size: 12px;
    line-height: 1.35;
  }

  .mobile-statline {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 850;
    color: #2f3945;
  }

  .subforums {
    display: none;
  }

  .rss {
    width: 16px;
    height: 16px;
    justify-self: end;
    margin-top: 4px;
  }

  .count {
    display: none;
  }

  .last-post {
    grid-column: 2 / -1;
    margin-top: 5px;
    padding: 8px 0 0;
    border-left: 0;
    border-top: 1px solid #dfe2e6;
  }

  .last-post .last-post-title {
    font-size: 12px;
    gap: 5px;
  }

  .thread-prefix {
    min-height: 18px;
    padding: 2px 6px;
    font-size: 11px;
  }

  .thread-hero h1 .thread-prefix {
    min-height: 24px;
    padding: 3px 8px;
    margin-right: 8px;
    font-size: 14px;
  }

  .foot-links {
    margin: 18px 0 10px;
    font-size: 13px;
  }

  .login-strip,
  .online-block {
    padding: 0 12px 12px;
  }

  .login-strip p,
  .online-block p {
    font-size: 13px;
  }

  .settings-panel h1 {
    padding: 14px 12px 0;
    font-size: 20px;
  }

  .settings-row,
  .notification-setting {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 13px 12px;
  }

  .settings-label,
  .notification-setting > span {
    text-align: left;
    font-size: 14px;
  }

  .check-setting strong,
  .select-setting span,
  .notification-setting strong {
    font-size: 14px;
  }

  .check-setting small,
  .settings-copy {
    font-size: 12px;
  }

  .select-setting {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .settings-stack select,
  .select-setting select {
    min-height: 40px;
    font-size: 14px;
  }

  .check-setting.indent {
    margin-left: 20px;
  }

  .settings-card h2 {
    padding: 13px 12px;
    font-size: 14px;
  }

  .settings-save {
    padding: 12px;
  }

  .settings-save .primary-action {
    min-width: 120px;
  }

  .reply-box .rich-editor.has-editor-submit .editor-footer {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .reply-box .rich-editor.has-editor-submit .attach-button {
    width: max-content;
  }

  .reply-box .rich-editor.has-editor-submit .editor-submit {
    width: 100% !important;
  }

  .reaction-picker {
    left: 0;
    max-width: calc(100vw - 44px);
    overflow-x: auto;
    border-radius: 18px;
  }

  .upgrades-panel h1 {
    padding: 14px 12px 10px;
    font-size: 20px;
  }

  .upgrade-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 13px 12px;
  }

  .upgrade-summary {
    text-align: left;
  }

  .upgrade-summary h2 {
    font-size: 16px;
  }

  .purchase-button {
    min-height: 34px;
    font-size: 13px;
  }

  .vip-benefits h3 {
    padding: 10px 12px;
    font-size: 17px;
  }

  .vip-benefits ul {
    padding: 10px 16px 12px 28px;
    font-size: 13px;
  }

  .upgrade-note {
    padding: 12px;
    font-size: 12px;
  }
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor {
  background: #20252c;
  border-color: #4a5260;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar {
  background: #2b3038;
  border-color: #434a55;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar select,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar input[type="color"] {
  color: #dbe4ef;
  background: #20252c;
  border-color: #434a55;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button:hover {
  background: #343a44;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor textarea,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-surface {
  background: #20252c;
  color: #dce5ef;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-surface:empty::before,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor textarea::placeholder {
  color: #8995a5;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-resize-box {
  border-color: #9dbdff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-move-form label,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-move-form select {
  background: #20252c;
  border-color: #4a5260;
  color: #dbe4ef;
}

@media (max-width: 400px) {
  .wordmark {
    font-size: clamp(31px, 10vw, 38px);
  }

  .account-link[href="#/account"] {
    width: 38px;
    min-width: 38px;
    padding: 0;
    font-size: 0;
  }

  .account-link[href="#/account"]::before {
    content: "\2699";
    font-size: 18px;
  }
}

/* Final theme and mobile alignment overrides. Kept at the end so they win over legacy light-theme rules. */
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .wordmark-black {
  color: #f3f6fa;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-chip,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .top-icon,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-link,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .mast-btn {
  background: #eef1f5;
  color: #12161c;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .nav-bar,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .forum-table-head,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-list-head {
  background: #10141a;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .nav-bar a:hover,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .nav-bar a.active {
  background: #252b34;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .forum-copy a,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-copy a,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .last-post-title,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-hero h1,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .subforum-title h1,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .info-panel h1,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-post-body > strong,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-bbcode,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-identity h1 {
  color: #eef5ff !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .forum-copy p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-copy p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .subforums,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-identity p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-stats span,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-tabs a,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .breadcrumb,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .breadcrumb a {
  color: #b9c7d6 !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-stats,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-tabs,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-feed,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-status,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-comments,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .comment-form,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .manual-payment-box,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-content header,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-content footer,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .login-strip,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .online-block,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-benefits h3 {
  background: #20262f;
  border-color: #3a424d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-stats strong,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-tabs a.active {
  color: #ffffff !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor textarea,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-preview {
  background: #161b22;
  color: #e9eff6;
  border-color: #46505c;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-footer {
  background: #11161d;
  border-color: #46505c;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button {
  color: #dce8f5;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button:hover {
  background: #252c36;
  border-color: #46505c;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .attach-button {
  background: #f4f6f8;
  color: #11161d !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .wallet-address code {
  background: #161b22;
  color: #e9eff6;
  border-color: #46505c;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-layout {
  background: #1a2028;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-menu {
  background: #151a21;
  border-color: #3a424d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-menu a,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-menu button,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-menu strong {
  color: #dce8f5 !important;
  border-color: #3a424d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-menu a:hover,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-menu a.active {
  background: #eef1f5;
  color: #11161d !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-details {
  background: #20262f;
  border-color: #566170;
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-details h1,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-details h2,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-details h3,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrade-summary h2,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .manual-payment-box h2 {
  color: #f8fbff !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-details p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrade-summary p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .manual-payment-box p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrade-note {
  color: #c6d4e3 !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrade-row,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrade-body {
  background: #1a2028;
  border-color: #3a424d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrade-summary {
  background: #20262f;
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-benefits {
  background: #151a21;
  border-color: #3a424d;
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-benefits h3 {
  background: #20262f;
  color: #f8fbff !important;
  border-color: #3a424d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-benefits ul {
  background: #151a21;
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .purchase-button {
  background: #2b333d;
  color: #eef5ff;
  border: 1px solid #596575;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .purchase-button:disabled {
  opacity: 0.9;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .manual-payment-box {
  background: #151a21;
  border-color: #3a424d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .manual-payment-box h2 {
  background: #20262f;
  border-color: #3a424d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .wallet-address button {
  background: #eef1f5;
  color: #11161d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .payment-result {
  background: #151a21;
  border-color: #3a424d;
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .following-card {
  background: #151a21;
  border-color: #3a424d;
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upload-inline {
  color: #c6d4e3;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upload-inline input[type="file"]::file-selector-button {
  background: #eef1f5;
  color: #11161d;
  border-color: #596575;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .xf-post {
  background: #1a2028;
  border-color: #3a424d;
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author {
  background: linear-gradient(180deg, #202832, #1a2028);
  border-right-color: #3a424d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author strong {
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-content {
  background: #1a2028;
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-content header,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-content footer {
  background: #20262f;
  border-color: #3a424d;
  color: #aebccd;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-body {
  background: #151a21;
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-body p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-body a {
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-img {
  border-color: #3a424d;
}

@media (max-width: 560px) {
  .mast-actions {
    align-items: center;
  }

  .account-chip,
  .top-icon,
  .account-link,
  .mast-btn {
    display: inline-grid !important;
    place-items: center !important;
    text-align: center;
  }

  .account-chip {
    justify-items: center;
  }

  .top-icon > span,
  .account-link[href="#/account"]::before {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
  }
}

/* Final author badge, dark masthead, and VIP animation polish. */
.post-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.post-author .avatar {
  margin-left: auto;
  margin-right: auto;
}

.post-author .staff-badge,
.post-author .badge-row.small {
  align-self: center;
}

.post-author .badge-row.small {
  justify-content: center;
}

.role-badge,
.staff-badge {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  line-height: 1 !important;
  text-align: center;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-chip,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .top-icon,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-link,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .mast-btn {
  background: #171d24;
  color: #eef5ff;
  border: 1px solid #3a424d;
  border-bottom: 3px solid var(--orange);
}

/* Account-card (logged-in summary on masthead) — was missing a dark override, leaving it as a white patch on the dark masthead. */
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-card {
  background: #171d24;
  border: 1px solid #3a424d;
  border-bottom: 3px solid var(--orange);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-card strong {
  color: #eef5ff;
}
:root[data-theme="cutesy"] .account-card {
  background: rgba(255, 250, 253, 0.92);
  border-bottom-color: var(--orange);
}
:root[data-theme="cutesy"] .account-card strong {
  color: var(--black);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-chip:hover,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .top-icon:hover,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-link:hover,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .mast-btn:hover {
  background: #222a34;
}

@media (max-width: 880px) {
  .post-author {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    text-align: left;
  }

  .post-author .avatar {
    justify-self: center;
    margin: 0;
  }

  .post-author strong,
  .post-author > span:not(.staff-badge) {
    justify-self: start;
    text-align: left;
  }

  .post-author .staff-badge,
  .post-author .badge-row.small {
    grid-column: 2;
    justify-self: start;
    align-self: start;
  }

  .post-author .badge-row.small {
    justify-content: flex-start;
    margin-top: 6px;
  }
}

/* Boxy forum readability polish: spacing only, no palette/layout identity changes. */
.xf-thread {
  gap: 20px;
  padding-bottom: 22px;
}

.xf-post {
  margin-bottom: 2px;
}

.post-author {
  gap: 8px;
  padding: 22px 18px;
}

.post-author .avatar {
  margin-bottom: 8px;
}

.post-author strong {
  line-height: 1.25;
}

.post-author span {
  line-height: 1.35;
}

.post-author .staff-badge {
  margin-top: 7px !important;
}

.post-author .badge-row.small,
.badge-row {
  gap: 8px;
  row-gap: 7px;
}

.post-content header,
.post-content footer {
  min-height: 50px;
  padding: 10px 22px;
  line-height: 1.35;
}

.post-content footer {
  flex-wrap: wrap;
  gap: 18px;
  row-gap: 8px;
}

.post-content footer button,
.post-tools button {
  padding: 4px 2px;
  line-height: 1.25;
}

.post-body {
  padding: 28px 24px;
  line-height: 1.72;
}

.post-body p {
  margin-bottom: 18px;
}

.bbcode-quote {
  margin: 12px 0 4px;
  padding-left: 16px;
}

.bbcode-quote cite {
  padding: 14px 16px 6px;
  line-height: 1.35;
}

.bbcode-quote > .bbcode-quote-body {
  padding: 10px 16px 16px;
  line-height: 1.65;
}

.bbcode-img {
  margin: 14px 0;
}

.reaction-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
  margin: 18px 0 2px;
  padding: 11px 0 0;
  line-height: 1.35;
}

.reaction-line-item {
  gap: 5px;
  margin-right: 0;
}

img.reaction-line-icon {
  margin-right: 2px;
}

.profile-status,
.profile-post {
  gap: 14px;
  padding: 16px;
}

.profile-post-body > p {
  margin-bottom: 11px;
  line-height: 1.4;
}

.profile-bbcode,
.profile-post-body > strong {
  margin-bottom: 14px;
  line-height: 1.65;
}

.post-tools {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  row-gap: 8px;
  margin: 12px 0;
}

.profile-comments {
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
}

.profile-comments p {
  margin-bottom: 5px;
  line-height: 1.4;
}

.comment-form,
.profile-status:has(.rich-editor),
.reply-box .rich-editor.has-editor-submit .editor-footer {
  gap: 10px;
}

.rich-editor textarea {
  line-height: 1.55;
}

.editor-footer {
  padding: 12px 14px;
}

.alerts-panel {
  padding: 22px;
}

.alert-row {
  gap: 7px;
  padding: 16px 18px;
  line-height: 1.5;
}

.alert-row.is-unread {
  padding-left: 38px;
}

.alert-row.is-unread::before {
  left: 18px;
  top: 22px;
}

.alert-row span {
  display: block;
  margin-top: 3px;
  line-height: 1.35;
}

.pm-post,
.pm-thread {
  line-height: 1.5;
}

@media (max-width: 880px) {
  .xf-thread {
    gap: 18px;
    padding: 0 12px 18px;
  }

  .xf-post,
  .post-author,
  .post-content,
  .post-content header,
  .post-content footer,
  .post-body {
    width: 100%;
    max-width: 100%;
  }

  .post-author {
    grid-template-columns: 78px minmax(0, 1fr);
    column-gap: 13px;
    row-gap: 6px;
    padding: 16px;
  }

  .post-author .avatar {
    width: 64px;
    height: 64px;
  }

  .post-author .badge-row.small {
    gap: 7px;
    row-gap: 7px;
    margin-top: 8px;
  }

  .post-content header,
  .post-content footer {
    min-height: 48px;
    padding: 10px 16px;
  }

  .post-body {
    padding: 22px 18px;
    font-size: 15px;
    line-height: 1.68;
  }

  .bbcode-quote {
    margin: 16px 0;
    padding-left: 12px;
  }

  .bbcode-quote cite {
    padding: 12px 13px 5px;
  }

  .bbcode-quote > .bbcode-quote-body {
    padding: 9px 13px 13px;
  }

  .profile-status,
  .profile-post {
    padding: 14px;
  }

  .alerts-panel {
    margin: 0 12px;
    padding: 14px;
  }

  .alert-row {
    padding: 15px 14px;
  }

  .alert-row.is-unread {
    padding-left: 34px;
  }

  .alert-row.is-unread::before {
    left: 15px;
    top: 21px;
  }
}

@media (max-width: 560px) {
  .post-author {
    grid-template-columns: 66px minmax(0, 1fr);
    padding: 14px;
  }

  .post-author .avatar {
    width: 56px;
    height: 56px;
  }

  .post-author strong {
    font-size: 15px;
  }

  .post-content header,
  .post-content footer {
    padding: 10px 14px;
  }

  .post-content footer {
    gap: 15px;
  }

  .post-body {
    padding: 20px 16px;
    font-size: 15px;
  }

  .reaction-line {
    margin-top: 16px;
  }

  .profile-post {
    gap: 12px;
  }
}

/* Final targeted fixes: mobile top controls, badge centering, and dark PM readability. */
.role-badge,
.staff-badge,
.badge-row.small .role-badge,
.post-author .badge-row.small .role-badge {
  min-height: 28px;
  display: inline-grid !important;
  grid-auto-flow: column;
  gap: 6px;
  place-items: center !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  text-align: center !important;
  border: 1px solid rgba(0,0,0,0.46) !important;
  box-shadow: inset 0 1px rgba(255,255,255,0.24), inset 0 -1px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.12);
  text-shadow: 0 1px 0 rgba(0,0,0,0.28);
  letter-spacing: 0;
}

.staff-badge {
  height: 28px;
}

.post-author .staff-badge,
.post-author .badge-row.small .role-badge {
  margin-top: 4px;
}

.post-author .badge-row.small {
  gap: 9px;
}

.role-badge::before,
.staff-badge::before {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  opacity: .95;
}

.staff-badge,
.role-badge.admin,
.role-badge.badge-founder {
  background: linear-gradient(#ed1d1d,#c90000) !important;
  color: #fff !important;
}

.staff-badge::before,
.role-badge.admin::before,
.role-badge.badge-founder::before,
.role-badge.badge-site-staff::before,
.role-badge.badge-reputable::before,
.role-badge.badge-established::before {
  content: none !important;
}

.role-badge.badge-site-staff {
  background: linear-gradient(#f9fbfd,#e6ebf0) !important;
  color: #23303d !important;
  text-shadow: 0 1px rgba(255,255,255,0.85);
}

.role-badge.badge-contributor {
  background: linear-gradient(#3f9430,#2e781f) !important;
  color: #fff !important;
}

.role-badge.badge-contributor::before { content: "+"; font-weight: 950; }

.role-badge.badge-reputable,
.badge-row.small .role-badge.badge-reputable {
  background: linear-gradient(#d69800,#b67300) !important;
  border-color: #7e4d00 !important;
  color: #fff !important;
}

.role-badge.badge-established,
.badge-row.small .role-badge.badge-established {
  background: linear-gradient(#244c7c,#19395f) !important;
  border-color: #102743 !important;
  color: #fff !important;
}

.role-badge.badge-vip,
.badge-row.small .role-badge.badge-vip,
.role-badge.vip {
  background: linear-gradient(#7fcbff,#4ba7ea) !important;
  border-color: #2d7db9 !important;
  color: #fff !important;
}

.role-badge.badge-vip::before,
.role-badge.vip::before { content: "★"; font-weight: 950; }

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-conversation,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-sidebar {
  background: #20262f;
  border-color: #3a424d;
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-thread {
  background: #151a21;
  border-color: #3a424d;
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-thread.active {
  background: #262d37;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-post {
  background: #151a21;
  border-color: #3a424d;
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-post.mine {
  background: #1f2a3a;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-thread span,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-post span {
  color: #c6d4e3;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .conversation-compose {
  background: #151a21;
  border-color: #3a424d;
}

@media (max-width: 560px) {
  .mast-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .account-chip,
  .top-icon,
  .account-link,
  .mast-btn {
    display: inline-grid !important;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
    line-height: 1 !important;
  }

  .account-chip .chip-avatar,
  .top-icon > span,
  .account-link[href="#/account"]::before {
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
  }

  .account-link[href="#/account"]::before {
    transform: translateY(6px);
  }

  .top-icon[href="#/chat"] > span {
    transform: translateY(-1px);
  }


  button.account-link[data-logout] {
    display: none !important;
  }
}

/* 2026-07 editor usability + wider topic modal patch */
.topic-dialog {
  width: min(980px, calc(100vw - 34px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.topic-form {
  padding: 24px 28px 22px;
}

.topic-form label:has(.rich-editor) {
  display: block;
}

.topic-form input,
.topic-form select {
  width: 100%;
}

.topic-form .rich-editor,
.new-topic-editor {
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
}

.topic-form .editor-surface,
.new-topic-editor .editor-surface {
  min-height: 360px !important;
  font-size: 15px;
  line-height: 1.65;
  padding: 16px 18px;
}

.rich-editor {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.editor-toolbar {
  gap: 8px;
  padding: 8px 10px;
  align-items: stretch;
}

.toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
  border-right: 1px solid #d7d9de;
}

.toolbar-group:last-child {
  border-right: 0;
  padding-right: 0;
}

.toolbar-field {
  display: inline-flex !important;
  align-items: center;
  gap: 5px !important;
  margin: 0 !important;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  color: #56616f;
}

.toolbar-field select {
  min-width: 88px;
}

.editor-toolbar button,
.editor-toolbar select,
.editor-toolbar input[type="color"] {
  border-radius: 2px;
}

.editor-toolbar button:focus-visible,
.editor-toolbar select:focus-visible,
.editor-toolbar input[type="color"]:focus-visible,
.editor-surface:focus-visible {
  outline: 2px solid rgba(152, 0, 0, .35);
  outline-offset: 1px;
}

.editor-surface {
  cursor: text;
}

.editor-surface p {
  margin: 0 0 0.85em;
}

.editor-surface:empty::before {
  pointer-events: none;
}

.user-color-chip {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  max-width: 140px;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .toolbar-group {
  border-color: #434a55;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .toolbar-field {
  color: #aeb8c5;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .topic-form .editor-surface,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .new-topic-editor .editor-surface {
  background: #20252c;
  color: #dce5ef;
}

@media (max-width: 720px) {
  .topic-dialog {
    width: calc(100vw - 14px);
  }

  .topic-form {
    padding: 18px 14px;
  }

  .toolbar-group {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #d7d9de;
    padding-bottom: 6px;
  }
}

/* VIP + poll additions */
.post-signature {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(120, 120, 120, .35);
  color: #667085;
  font-size: .92rem;
}
.post-signature > span::before {
  content: "━━━━━━━━━━━━";
  display: block;
  margin-bottom: 4px;
  color: #9aa2ad;
  letter-spacing: 1px;
}
.post-signature p { margin: 0 0 4px; }
.topic-anonymous-box {
  margin: 14px 0 16px;
  border: 1px solid #b7c8df;
  border-radius: 4px;
  background: #f3f7fc;
  padding: 14px;
}
.topic-anonymous-box[hidden] { display: none !important; }
.topic-anonymous-box .anonymous-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #20364f;
}
.topic-anonymous-box p {
  margin: 8px 0 0 25px;
  color: #536579;
  font-size: 13px;
  line-height: 1.45;
}
.anonymous-staff-label {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid #b98b2d;
  border-radius: 3px;
  background: #fff6d9;
  color: #75520d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: middle;
}
.topic-poll-box {
  margin: 14px 0 16px;
  border: 1px solid rgba(100,100,100,.24);
  background: rgba(0,0,0,.035);
  padding: 14px;
}
.topic-poll-box .poll-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}
.topic-poll-box .poll-fields {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.topic-poll-box input[type="text"],
.topic-poll-box input[type="number"],
.topic-poll-box input:not([type]),
.topic-poll-box textarea {
  width: 100%;
}
.topic-poll-box .check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.topic-poll-box:not(:has(input[name="enablePoll"]:checked)) .poll-fields {
  display: none;
}
.poll-card {
  margin: 16px 0;
  background: var(--panel, #fff);
  border: 1px solid rgba(100,100,100,.22);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.poll-card header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(100,100,100,.2);
  background: rgba(0,0,0,.035);
}
.poll-card h2 { margin: 0 0 4px; font-size: 1.1rem; }
.poll-card header p { margin: 0; color: #667085; font-size: .9rem; }
.poll-card form { padding: 14px 16px; display: grid; gap: 12px; }
.poll-option { display: grid; gap: 7px; cursor: pointer; }
.poll-choice-line { display: flex; align-items: center; gap: 9px; }
.poll-choice-line b { flex: 1; }
.poll-choice-line em { font-style: normal; color: #667085; font-size: .86rem; }
.poll-bar { height: 8px; background: rgba(120,120,120,.18); overflow: hidden; border-radius: 999px; }
.poll-bar i { display: block; height: 100%; background: linear-gradient(90deg, #111827, #e00000); border-radius: inherit; }
.reaction-icon.reaction-over,
.reaction-icon.reaction-clown,
.reaction-trigger-icon.reaction-over,
.reaction-trigger-icon.reaction-clown {
  object-fit: contain;
}
.account-details textarea[name="signature"] {
  min-height: 90px;
  resize: vertical;
}
@media (max-width: 700px) {
  .topic-poll-box { padding: 10px; }
  .poll-card form { padding: 12px; }
}


/* Post author card refresh: more readable, XenForo-style spacing */
.xf-post {
  grid-template-columns: 190px minmax(0, 1fr);
}

.post-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 20px 12px 18px;
  text-align: center;
  background: #f3f5f7;
}

.post-author .avatar {
  width: 96px;
  height: 96px;
  margin: 0 0 4px;
  border-radius: 6px;
  border-bottom-width: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px #d7dbe1;
  font-size: 42px;
}

.post-author strong {
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 950;
}

.post-author .post-user-title {
  margin-top: 0;
  color: #232a33;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
}

.post-author .staff-badge,
.post-author .badge-row.small .role-badge {
  min-width: 104px;
  justify-content: center;
  border-radius: 0;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1;
  box-shadow: inset 0 1px rgba(255,255,255,.25);
}

.post-author .badge-row.small {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin-top: 2px;
}

.post-author-stats {
  width: 100%;
  margin: 7px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid #d8dce2;
  color: #4a5360;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

.post-author-stats div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 0;
}

.post-author-stats dt,
.post-author-stats dd {
  margin: 0;
}

.post-author-stats dt {
  color: #6b7280;
}

.post-author-stats dd {
  color: #20242b;
  font-weight: 700;
  text-align: right;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author {
  background: #262b34;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author .avatar {
  box-shadow: 0 0 0 1px #3f4652;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author-stats {
  border-top-color: #3d444f;
  color: #c8ced8;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author-stats dt {
  color: #a6aebb;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author-stats dd,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author .post-user-title {
  color: #f1f4f8;
}

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

  .post-author {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    justify-items: start;
    text-align: left;
    padding: 14px;
  }

  .post-author .avatar {
    width: 72px;
    height: 72px;
    grid-row: span 4;
  }

  .post-author .badge-row.small {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .post-author-stats {
    grid-column: 1 / -1;
  }
}

/* Responsive Adsterra banner slots. Frames load in normal page flow so the network can measure them as viewable. */
.ad-slot {
  width: min(100%, calc(var(--ad-width, 728px) + 18px));
  max-width: 1052px;
  margin: 12px auto;
  text-align: center;
}

.ad-slot > span {
  display: block;
  margin: 0 0 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #7b8491;
}

.ad-slot-inner {
  width: min(100%, var(--ad-width, 728px));
  height: var(--ad-height, 90px);
  margin: 0 auto;
  overflow: hidden;
  background: transparent;
}

.adsterra-banner-frame {
  display: block;
  width: var(--ad-width, 728px);
  max-width: 100%;
  height: var(--ad-height, 90px);
  margin: 0 auto;
  border: 0;
  background: transparent;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .ad-slot > span {
  color: #9aa3b1;
}

@media (max-width: 760px) {
  .ad-slot {
    width: min(100%, 332px);
    margin: 8px auto;
  }

  .ad-slot-inner,
  .adsterra-banner-frame {
    width: 320px;
    height: 50px;
  }

  /* Keep mobile posts readable: detailed stats/signatures stay desktop-only. */
  .post-author-stats,
  .post-signature {
    display: none !important;
  }

  .post-author {
    grid-template-columns: 56px 1fr;
    gap: 10px 12px;
    padding: 10px 12px;
  }

  .post-author .avatar {
    width: 56px;
    height: 56px;
    grid-row: span 3;
  }

  .post-author strong {
    font-size: 14px;
  }

  .post-author .post-user-title {
    font-size: 12px;
  }

  .post-author .staff-badge,
  .post-author .badge-row.small .role-badge {
    min-width: 0;
    padding: 4px 7px;
    font-size: 10px;
  }

  .thread-actions {
    gap: 6px;
  }

  .thread-actions .secondary-action,
  .thread-actions .danger-action,
  .thread-actions button,
  .thread-actions a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}


/* QoL update: cleaner alerts */
.panel-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.panel-heading-row h1 { margin-bottom: 4px; }
.panel-heading-row p { margin: 0; color: var(--muted, #6b7280); }

.modern-alerts .alert-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #d9dee5);
  color: inherit;
  text-decoration: none;
  background: rgba(255,255,255,.7);
  transition: background .15s ease, transform .15s ease;
}
.modern-alerts .alert-card:hover {
  background: rgba(248,250,252,.95);
  transform: translateX(2px);
}
.modern-alerts .alert-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}
.alert-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.35;
}
.alert-text { font-weight: 500; color: var(--text, #1f2937); }
.alert-text b { color: #16a34a; }
.alert-text strong { color: #0ea5e9; }
.alert-new {
  margin-left: auto;
  background: #111827;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  font-style: normal;
}
.alert-card.is-read { opacity: .78; }
.alert-kind-reaction { background: #e0f2fe; }
.alert-kind-warning { background: #fee2e2; }
.alert-kind-report { background: #fef3c7; }
/* Dark-theme variants for alert chips — pastel chips become deep-tinted so they read well on dark panels. */
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .alert-kind-reaction { background: #143049; color: #c8e6ff; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .alert-kind-warning { background: #3a1318; color: #ffc8c8; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .alert-kind-report { background: #3a2d10; color: #ffe39c; }
:root[data-theme="cutesy"] .alert-kind-reaction { background: #f1d8ec; }
:root[data-theme="cutesy"] .alert-kind-warning { background: #f8d2dc; }
:root[data-theme="cutesy"] .alert-kind-report { background: #f5e3c4; }

/* Loading skeletons */
.skeleton-page {
  max-width: 1120px;
  margin: 28px auto;
  padding: 24px;
  border: 1px solid var(--line, #d7dce2);
  background: var(--panel, #fff);
}
.skeleton-title,
.skeleton-row,
.skeleton-post span,
.skeleton-post b,
.skeleton-post i {
  display: block;
  background: linear-gradient(90deg, #eef1f5, #f8fafc, #eef1f5);
  background-size: 200% 100%;
  animation: skeleton-shine 1.1s infinite linear;
  border-radius: 4px;
}
.skeleton-title { width: 280px; height: 34px; margin-bottom: 22px; }
.skeleton-row { width: 100%; height: 42px; margin: 10px 0; }
.skeleton-row.short { width: 72%; }
.skeleton-post {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line, #d7dce2);
}
.skeleton-post span { width: 92px; height: 92px; grid-row: span 2; }
.skeleton-post b { height: 24px; }
.skeleton-post i { height: 90px; }
@keyframes skeleton-shine { to { background-position: -200% 0; } }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .skeleton-page {
  background: #151922;
  border-color: #303744;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .skeleton-title,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .skeleton-row,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .skeleton-post span,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .skeleton-post b,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .skeleton-post i {
  background: linear-gradient(90deg, #232a36, #303949, #232a36);
  background-size: 200% 100%;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .skeleton-post {
  border-top-color: #303744;
}

/* Onboarding */
.welcome-panel {
  max-width: 1000px;
  margin: 24px auto;
  border: 1px solid var(--line, #d7dce2);
  background: var(--panel, #fff);
  padding: 28px;
}
.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.onboarding-card {
  border: 1px solid var(--line, #d7dce2);
  background: rgba(248,250,252,.9);
  color: inherit;
  text-decoration: none;
  padding: 16px;
}
.onboarding-card strong { display: block; margin-bottom: 6px; color: #0b63b6; }
.onboarding-card span { color: var(--muted, #667085); }

/* Staff logs and warnings */
.staff-log-table article,
.warning-history {
  font-size: 13px;
}
.warning-history {
  border: 1px solid var(--line, #d7dce2);
  padding: 8px;
  background: rgba(255,255,255,.65);
}
.warning-history p {
  margin: 6px 0;
  border-top: 1px solid var(--line, #d7dce2);
  padding-top: 6px;
}

/* VIP profile cosmetics */
.vip-profile-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--vip-accent-soft, rgba(96,165,250,.55));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 0 1px var(--vip-accent-faint, rgba(96,165,250,.16)),
    0 10px 35px var(--vip-accent-faint, rgba(59,130,246,.16));
}
.vip-profile-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--vip-accent, #60a5fa), transparent);
  opacity: .95;
}
.vip-profile-card .profile-avatar.large {
  border-color: var(--vip-accent, #60a5fa);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 24px var(--vip-accent-soft, rgba(96,165,250,.75));
}
.vip-profile-card .role-badge {
  border-color: var(--vip-accent-soft, rgba(96,165,250,.45));
}
.vip-theme-ice { background-blend-mode: screen; }
.vip-theme-rose { filter: saturate(1.05); }
.vip-theme-onyx { filter: contrast(1.08); }
.vip-theme-aurora .profile-name-line h1 {
  text-shadow: 0 0 14px rgba(125,249,255,.85), 0 0 26px rgba(255,120,255,.45);
}

/* Better mobile post layout */
.mobile-reply-sticky {
  display: none;
}
@media (max-width: 720px) {
  .xf-post {
    grid-template-columns: 1fr;
    margin-bottom: 10px;
  }
  .post-author {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 8px 10px;
    align-items: center;
    text-align: left;
    padding: 10px 12px;
  }
  .post-author .avatar {
    width: 54px;
    height: 54px;
    grid-row: span 2;
  }
  .post-author strong,
  .post-author .post-user-title {
    justify-self: start;
  }
  .post-author .post-author-stats,
  .post-author .badge-row {
    display: none;
  }
  .post-content {
    padding: 12px;
  }
  .post-content footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .post-content footer button,
  .reaction-trigger {
    min-height: 38px;
    padding: 8px 10px;
  }
  .post-signature {
    display: none;
  }
  [data-reply-form] .editor-submit,
  .reply-form .editor-submit {
    position: sticky;
    bottom: 8px;
    z-index: 20;
    width: 100%;
    min-height: 42px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
  }
  .modern-alerts .alert-card {
    padding: 12px 10px;
  }
  .onboarding-grid {
    grid-template-columns: 1fr;
  }
  .panel-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .modern-alerts .alert-card {
  background: rgba(31,41,55,.72);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .modern-alerts .alert-card:hover {
  background: rgba(55,65,81,.82);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .alert-text {
  color: #f9fafb;
}

/* VIP avatar borders and Tumblr-style profile color themes */
.vip-avatar-frame {
  position: relative;
  overflow: visible !important;
  border: 2px solid transparent !important;
  background:
    linear-gradient(#242831, #242831) padding-box,
    var(--avatar-border, linear-gradient(135deg,#fff7b0,#f5c400,#ffed75,#a97800)) border-box !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.75),
    0 0 16px var(--avatar-border-glow, rgba(245,196,0,.7)),
    0 0 30px color-mix(in srgb, var(--avatar-border-glow, #f5c400) 55%, transparent) !important;
}
.vip-avatar-frame img {
  border-radius: inherit;
  overflow: hidden;
}
.profile-avatar.large.vip-avatar-frame {
  border-width: 3px !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.9),
    0 0 22px var(--avatar-border-glow, rgba(245,196,0,.78)),
    0 0 46px color-mix(in srgb, var(--avatar-border-glow, #f5c400) 58%, transparent) !important;
}
.post-author .avatar.vip-avatar-frame {
  margin-top: 2px;
  margin-bottom: 16px;
}
.custom-vip-profile-theme {
  /* Do not use the background shorthand here: it wipes profile banner images.
     Only set the fallback color layer so uploaded banners keep rendering. */
  background-color: var(--profile-bg, #111827) !important;
  color: var(--profile-text, #fff) !important;
  border-color: var(--vip-accent-soft, rgba(96,165,250,.55)) !important;
}
.custom-vip-profile-theme .profile-identity,
.custom-vip-profile-theme .profile-identity p,
.custom-vip-profile-theme .profile-name-line span {
  color: color-mix(in srgb, var(--profile-text, #fff) 84%, transparent);
}
.custom-vip-profile-theme .profile-name-line h1 {
  text-shadow: 0 0 12px var(--vip-accent-soft, rgba(96,165,250,.55));
}
.custom-vip-profile-theme .role-badge,
.custom-vip-profile-theme .badge-row .role-badge {
  border-color: var(--vip-accent-soft, rgba(96,165,250,.55));
  box-shadow: 0 0 14px var(--vip-accent-faint, rgba(96,165,250,.18));
}
.profile-color-settings {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line, #d7dce2);
  padding: 12px;
  margin: 8px 0;
}
.profile-color-settings legend {
  padding: 0 6px;
  font-weight: 950;
}
.profile-color-settings label {
  margin: 0;
}
.profile-color-settings input[type="color"] {
  width: 100%;
  height: 42px;
  padding: 3px;
}
@media (max-width: 720px) {
  .profile-color-settings { grid-template-columns: 1fr; }
}

/* Account style settings cleanup */
.account-style-card {
  display: block;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #d7dce2;
  background: #fff;
}
.account-style-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e8ed;
}
.account-style-card-head h2 {
  margin: 0;
  font-size: 1rem;
  color: #26313c;
}
.account-style-card-head p {
  margin: 1px 0 0;
  color: #667085;
  font-size: .86rem;
  font-weight: 700;
  text-align: right;
}
.vip-style-grid,
.profile-color-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 240px);
  gap: 14px;
  align-items: end;
}
.profile-color-grid {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}
.account-details .toggle-row,
.account-details .color-field,
.account-details .wide-field,
.account-details .media-url-field {
  margin: 0;
  display: grid;
  gap: 7px;
  color: #526071;
  font-weight: 850;
}
.account-details .toggle-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #e2e6eb;
  background: #f8fafc;
}
.account-details .toggle-row input {
  width: auto;
  margin: 0;
}
.account-details .toggle-row strong,
.account-details .toggle-row small {
  display: block;
}
.account-details .toggle-row small {
  margin-top: 2px;
  color: #667085;
  font-size: .8rem;
}
.account-details .color-field input[type="color"] {
  width: 100%;
  height: 44px;
  padding: 4px;
  border: 1px solid #cbd2dc;
  background: #f7f8fa;
}
.account-details .wide-field {
  grid-column: 1 / -1;
}
.media-settings-card {
  display: grid;
  gap: 14px;
}
.media-settings-card .account-style-card-head {
  margin-bottom: 0;
}
.account-details .media-url-field {
  padding: 0;
}
.upload-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d5dbe5;
  background: #f8fafc;
  box-sizing: border-box;
}
.upload-inline input[type="file"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.profile-color-settings {
  grid-template-columns: none;
}
.profile-color-settings legend {
  display: none;
}
@media (max-width: 780px) {
  .account-style-card { padding: 13px; }
  .account-style-card-head { display: block; }
  .account-style-card-head p { text-align: left; margin-top: 4px; }
  .vip-style-grid,
  .profile-color-grid {
    grid-template-columns: 1fr;
  }
  .upload-inline {
    grid-template-columns: 1fr;
  }
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-style-card {
  background: #151922;
  border-color: #303744;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-style-card-head {
  border-color: #303744;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-style-card-head h2 {
  color: #f3f4f6;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-details .toggle-row,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upload-inline {
  background: #11151d;
  border-color: #303744;
}

/* Animated VIP avatar borders */
@keyframes vipBorderShift {
  0% { background-position: 0% 50%, 0% 50%; filter: saturate(1); }
  50% { background-position: 0% 50%, 100% 50%; filter: saturate(1.25); }
  100% { background-position: 0% 50%, 0% 50%; filter: saturate(1); }
}

@keyframes vipBorderGlowPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.7),
      0 0 12px var(--avatar-border-glow, rgba(245,196,0,.65)),
      0 0 24px color-mix(in srgb, var(--avatar-border-glow, #f5c400) 45%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.95),
      0 0 22px var(--avatar-border-glow, rgba(245,196,0,.9)),
      0 0 44px color-mix(in srgb, var(--avatar-border-glow, #f5c400) 68%, transparent);
  }
}

@keyframes vipBorderSpin {
  to { transform: rotate(360deg); }
}

.vip-avatar-frame {
  background-size: 100% 100%, 260% 260% !important;
  animation: vipBorderShift 5.5s ease-in-out infinite, vipBorderGlowPulse 3.2s ease-in-out infinite !important;
  isolation: isolate;
}

.vip-avatar-frame::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent, var(--avatar-border-glow, #f5c400), transparent 32%, transparent 100%);
  opacity: .38;
  filter: blur(8px);
  animation: vipBorderSpin 7s linear infinite;
  pointer-events: none;
}

.vip-avatar-frame[data-avatar-border="vip-holographic"],
.vip-avatar-frame[data-avatar-border="prism"],
.vip-avatar-frame[data-avatar-border="chromatic"] {
  animation-duration: 3.8s, 2.8s !important;
}

.vip-avatar-frame[data-avatar-border="vip-ice"]::before,
.vip-avatar-frame[data-avatar-border="aurora"]::before {
  opacity: .48;
  filter: blur(10px);
  animation-duration: 5.5s;
}

.vip-avatar-frame[data-avatar-border="vip-onyx"] {
  animation-duration: 7s, 4.5s !important;
}

.profile-avatar.large.vip-avatar-frame {
  animation-duration: 4.8s, 2.7s !important;
}

@media (prefers-reduced-motion: reduce) {
  .vip-avatar-frame,
  .vip-avatar-frame::before {
    animation: none !important;
  }
}

.form-status { min-height: 1.2em; margin: 0 0 12px; font-weight: 700; }
.form-status:empty { display: none; }
.error-message { color: #b91c1c; }
.success-message { color: #15803d; }

/* Unique VIP border variants */
@keyframes galaxyStarDrift {
  0% { background-position: 20% 20%, 70% 30%, 40% 75%, 85% 70%, 50% 50%; opacity: .55; }
  50% { background-position: 30% 25%, 75% 22%, 35% 68%, 82% 78%, 50% 50%; opacity: .95; }
  100% { background-position: 20% 20%, 70% 30%, 40% 75%, 85% 70%, 50% 50%; opacity: .6; }
}
@keyframes starSpark {
  0%,100% { transform: scale(1); opacity: .45; }
  50% { transform: scale(1.28); opacity: 1; }
}
@keyframes cyberScan {
  0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  20% { opacity: .95; }
  55% { opacity: .4; }
  100% { transform: translateX(150%) skewX(-18deg); opacity: 0; }
}
@keyframes sunRingPulse {
  0%,100% { transform: scale(1); opacity: .38; }
  50% { transform: scale(1.09); opacity: .72; }
}
@keyframes toxicBubble {
  0%,100% { filter: blur(8px) saturate(1); opacity: .42; }
  50% { filter: blur(12px) saturate(1.4); opacity: .78; }
}
@keyframes emeraldSweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes moonHalo {
  0%,100% { opacity: .32; transform: scale(1); }
  50% { opacity: .56; transform: scale(1.06); }
}
@keyframes voidOrbit {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}

.vip-avatar-frame::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
}

.vip-avatar-frame[data-avatar-border="vip-galaxy"] {
  animation-duration: 6.2s, 3.5s !important;
}
.vip-avatar-frame[data-avatar-border="vip-galaxy"]::before {
  opacity: .58;
  filter: blur(11px) saturate(1.25);
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.98) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.92) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 38% 76%, rgba(167,139,250,.9) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 84% 68%, rgba(253,224,71,.9) 0 1.3px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(96,165,250,.5), transparent 58%);
  animation: galaxyStarDrift 4.2s ease-in-out infinite, starSpark 2.4s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-galaxy"]::after {
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: inset 0 0 18px rgba(147,51,234,.36), 0 0 12px rgba(96,165,250,.22);
}

.vip-avatar-frame[data-avatar-border="vip-cyberpunk"] {
  animation-duration: 2.8s, 1.8s !important;
}
.vip-avatar-frame[data-avatar-border="vip-cyberpunk"]::before {
  inset: -6px;
  opacity: .52;
  filter: blur(7px);
  background: linear-gradient(90deg, transparent, rgba(0,245,255,.96), rgba(255,0,184,.7), transparent);
  animation: cyberScan 2.2s linear infinite;
}
.vip-avatar-frame[data-avatar-border="vip-cyberpunk"]::after {
  border: 1px dashed rgba(0,245,255,.45);
  box-shadow: inset 0 0 14px rgba(255,0,184,.26);
}

.vip-avatar-frame[data-avatar-border="vip-sunburst"]::before {
  inset: -8px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,226,120,.18) 35%, rgba(245,158,11,.42) 60%, transparent 74%);
  filter: blur(9px);
  animation: sunRingPulse 2.1s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-sunburst"]::after {
  border: 1px solid rgba(255,220,120,.46);
  box-shadow: inset 0 0 18px rgba(255,176,0,.32);
}

.vip-avatar-frame[data-avatar-border="vip-toxic"]::before {
  inset: -6px;
  background: radial-gradient(circle at 30% 30%, rgba(220,255,0,.66), transparent 26%), radial-gradient(circle at 70% 62%, rgba(0,255,170,.5), transparent 28%);
  animation: toxicBubble 2.7s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-toxic"]::after {
  border: 1px solid rgba(180,255,0,.34);
  box-shadow: inset 0 0 18px rgba(50,255,160,.22);
}

.vip-avatar-frame[data-avatar-border="vip-emerald-storm"] {
  background-size: 100% 100%, 220% 220% !important;
}
.vip-avatar-frame[data-avatar-border="vip-emerald-storm"]::before {
  inset: -6px;
  background: linear-gradient(115deg, transparent 10%, rgba(110,255,210,.18) 35%, rgba(20,184,166,.7) 50%, rgba(110,255,210,.18) 65%, transparent 90%);
  filter: blur(8px);
  animation: emeraldSweep 2.9s linear infinite;
}

.vip-avatar-frame[data-avatar-border="vip-moonlight"]::before {
  inset: -7px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(219,234,254,.28) 28%, rgba(196,181,253,.26) 52%, transparent 70%);
  filter: blur(10px);
  animation: moonHalo 3.4s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-moonlight"]::after {
  border: 1px solid rgba(224,231,255,.4);
}

.vip-avatar-frame[data-avatar-border="vip-obsidian-void"] {
  animation-duration: 8.4s, 4.8s !important;
}
.vip-avatar-frame[data-avatar-border="vip-obsidian-void"]::before {
  inset: -8px;
  background: conic-gradient(from 0deg, transparent, rgba(148,163,184,.42), transparent 36%, rgba(15,23,42,.72) 68%, transparent 100%);
  filter: blur(9px);
  animation: voidOrbit 9s linear infinite;
}
.vip-avatar-frame[data-avatar-border="vip-obsidian-void"]::after {
  border: 1px solid rgba(148,163,184,.24);
  box-shadow: inset 0 0 20px rgba(15,23,42,.75);
}

.vip-avatar-frame[data-avatar-border="vip-nebula"]::before {
  inset: -8px;
  background: radial-gradient(circle at 30% 30%, rgba(103,232,249,.55), transparent 24%), radial-gradient(circle at 68% 42%, rgba(217,70,239,.42), transparent 28%), radial-gradient(circle at 52% 70%, rgba(124,58,237,.52), transparent 30%);
  filter: blur(10px);
  animation: galaxyStarDrift 5.6s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-blood-gold"]::before {
  inset: -7px;
  background: conic-gradient(from 0deg, rgba(155,17,30,.0), rgba(255,204,51,.78), rgba(155,17,30,.0) 58%, rgba(255,48,48,.55));
  filter: blur(9px);
  animation: vipBorderSpin 4.6s linear infinite;
}




.deleted-profile-card {
  display: grid;
  grid-template-columns: 128px minmax(0,1fr);
  gap: 22px;
  align-items: center;
  padding: 26px;
  background: #fff;
  border: 1px solid var(--line);
}
.deleted-profile-card-skeleton {
  background: linear-gradient(180deg, #f6f4ef 0%, #ebe7de 100%);
  border-color: #d5cec2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.deleted-profile-avatar {
  width: 110px;
  height: 110px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 54px;
  background: linear-gradient(180deg,#fbfaf8,#d7d1c4);
  border: 4px solid #bdb6a9;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.72), 0 6px 14px rgba(60,55,48,.14);
}
.deleted-profile-body h1 { margin: 0 0 6px; font-size: 2rem; color: #2a2a28; }
.deleted-profile-body p { margin: 0 0 12px; color: #5c574f; }
.deleted-profile-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.deleted-profile-meta span { background: rgba(92,87,79,.08); color: #4f4a42; border: 1px solid rgba(92,87,79,.14); padding: 6px 10px; font-size: .92rem; }
.deleted-profile-bones { display: flex; gap: 10px; margin: 6px 0 16px; font-size: 1.3rem; opacity: .84; }
.deleted-profile-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 700px) {
  .deleted-profile-card { grid-template-columns: 1fr; text-align: center; }
  .deleted-profile-avatar { margin: 0 auto; }
  .deleted-profile-meta, .deleted-profile-bones, .deleted-profile-actions { justify-content: center; }
}

.vip-avatar-frame[data-avatar-border="vip-skeleton"] {
  background: linear-gradient(135deg,#f7f2e6,#c9c2b4,#8f897f,#f7f2e6) !important;
  box-shadow: 0 0 0 1px rgba(110,104,95,.2), 0 0 10px rgba(85,78,70,.08);
}
.vip-avatar-frame[data-avatar-border="vip-skeleton"]::before {
  inset: -4px;
  opacity: .96;
  filter: none;
  background:
    radial-gradient(circle at 8px 8px, #f7f2e6 0 5px, #8f897f 6px 7px, transparent 8px),
    radial-gradient(circle at calc(100% - 8px) 8px, #f7f2e6 0 5px, #8f897f 6px 7px, transparent 8px),
    radial-gradient(circle at 8px calc(100% - 8px), #f7f2e6 0 5px, #8f897f 6px 7px, transparent 8px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #f7f2e6 0 5px, #8f897f 6px 7px, transparent 8px),
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(0,0,0,.05));
}
.vip-avatar-frame[data-avatar-border="vip-skeleton"]::after {
  border: 1px solid rgba(132,125,115,.34);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.42);
}
.vip-avatar-frame[data-avatar-border="vip-ghostface"] {
  background: linear-gradient(135deg,#f9f9f9,#0f0f10,#dedede,#060606,#f9f9f9) !important;
  animation-duration: 6.2s, 2.6s !important;
}
.vip-avatar-frame[data-avatar-border="vip-ghostface"]::before {
  inset: -5px;
  opacity: .55;
  filter: blur(9px);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.92) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 28% 82%, rgba(255,255,255,.78) 0 1.05px, transparent 1.7px),
    radial-gradient(circle at 54% 16%, rgba(230,230,230,.84) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 70% 82%, rgba(255,255,255,.85) 0 1.15px, transparent 1.8px),
    radial-gradient(circle at 90% 36%, rgba(255,255,255,.88) 0 1.2px, transparent 1.9px),
    linear-gradient(135deg, rgba(255,255,255,.2), rgba(0,0,0,.2));
  animation: ghostSparkle 2.8s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-ghostface"]::after {
  top: -12px;
  left: -12px;
  right: auto;
  bottom: auto;
  width: 58px;
  height: 58px;
  border-radius: 0;
  background: url('/assets/vip/ghostface-mask.webp') no-repeat center / contain;
  transform: rotate(45deg);
  transform-origin: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .vip-avatar-frame::after {
    animation: none !important;
  }
}

/* Mention autocomplete */
.mention-menu button {
  grid-template-columns: auto minmax(0, 1fr);
}
.mention-menu button small {
  grid-column: 2;
  color: #7a8491;
  font-size: .78rem;
  font-weight: 700;
  margin-top: -5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-menu .mini-avatar.tiny {
  width: 30px;
  height: 30px;
  font-size: .78rem;
  grid-row: span 2;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .mention-menu button small {
  color: #a8b0bb;
}

.quick-warn-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 120px minmax(220px, 2fr) auto;
  gap: 10px;
  align-items: end;
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid var(--line, #d7dce2);
  background: var(--panel, #fff);
}
.quick-warn-form label {
  display: grid;
  gap: 5px;
  font-weight: 850;
  color: #526071;
}
.quick-warn-form input {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 800px) {
  .quick-warn-form { grid-template-columns: 1fr; }
}

/* Mobile editor tap/selection stability */
.editor-toolbar button,
.editor-toolbar select,
.editor-toolbar input[type="color"],
.editor-footer button,
.editor-footer label,
.attach-button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.editor-toolbar,
.editor-footer {
  -webkit-user-select: none;
  user-select: none;
}

.editor-surface {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  touch-action: auto;
  caret-color: auto;
}

.editor-surface * {
  -webkit-user-select: text;
  user-select: text;
}

@media (max-width: 720px) {
  .editor-toolbar button,
  .editor-toolbar select,
  .editor-toolbar input[type="color"] {
    min-height: 38px;
  }
  .editor-surface {
    font-size: 16px;
    line-height: 1.55;
  }
}

.mention-menu {
  max-height: min(280px, calc(100vh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mention-menu button {
  touch-action: manipulation;
}

/* Editor formatting fixes */
.editor-toolbar button.is-active {
  background: #dbeafe;
  border-color: #60a5fa;
  color: #0f172a;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button.is-active {
  background: #1f3a5f;
  border-color: #3b82f6;
  color: #f8fafc;
}
.editor-surface {
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}
.editor-toolbar button,
.editor-toolbar select,
.editor-toolbar input[type="color"] {
  touch-action: manipulation;
}

/* Cleaner stacked reaction summary */
.reaction-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.reaction-line-item,
.reaction-line-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.reaction-line-more {
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  padding: 0;
}
.reaction-line-more:hover {
  text-decoration: underline;
}
.reaction-member-list {
  display: grid;
  gap: 0;
  min-width: min(720px, 82vw);
}
.reaction-member-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(127, 127, 127, .22);
}
.reaction-member-row:last-child {
  border-bottom: 0;
}
.reaction-member-identity {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.reaction-member-identity .member-name {
  display: block;
  font-weight: 900;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reaction-member-row small {
  color: var(--muted);
}
.reaction-member-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  white-space: nowrap;
}
.reaction-member-time {
  color: var(--muted);
  font-size: .82em;
  white-space: nowrap;
}


/* Reaction modal polish: wider, no inner horizontal scroll, avatar/name styling friendly */
.app-modal.reaction-modal {
  width: min(860px, calc(100vw - 26px));
  max-width: 860px;
  overflow: hidden;
}
.app-modal.reaction-modal .app-modal-box {
  overflow: hidden;
}
.app-modal.reaction-modal .app-modal-body {
  padding: 0;
  gap: 0;
  max-height: min(72vh, 680px);
  overflow-y: auto;
  overflow-x: hidden;
}
.app-modal.reaction-modal .app-modal-copy {
  overflow: visible;
}
.app-modal.reaction-modal .app-modal-actions {
  padding: 12px 16px;
}
.app-modal.reaction-modal .reaction-member-list {
  min-width: 0;
  width: 100%;
  display: grid;
}
.app-modal.reaction-modal .reaction-member-row {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px 16px;
  min-width: 0;
}
.app-modal.reaction-modal .reaction-member-row .mini-avatar {
  width: 42px;
  height: 42px;
  align-self: center;
}
.app-modal.reaction-modal .reaction-member-identity {
  min-width: 0;
  align-self: center;
}
.app-modal.reaction-modal .reaction-member-identity .member-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.app-modal.reaction-modal .reaction-member-row small {
  display: block;
  margin-top: 2px;
}
.app-modal.reaction-modal .reaction-member-kind {
  justify-self: end;
  align-self: center;
  color: var(--ink);
  font-weight: 850;
  gap: 7px;
}
.app-modal.reaction-modal .reaction-member-kind .reaction-line-icon {
  width: 26px;
  height: 26px;
  font-size: 24px;
}
.app-modal.reaction-modal .reaction-member-time {
  grid-column: 2 / 4;
  justify-self: start;
  margin-top: -8px;
  font-size: .78rem;
  opacity: .72;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal.reaction-modal .reaction-member-row {
  border-bottom-color: rgba(255,255,255,.08);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal.reaction-modal .reaction-member-kind {
  color: var(--ink);
}
@media (max-width: 620px) {
  .app-modal.reaction-modal {
    width: min(96vw, calc(100vw - 14px));
  }
  .app-modal.reaction-modal .app-modal-head {
    padding: 13px 14px;
  }
  .app-modal.reaction-modal .app-modal-head h2 {
    font-size: 1rem;
  }
  .app-modal.reaction-modal .reaction-member-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 12px 12px;
  }
  .app-modal.reaction-modal .reaction-member-row .mini-avatar {
    width: 38px;
    height: 38px;
  }
  .app-modal.reaction-modal .reaction-member-kind {
    font-size: 0;
  }
  .app-modal.reaction-modal .reaction-member-kind .reaction-line-icon {
    font-size: 24px;
  }
}

/* Stable BBCode textarea composer */
.rich-editor .editor-textarea,
.rich-editor textarea.editor-surface {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  resize: vertical;
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.65;
  overflow: auto;
  tab-size: 2;
}
.rich-editor.is-focused,
.rich-editor:focus-within {
  border-color: #8f98a6;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 0 0 2px rgba(130, 145, 165, .16);
}
.editor-toolbar button.is-active {
  background: #fff;
  border-color: #9aa3af;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.08);
}
.editor-preview {
  min-height: 160px;
  padding: 14px 18px;
  background: #fff;
  color: #26313c;
  line-height: 1.65;
  overflow: auto;
}
.editor-preview:empty::before {
  content: "Nothing to preview yet.";
  color: #8a94a3;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor .editor-textarea,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor textarea.editor-surface,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-preview {
  background: #252a31;
  color: #d7dde6;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button.is-active {
  background: #343b46;
  border-color: #667284;
}
@media (max-width: 640px) {
  .editor-toolbar {
    gap: 6px;
    padding: 7px;
  }
  .toolbar-group {
    flex-wrap: wrap;
    align-items: center;
  }
  .toolbar-field select {
    min-width: 76px;
  }
  .rich-editor .editor-textarea,
  .rich-editor textarea.editor-surface {
    min-height: 220px !important;
    padding: 13px 14px;
    font-size: 16px;
  }
}

/* XenForo-style visual BBCode composer */
.rich-editor .editor-wysiwyg {
  display: block;
  width: 100%;
  min-height: 180px;
  border: 0;
  outline: 0;
  background: #fff;
  color: #26313c;
  padding: 14px 18px;
  line-height: 1.65;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}
.rich-editor .editor-wysiwyg:empty::before {
  content: attr(data-placeholder);
  color: #8a94a3;
  pointer-events: none;
}
.rich-editor .editor-wysiwyg p,
.rich-editor .editor-wysiwyg div {
  margin: 0 0 12px;
}
.rich-editor .editor-source {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  resize: vertical;
  background: #fff;
  color: #26313c;
  padding: 14px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.65;
  white-space: pre-wrap;
}
.rich-editor .editor-source[hidden],
.rich-editor .editor-wysiwyg[hidden] {
  display: none !important;
}
.rich-editor .editor-wysiwyg strong,
.rich-editor .editor-wysiwyg b { font-weight: 800; }
.rich-editor .editor-wysiwyg em,
.rich-editor .editor-wysiwyg i { font-style: italic; }
.rich-editor .editor-wysiwyg u { text-decoration: underline; }
.rich-editor .editor-wysiwyg s { text-decoration: line-through; }
.rich-editor .editor-wysiwyg blockquote {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-left: 3px solid #9aa3af;
  background: rgba(0,0,0,.04);
}
.rich-editor .editor-wysiwyg blockquote > cite {
  display: block;
  margin: -2px 0 9px;
  padding: 0 0 8px;
  border-bottom: 1px solid #cbd0d7;
  color: #657183;
  font-style: normal;
  font-weight: 850;
}
.rich-editor .editor-wysiwyg details {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid #d7d9de;
  background: rgba(0,0,0,.025);
}
.rich-editor .editor-wysiwyg img {
  max-width: 100%;
  height: auto;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor .editor-wysiwyg,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor .editor-source {
  background: #252a31;
  color: #d7dde6;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor .editor-wysiwyg blockquote {
  background: rgba(255,255,255,.035);
  border-left-color: #667284;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor .editor-wysiwyg blockquote > cite {
  border-bottom-color: #47505c;
  color: #c8d0dc;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor .editor-wysiwyg details {
  background: rgba(255,255,255,.025);
  border-color: #3c4450;
}
@media (max-width: 640px) {
  .rich-editor .editor-wysiwyg,
  .rich-editor .editor-source {
    min-height: 220px !important;
    padding: 13px 14px;
    font-size: 16px;
  }
}

/* Final XenForo-style WYSIWYG editor cleanup */
.rich-editor textarea.editor-source[hidden],
.rich-editor textarea[hidden] {
  display: none !important;
}
.rich-editor[data-mode="visual"] .editor-wysiwyg {
  display: block;
  min-height: 260px;
  padding: 15px 18px;
  background: #fff;
  color: #26313c;
  outline: 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.rich-editor[data-mode="visual"] .editor-wysiwyg:focus {
  background: #fff;
}
.rich-editor[data-mode="visual"] .editor-wysiwyg p,
.rich-editor[data-mode="visual"] .editor-wysiwyg div {
  margin: 0 0 .85em;
}
.rich-editor[data-mode="visual"] .editor-wysiwyg strong,
.rich-editor[data-mode="visual"] .editor-wysiwyg b {
  font-weight: 800;
}
.rich-editor[data-mode="visual"] .editor-wysiwyg em,
.rich-editor[data-mode="visual"] .editor-wysiwyg i {
  font-style: italic;
}
.editor-toolbar button.is-active {
  background: #e8edf5 !important;
  border-color: #7f8da3 !important;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.12) !important;
  color: #111827 !important;
}
.editor-toolbar button:hover:not(.is-active) {
  background: #f5f6f8;
}
.editor-toolbar select,
.editor-toolbar input[type="color"] {
  cursor: pointer;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor[data-mode="visual"] .editor-wysiwyg {
  background: #252a31;
  color: #d7dde6;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button.is-active {
  background: #3a4350 !important;
  border-color: #7b8798 !important;
  color: #f6f8fb !important;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button:hover:not(.is-active) {
  background: #343b46;
}

/* Final stable old-school WYSIWYG editor polish */
.rich-editor .editor-wysiwyg {
  display: block;
  position: relative;
  width: 100%;
  min-height: 180px;
  border: 0;
  outline: 0;
  background: #fff;
  color: #26313c;
  padding: 14px 18px;
  line-height: 1.65;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
}
.rich-editor .editor-wysiwyg[data-empty="1"]::before {
  content: attr(data-placeholder);
  color: #8a94a3;
  pointer-events: none;
  font-weight: 700;
}
.rich-editor .editor-wysiwyg[hidden],
.rich-editor .editor-source[hidden] {
  display: none !important;
}
.editor-toolbar button.is-active {
  background: #dfe6f0 !important;
  border-color: #9aa8bb !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
  color: #111827 !important;
}
.editor-toolbar button:disabled,
.editor-toolbar select:disabled,
.editor-toolbar input:disabled {
  opacity: .55;
  pointer-events: none;
}
.topic-form .editor-surface,
.new-topic-editor .editor-surface {
  min-height: 360px !important;
}
.rich-editor .editor-source {
  min-height: 220px;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor .editor-wysiwyg {
  background: #252a31;
  color: #d7dde6;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor .editor-wysiwyg[data-empty="1"]::before {
  color: #8f98a6;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button.is-active {
  background: #3b4554 !important;
  border-color: #69778d !important;
  color: #fff !important;
}

/* Clean old-school XenForo-like editor rebuild */
.rich-editor {
  position: relative;
  border: 1px solid #9aa8b7;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  min-height: 38px;
  padding: 0 8px;
  border-bottom: 1px solid #cfd6df;
  background: linear-gradient(#f7f8fa, #e8edf2);
}
.toolbar-group {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 8px 5px 0;
  margin-right: 8px;
  border-right: 1px solid #cfd6df;
}
.toolbar-group:last-child { border-right: 0; margin-right: 0; }
.editor-toolbar button,
.editor-toolbar select,
.editor-toolbar input[type="color"] {
  min-height: 28px;
  border: 1px solid transparent;
  background: transparent;
  color: #263241;
  font-weight: 700;
  font-size: 13px;
  border-radius: 2px;
}
.editor-toolbar button { padding: 4px 9px; cursor: pointer; }
.editor-toolbar button:hover,
.editor-toolbar button:focus-visible,
.editor-toolbar button.is-active {
  border-color: #a8b3c0;
  background: #fff;
  box-shadow: inset 0 -2px 0 #6b7f95;
}
.editor-toolbar button.is-active {
  background: #dbe7f5;
  color: #111827;
}
.editor-toolbar select { background: #fff; padding: 2px 4px; }
.editor-toolbar input[type="color"] { width: 32px; padding: 2px; background: #fff; }
.toolbar-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
  color: #5c6977;
  font-weight: 800;
}
.rich-editor .editor-wysiwyg,
.rich-editor textarea.editor-source-visible {
  display: block;
  width: 100%;
  min-height: 190px;
  padding: 14px 16px;
  border: 0;
  outline: none;
  background: #fff;
  color: #1f2937;
  font: 15px/1.55 Arial, Helvetica, sans-serif;
  resize: vertical;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
}
.rich-editor .editor-wysiwyg.is-empty::before,
.rich-editor .editor-wysiwyg:empty::before {
  content: attr(data-placeholder);
  color: #8b98a8;
  font-weight: 700;
  pointer-events: none;
}
.rich-editor .editor-wysiwyg p,
.rich-editor .editor-wysiwyg div { margin: 0 0 8px; }
.rich-editor .editor-wysiwyg strong,
.rich-editor .editor-wysiwyg b { font-weight: 800; }
.rich-editor .editor-wysiwyg .bbcode-img,
.rich-editor .editor-wysiwyg img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
}
.rich-editor .editor-wysiwyg img.is-selected {
  outline: 2px solid #5d8fd6;
  outline-offset: 2px;
}
.rich-editor .editor-source[hidden],
.rich-editor .editor-wysiwyg[hidden],
.rich-editor .editor-preview[hidden] { display: none !important; }
.rich-editor.is-focused,
.rich-editor:focus-within { border-color: #6b7f95; box-shadow: 0 0 0 2px rgba(88,112,138,.12); }
.editor-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid #d9dee5;
  background: #f7f8fa;
}
.editor-note { margin: 0; font-size: 11px; color: #607086; font-weight: 700; }
.editor-resize-box {
  position: absolute;
  pointer-events: none;
  border: 1px dashed #5d8fd6;
}
.editor-resize-box span {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #5d8fd6;
  border: 1px solid #fff;
  pointer-events: auto;
}
.editor-resize-box [data-resize-handle="nw"] { left: -6px; top: -6px; cursor: nwse-resize; }
.editor-resize-box [data-resize-handle="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.editor-resize-box [data-resize-handle="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.editor-resize-box [data-resize-handle="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor { border-color: #56606d; background: #2d333c; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar { border-color: #4a535f; background: linear-gradient(#4b5059, #3b4048); }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .toolbar-group { border-color: #59616c; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar select,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar input[type="color"] { color: #eef2f6; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar select,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar input[type="color"] { background: #2b3038; border-color: #616a76; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button:hover,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button:focus-visible,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button.is-active { background: #5b6470; border-color: #778392; box-shadow: inset 0 -2px 0 #9bb6d6; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor .editor-wysiwyg,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor textarea.editor-source-visible { background: #2f343d; color: #dfe6ef; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor .editor-wysiwyg.is-empty::before,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rich-editor .editor-wysiwyg:empty::before { color: #95a1af; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-footer { background: #383e47; border-color: #4a535f; }
@media (max-width: 640px) {
  .editor-toolbar { padding: 4px; gap: 3px; }
  .toolbar-group { padding-right: 4px; margin-right: 4px; }
  .editor-toolbar button { padding: 4px 7px; }
  .rich-editor .editor-wysiwyg,
  .rich-editor textarea.editor-source-visible { min-height: 220px; padding: 12px; font-size: 16px; }
  .editor-footer { flex-wrap: wrap; }
}

/* Final editor polish/fix */
.rich-editor .editor-wysiwyg[data-empty="1"]::before {
  font-weight: 400 !important;
  font-style: normal !important;
  text-decoration: none !important;
}
.editor-toolbar button.is-active {
  background: #dfe6f0 !important;
  border-color: #8ea0b8 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.14) !important;
}
.editor-toolbar button:hover:not(.is-active) {
  background: #f7f9fc;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-toolbar button:hover:not(.is-active) {
  background: #333a45;
}

/* Final editor wrapper fix: Message is no longer a giant label around toolbar/buttons. */
.topic-message-field { display: block; margin: 0 0 12px; }
.topic-message-field > .field-label { display: block; margin: 0 0 6px; font-weight: 700; color: var(--text, #1f2937); }
.editor-toolbar button.is-active[aria-pressed="false"] { background: transparent !important; box-shadow: none !important; }

/* Profile activity/postings tabs */
.account-loading {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  color: var(--muted, #9ca3af);
  font-size: 13px;
}
.profile-activity-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 14px;
  border-bottom: 1px solid var(--line, #d7dce2);
  background: var(--panel, #fff);
}
.profile-activity-item:last-child { border-bottom: 0; }
.profile-activity-item h3 {
  margin: 0 0 6px;
  font-size: 16px;
}
.profile-activity-item p {
  margin: 0 0 6px;
  line-height: 1.45;
}
.profile-activity-item small {
  color: var(--muted, #667085);
  font-size: 12px;
}
.activity-snippet {
  margin: 6px 0;
  color: var(--text, #1f2937);
  line-height: 1.45;
}
.profile-posting-item .activity-snippet {
  margin-top: 2px;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-activity-item {
  background: #282c33;
  border-color: #3b414b;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-activity-item small,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-loading {
  color: #aab2c0;
}

/* Requested alert, mobile top bar, and loading feedback polish */
.global-loading-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 99999;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  background: rgba(0, 0, 0, .08);
  transition: opacity .16s ease;
}
.global-loading-bar.is-active { opacity: 1; }
.global-loading-bar .global-loading-fill {
  display: block;
  height: 100%;
  width: 42%;
  background: linear-gradient(90deg, var(--red, #d20a0a), var(--orange, #f59e0b), var(--red, #d20a0a));
  box-shadow: 0 0 8px rgba(210, 10, 10, .45);
  animation: forum-loading-slide .9s ease-in-out infinite;
}
.global-loading-bar.is-finishing .global-loading-fill {
  width: 100%;
  animation: none;
  transition: width .22s ease;
}
@keyframes forum-loading-slide {
  0% { transform: translateX(-105%); }
  55% { transform: translateX(80%); }
  100% { transform: translateX(245%); }
}

.modern-alerts .alert-card.is-unread {
  background: #e4e8ee;
  border-left: 3px solid #20242b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  opacity: 1;
}
.modern-alerts .alert-card.is-unread:hover {
  background: #dbe1e8;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .modern-alerts .alert-card.is-unread,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .modern-alerts .alert-card.is-unread {
  background: rgba(63, 76, 94, .92);
  border-left-color: #f1f5f9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .modern-alerts .alert-card.is-unread:hover,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .modern-alerts .alert-card.is-unread:hover {
  background: rgba(73, 88, 108, .96);
}
.alert-reaction-pill {
  --reaction-accent: #16a34a;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px 1px 4px;
  border: 1px solid color-mix(in srgb, var(--reaction-accent) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--reaction-accent) 14%, transparent);
  color: var(--reaction-accent);
  font-weight: 900;
  white-space: nowrap;
  vertical-align: middle;
}
.alert-reaction-pill strong { color: inherit !important; }
.alert-reaction-icon {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  object-fit: contain;
  vertical-align: -3px;
}
.reaction-pill-like,
.reaction-pill-based { --reaction-accent: #16a34a; }
.reaction-pill-laugh,
.reaction-pill-wow { --reaction-accent: #d97706; }
.reaction-pill-love { --reaction-accent: #db2777; }
.reaction-pill-thinking { --reaction-accent: #2563eb; }
.reaction-pill-sick { --reaction-accent: #65a30d; }
.reaction-pill-angry,
.reaction-pill-clown { --reaction-accent: #dc2626; }
.reaction-pill-sad { --reaction-accent: #0284c7; }
.reaction-pill-over { --reaction-accent: #4f46e5; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .alert-reaction-pill,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .alert-reaction-pill {
  background: color-mix(in srgb, var(--reaction-accent) 24%, rgba(255,255,255,.08));
  border-color: color-mix(in srgb, var(--reaction-accent) 70%, rgba(255,255,255,.16));
}

@media (max-width: 720px) {
  .masthead,
  .nav-bar {
    position: sticky;
    z-index: 80;
    will-change: transform;
    transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease;
  }
  .masthead {
    top: 0;
    box-shadow: 0 1px 0 rgba(0,0,0,.12);
  }
  .nav-bar {
    top: var(--mobile-masthead-height, 70px);
    z-index: 79;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
  }
  .site-shell.top-chrome-hidden .masthead {
    transform: translateY(-112%);
  }
  .site-shell.top-chrome-hidden .nav-bar {
    transform: translateY(-152px);
  }
}

/* Utility buttons: old-school board controls */
.utility-row .utility-action {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid #b9bec6;
  border-radius: 4px;
  background: linear-gradient(#f7f8fa, #e1e5ea);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 1px rgba(0,0,0,.08);
  color: #2f3640;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  white-space: nowrap;
}

.utility-row .utility-action-primary {
  border-color: #20242b;
  background: linear-gradient(#3f454e, #2c3138);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 1px rgba(0,0,0,.18);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,.55);
}

.utility-row .utility-action:hover,
.utility-row .utility-action:focus-visible {
  filter: brightness(.97);
  text-decoration: none !important;
}

.utility-row .utility-action-primary:hover,
.utility-row .utility-action-primary:focus-visible {
  background: linear-gradient(#4a5059, #333941);
}

.utility-action-icon {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  font-size: 15px;
  line-height: 1;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .utility-row .utility-action,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .utility-row .utility-action {
  border-color: #535862;
  background: linear-gradient(#4a4f58, #30343b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 1px rgba(0,0,0,.25);
  color: #edf1f6;
  text-shadow: 0 -1px 0 rgba(0,0,0,.65);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .utility-row .utility-action-primary,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .utility-row .utility-action-primary {
  border-color: #626974;
  background: linear-gradient(#5a606a, #3a3f48);
  color: #fff;
}

@media (max-width: 720px) {
  .utility-row .utility-action {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
  }
}

/* Mobile post badge cleanup: keep every badge visible, but make the author block calmer on phones. */
@media (max-width: 760px) {
  .post-author {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 3px 10px !important;
  }

  .post-author .avatar {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    width: 54px !important;
    height: 54px !important;
  }

  .post-author strong,
  .post-author .post-user-title,
  .post-author .staff-badge,
  .post-author .badge-row,
  .post-author .badge-row.small {
    grid-column: 2 !important;
    justify-self: start !important;
    align-self: start !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .post-author strong {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.12 !important;
  }

  .post-author .post-user-title {
    margin: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    opacity: .9;
  }

  .post-author .badge-row,
  .post-author .badge-row.small {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 3px 4px !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
  }

  .post-author .staff-badge,
  .post-author .badge-row.small .role-badge,
  .post-author .role-badge {
    min-width: 0 !important;
    width: auto !important;
    min-height: 16px !important;
    height: auto !important;
    padding: 2px 5px !important;
    border-radius: 2px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    gap: 2px !important;
    box-shadow: inset 0 1px rgba(255,255,255,.18) !important;
    text-shadow: none !important;
    white-space: nowrap !important;
  }

  .post-author .staff-badge {
    margin: 2px 0 0 !important;
  }

  .post-author .role-badge::before,
  .post-author .staff-badge::before {
    display: none !important;
    content: none !important;
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author .badge-row.small .role-badge,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author .badge-row.small .role-badge,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author .role-badge,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author .role-badge,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author .staff-badge,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .post-author .staff-badge {
    border-color: rgba(255,255,255,.28) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.12) !important;
  }
}

@media (max-width: 420px) {
  .post-author {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 3px 8px !important;
    padding: 9px 10px !important;
  }

  .post-author .avatar {
    width: 48px !important;
    height: 48px !important;
  }

  .post-author .staff-badge,
  .post-author .badge-row.small .role-badge,
  .post-author .role-badge {
    padding: 2px 4px !important;
    font-size: 8px !important;
  }
}


/* 2026-07-08 mobile topic list cleanup: keeps desktop thread rows unchanged. */
.thread-mobile-avatar-link {
  display: none;
}
.thread-mobile-avatar {
  width: 38px;
  height: 38px;
  border: 1px solid #2d3748;
  background: #111827;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.thread-mobile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.activity-reaction-pill {
  margin: 0 2px;
}

@media (max-width: 560px) {
  .thread-list {
    border-top: 0;
    margin-bottom: 12px;
  }

  .thread-list-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 38px;
    padding: 0 12px;
    background: var(--black);
  }

  .thread-list-head h2 {
    font-size: 15px;
  }

  .thread-list-head span {
    display: none !important;
  }

  .thread-row {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 9px !important;
    min-height: 0;
    padding: 10px 12px !important;
    align-items: start;
  }

  .thread-row > .forum-status {
    display: none !important;
  }

  .thread-row .thread-mobile-avatar-link {
    display: block;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    text-decoration: none;
  }

  .thread-row .thread-copy {
    grid-column: 2;
    min-width: 0;
  }

  .thread-row .thread-copy > a {
    display: block;
    font-size: 16px !important;
    line-height: 1.18 !important;
    font-weight: 900;
    color: #1f2937;
    overflow-wrap: anywhere;
  }

  .thread-row .thread-copy > p:not(.mobile-statline) {
    margin-top: 3px;
    font-size: 12px !important;
    line-height: 1.25 !important;
    color: #5f6b7a;
  }

  .thread-row .thread-copy .member-name {
    font-size: inherit;
  }

  .thread-row .mobile-statline {
    display: block !important;
    margin-top: 3px !important;
    color: #4b5563;
    font-size: 12px !important;
    line-height: 1.25;
    font-weight: 800;
  }

  .thread-row > .count,
  .thread-row > .last-post {
    display: none !important;
  }

  .thread-row .thread-prefix,
  .thread-row .pin {
    min-height: 16px;
    padding: 1px 5px;
    margin-right: 5px;
    font-size: 10px;
    vertical-align: 1px;
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-row .thread-copy > a,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-row .thread-copy > a {
    color: #f3f4f6;
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-row .thread-copy > p:not(.mobile-statline),
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-row .thread-copy > p:not(.mobile-statline) {
    color: #aeb6c3;
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-row .mobile-statline,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-row .mobile-statline {
    color: #cbd5e1;
  }
}

/* 2026-07-08 sticky mobile chrome + desktop topic avatars */
@media (max-width: 720px) {
  body {
    scroll-padding-top: calc(var(--mobile-top-chrome-height, 112px) + 8px);
  }

  .site-shell {
    --mobile-masthead-height: 70px;
    --mobile-nav-height: 42px;
    --mobile-top-chrome-height: 112px;
    padding-top: var(--mobile-top-chrome-height);
  }

  .masthead,
  .nav-bar {
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 1000;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
  }

  .masthead {
    top: 0;
    box-shadow: 0 1px 0 rgba(0,0,0,.14);
  }

  .nav-bar {
    top: var(--mobile-masthead-height, 70px) !important;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0,0,0,.14);
  }

  .site-shell.top-chrome-hidden .masthead,
  .site-shell.top-chrome-hidden .nav-bar {
    transform: translate3d(0, calc(-1 * var(--mobile-top-chrome-height, 112px)), 0) !important;
  }
}

/*
 * `viewport-fit=cover` lets iOS standalone PWAs extend beneath the status
 * bar.  Keep the fixed mobile chrome below that area, but only when WebKit is
 * running as an installed app; normal Safari and Android keep their existing
 * 70px / 42px layout.
 */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) and (max-width: 720px) {
    .site-shell {
      --ios-pwa-safe-area-top: env(safe-area-inset-top, 0px);
      --mobile-masthead-height: calc(70px + var(--ios-pwa-safe-area-top));
      --mobile-top-chrome-height: calc(112px + var(--ios-pwa-safe-area-top));
    }

    .masthead {
      min-height: var(--mobile-masthead-height);
      padding-top: calc(10px + var(--ios-pwa-safe-area-top));
    }
  }
}

@media (min-width: 561px) {
  .thread-list .thread-row {
    grid-template-columns: 52px minmax(0, 1fr) 90px 90px 300px;
  }

  .thread-list .thread-row > .forum-status {
    display: none;
  }

  .thread-list .thread-author-avatar-link {
    display: block;
    grid-column: 1;
    align-self: center;
    justify-self: start;
    text-decoration: none;
  }

  .thread-list .thread-author-avatar {
    width: 44px;
    height: 44px;
    border: 1px solid #2d3748;
    background: #111827;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  }

  .thread-list .thread-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .thread-list .thread-copy {
    grid-column: 2;
  }
}


/* 2026-07-08 PWA Add to Home Screen card: mobile-only, old-school board style. */
.pwa-install-card {
  display: none;
}

@media (max-width: 720px) {
  .pwa-install-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: center;
    position: relative;
    margin: 14px 0 calc(18px + env(safe-area-inset-bottom));
    padding: 13px 12px 12px;
    border: 1px solid rgba(92, 103, 118, 0.82);
    border-radius: 5px;
    background: linear-gradient(180deg, #f7f3ea 0%, #e5dccd 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.74), 0 2px 0 rgba(35, 39, 45, 0.16);
    color: #2d333b;
  }

  .pwa-install-card[hidden] {
    display: none !important;
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pwa-install-card,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pwa-install-card {
    background: linear-gradient(180deg, #303640 0%, #252b34 100%);
    border-color: rgba(113, 125, 142, 0.76);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 0 rgba(0, 0, 0, 0.36);
    color: #ebe5db;
  }

  .pwa-install-icon {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(69, 78, 91, 0.75);
    border-radius: 4px;
    display: grid;
    place-items: center;
    background: #2b3038;
    color: #efe8dd;
    font-size: 22px;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  }

  .pwa-install-copy h2 {
    margin: 0 22px 2px 0;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
  }

  .pwa-install-copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(45, 51, 59, 0.78);
  }

  .pwa-install-copy .pwa-install-note {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(45, 51, 59, 0.62);
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pwa-install-copy p,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pwa-install-copy p {
    color: rgba(235, 229, 219, 0.72);
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pwa-install-copy .pwa-install-note,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pwa-install-copy .pwa-install-note {
    color: rgba(235, 229, 219, 0.56);
  }

  .pwa-install-button {
    grid-column: 1 / -1;
    width: 100%;
    border: 1px solid #232831;
    border-radius: 4px;
    background: linear-gradient(180deg, #454d5a, #2f3641);
    color: #fff;
    padding: 10px 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 1px 0 rgba(0,0,0,0.2);
  }

  .pwa-install-button:active {
    transform: translateY(1px);
  }

  .pwa-install-dismiss {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(78, 88, 102, 0.45);
    border-radius: 3px;
    background: rgba(255,255,255,0.38);
    color: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pwa-install-dismiss,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pwa-install-dismiss {
    background: rgba(0,0,0,0.2);
  }

  .pwa-install-steps {
    grid-column: 1 / -1;
    margin: 9px 0 0;
    padding: 9px 10px 9px 24px;
    border: 1px dashed rgba(70, 80, 94, 0.55);
    border-radius: 4px;
    background: rgba(255,255,255,0.36);
    font-size: 12px;
    line-height: 1.45;
  }

  .pwa-install-steps li + li {
    margin-top: 5px;
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pwa-install-steps,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pwa-install-steps {
    background: rgba(0,0,0,0.18);
    border-color: rgba(145, 155, 171, 0.35);
  }
}

@media (display-mode: standalone) {
  .pwa-install-card {
    display: none !important;
  }
}

/* Mobile thread share button for installed/web app users. Kept hidden on desktop so the PC thread layout stays unchanged. */
.thread-share-button {
  display: none;
}

.share-link-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cfd6df;
  background: #fff;
  color: #27313d;
  padding: 9px 10px;
  font: inherit;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .share-link-input {
  border-color: #333a43;
  background: #181c22;
  color: #e8edf3;
}

@media (max-width: 720px) {
  .thread-share-button {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid #d2d7de;
    border-radius: 4px;
    background: #f4f6f8;
    color: #526071;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    opacity: .88;
  }

  .thread-share-button:hover,
  .thread-share-button:focus-visible {
    opacity: 1;
    background: #eef1f5;
    color: var(--blue);
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-share-button {
    border-color: #323943;
    background: #1e232a;
    color: #aeb8c5;
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-share-button:hover,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .thread-share-button:focus-visible {
    background: #252b34;
    color: #d7e7ff;
  }
}


/* ==========================================================================\n   VIP Signature Collection v2\n   Distinct name motion and avatar-frame identities for every premium style.\n   ========================================================================== */

/* Existing premium names no longer share one generic animation. */
[data-name-effect="holographic"] {
  --vip-glow: rgba(121,247,255,.94);
  background-size: 320% 100% !important;
  animation: vip-name-flow 3.8s linear infinite, vipHoloScan 2.4s ease-in-out infinite !important;
  text-shadow: -.7px 0 rgba(0,245,255,.62), .7px 0 rgba(255,80,230,.52), 0 0 12px rgba(121,247,255,.66) !important;
}
[data-name-effect="platinum"] {
  --vip-glow: rgba(224,235,255,.95);
  background-size: 240% 100% !important;
  animation: vipMetalSweep 5.4s ease-in-out infinite !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.88), 0 0 9px rgba(190,210,235,.52) !important;
}
[data-name-effect="rose-gold"] {
  --vip-glow: rgba(255,132,169,.9);
  background-size: 260% 100% !important;
  animation: vip-name-flow 6.2s linear infinite, vipRoseBloom 3.2s ease-in-out infinite !important;
  text-shadow: 0 0 5px rgba(255,236,226,.75), 0 0 13px rgba(255,119,158,.46) !important;
}
[data-name-effect="onyx"] {
  --vip-glow: rgba(132,145,170,.7);
  background-size: 240% 100% !important;
  animation: vipOnyxSheen 7.5s ease-in-out infinite !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.18), 0 0 10px rgba(89,101,126,.42) !important;
}
[data-name-effect="ice"] {
  --vip-glow: rgba(71,246,255,.96);
  background-size: 300% 100% !important;
  animation: vip-name-flow 4.8s linear infinite, vipIceGlint 2.7s steps(5,end) infinite !important;
  text-shadow: 0 -1px 0 rgba(255,255,255,.95), 0 0 8px rgba(96,246,255,.82), 0 0 18px rgba(30,144,255,.38) !important;
}
[data-name-effect="amethyst"] {
  --vip-glow: rgba(194,105,255,.95);
  background-size: 240% 100% !important;
  animation: vip-name-flow 5.2s linear infinite, vipGemPulse 2.9s ease-in-out infinite !important;
  text-shadow: 0 0 4px rgba(255,240,255,.78), 0 0 12px rgba(181,109,255,.72), 0 0 22px rgba(103,38,180,.42) !important;
}
[data-name-effect="coral"] {
  --vip-glow: rgba(255,112,118,.9);
  background-size: 280% 100% !important;
  animation: vipCoralTide 6.4s ease-in-out infinite !important;
  text-shadow: 0 0 6px rgba(255,172,143,.56), 0 0 15px rgba(255,94,125,.36) !important;
}
[data-name-effect="nebula"] {
  background-size: 340% 100% !important;
  letter-spacing: .012em;
  text-shadow: 0 0 5px rgba(255,255,255,.65), 0 0 14px rgba(165,120,255,.82), 0 0 26px rgba(34,211,238,.34) !important;
}
[data-name-effect="emerald-storm"] {
  background-size: 300% 100% !important;
  text-shadow: 0 0 4px rgba(210,255,244,.68), 0 0 13px rgba(24,220,174,.74) !important;
}
[data-name-effect="sunburst"] {
  background-size: 230% 100% !important;
  text-shadow: 0 0 4px rgba(255,255,218,.92), 0 0 12px rgba(255,182,60,.9), 0 0 25px rgba(255,91,0,.42) !important;
}
[data-name-effect="moonlight"] {
  background-size: 230% 100% !important;
  text-shadow: 0 0 6px rgba(255,255,255,.74), 0 0 15px rgba(160,190,255,.52) !important;
}
[data-name-effect="cyberpunk"] {
  background-size: 220% 100% !important;
  letter-spacing: .018em;
  text-shadow: -1px 0 rgba(0,245,255,.68), 1px 0 rgba(255,0,184,.68), 0 0 10px rgba(125,255,0,.25) !important;
}
[data-name-effect="obsidian-void"] {
  background-size: 260% 100% !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.12), 0 0 13px rgba(80,93,126,.45) !important;
}

/* Ghostface uses actual four-point star glyphs instead of radial-gradient dots. */
[data-name-effect="ghostface"] {
  overflow: visible;
  padding: 0 .12em;
  letter-spacing: .012em;
  background-size: 260% 100% !important;
  /* Restore the original smooth Ghostface name flow; only the particles are new. */
  animation: vip-name-flow 6.2s linear infinite, ghostfacePulse 3.1s ease-in-out infinite alternate !important;
  text-shadow: 0 0 2px rgba(255,255,255,.52), 0 0 10px rgba(0,0,0,.4) !important;
}
[data-name-effect="ghostface"]::before,
[data-name-effect="ghostface"]::after {
  position: absolute;
  width: auto;
  height: auto;
  inset: auto;
  background: none;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
}
[data-name-effect="ghostface"]::before {
  content: "✦";
  left: -.34em;
  top: .42em;
  font-size: .31em;
  text-shadow: .52em -.46em 0 rgba(225,225,232,.72);
  filter: drop-shadow(0 0 2px rgba(255,255,255,.72));
  animation: vipGhostScatterA 3.73s linear infinite -.91s;
}
[data-name-effect="ghostface"]::after {
  content: "✧";
  right: -.32em;
  top: .34em;
  font-size: .34em;
  text-shadow: -.58em -.33em 0 rgba(255,255,255,.7);
  filter: drop-shadow(0 0 2px rgba(255,255,255,.76));
  animation: vipGhostScatterB 4.87s linear infinite -2.14s;
}

/* New premium name effects. */
[data-name-effect="crimson-eclipse"],
[data-name-effect="angelic"],
[data-name-effect="radioactive"],
[data-name-effect="frostbite"],
[data-name-effect="royal-relic"],
[data-name-effect="phantom"],
[data-name-effect="dragonfire"],
[data-name-effect="oceanic"] {
  position: relative;
  display: inline-block;
  background-size: 320% 100% !important;
}
[data-name-effect="crimson-eclipse"] {
  --vip-glow: rgba(255,42,78,.92);
  animation: vip-name-flow 5.8s linear infinite, vipEclipsePulse 3.4s ease-in-out infinite !important;
  text-shadow: 0 0 4px rgba(255,175,185,.66), 0 0 13px rgba(220,0,38,.76), 0 0 24px rgba(0,0,0,.62) !important;
}
[data-name-effect="crimson-eclipse"] {
  isolation: isolate;
}
[data-name-effect="crimson-eclipse"]::after {
  content: "";
  position: absolute;
  inset: -.16em -.28em;
  border-radius: 48%;
  /* No detached orbiting dot: the eclipse now breathes as a shadowed halo around the name. */
  background:
    radial-gradient(ellipse at 52% 50%, rgba(5,5,9,.54) 0 31%, rgba(255,28,66,.18) 48%, transparent 72%);
  filter: blur(5px);
  transform: scaleX(.9) scaleY(.72);
  animation: vipEclipseHalo 4.6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
[data-name-effect="angelic"] {
  --vip-glow: rgba(145,220,255,.95);
  animation: vip-name-flow 7.2s linear infinite, vipAngelicLift 3.8s ease-in-out infinite !important;
  text-shadow: 0 0 4px rgba(255,255,255,.98), 0 0 13px rgba(154,223,255,.72), 0 0 23px rgba(255,224,132,.34) !important;
}
[data-name-effect="angelic"]::before,
[data-name-effect="angelic"]::after {
  position: absolute;
  top: 50%;
  font-size: .56em;
  color: #fff3bd;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 5px rgba(169,225,255,.85));
  animation: vipWingBeat 2.6s ease-in-out infinite;
}
[data-name-effect="angelic"]::before { content: "‹"; left: -.68em; }
[data-name-effect="angelic"]::after { content: "›"; right: -.68em; animation-delay: .12s; }
[data-name-effect="radioactive"] {
  --vip-glow: rgba(145,255,0,.95);
  animation: vip-name-flow 2.8s linear infinite, vipRadioJitter 1.35s steps(2,end) infinite !important;
  text-shadow: -1px 0 rgba(184,255,0,.65), 1px 0 rgba(45,255,0,.42), 0 0 14px rgba(132,255,0,.72) !important;
}
[data-name-effect="radioactive"]::after {
  content: "☢";
  position: absolute;
  right: -.92em;
  top: 48%;
  transform: translateY(-50%);
  color: #b7ff00;
  font-size: .68em;
  text-shadow: 0 0 7px rgba(157,255,0,.9);
  animation: vipRadioSpin 5s linear infinite;
}
[data-name-effect="frostbite"] {
  --vip-glow: rgba(61,217,255,.96);
  animation: vip-name-flow 4.6s linear infinite, vipFrostCrackle 2.5s steps(6,end) infinite !important;
  text-shadow: 0 -1px 0 #fff, 0 0 9px rgba(104,230,255,.86), 0 0 20px rgba(37,99,235,.44) !important;
}
[data-name-effect="frostbite"]::after {
  content: "❄";
  position: absolute;
  right: -.86em;
  top: 45%;
  color: #eaffff;
  font-size: .62em;
  text-shadow: 0 0 7px rgba(56,217,255,.9);
  animation: vipSnowTurn 5.5s linear infinite;
}
[data-name-effect="royal-relic"] {
  --vip-glow: rgba(244,201,93,.94);
  animation: vip-name-flow 5.5s linear infinite, vipRoyalPulse 3s ease-in-out infinite !important;
  text-shadow: 0 0 4px rgba(255,247,205,.9), 0 0 12px rgba(244,201,93,.68), 0 0 22px rgba(109,40,217,.48) !important;
}
[data-name-effect="royal-relic"]::before {
  content: "◆";
  position: absolute;
  left: -.85em;
  top: 48%;
  transform: translateY(-50%) rotate(45deg);
  color: #f4c95d;
  font-size: .48em;
  text-shadow: 0 0 6px rgba(216,180,254,.8);
  animation: vipRelicTurn 4.8s ease-in-out infinite;
}
[data-name-effect="phantom"] {
  --vip-glow: rgba(170,198,228,.82);
  animation: vipPhantomDrift 6.8s ease-in-out infinite !important;
  text-shadow: 0 0 5px rgba(240,248,255,.66), 0 0 16px rgba(116,145,181,.48) !important;
}
[data-name-effect="phantom"]::after {
  content: "";
  position: absolute;
  inset: -.18em -.35em;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(220,236,255,.17), transparent);
  filter: blur(4px);
  animation: vipPhantomMist 4.2s ease-in-out infinite;
  pointer-events: none;
}
[data-name-effect="dragonfire"] {
  --vip-glow: rgba(255,92,0,.98);
  animation: vip-name-flow 3.2s linear infinite, vipDragonFlicker 1.45s ease-in-out infinite alternate !important;
  text-shadow: 0 -1px 0 rgba(255,245,190,.9), 0 0 9px rgba(255,127,0,.94), 0 0 22px rgba(180,0,0,.6) !important;
}
[data-name-effect="dragonfire"]::before,
[data-name-effect="dragonfire"]::after {
  content: "";
  position: absolute;
  width: .12em;
  height: .12em;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
}
[data-name-effect="dragonfire"]::before {
  left: 24%;
  top: 72%;
  background: #ffd36a;
  box-shadow: .42em .08em 0 -.02em #ff7200;
  filter: drop-shadow(0 0 2px rgba(255,95,0,.88));
  animation: vipEmberScatterA 2.93s linear infinite -.64s;
}
[data-name-effect="dragonfire"]::after {
  right: 13%;
  top: 66%;
  background: #ff7a00;
  box-shadow: -.36em .12em 0 -.025em #ffcf4a;
  filter: drop-shadow(0 0 2px rgba(255,52,0,.9));
  animation: vipEmberScatterB 3.71s linear infinite -1.82s;
}
[data-name-effect="oceanic"] {
  --vip-glow: rgba(34,211,238,.92);
  overflow: visible;
  background-size: 250% 100% !important;
  transform-origin: 50% 75%;
  animation: vipOceanWave 5.2s ease-in-out infinite !important;
  text-shadow: 0 0 5px rgba(208,250,255,.76), 0 0 14px rgba(34,211,238,.65), 0 0 24px rgba(3,105,161,.36) !important;
}
/* A continuous wave under the name, not a detached ocean particle. */
[data-name-effect="oceanic"]::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -.13em;
  height: .18em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='%2367e8f9' stroke-width='1.35' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: 1.5em .5em;
  filter: drop-shadow(0 0 2px rgba(34,211,238,.66));
  opacity: .72;
  pointer-events: none;
  animation: vipOceanUndertow 1.9s linear infinite;
}

@keyframes vipHoloScan { 0%,100% { filter: hue-rotate(0deg) brightness(1); } 50% { filter: hue-rotate(18deg) brightness(1.18); } }
@keyframes vipMetalSweep { 0%,100% { background-position: 0% 50%; filter: brightness(.96); } 50% { background-position: 100% 50%; filter: brightness(1.22); } }
@keyframes vipRoseBloom { 0%,100% { filter: saturate(1) brightness(1); } 50% { filter: saturate(1.28) brightness(1.1); } }
@keyframes vipOnyxSheen { 0%,100% { background-position: 0% 50%; filter: contrast(1.02) brightness(.94); } 50% { background-position: 100% 50%; filter: contrast(1.17) brightness(1.1); } }
@keyframes vipIceGlint { 0%,100% { filter: brightness(1) saturate(1); } 46% { filter: brightness(1.18) saturate(1.2); } 50% { filter: brightness(1.42) saturate(.8); } 54% { filter: brightness(1.08) saturate(1.2); } }
@keyframes vipGemPulse { 0%,100% { filter: saturate(1) brightness(1); } 50% { filter: saturate(1.35) brightness(1.16) drop-shadow(0 0 5px rgba(181,109,255,.5)); } }
@keyframes vipCoralTide { 0%,100% { background-position: 0% 50%; filter: saturate(1); transform: translateY(0); } 50% { background-position: 100% 50%; filter: saturate(1.22); transform: translateY(-.35px); } }
@keyframes vipGhostSweep { 0%,100% { background-position: 0% 50%; filter: contrast(1.02); } 50% { background-position: 100% 50%; filter: contrast(1.22) brightness(1.08); } }
@keyframes vipGhostScatterA {
  0% { transform: translate(.04em,.18em) scale(.42) rotate(-12deg); opacity: 0; }
  11% { opacity: .78; }
  29% { transform: translate(-.09em,-.13em) scale(.68) rotate(17deg); opacity: .62; }
  47% { transform: translate(.08em,-.29em) scale(.54) rotate(39deg); opacity: .9; }
  68% { transform: translate(-.13em,-.48em) scale(.72) rotate(61deg); opacity: .46; }
  83% { transform: translate(.03em,-.59em) scale(.48) rotate(78deg); opacity: .7; }
  100% { transform: translate(.15em,-.78em) scale(.28) rotate(103deg); opacity: 0; }
}
@keyframes vipGhostScatterB {
  0% { transform: translate(-.03em,.2em) scale(.38) rotate(8deg); opacity: 0; }
  17% { opacity: .7; }
  36% { transform: translate(.13em,-.09em) scale(.62) rotate(-21deg); opacity: .92; }
  58% { transform: translate(-.06em,-.34em) scale(.48) rotate(-43deg); opacity: .5; }
  74% { transform: translate(.12em,-.47em) scale(.67) rotate(-66deg); opacity: .82; }
  100% { transform: translate(-.1em,-.73em) scale(.25) rotate(-102deg); opacity: 0; }
}
@keyframes vipEclipsePulse { 0%,100% { filter: brightness(.92) saturate(1); } 50% { filter: brightness(1.18) saturate(1.4); } }
@keyframes vipEclipseHalo {
  0%,100% { transform: translateX(-2%) scaleX(.88) scaleY(.7); opacity: .42; }
  45% { transform: translateX(1%) scaleX(1.03) scaleY(.82); opacity: .82; }
  70% { transform: translateX(3%) scaleX(.96) scaleY(.76); opacity: .58; }
}
@keyframes vipAngelicLift { 0%,100% { filter: brightness(1); transform: translateY(0); } 50% { filter: brightness(1.18); transform: translateY(-.45px); } }
@keyframes vipWingBeat { 0%,100% { opacity: .48; transform: translateY(-50%) scaleX(.72); } 50% { opacity: 1; transform: translateY(-50%) scaleX(1.08); } }
@keyframes vipRadioJitter { 0%,100% { transform: translate(0); filter: contrast(1.05); } 47% { transform: translate(.3px,-.2px); filter: contrast(1.3) brightness(1.15); } 52% { transform: translate(-.4px,.2px); } }
@keyframes vipRadioSpin { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes vipFrostCrackle { 0%,100% { filter: brightness(1); } 48% { filter: brightness(1.12); } 50% { filter: brightness(1.42); } 54% { filter: brightness(1.05); } }
@keyframes vipSnowTurn { to { transform: rotate(360deg); } }
@keyframes vipRoyalPulse { 0%,100% { filter: saturate(1) brightness(1); } 50% { filter: saturate(1.18) brightness(1.14); } }
@keyframes vipRelicTurn { 0%,100% { transform: translateY(-50%) rotate(45deg) scale(.82); } 50% { transform: translateY(-50%) rotate(225deg) scale(1.08); } }
@keyframes vipPhantomDrift { 0%,100% { background-position: 0% 50%; opacity: .88; filter: blur(0); } 50% { background-position: 100% 50%; opacity: 1; filter: blur(.15px) brightness(1.12); } }
@keyframes vipPhantomMist { 0%,100% { transform: translateX(-9%) scaleX(.88); opacity: .2; } 50% { transform: translateX(9%) scaleX(1.08); opacity: .65; } }
@keyframes vipDragonFlicker { 0% { filter: saturate(1) brightness(1); } 45% { filter: saturate(1.45) brightness(1.18); } 70% { filter: saturate(1.2) brightness(1.05); } 100% { filter: saturate(1.6) brightness(1.22); } }
@keyframes vipEmberScatterA {
  0% { transform: translate(.02em,.16em) scale(.45); opacity: 0; }
  12% { opacity: .9; }
  31% { transform: translate(-.11em,-.08em) scale(.75); opacity: .7; }
  49% { transform: translate(.08em,-.28em) scale(.52); opacity: 1; }
  73% { transform: translate(-.15em,-.47em) scale(.66); opacity: .52; }
  100% { transform: translate(.1em,-.72em) scale(.2); opacity: 0; }
}
@keyframes vipEmberScatterB {
  0% { transform: translate(-.02em,.15em) scale(.38); opacity: 0; }
  19% { opacity: .82; }
  37% { transform: translate(.13em,-.12em) scale(.68); opacity: .96; }
  61% { transform: translate(-.07em,-.35em) scale(.46); opacity: .48; }
  78% { transform: translate(.11em,-.5em) scale(.58); opacity: .78; }
  100% { transform: translate(-.12em,-.76em) scale(.18); opacity: 0; }
}
@keyframes vipOceanWave {
  0%,100% { background-position: 0% 50%; transform: translateY(0) skewX(0deg); filter: saturate(1); }
  20% { background-position: 24% 50%; transform: translateY(-.45px) skewX(-.55deg); filter: saturate(1.12); }
  42% { background-position: 49% 50%; transform: translateY(.28px) skewX(.42deg); filter: saturate(1.25) brightness(1.08); }
  64% { background-position: 74% 50%; transform: translateY(-.38px) skewX(-.35deg); filter: saturate(1.18); }
  82% { background-position: 92% 50%; transform: translateY(.2px) skewX(.25deg); filter: saturate(1.08); }
}
@keyframes vipOceanUndertow { to { background-position: 1.5em 50%; } }

/* Existing border styles receive dedicated structures instead of generic rings. */
.vip-avatar-frame[data-avatar-border="vip-holographic"]::before {
  inset: -6px;
  background: conic-gradient(from 0deg, #79f7ff22, #ff8dffcc, #fff36dcc, #79f7ffcc, #ffffff22, #79f7ff22);
  filter: blur(7px) saturate(1.35);
  animation: vipBorderSpin 4.2s linear infinite;
}
.vip-avatar-frame[data-avatar-border="vip-holographic"]::after {
  border: 1px solid rgba(255,255,255,.52);
  box-shadow: inset 0 0 14px rgba(121,247,255,.28);
  animation: vipHoloFrame 2.6s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-platinum"]::before {
  inset: -5px;
  background: linear-gradient(115deg, transparent 10%, rgba(255,255,255,.9) 42%, rgba(151,170,196,.45) 50%, transparent 62%);
  filter: blur(6px);
  animation: vipFrameSweep 4.8s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-platinum"]::after {
  border: 1px solid rgba(235,244,255,.72);
  box-shadow: inset 0 0 0 1px rgba(116,132,156,.34), inset 0 0 16px rgba(255,255,255,.24);
}
.vip-avatar-frame[data-avatar-border="vip-rose-gold"]::before {
  inset: -7px;
  background: radial-gradient(circle at 25% 22%, rgba(255,225,215,.72), transparent 26%), radial-gradient(circle at 75% 76%, rgba(243,109,139,.62), transparent 30%);
  filter: blur(9px);
  animation: vipRoseFrame 3.6s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-rose-gold"]::after {
  border: 1px solid rgba(255,205,195,.46);
  box-shadow: inset 0 0 18px rgba(243,109,139,.25);
}
.vip-avatar-frame[data-avatar-border="vip-onyx"]::before {
  inset: -6px;
  background: conic-gradient(from 35deg, transparent, rgba(148,163,184,.48), rgba(0,0,0,.05), transparent 48%, rgba(255,255,255,.2), transparent 72%);
  filter: blur(6px);
  animation: vipBorderSpin 10s linear infinite;
}
.vip-avatar-frame[data-avatar-border="vip-onyx"]::after {
  border: 1px solid rgba(174,186,205,.25);
  box-shadow: inset 0 0 22px rgba(0,0,0,.62), inset 0 0 0 2px rgba(255,255,255,.05);
}
.vip-avatar-frame[data-avatar-border="vip-ice"]::before {
  inset: -8px;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(189,252,255,.88) 9% 13%, transparent 14% 28%, rgba(71,246,255,.75) 29% 34%, transparent 35% 50%, rgba(255,255,255,.82) 51% 55%, transparent 56% 76%, rgba(80,180,255,.72) 77% 82%, transparent 83%);
  filter: blur(7px);
  animation: vipIceFrame 5.6s steps(8,end) infinite;
}
.vip-avatar-frame[data-avatar-border="vip-ice"]::after {
  border: 1px solid rgba(210,252,255,.64);
  box-shadow: inset 0 0 18px rgba(71,246,255,.28);
}
.vip-avatar-frame[data-avatar-border="vip-amethyst"]::before {
  inset: -7px;
  background: conic-gradient(from 0deg, rgba(255,109,242,.08), rgba(155,92,255,.88), rgba(232,182,255,.2), rgba(255,109,242,.7), rgba(155,92,255,.12));
  filter: blur(8px);
  animation: vipBorderSpin 6.8s linear infinite;
}
.vip-avatar-frame[data-avatar-border="vip-amethyst"]::after {
  border: 1px solid rgba(232,182,255,.42);
  box-shadow: inset 0 0 19px rgba(155,92,255,.34);
  clip-path: polygon(7% 0,93% 0,100% 7%,100% 93%,93% 100%,7% 100%,0 93%,0 7%);
}
.vip-avatar-frame[data-avatar-border="vip-coral"]::before {
  inset: -7px;
  background: radial-gradient(ellipse at 15% 50%, rgba(255,107,107,.62), transparent 32%), radial-gradient(ellipse at 82% 50%, rgba(255,209,102,.55), transparent 32%);
  filter: blur(9px);
  animation: vipCoralFrame 4.4s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-coral"]::after {
  border: 1px solid rgba(255,143,163,.42);
  box-shadow: inset 0 0 16px rgba(255,107,107,.24);
}
.vip-avatar-frame[data-avatar-border="vip-neon-red"]::before {
  inset: -6px;
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(255,0,0,.95) 24% 31%, transparent 35% 65%, rgba(255,105,105,.9) 70% 77%, transparent 82%);
  filter: blur(7px);
  animation: vipBorderSpin 3.6s linear infinite;
}
.vip-avatar-frame[data-avatar-border="vip-neon-red"]::after { border: 1px solid rgba(255,60,60,.52); box-shadow: inset 0 0 19px rgba(255,0,0,.3); }
.vip-avatar-frame[data-avatar-border="vip-nebula"]::after {
  border: 1px solid rgba(220,180,255,.34);
  box-shadow: inset 0 0 18px rgba(124,58,237,.3), 0 0 9px rgba(103,232,249,.2);
}
.vip-avatar-frame[data-avatar-border="vip-emerald-storm"]::after {
  border: 1px solid rgba(153,246,228,.36);
  box-shadow: inset 0 0 16px rgba(15,118,110,.36);
}
.vip-avatar-frame[data-avatar-border="vip-blood-gold"]::after {
  border: 1px solid rgba(255,204,51,.5);
  box-shadow: inset 0 0 19px rgba(155,17,30,.42);
}

/* Ghostface frame: knife-like white slashes and mask, no floating dot field. */
.vip-avatar-frame[data-avatar-border="vip-ghostface"]::before {
  inset: -7px;
  opacity: .84;
  background:
    linear-gradient(128deg, transparent 0 18%, rgba(255,255,255,.9) 19% 21%, transparent 22% 47%, rgba(205,205,210,.62) 48% 50%, transparent 51%),
    conic-gradient(from 0deg, rgba(255,255,255,.08), rgba(0,0,0,.78), rgba(255,255,255,.42), rgba(0,0,0,.76), rgba(255,255,255,.08));
  filter: blur(5px) contrast(1.2);
  animation: vipGhostFrame 4.6s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-ghostface"]::after {
  animation: vipGhostMaskFloat 3.6s ease-in-out infinite;
}

/* New signature avatar borders. */
.vip-avatar-frame[data-avatar-border="vip-crimson-eclipse"] {
  background: linear-gradient(#161118,#161118) padding-box, linear-gradient(135deg,#ff334f,#210008,#050509,#e0002a,#ff6a72) border-box !important;
  animation-duration: 6.4s, 3.4s !important;
}
.vip-avatar-frame[data-avatar-border="vip-crimson-eclipse"]::before {
  inset: -10px;
  background: radial-gradient(circle, transparent 42%, rgba(255,0,45,.68) 46%, rgba(20,0,5,.74) 55%, transparent 69%);
  filter: blur(7px);
  animation: vipEclipseFrame 3.8s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-crimson-eclipse"]::after {
  border: 1px solid rgba(255,72,95,.38);
  box-shadow: inset 0 0 22px rgba(80,0,18,.65);
}
.vip-avatar-frame[data-avatar-border="vip-angelic"] {
  background: linear-gradient(#eefaff,#eefaff) padding-box, linear-gradient(135deg,#7ddcff,#fff,#ffe8a3,#fff,#9adfff) border-box !important;
}
.vip-avatar-frame[data-avatar-border="vip-angelic"]::before {
  inset: -10px;
  background: radial-gradient(ellipse, rgba(255,255,255,.18) 35%, rgba(125,220,255,.42) 54%, rgba(255,232,163,.35) 64%, transparent 72%);
  filter: blur(9px);
  animation: vipAngelicFrame 3.2s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-angelic"]::after {
  inset: -5px;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset 0 0 20px rgba(125,220,255,.25), 0 0 10px rgba(255,232,163,.2);
}
.vip-avatar-frame[data-avatar-border="vip-radioactive"] {
  background: linear-gradient(#131709,#131709) padding-box, repeating-linear-gradient(135deg,#b7ff00 0 8px,#1b2400 8px 15px,#66ff00 15px 22px,#101500 22px 29px) border-box !important;
  animation-duration: 2.4s, 1.6s !important;
}
.vip-avatar-frame[data-avatar-border="vip-radioactive"]::before {
  inset: -7px;
  background: radial-gradient(circle at 25% 30%, rgba(195,255,0,.8), transparent 21%), radial-gradient(circle at 75% 70%, rgba(63,255,0,.62), transparent 25%);
  filter: blur(9px);
  animation: vipRadioFrame 2.2s steps(3,end) infinite;
}
.vip-avatar-frame[data-avatar-border="vip-radioactive"]::after {
  border: 1px dashed rgba(190,255,0,.68);
  box-shadow: inset 0 0 18px rgba(110,255,0,.28);
  animation: vipRadioDash 6s linear infinite;
}
.vip-avatar-frame[data-avatar-border="vip-frostbite"] {
  background: linear-gradient(#102132,#102132) padding-box, linear-gradient(135deg,#eaffff,#38d9ff,#2563eb,#ffffff,#0ea5e9) border-box !important;
}
.vip-avatar-frame[data-avatar-border="vip-frostbite"]::before {
  inset: -9px;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(234,255,255,.92) 9% 12%, transparent 13% 29%, rgba(56,217,255,.78) 30% 35%, transparent 36% 54%, rgba(255,255,255,.84) 55% 59%, transparent 60% 78%, rgba(59,130,246,.72) 79% 84%, transparent 85%);
  clip-path: polygon(50% 0,58% 8%,72% 2%,76% 14%,94% 9%,91% 27%,100% 38%,91% 50%,100% 65%,86% 72%,91% 91%,72% 86%,62% 100%,50% 91%,36% 100%,29% 86%,8% 91%,14% 72%,0 63%,9% 50%,0 36%,13% 28%,8% 8%,28% 14%,39% 0);
  filter: blur(6px);
  animation: vipFrostFrame 4.8s steps(8,end) infinite;
}
.vip-avatar-frame[data-avatar-border="vip-frostbite"]::after { border: 1px solid rgba(222,255,255,.68); box-shadow: inset 0 0 20px rgba(56,217,255,.34); }
.vip-avatar-frame[data-avatar-border="vip-royal-relic"] {
  background: linear-gradient(#1a1029,#1a1029) padding-box, linear-gradient(135deg,#f4c95d,#6d28d9,#d8b4fe,#ffd76a,#4c1d95) border-box !important;
}
.vip-avatar-frame[data-avatar-border="vip-royal-relic"]::before {
  inset: -8px;
  background: conic-gradient(from 45deg, transparent, rgba(244,201,93,.86), transparent 24%, rgba(109,40,217,.74), transparent 50%, rgba(216,180,254,.7), transparent 74%, rgba(255,215,106,.8), transparent);
  filter: blur(7px);
  animation: vipBorderSpin 7.2s linear infinite;
}
.vip-avatar-frame[data-avatar-border="vip-royal-relic"]::after {
  inset: -3px;
  border: 1px solid rgba(244,201,93,.58);
  clip-path: polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%);
  box-shadow: inset 0 0 20px rgba(109,40,217,.38);
}
.vip-avatar-frame[data-avatar-border="vip-phantom"] {
  background: linear-gradient(#1d2532,#1d2532) padding-box, linear-gradient(135deg,#d8e7f7,#34445c,#f3f8ff,#5d6f8a,#b7c9df) border-box !important;
  animation-duration: 7.4s, 4.2s !important;
}
.vip-avatar-frame[data-avatar-border="vip-phantom"]::before {
  inset: -10px;
  background: radial-gradient(ellipse at 30% 30%, rgba(220,236,255,.42), transparent 34%), radial-gradient(ellipse at 70% 70%, rgba(93,111,138,.46), transparent 40%);
  filter: blur(12px);
  animation: vipPhantomFrame 5.4s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-phantom"]::after { border: 1px solid rgba(216,231,247,.31); box-shadow: inset 0 0 22px rgba(52,68,92,.58); }
.vip-avatar-frame[data-avatar-border="vip-dragonfire"] {
  background: linear-gradient(#2b0c05,#2b0c05) padding-box, linear-gradient(135deg,#fff0a8,#ff8a00,#b30000,#ff4d00,#ffcf4a) border-box !important;
  animation-duration: 3.2s, 1.8s !important;
}
.vip-avatar-frame[data-avatar-border="vip-dragonfire"]::before {
  inset: -9px;
  background: conic-gradient(from 0deg, transparent 0 12%, rgba(255,207,74,.85) 16%, rgba(255,77,0,.76) 28%, transparent 36% 54%, rgba(179,0,0,.78) 62%, rgba(255,138,0,.82) 76%, transparent 86%);
  filter: blur(8px);
  animation: vipDragonFrame 3.3s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-dragonfire"]::after { border: 1px solid rgba(255,196,73,.44); box-shadow: inset 0 0 22px rgba(179,0,0,.54); }
.vip-avatar-frame[data-avatar-border="vip-oceanic"] {
  background: linear-gradient(#082b3c,#082b3c) padding-box, linear-gradient(135deg,#bae6fd,#22d3ee,#0369a1,#2dd4bf,#0c4a6e,#22d3ee) border-box !important;
}
.vip-avatar-frame[data-avatar-border="vip-oceanic"]::before {
  inset: -8px;
  background: radial-gradient(ellipse at 25% 50%, rgba(34,211,238,.5), transparent 36%), radial-gradient(ellipse at 76% 50%, rgba(45,212,191,.46), transparent 38%);
  filter: blur(10px);
  animation: vipOceanFrame 4.6s ease-in-out infinite;
}
.vip-avatar-frame[data-avatar-border="vip-oceanic"]::after {
  border: 1px solid rgba(186,230,253,.38);
  box-shadow: inset 0 0 20px rgba(3,105,161,.42);
  animation: vipOceanRing 3.6s ease-in-out infinite;
}

@keyframes vipHoloFrame { 0%,100% { opacity: .45; filter: hue-rotate(0); } 50% { opacity: 1; filter: hue-rotate(28deg); } }
@keyframes vipFrameSweep { 0% { transform: translateX(-34%) skewX(-20deg); opacity: .2; } 50% { opacity: .9; } 100% { transform: translateX(34%) skewX(-20deg); opacity: .2; } }
@keyframes vipRoseFrame { 0%,100% { transform: scale(.96) rotate(-2deg); opacity: .42; } 50% { transform: scale(1.07) rotate(2deg); opacity: .78; } }
@keyframes vipIceFrame { 0%,100% { transform: rotate(0); opacity: .48; } 50% { transform: rotate(2deg); opacity: .92; } }
@keyframes vipCoralFrame { 0%,100% { transform: translateX(-3%) scale(.98); opacity: .46; } 50% { transform: translateX(3%) scale(1.05); opacity: .78; } }
@keyframes vipGhostFrame { 0%,100% { transform: rotate(-2deg) scale(.97); opacity: .5; } 50% { transform: rotate(2deg) scale(1.04); opacity: .94; } }
@keyframes vipGhostMaskFloat { 0%,100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(43deg) translateY(-2px); } }
@keyframes vipEclipseFrame { 0%,100% { transform: scale(.93); opacity: .42; } 50% { transform: scale(1.08); opacity: .94; } }
@keyframes vipAngelicFrame { 0%,100% { transform: scale(.96); opacity: .4; } 50% { transform: scale(1.09); opacity: .82; } }
@keyframes vipRadioFrame { 0%,100% { transform: scale(.96); opacity: .5; } 40% { transform: scale(1.06) translate(.5px,-.5px); opacity: .94; } 60% { transform: scale(1.02) translate(-.5px,.4px); } }
@keyframes vipRadioDash { to { transform: rotate(360deg); } }
@keyframes vipFrostFrame { 0%,100% { transform: rotate(0) scale(.98); opacity: .52; } 50% { transform: rotate(3deg) scale(1.04); opacity: .94; } }
@keyframes vipPhantomFrame { 0%,100% { transform: translate(-4%,-2%) scale(.96); opacity: .32; } 50% { transform: translate(4%,2%) scale(1.08); opacity: .72; } }
@keyframes vipDragonFrame { 0%,100% { transform: rotate(-3deg) scale(.97); opacity: .48; } 45% { transform: rotate(2deg) scale(1.07); opacity: .92; } 65% { transform: rotate(-1deg) scale(1.02); opacity: .68; } }
@keyframes vipOceanFrame { 0%,100% { transform: translateX(-4%) scale(.97); opacity: .42; } 50% { transform: translateX(4%) scale(1.07); opacity: .78; } }
@keyframes vipOceanRing { 0%,100% { transform: scale(.98); opacity: .38; } 50% { transform: scale(1.04); opacity: .72; } }

@media (prefers-reduced-motion: reduce) {
  [data-name-effect],
  [data-name-effect]::before,
  [data-name-effect]::after,
  .vip-avatar-frame,
  .vip-avatar-frame::before,
  .vip-avatar-frame::after {
    animation: none !important;
  }
}

/* Media insertion dialog and click-to-play BBCode previews */
.app-modal.media-insert-modal {
  width: min(720px, calc(100vw - 28px));
  border-radius: 12px;
  overflow: hidden;
}

.media-insert-modal .app-modal-head {
  background:
    linear-gradient(120deg, rgba(240, 109, 34, .18), transparent 42%),
    linear-gradient(180deg, #242932, #181c23);
}

.media-insert-modal .app-modal-body {
  gap: 16px;
}

.media-modal-intro {
  display: grid;
  gap: 12px;
}

.media-modal-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.media-approved-sites {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.media-approved-sites span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 850;
}

.media-modal-note {
  padding: 10px 12px;
  border-left: 3px solid var(--orange);
  background: rgba(240, 109, 34, .07);
  font-size: .88rem;
}

.external-link {
  color: #245f9f;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.external-link:hover {
  color: #d11111;
}

.bbcode-media {
  position: relative;
  display: block;
  width: min(680px, 100%);
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid #cfd5dc;
  border-radius: 12px;
  background: #10151c;
  color: #fff;
  box-shadow: 0 10px 24px rgba(14, 20, 28, .14);
  isolation: isolate;
}

.bbcode-media-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 0;
  padding: 0;
  background:
    radial-gradient(circle at 68% 26%, rgba(240, 109, 34, .3), transparent 26%),
    linear-gradient(135deg, #252c36, #0d1117 72%);
  color: #fff;
  text-align: left;
}

.bbcode-media-preview > img,
.bbcode-media-provider-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bbcode-media-preview > img {
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}

.bbcode-media-provider-art {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 70% 22%, rgba(255,255,255,.1), transparent 28%),
    linear-gradient(135deg, #394454, #121820 70%);
}

.bbcode-media-provider-art b {
  font-size: clamp(4rem, 13vw, 8rem);
  line-height: 1;
  opacity: .14;
}

.bbcode-media-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 7, 12, .05) 20%, rgba(3, 7, 12, .78) 100%);
}

.bbcode-media-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  padding-left: 4px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background: rgba(209, 17, 17, .92);
  color: #fff;
  font-size: 1.35rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.36);
  transform: translate(-50%, -50%);
  transition: transform .22s ease, background .22s ease;
}

.bbcode-media-overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: grid;
  gap: 2px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.65));
}

.bbcode-media-overlay strong {
  color: #fff !important;
  font-size: .96rem;
}

.bbcode-media-overlay small {
  color: rgba(255,255,255,.78);
  font-size: .78rem;
}

.bbcode-media-preview:hover > img {
  transform: scale(1.025);
  filter: saturate(1.08) contrast(1.03);
}

.bbcode-media-preview:hover .bbcode-media-play {
  background: #f06d22;
  transform: translate(-50%, -50%) scale(1.07);
}

.bbcode-media-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #171d25;
  color: #aeb8c5;
  font-size: .79rem;
}

.bbcode-media-footer a {
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
}

.bbcode-media-footer a:hover {
  color: #ffb27f !important;
}

.bbcode-media-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.bbcode-media.is-playing .bbcode-media-footer {
  border-top: 1px solid rgba(255,255,255,.08);
}

.bbcode-media.is-generic {
  background: var(--paper);
  color: var(--ink);
}

.bbcode-media-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  color: inherit !important;
  text-decoration: none;
}

.bbcode-media-link:hover {
  background: rgba(240, 109, 34, .06);
}

.bbcode-media-link-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--black-2), #3b4654);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
}

.bbcode-media-link-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.bbcode-media-link-copy strong {
  color: var(--ink) !important;
}

.bbcode-media-link-copy small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rich-editor .bbcode-media {
  max-width: 560px;
  margin: 10px 0;
  cursor: default;
}

.rich-editor .bbcode-media-preview,
.rich-editor .bbcode-media-footer a,
.rich-editor .bbcode-media-link {
  pointer-events: none;
}

.rich-editor .bbcode-media::after {
  content: "Media attachment";
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 5;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 6px;
  background: rgba(5, 9, 14, .68);
  color: rgba(255,255,255,.9);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Dark-mode repair: member directory, team cards, color-rank sidebar and polls */
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .members-main h1,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-side h2,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .poll-card h2,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .poll-choice-line b {
  color: #f3f7fb !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .member-card {
  border-color: #414a56;
  background: linear-gradient(180deg, #242b34, #20262e);
  color: #edf3f9;
  box-shadow: 0 1px 0 rgba(255,255,255,.025);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .member-card:hover {
  border-color: #647183;
  background: linear-gradient(180deg, #2b343f, #242c35);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .member-card span {
  color: #aeb9c7;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-side {
  border-color: #414a56;
  background: #20262e;
  color: #e9eff6;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-side h2 {
  border-color: #414a56;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .member-search-box,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .member-search-box span {
  color: #dce5ef;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .member-search-box input,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .side-input {
  border-color: #505b68;
  background: #171c22;
  color: #eef4fa;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .member-search-box input::placeholder,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .side-input::placeholder {
  color: #8996a5;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .color-rank-list {
  color: #dfe7f0;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .poll-card {
  border-color: #414a56;
  background: #20262e;
  color: #edf3f9;
  box-shadow: 0 1px 0 rgba(255,255,255,.025);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .poll-card header {
  border-color: #414a56;
  background: linear-gradient(180deg, #29313b, #242b34);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .poll-card header p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .poll-choice-line em {
  color: #aeb9c7;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .poll-option {
  padding: 10px;
  border: 1px solid #38414c;
  border-radius: 8px;
  background: #1a2027;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .poll-option:hover {
  border-color: #596575;
  background: #202832;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .poll-choice-line input {
  accent-color: #e33b2f;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .poll-bar {
  background: #0f141a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .poll-bar i {
  background: linear-gradient(90deg, #e33b2f, #f06d22);
  box-shadow: 0 0 10px rgba(240,109,34,.24);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .topic-anonymous-box {
  border-color: #40536c;
  background: #172231;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .topic-anonymous-box .anonymous-toggle { color: #e5edf7; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .topic-anonymous-box p { color: #aebed0; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .anonymous-staff-label {
  border-color: #8a6a2b;
  background: #33280f;
  color: #f3d889;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .topic-poll-box {
  border-color: #414a56;
  background: #1b2128;
  color: #e8eef5;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .topic-poll-box input,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .topic-poll-box textarea {
  border-color: #505b68;
  background: #14191f;
  color: #edf3f9;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .external-link {
  color: #91c4ff !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .external-link:hover {
  color: #ffad78 !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-media.is-generic {
  border-color: #414a56;
  background: #20262e;
  color: #edf3f9;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-media-link-copy strong {
  color: #edf3f9 !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-media-link-copy small {
  color: #aeb9c7;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .media-approved-sites span {
  border-color: #46515e;
  background: #1a2027;
  color: #edf3f9;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .media-modal-note {
  background: rgba(240, 109, 34, .1);
}

@media (max-width: 620px) {
  .bbcode-media {
    width: 100%;
    border-radius: 9px;
  }

  .bbcode-media-play {
    width: 52px;
    height: 52px;
  }

  .bbcode-media-overlay {
    left: 12px;
    right: 12px;
    bottom: 10px;
  }

  .bbcode-media-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .media-insert-modal .app-modal-body {
    padding: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bbcode-media-preview > img,
  .bbcode-media-play {
    transition: none;
  }
}


/* Expanded media providers and quote-safe media insertion */
.media-support-groups {
  display: grid;
  gap: 12px;
}

.media-support-groups section {
  display: grid;
  gap: 8px;
}

.media-support-groups section > b {
  color: var(--ink);
  font-size: .78rem;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.bbcode-media.media-layout-portrait {
  width: min(420px, 100%);
}

.bbcode-media.media-layout-portrait .bbcode-media-preview,
.bbcode-media.media-layout-portrait .bbcode-media-frame {
  aspect-ratio: 9 / 16;
  max-height: var(--media-player-height, 720px);
}

.bbcode-media.media-layout-square {
  width: min(520px, 100%);
}

.bbcode-media.media-layout-square .bbcode-media-preview,
.bbcode-media.media-layout-square .bbcode-media-frame {
  aspect-ratio: 1 / 1;
}

.bbcode-media.media-layout-audio .bbcode-media-preview {
  height: min(var(--media-player-height, 180px), 42vw);
  min-height: 118px;
  aspect-ratio: auto;
}

.bbcode-media.media-layout-audio .bbcode-media-frame {
  height: var(--media-player-height, 180px);
  min-height: 92px;
  aspect-ratio: auto;
}

.bbcode-media.media-layout-social {
  width: min(550px, 100%);
}

.bbcode-media.media-layout-social .bbcode-media-preview,
.bbcode-media.media-layout-social .bbcode-media-frame {
  height: var(--media-player-height, 560px);
  max-height: 76vh;
  aspect-ratio: auto;
}

.bbcode-media-native {
  object-fit: contain;
  background: #05070a;
}

.bbcode-media-audio {
  width: 100%;
  padding: 28px 18px;
  background: linear-gradient(135deg, #171d25, #090d12);
}

.provider-youtube .bbcode-media-play { background: rgba(230, 20, 20, .94); }
.provider-twitch .bbcode-media-provider-art { background: linear-gradient(135deg, #9146ff, #29124d 74%); }
.provider-tiktok .bbcode-media-provider-art { background: radial-gradient(circle at 65% 25%, rgba(37,244,238,.42), transparent 28%), radial-gradient(circle at 28% 72%, rgba(254,44,85,.42), transparent 30%), #101014; }
.provider-instagram .bbcode-media-provider-art { background: radial-gradient(circle at 72% 72%, #ffd36a 0 9%, transparent 31%), linear-gradient(135deg, #5b23c8, #d62976 52%, #f58529); }
.provider-x .bbcode-media-provider-art { background: linear-gradient(135deg, #181818, #000); }
.provider-facebook .bbcode-media-provider-art { background: linear-gradient(135deg, #1877f2, #073b83); }
.provider-spotify .bbcode-media-provider-art { background: radial-gradient(circle at 75% 24%, rgba(255,255,255,.11), transparent 24%), linear-gradient(135deg, #1ed760, #082b17 72%); }
.provider-soundcloud .bbcode-media-provider-art { background: linear-gradient(135deg, #ff7a00, #9d2600 72%); }
.provider-apple-music .bbcode-media-provider-art { background: linear-gradient(135deg, #fa2d48, #751224 75%); }
.provider-giphy .bbcode-media-provider-art,
.provider-tenor .bbcode-media-provider-art { background: linear-gradient(135deg, #13e5bf, #5b4bff 48%, #fe4a8b); }
.provider-loom .bbcode-media-provider-art { background: radial-gradient(circle at 50% 50%, #625df5 0 18%, transparent 19%), repeating-conic-gradient(from 0deg, #625df5 0 7deg, #efeefe 7deg 14deg); }
.provider-google-drive .bbcode-media-provider-art { background: linear-gradient(135deg, #0f9d58, #4285f4 52%, #f4b400); }
.provider-wistia .bbcode-media-provider-art { background: linear-gradient(135deg, #1e71e7, #0d2550); }
.provider-direct-audio .bbcode-media-provider-art { background: linear-gradient(135deg, #f06d22, #3f1720 72%); }

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .media-support-groups section > b {
  color: #eef4fa;
}

@media (max-width: 620px) {
  .bbcode-media.media-layout-audio .bbcode-media-preview {
    height: max(118px, min(var(--media-player-height, 180px), 46vw));
  }

  .bbcode-media.media-layout-social .bbcode-media-preview,
  .bbcode-media.media-layout-social .bbcode-media-frame {
    height: min(var(--media-player-height, 560px), 72vh);
  }
}

/* Crawlable public-route preview. The client app replaces this content after loading. */
.seo-prerender {
  max-width: 980px;
  margin: 18px auto;
  padding: 20px 22px;
  border: 1px solid var(--border-color, #c8cdd3);
  background: var(--panel-bg, #fff);
  color: var(--text-color, #20252b);
  line-height: 1.6;
}
.seo-prerender h1,
.seo-prerender h2 { margin-top: 0; }
.seo-prerender h2 { margin-top: 22px; }
.seo-prerender ul { padding-left: 22px; }
.seo-prerender li + li { margin-top: 6px; }
.seo-prerender a { color: var(--link-color, #175fa8); }
.seo-prerender article {
  padding: 15px 0;
  border-top: 1px solid var(--border-color, #d7dbe0);
}
.seo-prerender article:first-of-type { border-top: 0; }
.seo-prerender .seo-meta { opacity: .72; font-size: .9rem; }
@media (max-width: 700px) {
  .seo-prerender { margin: 10px; padding: 15px; }
}


/* Aesthetic Inquiries, accepted solutions, and collaborative Report Center */
.forum-row-child { background: #edf4ef; }
.forum-row-child .forum-copy { padding-left: 18px; }
.subforum-hook { color: #168b31; margin-right: 7px; font-weight: 900; }
.solution-board-label { display: inline-block; margin-left: 8px; padding: 2px 6px; border: 1px solid #168b31; background: #e8f7eb; color: #0d6e24; font-size: 10px; line-height: 1.2; vertical-align: 2px; }
.solution-board-status { border-color: #147d2b !important; box-shadow: inset 0 0 0 2px #d9f3df; }
.thread-solved-check { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; background: #168f31; color: #fff; font-size: 11px; font-weight: 900; vertical-align: 1px; box-shadow: 0 0 0 1px #0e6521; }
.solution-summary { margin: 12px 0; border: 1px solid #117a29; background: #f6fff7; }
.solution-summary > header { min-height: 30px; display: flex; align-items: center; gap: 8px; padding: 5px 9px; background: linear-gradient(#1ca43c,#118129); color: #fff; border-bottom: 1px solid #0c671e; }
.solution-summary > header strong { font-size: 14px; }
.solution-summary > header span:last-child { margin-left: auto; font-size: 11px; }
.solution-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #14842e; font-weight: 900; }
.solution-summary article { padding: 10px; }
.solution-author-mini { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.solution-author-mini > div { display: grid; gap: 2px; }
.solution-author-mini small { color: #68717b; }
.solution-avatar { width: 42px; height: 42px; object-fit: cover; border: 1px solid #7e8994; }
.solution-body-preview { max-height: 190px; overflow: hidden; margin: 8px 0 10px; padding: 9px 10px; border-left: 3px solid #1b9937; background: #fff; position: relative; }
.solution-body-preview::after { content: ""; position: absolute; inset: auto 0 0; height: 34px; background: linear-gradient(transparent,#fff); pointer-events: none; }
.xf-post-solution { border-color: #168f31 !important; box-shadow: 0 0 0 1px rgba(22,143,49,.2); }
.accepted-solution-banner { grid-column: 1 / -1; background: linear-gradient(#1ca43c,#118129); color: #fff; padding: 4px 9px; font-weight: 800; border-bottom: 1px solid #0d6f22; }
.accepted-solution-banner span { margin-right: 5px; }
.solution-mark-button { border-color: #168f31 !important; color: #0f7427 !important; }
.solution-mark-button.is-selected { background: #168f31 !important; color: #fff !important; }

.moderator-report-link { margin-top: 14px; padding: 14px; border: 1px solid #7c8793; background: #f4f5f7; }
.moderator-report-link p { margin: 6px 0 12px; }
.report-center { border: 1px solid #7d8792; background: #e7e9ec; }
.report-center-head { display: flex; justify-content: space-between; gap: 20px; padding: 16px; border-bottom: 1px solid #7d8792; background: linear-gradient(#fafafa,#dfe2e6); }
.report-center-head h1 { margin: 0 0 4px; }
.report-center-head p { margin: 0; color: #56606b; }
.report-center-stats { display: flex; align-items: stretch; gap: 6px; }
.report-center-stats span { min-width: 86px; padding: 8px; text-align: center; border: 1px solid #8d969f; background: #fff; font-size: 11px; }
.report-center-stats b { display: block; font-size: 18px; color: #bd1118; }
.report-filter-row { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid #8a939d; background: #d5d8dc; overflow-x: auto; }
.report-filter-row button { white-space: nowrap; }
.report-filter-row button.is-active { background: #3c4652; color: #fff; }
.report-case-list { display: grid; gap: 10px; padding: 10px; }
.report-case { border: 1px solid #7f8994; background: #f8f8f9; }
.report-case[hidden] { display: none; }
.report-case > header { display: flex; justify-content: space-between; gap: 10px; padding: 7px 9px; border-bottom: 1px solid #9199a2; background: #dfe2e5; }
.report-case > header > div { display: flex; align-items: center; gap: 7px; }
.report-case > header time, .report-case > header small { color: #606a75; font-size: 11px; }
.report-status { padding: 2px 6px; border: 1px solid currentColor; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.status-open { color: #ae151b; background: #fff0f0; }
.status-in-review { color: #8b5b00; background: #fff6d8; }
.status-resolved { color: #13722a; background: #e7f7ea; }
.status-dismissed { color: #626b75; background: #eceeef; }
/* Dark-theme variants for report-center status badges. */
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .status-open { color: #ff9aa0; background: #3a1318; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .status-in-review { color: #ffd980; background: #3a2d10; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .status-resolved { color: #9be3a8; background: #15301c; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .status-dismissed { color: #c4cad2; background: #2b3038; }
:root[data-theme="cutesy"] .status-open { color: #b3124b; background: #ffe1ec; }
:root[data-theme="cutesy"] .status-in-review { color: #8a5a14; background: #fff0d0; }
:root[data-theme="cutesy"] .status-resolved { color: #1a6a3b; background: #dcf2e2; }
:root[data-theme="cutesy"] .status-dismissed { color: #7d4a64; background: #f1e3ea; }
.report-case-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.75fr); }
.report-case-main { padding: 12px; border-right: 1px solid #98a0a9; }
.report-case-main h2 { margin: 0 0 5px; font-size: 13px; }
.report-reason { margin: 0 0 10px; font-size: 14px; }
.reported-content { margin: 10px 0; }
.reported-content blockquote { margin: 5px 0 0; padding: 9px; border: 1px solid #a8afb6; border-left: 4px solid #b3161c; background: #fff; white-space: pre-wrap; max-height: 180px; overflow: auto; }
.report-people { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin: 10px 0; }
.report-people > div { padding: 6px 8px; border: 1px solid #a0a8b0; background: #eceef0; }
.report-people span { display: block; color: #68717b; font-size: 10px; text-transform: uppercase; }
.report-case-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.report-collab { padding: 12px; background: #eef0f2; }
.report-collab > form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 5px; margin-bottom: 8px; }
.report-collab label { display: grid; gap: 3px; font-size: 11px; font-weight: 700; }
.report-notes { border-top: 1px solid #9fa7af; padding-top: 8px; }
.report-notes h3 { margin: 0 0 7px; font-size: 13px; }
.report-notes > div { display: grid; gap: 5px; max-height: 230px; overflow: auto; }
.report-notes p { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 0; padding: 7px; border: 1px solid #adb4bb; background: #fff; white-space: pre-wrap; }
.report-notes p small { color: #68717b; }
.report-notes p:not(:has(b)) { grid-template-columns: 1fr; }
.report-notes p { font-size: 12px; }
.report-notes p b, .report-notes p small { font-size: 10px; }
.report-notes form { margin-top: 7px; display: grid; gap: 5px; }
.empty-note { color: #68717b; font-style: italic; }

/* Report-center hardcoded surfaces — theme-aware so the panel doesn't stay light in dark/cutesy modes. */
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-case,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-case > header,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .reported-content blockquote,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-people > div,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-collab,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-notes p {
  background: var(--row-alt);
  border-color: var(--line);
  color: var(--ink);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-case > header { background: var(--row); }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-collab { background: var(--row); }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-case-main { border-right-color: var(--line); }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-case > header time,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-case > header small,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-people span,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-notes p small,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .empty-note { color: var(--muted); }
:root[data-theme="cutesy"] .report-case,
:root[data-theme="cutesy"] .report-case > header,
:root[data-theme="cutesy"] .reported-content blockquote,
:root[data-theme="cutesy"] .report-people > div,
:root[data-theme="cutesy"] .report-collab,
:root[data-theme="cutesy"] .report-notes p {
  background: var(--row-alt);
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme="cutesy"] .report-case > header { background: var(--row); }
:root[data-theme="cutesy"] .report-collab { background: var(--row); }

.bbcode-media.media-layout-image .bbcode-media-preview { height: auto; min-height: 160px; max-height: 620px; }
.bbcode-media.media-layout-image .bbcode-media-preview > img,
.bbcode-media-image { width: 100%; height: auto; max-height: 720px; object-fit: contain; background: #111; }

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .forum-row-child,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .moderator-report-link,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-center,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-case { background: #454950; color: #f3f4f5; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .solution-board-label { background: #1d4b29; color: #bff6ca; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .solution-summary { background: #32373d; color: #f5f6f7; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .solution-summary article,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .solution-body-preview { background: #41464d; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .solution-body-preview::after { background: linear-gradient(transparent,#41464d); }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-center-head,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-case > header { background: #383d43; color: #f5f5f5; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-center-head p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-case > header time,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-case > header small { color: #c2c8ce; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-center-stats span,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .reported-content blockquote,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-notes p { background: #50555d; color: #fff; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-filter-row { background: #343940; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-case-main { border-color: #727983; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-collab { background: #3d4249; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-people > div { background: #50555c; }

@media (max-width: 760px) {
  .forum-row-child .forum-copy { padding-left: 8px; }
  .solution-board-label { display: block; width: max-content; margin: 4px 0 0; }
  .solution-summary > header { align-items: flex-start; flex-wrap: wrap; }
  .solution-summary > header span:last-child { width: 100%; margin-left: 26px; }
  .accepted-solution-banner { grid-column: auto; }
  .report-center-head { display: grid; }
  .report-center-stats { display: grid; grid-template-columns: repeat(3,1fr); }
  .report-center-stats span { min-width: 0; }
  .report-case-grid { grid-template-columns: 1fr; }
  .report-case-main { border-right: 0; border-bottom: 1px solid #98a0a9; }
  .report-case > header { align-items: flex-start; }
  .report-case > header > div { flex-wrap: wrap; }
  .report-people { grid-template-columns: 1fr; }
  .report-case-actions > * { flex: 1 1 auto; text-align: center; }
}

.alert-kind-solution { background: #dcfce7; color: #126a28; }
.report-notes p > span { grid-column: 1 / -1; line-height: 1.35; }
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .alert-kind-solution { background: #1c4a29; color: #c7f8d2; }

/* Accepted-solution summary containment fix (desktop + mobile).
   avatarHtml() renders a div wrapper, so the child image must be sized explicitly. */
.solution-summary {
  overflow: hidden;
  min-width: 0;
}

.solution-summary article,
.solution-author-mini,
.solution-author-mini > div,
.solution-body-preview {
  min-width: 0;
  max-width: 100%;
}

.solution-author-mini {
  position: relative;
  z-index: 1;
}

.solution-avatar {
  box-sizing: border-box;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden !important;
  border-radius: 3px;
  background: #242831;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.solution-avatar img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  border-radius: inherit;
}

/* Mini solution cards should never let animated VIP frame layers or large media
   escape into the surrounding thread layout. */
.solution-avatar.vip-avatar-frame::before,
.solution-avatar.vip-avatar-frame::after {
  display: none !important;
}

.solution-body-preview {
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.solution-body-preview img,
.solution-body-preview video,
.solution-body-preview iframe,
.solution-body-preview .bbcode-media,
.solution-body-preview .bbcode-media-preview {
  max-width: 100% !important;
}

.solution-body-preview img,
.solution-body-preview video {
  height: auto !important;
}

@media (max-width: 760px) {
  .solution-summary {
    margin-left: 0;
    margin-right: 0;
  }

  .solution-summary article {
    padding: 9px;
  }

  .solution-avatar {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .solution-summary > header span:last-child {
    overflow-wrap: anywhere;
  }

  .solution-body-preview {
    max-height: 160px;
    margin-top: 7px;
  }
}

/* Ko-fi + BTC VIP checkout */
.vip-payment-intro {
  margin: 0 18px 18px;
  border: 1px solid #d7d9de;
  background: #fff;
}

.vip-payment-intro h2 {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid #d7d9de;
  font-size: 18px;
}

.vip-payment-intro p {
  margin: 0;
  padding: 12px 14px;
  color: var(--muted);
  line-height: 1.45;
}

.app-modal.vip-checkout-modal {
  width: min(620px, calc(100vw - 24px));
}

.vip-checkout-box {
  min-width: 0;
}

.vip-checkout-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #d7d9de;
  background: #f5f6f7;
}

.vip-checkout-summary strong {
  color: #1f252d;
  font-size: 17px;
}

.vip-checkout-summary span {
  color: #5f6a78;
  font-weight: 800;
}

.vip-payment-methods {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.vip-payment-method {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid #cbd0d6;
  background: #fff;
  color: #1f252d;
  text-align: left;
  cursor: pointer;
}

.vip-payment-method:hover,
.vip-payment-method:focus-visible {
  border-color: #ff5a1f;
  box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.12);
  outline: none;
}

.vip-payment-method.is-primary {
  border-color: #ff5a1f;
  background: #fff8f4;
}

.vip-payment-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #bcc2c9;
  background: #171b20;
  color: #fff;
  font-size: 19px;
  font-weight: 950;
}

.vip-payment-method strong,
.vip-payment-method small {
  display: block;
}

.vip-payment-method strong {
  margin-bottom: 3px;
  font-size: 15px;
}

.vip-payment-method small {
  color: #687381;
  font-size: 12px;
  line-height: 1.35;
}

.vip-payment-method b {
  padding: 4px 7px;
  background: #ff5a1f;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vip-checkout-note,
.kofi-warning {
  margin: 12px 0 0;
  color: #66717f;
  font-size: 12px;
  line-height: 1.45;
}

.kofi-handoff p,
.manual-btc-checkout p {
  line-height: 1.5;
}

.kofi-handoff ol {
  margin: 12px 0;
  padding-left: 23px;
  line-height: 1.55;
}

.kofi-claim-code {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 12px 0;
}

.kofi-claim-code code {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #cbd0d6;
  background: #f4f5f6;
  color: #15191f;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 900;
}

.kofi-claim-code button {
  border: 1px solid #20252c;
  background: #20252c;
  color: #fff;
  padding: 0 12px;
  font-weight: 900;
}

.kofi-warning {
  padding: 9px 10px;
  border-left: 3px solid #e56b24;
  background: #fff7ee;
  color: #6d421d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-payment-intro,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-checkout-summary,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-payment-method {
  background: #151a21;
  border-color: #46505c;
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-payment-intro h2 {
  border-color: #46505c;
  color: #f8fbff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-payment-intro p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-checkout-summary span,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-payment-method small,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-checkout-note {
  color: #bdc9d7;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-checkout-summary strong,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-payment-method strong {
  color: #fff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-payment-method.is-primary {
  background: #211b18;
  border-color: #ff7a3d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .kofi-claim-code code {
  background: #11161d;
  border-color: #46505c;
  color: #eef5ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .kofi-warning {
  background: #2a211a;
  color: #ffd3ad;
}

@media (max-width: 720px) {
  .vip-payment-intro {
    margin: 0 12px 13px;
  }

  .vip-payment-method {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 64px;
  }

  .vip-payment-method b {
    grid-column: 2;
    justify-self: start;
  }

  .vip-checkout-summary {
    display: grid;
    gap: 3px;
  }

  .kofi-claim-code {
    display: grid;
  }

  .kofi-claim-code button {
    min-height: 38px;
  }
}

/* VIP checkout spacing + limited one-month offer polish */
.upgrades-panel {
  overflow: hidden;
}

.upgrades-panel > h1 {
  margin: 0;
  padding: 18px 20px;
  line-height: 1.2;
}

.upgrades-panel .vip-payment-intro {
  margin: 14px 18px 12px;
}

.upgrades-panel .upgrade-list {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px;
}

.upgrades-panel .upgrade-row {
  position: relative;
  grid-template-columns: minmax(170px, 215px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin: 0;
  padding: 16px;
  border: 1px solid #d7d9de;
  background: #fff;
}

.upgrades-panel .upgrade-row.is-limited-offer {
  border-color: #ef6c28;
  box-shadow: inset 4px 0 0 #ef6c28;
  background: linear-gradient(90deg, #fff8f2 0, #fff 34%);
}

.upgrades-panel .upgrade-summary {
  min-width: 0;
  text-align: left;
}

.upgrades-panel .upgrade-summary h2 {
  margin: 6px 0 5px;
  font-size: 19px;
  line-height: 1.2;
}

.upgrade-offer-badge,
.vip-sale-badge {
  display: inline-block;
  width: max-content;
  padding: 3px 7px;
  border: 1px solid #bd3d00;
  background: #e84e0f;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.upgrade-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  line-height: 1.35;
}

.upgrade-price del,
.vip-checkout-price del {
  color: #8a94a1;
  font-weight: 750;
  text-decoration-thickness: 2px;
}

.upgrade-price strong {
  color: #d8430b;
  font-size: 20px;
  font-weight: 950;
}

.upgrade-kofi-only {
  display: block;
  margin-top: 7px;
  color: #6a7480;
  font-size: 11px;
  font-weight: 850;
}

.upgrades-panel .upgrade-body {
  width: 100%;
  min-width: 0;
  gap: 12px;
}

.upgrades-panel .purchase-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  max-width: 100%;
  padding: 0 16px;
  white-space: normal;
  line-height: 1.2;
}

.upgrades-panel .vip-benefits h3 {
  font-size: 18px;
}

.upgrades-panel .vip-benefits ul {
  padding-top: 11px;
  padding-bottom: 12px;
  font-size: 14px;
  line-height: 1.42;
}

.app-modal.vip-checkout-modal {
  width: min(600px, calc(100vw - 22px));
  max-width: 600px;
  max-height: calc(100dvh - 22px);
  overflow: auto;
}

.app-modal.vip-checkout-modal .vip-checkout-box {
  width: 100%;
  min-width: 0;
}

.app-modal.vip-checkout-modal .app-modal-head {
  padding: 14px 16px;
}

.app-modal.vip-checkout-modal .app-modal-body {
  gap: 13px;
  padding: 16px;
}

.app-modal.vip-checkout-modal .app-modal-field {
  gap: 6px;
}

.app-modal.vip-checkout-modal .app-modal-field input {
  min-height: 44px;
  padding: 10px 12px;
}

.app-modal.vip-checkout-modal .vip-checkout-summary {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 11px 12px;
}

.vip-checkout-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.vip-checkout-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  text-align: right;
}

.vip-checkout-price b {
  color: #d8430b;
  font-size: 18px;
  font-weight: 950;
}

.vip-kofi-only-notice {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #e8a57d;
  border-left: 4px solid #e84e0f;
  background: #fff7f1;
  color: #4f3426;
  line-height: 1.4;
}

.vip-kofi-only-notice strong {
  color: #9f3109;
  font-size: 13px;
}

.vip-kofi-only-notice span {
  font-size: 12px;
}

.app-modal.vip-checkout-modal .vip-payment-methods {
  width: 100%;
  margin-top: 0;
}

.app-modal.vip-checkout-modal .vip-payment-method {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #cbd0d6;
  border-radius: 0;
  background: #fff;
  color: #1f252d;
  text-align: left;
  line-height: 1.2;
  white-space: normal;
}

.app-modal.vip-checkout-modal .vip-payment-method.is-primary {
  border-color: #ef6c28;
  background: #fff8f4;
}

.app-modal.vip-checkout-modal .vip-payment-copy {
  display: block;
  min-width: 0;
}

.app-modal.vip-checkout-modal .vip-payment-copy strong,
.app-modal.vip-checkout-modal .vip-payment-copy small {
  display: block;
  overflow-wrap: anywhere;
}

.app-modal.vip-checkout-modal .vip-payment-copy strong {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.2;
}

.app-modal.vip-checkout-modal .vip-payment-copy small {
  margin: 0;
  color: #687381;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.app-modal.vip-checkout-modal .vip-payment-method b {
  align-self: center;
  white-space: nowrap;
}

.app-modal.vip-checkout-modal .app-modal-actions {
  padding: 12px 16px 15px;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .upgrade-row.is-limited-offer {
  border-color: #f07b3d;
  background: linear-gradient(90deg, #2b211b 0, #1a2028 38%);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrade-price strong,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-checkout-price b {
  color: #ff9a67;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrade-kofi-only {
  color: #bec9d5;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-kofi-only-notice {
  border-color: #7e4c32;
  border-left-color: #ff7b3d;
  background: #2b211b;
  color: #f1d5c6;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .vip-kofi-only-notice strong {
  color: #ffad80;
}

@media (max-width: 720px) {
  .upgrades-panel > h1 {
    padding: 14px 12px;
    font-size: 24px;
  }

  .upgrades-panel .vip-payment-intro {
    margin: 10px 10px 12px;
  }

  .upgrades-panel .vip-payment-intro h2,
  .upgrades-panel .vip-payment-intro p {
    padding-left: 12px;
    padding-right: 12px;
  }

  .upgrades-panel .upgrade-list {
    gap: 10px;
    padding: 0 10px 12px;
  }

  .upgrades-panel .upgrade-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    padding: 13px;
  }

  .upgrades-panel .upgrade-row.is-limited-offer {
    box-shadow: inset 3px 0 0 #ef6c28;
  }

  .upgrades-panel .upgrade-summary h2 {
    margin-top: 5px;
    font-size: 18px;
  }

  .upgrades-panel .purchase-button {
    width: 100%;
  }

  .app-modal.vip-checkout-modal {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
  }

  .app-modal.vip-checkout-modal .app-modal-head {
    padding: 12px 13px;
  }

  .app-modal.vip-checkout-modal .app-modal-head h2 {
    font-size: 18px;
  }

  .app-modal.vip-checkout-modal .app-modal-body {
    gap: 11px;
    padding: 13px;
  }

  .app-modal.vip-checkout-modal .vip-checkout-summary {
    display: grid;
    gap: 7px;
  }

  .app-modal.vip-checkout-modal .vip-checkout-price {
    justify-content: flex-start;
    text-align: left;
  }

  .app-modal.vip-checkout-modal .vip-payment-method {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    min-height: 66px;
    padding: 9px 10px;
  }

  .app-modal.vip-checkout-modal .vip-payment-icon {
    width: 36px;
    height: 36px;
  }

  .app-modal.vip-checkout-modal .vip-payment-method b {
    grid-column: 2;
    justify-self: start;
    margin-top: -2px;
  }

  .app-modal.vip-checkout-modal .app-modal-actions {
    padding: 10px 13px 13px;
  }

  .app-modal.vip-checkout-modal .app-modal-actions button {
    width: 100%;
  }
}


/* Rules + Account Upgrades dark-mode repair (2026-07-11).
   Kept at the end so legacy light selectors cannot override it. */
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .info-panel:has(.rules-doc),
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc {
  color: #e8eef6;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc section {
  background: #171d25;
  border-color: #46505d;
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc h2 {
  background: #232a34;
  border-bottom-color: #46505d;
  color: #f7faff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc ul,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc dl,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc li {
  color: #d3deea;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc dt {
  color: #ffffff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc dd,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc .rules-note {
  color: #aebccd;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc a {
  color: #9dc4ff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-table {
  background: #171d25;
  color: #e8eef6;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-table th,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-table td {
  border-color: #46505d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-table th {
  background: #0f141b;
  color: #ffffff;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-table td {
  background: #171d25;
  color: #d3deea;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-table tr:nth-child(even) td {
  background: #1d242d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel {
  background: #171d25;
  border-color: #46505d;
  color: #e8eef6;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel > h1 {
  background: #202731;
  border-bottom: 1px solid #46505d;
  color: #ffffff !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .vip-payment-intro {
  background: #151a21;
  border-color: #46505d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .vip-payment-intro h2 {
  background: #232a34;
  border-bottom-color: #46505d;
  color: #ffffff !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .vip-payment-intro p {
  color: #c4d0de !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .upgrade-row {
  background: #171d25;
  border-color: #46505d;
  color: #e8eef6;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .upgrade-row.is-limited-offer {
  background: linear-gradient(90deg, #312219 0, #171d25 42%);
  border-color: #f07b3d;
  box-shadow: inset 4px 0 0 #f07b3d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .upgrade-summary,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .upgrade-body {
  background: transparent;
  color: #e8eef6;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .upgrade-summary h2 {
  color: #ffffff !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .upgrade-summary p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .upgrade-kofi-only {
  color: #bdc9d7 !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .upgrade-price del {
  color: #8f9baa;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .vip-benefits {
  background: #11171e;
  border-color: #46505d;
  color: #e8eef6;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .vip-benefits h3 {
  background: #232a34;
  border-bottom-color: #46505d;
  color: #ffffff !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .vip-benefits ul,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .vip-benefits li {
  background: transparent;
  color: #d9e3ee;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .purchase-button {
  background: #f2f5f8;
  border: 1px solid #f2f5f8;
  color: #11161d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .purchase-button:hover,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .purchase-button:focus-visible {
  background: #ffffff;
  border-color: #ff8c52;
  box-shadow: 0 0 0 2px rgba(255, 122, 61, 0.2);
  outline: none;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .upgrade-note {
  background: #202731;
  border-top: 1px solid #46505d;
  border-bottom: 1px solid #46505d;
  color: #c4d0de !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .purchased-upgrades {
  background: #151a21;
  border-color: #46505d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .purchased-upgrades h2 {
  background: #232a34;
  border-bottom-color: #46505d;
  color: #ffffff !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .purchased-upgrades p {
  color: #c4d0de !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal.vip-checkout-modal .app-modal-box,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal.vip-checkout-modal .app-modal-body,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal.vip-checkout-modal .app-modal-actions {
  background: #171d25;
  border-color: #46505d;
  color: #e8eef6;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal.vip-checkout-modal .app-modal-head {
  background: #232a34;
  border-bottom-color: #46505d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal.vip-checkout-modal .app-modal-field span,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal.vip-checkout-modal .app-modal-field small {
  color: #c4d0de;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal.vip-checkout-modal .app-modal-field input {
  background: #10161d;
  border-color: #4b5664;
  color: #f4f8fc;
}

@media (max-width: 720px) {
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc {
    gap: 11px;
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc h2 {
    padding: 11px 12px;
    font-size: 17px;
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc p,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc ul,
  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-doc dl {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .rules-table {
    width: calc(100% - 20px);
    margin: 10px;
    font-size: 13px;
  }

  :root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .upgrades-panel .upgrade-row.is-limited-offer {
    background: linear-gradient(180deg, #312219 0, #171d25 38%);
    box-shadow: inset 3px 0 0 #f07b3d;
  }
}


/* 2026-07 community features: profile VIP CTA, Points Shop, username requests,
   expanded Aesthetic Inquiries, and web push settings. */
.profile-actions-own {
  align-items: stretch;
  min-width: 210px;
}
.profile-actions-own > a,
.profile-actions-own > span {
  box-sizing: border-box;
  text-align: center;
  justify-content: center;
}
.profile-vip-pitch {
  width: min(270px, 100%);
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #5f6874;
  text-align: left;
}
.profile-vip-upgrade {
  background: linear-gradient(#fff2ad, #e5bd43);
  border-color: #9b7412;
  color: #2e2304;
  box-shadow: inset 0 1px rgba(255,255,255,.7);
}
.profile-vip-active {
  display: inline-flex;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #9b7412;
  background: #fff5c9;
  color: #6f5100;
  font-weight: 800;
}
.profile-points-shop-link {
  font-weight: 700;
}
.profile-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.account-vip-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #b18b22;
  background: linear-gradient(90deg, #fff8d8, #fffdf2);
  box-shadow: inset 4px 0 #d7a90f;
}
.account-vip-promo div {
  display: grid;
  gap: 3px;
}
.account-vip-promo strong {
  color: #594000;
  font-size: 15px;
}
.account-vip-promo span {
  color: #655f50;
  font-size: 12px;
}
.account-vip-promo.is-active {
  border-color: #2f8b47;
  background: #eef9f0;
  box-shadow: inset 4px 0 #35a853;
}
.account-vip-promo.is-active strong {
  color: #176b2d;
}

.points-retro-profile-frame {
  outline: 3px double #8c6a22;
  outline-offset: -5px;
}
[data-name-effect="points-spark"] {
  position: relative;
  font-weight: 800;
  text-shadow: 0 0 5px rgba(221, 162, 29, .55);
}
[data-name-effect="points-spark"]::after {
  content: "✦";
  position: absolute;
  top: -8px;
  right: -9px;
  color: #e3ad28;
  font-size: 8px;
  pointer-events: none;
  animation: points-name-spark 1.8s steps(2, end) infinite;
}
@keyframes points-name-spark {
  0%, 100% { opacity: .15; transform: translate(0, 2px) scale(.7) rotate(0deg); }
  35% { opacity: 1; transform: translate(2px, -2px) scale(1.15) rotate(22deg); }
  70% { opacity: .45; transform: translate(-2px, 1px) scale(.85) rotate(-18deg); }
}

.points-shop-panel {
  min-width: 0;
}
.points-shop-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid #c7ccd2;
  padding-bottom: 16px;
}
.points-shop-head h1 {
  margin-bottom: 5px;
}
.points-shop-head p {
  margin: 0;
  color: #616b76;
}
.points-wallet {
  min-width: 155px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 10px 18px;
  border: 1px solid #a87e18;
  background: #fff7cf;
  color: #594100;
}
.points-wallet span,
.points-wallet small {
  font-size: 11px;
}
.points-wallet strong {
  font-size: 28px;
  line-height: 1;
  margin: 4px 0;
}
.points-shop-grid {
  display: grid;
  gap: 10px;
}
.points-shop-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #bfc6ce;
  background: #f8f9fa;
  box-shadow: inset 3px 0 #7c8794;
}
.points-shop-item.is-owned {
  background: #f0f7f1;
  border-color: #9bb8a1;
  box-shadow: inset 3px 0 #3f9a57;
}
.points-shop-item-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #9c7622;
  background: linear-gradient(#fff5c2, #dec162);
  color: #654900;
  font-size: 22px;
}
.points-shop-item-copy h2 {
  margin: 0 0 4px;
  font-size: 16px;
}
.points-shop-item-copy p {
  margin: 0;
  color: #5d6670;
  font-size: 12px;
}
.points-shop-item-copy small {
  display: block;
  margin-top: 5px;
  color: #337044;
}
.points-shop-item-buy {
  min-width: 125px;
  display: grid;
  justify-items: stretch;
  gap: 7px;
  text-align: center;
}
.points-shop-item-buy strong {
  color: #6a5009;
  font-size: 12px;
}

.username-request-panel > h1 {
  margin-bottom: 6px;
}
.username-request-form {
  display: grid;
  gap: 13px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #bcc4cd;
  background: #f8f9fa;
}
.username-request-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}
.username-request-form label small {
  font-weight: 400;
  color: #68717b;
}
.username-request-form input,
.username-request-form textarea,
.username-review-actions textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #aeb7c1;
  background: #fff;
  color: #202830;
  padding: 9px 10px;
  font: inherit;
}
.username-request-locked {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid #b18b22;
  background: #fff8d8;
}
.username-request-locked strong {
  color: #725300;
}
.username-request-history {
  border-top: 1px solid #c8ced5;
  padding-top: 14px;
}
.username-request-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  padding: 12px;
  border: 1px solid #c6ccd3;
  border-top-width: 0;
  background: #fff;
}
.username-request-row:first-of-type {
  border-top-width: 1px;
}
.username-request-row div {
  display: grid;
  gap: 3px;
}
.username-request-row small {
  color: #68717b;
}
.username-request-row > span {
  align-self: start;
  padding: 3px 7px;
  border: 1px solid #b8bec5;
  background: #eef0f2;
  font-size: 11px;
  font-weight: 800;
}
.username-request-row.status-approved > span {
  border-color: #75aa82;
  background: #e6f6e9;
  color: #176b2d;
}
.username-request-row.status-rejected > span {
  border-color: #c88d8d;
  background: #faeaea;
  color: #8e2424;
}
.username-request-row > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #5b6570;
}

.username-review-center > header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid #8994a0;
  background: linear-gradient(#f7f8fa, #e7eaed);
}
.username-review-center > header h1,
.username-review-center > header p {
  margin: 0;
}
.username-review-center > header p {
  margin-top: 4px;
  color: #5c6670;
}
.username-review-center > header > div:last-child {
  min-width: 90px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid #8c949d;
  background: #fff;
}
.username-review-center > header b {
  font-size: 24px;
}
.username-review-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.username-review-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 360px);
  gap: 18px;
  padding: 15px;
  border: 1px solid #bbc2ca;
  background: #fff;
}
.username-review-main {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 7px;
}
.username-review-main h2 {
  margin: 0;
  font-size: 18px;
}
.username-review-main h2 span {
  color: #828a93;
  margin: 0 8px;
}
.username-review-main p {
  margin: 0;
  color: #4f5964;
}
.username-review-status {
  padding: 3px 7px;
  border: 1px solid #aeb5bd;
  background: #eceff1;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.username-review-actions {
  display: grid;
  gap: 9px;
  padding: 12px;
  border-left: 1px solid #c5cbd1;
}
.username-review-actions label {
  display: grid;
  gap: 5px;
  font-weight: 700;
}
.username-review-actions > div {
  display: flex;
  gap: 8px;
}
.username-review-result {
  align-self: center;
  padding: 12px;
  border: 1px solid #c4cbd1;
  background: #f5f6f7;
}

.inquiry-dashboard {
  margin: 0 0 14px;
  border: 1px solid #7fa68a;
  background: #f2f8f3;
}
.inquiry-dashboard-copy {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-bottom: 1px solid #adc7b4;
}
.inquiry-dashboard-copy strong {
  color: #176b2d;
}
.inquiry-dashboard-copy span {
  color: #4e6655;
  font-size: 12px;
}
.inquiry-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid #adc7b4;
}
.inquiry-filter-row a {
  padding: 8px 12px;
  border-right: 1px solid #adc7b4;
  color: #285e35;
  text-decoration: none;
  font-size: 12px;
}
.inquiry-filter-row a.is-active {
  background: #1f7b38;
  color: #fff;
}
.inquiry-filter-row b {
  margin-left: 4px;
}
.inquiry-leaderboard {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 9px 12px;
}
.inquiry-leaderboard > span {
  margin-right: 4px;
  color: #4c6051;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.inquiry-leaderboard a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid #a8c4af;
  background: #fff;
  color: #245d33;
  text-decoration: none;
  font-size: 11px;
}
.inquiry-leaderboard a b {
  color: #168b31;
}
.inquiry-leaderboard a em {
  color: #68776c;
  font-style: normal;
}
.inquiry-thread-notice {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid #82a88c;
  background: #eff8f1;
}
.inquiry-thread-notice.is-solved {
  border-color: #3d9853;
  background: #e7f7eb;
}
.inquiry-thread-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #3f8f52;
  border-radius: 50%;
  background: #fff;
  color: #1f7b38;
  font-size: 20px;
  font-weight: 900;
}
.inquiry-thread-notice strong {
  color: #176b2d;
}
.inquiry-thread-notice p {
  margin: 2px 0 0;
  color: #52665a;
  font-size: 12px;
}

.push-settings-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px;
}
.push-settings-copy h2,
.push-settings-copy p {
  margin: 0;
}
.push-settings-copy p {
  margin-top: 4px;
  color: #606a74;
}
.push-settings-copy span {
  display: block;
  margin-top: 7px;
  color: #7b4b00;
  font-size: 12px;
  font-weight: 700;
}
.push-settings-card.is-enabled .push-settings-copy span {
  color: #197035;
}
.push-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.report-center-head-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-vip-pitch,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .points-shop-head p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .points-shop-item-copy p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-request-form label small,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-request-row small,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-request-row > p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-review-center > header p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-review-main p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .push-settings-copy p {
  color: #aab4bf;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-vip-upgrade,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .profile-vip-active,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-vip-promo,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .points-wallet,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-request-locked {
  background: #342d16;
  border-color: #8f762b;
  color: #f3d978;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-vip-promo strong,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-vip-promo span,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .points-wallet strong,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .points-wallet span,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .points-wallet small {
  color: #f1dda0;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-vip-promo.is-active,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-dashboard,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-thread-notice {
  background: #17291d;
  border-color: #376b45;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-vip-promo.is-active strong,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-dashboard-copy strong,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-thread-notice strong {
  color: #8fe0a4;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .points-shop-head,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-request-history {
  border-color: var(--line);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .points-shop-item,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-request-form,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-request-row,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-review-case,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-review-center > header,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-review-result,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-leaderboard a,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-thread-icon {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .points-shop-item.is-owned {
  background: #17271c;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .points-shop-item-icon {
  background: #3a3219;
  color: #e8cb69;
  border-color: #8f762b;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-request-form input,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-request-form textarea,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-review-actions textarea {
  background: var(--row-alt);
  border-color: var(--line);
  color: var(--ink);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-dashboard-copy,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-filter-row {
  border-color: #376b45;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-dashboard-copy span,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-thread-notice p,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-leaderboard > span,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-leaderboard a em {
  color: #a8b9ad;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-filter-row a {
  border-color: #376b45;
  color: #9ed8ac;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .inquiry-filter-row a.is-active {
  background: #277a3c;
  color: #fff;
}

@media (max-width: 760px) {
  .profile-actions-own {
    width: 100%;
    min-width: 0;
  }
  .profile-actions-own > a,
  .profile-actions-own > span {
    width: 100%;
  }
  .profile-vip-pitch {
    width: 100%;
    text-align: center;
  }
  .profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-stats > div:last-child {
    grid-column: 1 / -1;
  }
  .account-vip-promo,
  .points-shop-head,
  .push-settings-card,
  .username-review-center > header {
    align-items: stretch;
    flex-direction: column;
  }
  .account-vip-promo > a,
  .push-settings-actions,
  .push-settings-actions button {
    width: 100%;
  }
  .points-wallet {
    width: 100%;
    box-sizing: border-box;
  }
  .points-shop-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .points-shop-item-icon {
    width: 40px;
    height: 40px;
  }
  .points-shop-item-buy {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .username-request-row {
    grid-template-columns: 1fr;
  }
  .username-request-row > span {
    justify-self: start;
  }
  .username-review-case {
    grid-template-columns: 1fr;
  }
  .username-review-actions {
    border-left: 0;
    border-top: 1px solid var(--line, #c5cbd1);
    padding-left: 0;
  }
  .username-review-actions > div,
  .username-review-actions button {
    width: 100%;
  }
  .inquiry-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .inquiry-filter-row a {
    border-bottom: 1px solid #adc7b4;
  }
  .inquiry-leaderboard {
    align-items: stretch;
  }
  .inquiry-leaderboard > span {
    width: 100%;
  }
  .inquiry-leaderboard a {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .report-center-head-actions {
    justify-items: stretch;
    width: 100%;
  }
}


/* Safe in-house support banner. Third-party redirecting ad code is disabled. */
.house-support-slot {
  width: min(100%, 760px);
  margin: 12px auto;
}
.house-support-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border: 1px solid #8e7751;
  background: linear-gradient(#fff8df, #ead7a3);
  color: #30250f;
  text-decoration: none;
  box-shadow: inset 0 1px #fff, 0 1px 2px rgba(0,0,0,.16);
}
.house-support-link:hover {
  background: linear-gradient(#fffbed, #e4cb88);
}
.house-support-star {
  font-size: 22px;
  color: #9a6600;
  text-shadow: 0 1px #fff;
}
.house-support-copy {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  text-align: left;
}
.house-support-copy strong { font-size: 13px; }
.house-support-copy small { color: #5d5138; line-height: 1.25; }
.house-support-action {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #72520e;
  background: linear-gradient(#c99a2d,#9e6d08);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .house-support-link {
  border-color: #806c43;
  background: linear-gradient(#3a3324,#282319);
  color: #f1dfae;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.4);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .house-support-copy small { color: #c9bc98; }
@media (max-width: 760px) {
  .house-support-slot { width: min(100%, 420px); margin: 8px auto; }
  .house-support-link { gap: 9px; padding: 9px 10px; }
  .house-support-copy small { font-size: 10px; }
  .house-support-action { padding: 5px 7px; }
}


/* Cutesy theme accents */
:root[data-theme="cutesy"] .wordmark-red,
:root[data-theme="cutesy-dark"] .wordmark-red { color: #ff5ca8; }
:root[data-theme="cutesy"] .nav-bar,
:root[data-theme="cutesy"] .forum-table-head,
:root[data-theme="cutesy"] .thread-list-head,
:root[data-theme="cutesy-dark"] .nav-bar,
:root[data-theme="cutesy-dark"] .forum-table-head,
:root[data-theme="cutesy-dark"] .thread-list-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--black) 92%, #ffffff 8%), var(--black-2));
}
:root[data-theme="cutesy"] .nav-bar a:hover,
:root[data-theme="cutesy"] .nav-bar a.active,
:root[data-theme="cutesy-dark"] .nav-bar a:hover,
:root[data-theme="cutesy-dark"] .nav-bar a.active {
  box-shadow: inset 0 -3px 0 #ff79b9;
  color: #fff;
}
:root[data-theme="cutesy"] .account-chip,
:root[data-theme="cutesy"] .top-icon,
:root[data-theme="cutesy"] .account-link,
:root[data-theme="cutesy"] .mast-btn,
:root[data-theme="cutesy-dark"] .account-chip,
:root[data-theme="cutesy-dark"] .top-icon,
:root[data-theme="cutesy-dark"] .account-link,
:root[data-theme="cutesy-dark"] .mast-btn {
  border-bottom-color: #ff79b9;
}
:root[data-theme="cutesy"] .primary-action,
:root[data-theme="cutesy-dark"] .primary-action {
  background: linear-gradient(180deg,#ff95c8,#ff5ca8);
  border-color: #c54784;
}
:root[data-theme="cutesy"] .secondary-action,
:root[data-theme="cutesy-dark"] .secondary-action {
  border-color: color-mix(in srgb, var(--line) 88%, #ff8fc4 12%);
}


/* Profile hero alignment repair — desktop and mobile */
.profile-hero {
  grid-template-columns: 126px minmax(260px, 1fr) minmax(230px, 300px);
  align-items: start;
  gap: 20px;
  min-height: 0;
  padding: 20px;
  overflow: hidden;
}

.profile-hero > .profile-avatar.large {
  align-self: start;
  flex: 0 0 auto;
}

.profile-hero > .profile-avatar.large {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.profile-identity {
  grid-column: 2;
  grid-row: 1;
}

.profile-meta-lines {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  min-width: 0;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  line-height: 1.4;
}

.profile-meta-lines span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.profile-identity {
  min-width: 0;
  align-self: start;
}

.profile-name-line {
  min-width: 0;
  gap: 6px 10px;
}

.profile-identity h1 {
  max-width: 100%;
  margin: 0 0 7px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.profile-name-line > span {
  flex: 0 1 auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-identity > p {
  max-width: 680px;
  margin: 5px 0;
  line-height: 1.42;
  overflow-wrap: break-word;
}

.profile-identity .badge-row {
  align-items: center;
  margin: 10px 0;
}

.profile-actions {
  min-width: 0;
  max-width: 300px;
  align-self: start;
}

.profile-actions-own {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.profile-actions-own > a,
.profile-actions-own > span {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: anywhere;
}

.profile-actions-own .profile-vip-pitch {
  grid-column: 1 / -1;
  width: 100%;
  margin: 2px 0 0;
}

.profile-vip-active {
  align-items: center;
  justify-content: center;
}

.profile-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .profile-hero {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
  }

  .profile-avatar.large {
    width: 112px;
    height: 112px;
    font-size: 46px;
  }

  .profile-hero > .profile-avatar.large {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .profile-identity {
    grid-column: 2;
    grid-row: 1;
  }

  .profile-meta-lines {
    grid-column: 2;
    grid-row: 2;
  }

  .profile-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: none;
    width: 100%;
  }

  .profile-actions-own {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-actions-own .profile-vip-pitch {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .profile-layout {
    padding: 0 9px;
    gap: 12px;
  }

  .profile-hero {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .profile-avatar.large {
    width: 86px;
    height: 86px;
    font-size: 36px;
  }

  .profile-hero > .profile-avatar.large {
    grid-row: 1;
  }

  .profile-identity h1 {
    font-size: clamp(24px, 8vw, 31px);
    line-height: 1.04;
  }

  .profile-name-line {
    display: grid;
    gap: 3px;
    align-items: start;
  }

  .profile-name-line > span {
    justify-self: start;
  }

  .profile-identity > p {
    margin: 4px 0;
    font-size: 13px;
    line-height: 1.38;
  }

  .profile-identity .badge-row {
    gap: 5px;
    margin: 8px 0;
  }

  .profile-identity .role-badge {
    min-height: 23px;
    padding: 0 7px;
    font-size: 11px;
  }

  .profile-meta-lines {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    padding-top: 2px;
    gap: 3px 12px;
    font-size: 12px;
  }

  .profile-actions {
    grid-row: 3;
  }

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

  .profile-actions-own > a,
  .profile-actions-own > span {
    min-height: 42px;
    padding: 8px;
    font-size: 12px;
  }

  .profile-vip-pitch {
    text-align: left;
  }

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

  .profile-stats > div {
    min-width: 0;
    padding: 12px;
  }

  .profile-stats > div:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .profile-hero {
    grid-template-columns: 74px minmax(0, 1fr);
    padding: 12px;
    gap: 10px;
  }

  .profile-avatar.large {
    width: 74px;
    height: 74px;
    font-size: 31px;
  }

  .profile-identity h1 {
    font-size: clamp(22px, 7.5vw, 28px);
  }

  .profile-actions-own > a,
  .profile-actions-own > span {
    font-size: 11.5px;
  }
}


/* Cutesy Dark final contrast pass */
:root[data-theme="cutesy-dark"] .masthead {
  background: linear-gradient(180deg, #341226, #21101d);
  border-color: #62334d;
}
:root[data-theme="cutesy-dark"] .nav-bar,
:root[data-theme="cutesy-dark"] .forum-table-head,
:root[data-theme="cutesy-dark"] .thread-list-head {
  background: linear-gradient(180deg, #3a1730, #200f1c);
  border-color: #673650;
}
:root[data-theme="cutesy-dark"] .site-shell,
:root[data-theme="cutesy-dark"] .forum-row,
:root[data-theme="cutesy-dark"] .thread-row,
:root[data-theme="cutesy-dark"] .info-panel,
:root[data-theme="cutesy-dark"] .account-details,
:root[data-theme="cutesy-dark"] .settings-card,
:root[data-theme="cutesy-dark"] .profile-side,
:root[data-theme="cutesy-dark"] .profile-feed,
:root[data-theme="cutesy-dark"] .xf-post,
:root[data-theme="cutesy-dark"] .post-content,
:root[data-theme="cutesy-dark"] .reply-box {
  border-color: #573247;
}
:root[data-theme="cutesy-dark"] .forum-row:nth-child(even),
:root[data-theme="cutesy-dark"] .thread-row:nth-child(even) {
  background: #251821;
}
:root[data-theme="cutesy-dark"] .forum-row:hover,
:root[data-theme="cutesy-dark"] .thread-row:hover {
  background: #392331;
}
:root[data-theme="cutesy-dark"] a,
:root[data-theme="cutesy-dark"] .member-name,
:root[data-theme="cutesy-dark"] .forum-copy > a,
:root[data-theme="cutesy-dark"] .thread-copy > a {
  color: #ffb7d7;
}
:root[data-theme="cutesy-dark"] .primary-action {
  background: linear-gradient(180deg, #ff78b8, #d93d87);
  border-color: #ff9aca;
  color: #fff;
}
:root[data-theme="cutesy-dark"] .secondary-action {
  background: linear-gradient(180deg, #45243a, #311b2b);
  border-color: #74405b;
  color: #ffe7f2;
}

/* Push diagnostics and live thread refresh */
.push-settings-card.is-blocked {
  border-color: #c96a6a;
  background: color-mix(in srgb, var(--paper) 90%, #ffdddd 10%);
}
.push-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.live-thread-notice {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid #a66b00;
  background: linear-gradient(180deg, #fff7c9, #f2d879);
  color: #3a2a00;
  font-weight: 900;
  text-align: center;
  box-shadow: inset 0 1px rgba(255,255,255,.72);
}
.live-thread-notice:hover {
  background: linear-gradient(180deg, #fffbe1, #f5df8a);
}
:root[data-theme="dark"] .live-thread-notice,
:root[data-theme="cutesy-dark"] .live-thread-notice {
  border-color: #8b7432;
  background: linear-gradient(180deg, #51451f, #3d351d);
  color: #fff1b2;
}
/* Hover state needs its own dark override or it flips back to bright yellow on mouse-over. */
:root[data-theme="dark"] .live-thread-notice:hover,
:root[data-theme="cutesy-dark"] .live-thread-notice:hover {
  background: linear-gradient(180deg, #5e5226, #463d20);
}
:root[data-theme="cutesy"] .live-thread-notice {
  border-color: #b45c1d;
  background: linear-gradient(180deg, #fff0d8, #f5d59a);
  color: #3a2a00;
}
@media (max-width: 720px) {
  .push-settings-actions > button {
    width: 100%;
  }
  .live-thread-notice {
    position: sticky;
    top: 0;
    z-index: 40;
    margin-bottom: 8px;
  }
}

/* XenForo-style BBCode lists. */
.bbcode-list {
  display: block;
  margin: 10px 0 16px 1.35rem;
  padding-left: 1.35rem;
  color: inherit;
  text-align: left;
}
.bbcode-list-unordered { list-style: disc outside; }
.bbcode-list-ordered { list-style: decimal outside; }
.bbcode-list > li {
  display: list-item;
  margin: .38rem 0;
  padding-left: .2rem;
  line-height: 1.55;
}
.bbcode-list > li > p {
  display: inline;
  margin: 0;
}
.bbcode-list > li > p + p {
  display: block;
  margin-top: .45rem;
}
.bbcode-list .bbcode-list {
  margin-top: .45rem;
  margin-bottom: .45rem;
}
.rich-editor .bbcode-list,
.editor-preview .bbcode-list {
  margin-left: 1.2rem;
}
@media (max-width: 720px) {
  .bbcode-list {
    margin-left: .75rem;
    padding-left: 1.15rem;
  }
}

/* XenForo-style BBCode compatibility: headings, centered blocks, rules and tables. */
.bbcode-heading {
  margin: 18px 0 12px;
  color: var(--ink);
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.bbcode-heading.is-centered,
.bbcode-center {
  text-align: center;
}
.bbcode-heading-1 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.bbcode-heading-2 { font-size: clamp(1.55rem, 3.4vw, 2.2rem); }
.bbcode-heading-3 { font-size: clamp(1.3rem, 2.8vw, 1.8rem); }
.bbcode-heading-4 { font-size: 1.2rem; }
.bbcode-heading-5 { font-size: 1.05rem; }
.bbcode-heading-6 { font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; }
.bbcode-center {
  display: block;
  width: 100%;
  margin: 8px 0;
}
.bbcode-center > .bbcode-spoiler,
.bbcode-center > .bbcode-quote,
.bbcode-center > .bbcode-table-wrap {
  text-align: left;
}
.bbcode-hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 20px 0;
  height: 0;
}
.bbcode-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 16px 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--line);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}
.bbcode-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--paper);
  color: var(--ink);
  table-layout: auto;
}
.bbcode-table th,
.bbcode-table td {
  padding: 11px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.bbcode-table th:last-child,
.bbcode-table td:last-child { border-right: 0; }
.bbcode-table tr:last-child td { border-bottom: 0; }
.bbcode-table th {
  background: var(--row-alt);
  color: var(--ink);
  font-weight: 950;
}
.bbcode-table tr:nth-child(even) td { background: var(--row); }
.rich-editor .bbcode-table-wrap {
  margin: 10px 0;
}
.rich-editor .bbcode-table {
  min-width: 520px;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-table-wrap,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-table {
  background: var(--paper);
  border-color: var(--line);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-table th {
  background: var(--row-alt);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-table tr:nth-child(even) td {
  background: var(--row);
}
@media (max-width: 720px) {
  .bbcode-heading { margin: 14px 0 10px; }
  .bbcode-heading-1 { font-size: 1.75rem; }
  .bbcode-heading-2 { font-size: 1.5rem; }
  .bbcode-table-wrap { margin: 12px 0; }
  .bbcode-table { min-width: 680px; font-size: .9rem; }
  .bbcode-table th,
  .bbcode-table td { padding: 9px 10px; }
}


/* Long quote previews and final mobile BBCode containment. */
.bbcode-quote {
  position: relative;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.bbcode-quote > .bbcode-quote-body {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.bbcode-quote.is-collapsible.is-collapsed > .bbcode-quote-body {
  max-height: 250px;
  overflow: hidden;
}
.bbcode-quote.is-collapsible.is-collapsed > .bbcode-quote-body::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 78px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, #eef0f2 78%);
}
.bbcode-quote-toggle {
  width: 100%;
  min-height: 38px;
  display: block;
  border: 0;
  border-top: 1px solid #cbd0d7;
  padding: 8px 12px;
  background: #e1e5e9;
  color: #334155;
  font: inherit;
  font-size: .9rem;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}
.bbcode-quote-toggle:hover,
.bbcode-quote-toggle:focus-visible {
  background: #d7dde3;
  color: #1f2937;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-quote.is-collapsible.is-collapsed > .bbcode-quote-body::after {
  background: linear-gradient(to bottom, transparent, #262b33 78%);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-quote-toggle {
  border-top-color: #47505c;
  background: #343b45;
  color: #eef3f8;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-quote-toggle:hover,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-quote-toggle:focus-visible {
  background: #414a56;
}

.post-body,
.post-body > *,
.bbcode-center,
.bbcode-align,
.bbcode-heading,
.bbcode-spoiler,
.bbcode-spoiler > div,
.bbcode-table-wrap {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.bbcode-center,
.bbcode-align,
.bbcode-heading {
  overflow-wrap: anywhere;
  word-break: normal;
}
.bbcode-heading span,
.bbcode-center span,
.bbcode-align span {
  max-width: 100%;
}

@media (max-width: 720px) {
  .xf-thread {
    width: 100%;
    max-width: 100%;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .xf-post,
  .post-author,
  .post-content,
  .post-content header,
  .post-content footer,
  .post-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .xf-post {
    overflow: hidden;
  }
  .post-content {
    padding: 0 !important;
  }
  .post-body {
    padding: 18px 12px !important;
    overflow-x: hidden;
  }
  .post-body > p,
  .post-body > .bbcode-center,
  .post-body > .bbcode-align,
  .post-body > .bbcode-heading,
  .post-body > .bbcode-spoiler,
  .post-body > .bbcode-quote,
  .post-body > .bbcode-table-wrap,
  .post-body > .bbcode-hr {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .bbcode-heading,
  .bbcode-heading * {
    white-space: normal !important;
  }
  .bbcode-heading-1 {
    font-size: clamp(1.35rem, 7vw, 1.75rem) !important;
    line-height: 1.18;
  }
  .bbcode-center,
  .bbcode-align {
    overflow: hidden;
  }
  .bbcode-img,
  .post-body img.bbcode-img,
  .bbcode-center .bbcode-img,
  .bbcode-align .bbcode-img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .bbcode-spoiler > div {
    padding: 10px !important;
    overflow: hidden;
  }
  .bbcode-quote {
    padding-left: 8px !important;
  }
  .bbcode-quote > .bbcode-quote-body {
    padding: 9px 10px 12px !important;
  }
  .bbcode-quote.is-collapsible.is-collapsed > .bbcode-quote-body {
    max-height: 190px;
  }
}


/* Admin profile image management */
.admin-media-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 84px minmax(220px, 1fr) 112px;
  gap: 10px;
  align-items: end;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 94%, var(--row) 6%);
}
.admin-media-form-head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}
.admin-media-form-head strong {
  color: var(--ink);
  font-size: 13px;
}
.admin-media-form-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.admin-media-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}
.admin-media-preview.avatar-preview {
  width: 72px;
  height: 72px;
}
.admin-media-preview.banner-preview {
  width: 84px;
  height: 48px;
}
.admin-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-media-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.admin-media-field > input[type="text"],
.admin-media-field > input:not([type]) {
  width: 100%;
}
.admin-media-upload {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.admin-media-upload input[type="file"] {
  width: min(100%, 240px);
  min-height: 0;
  padding: 0;
  border: 0;
}
.admin-media-clear {
  align-self: end;
}
.admin-media-save {
  grid-column: 2 / 3;
  width: fit-content !important;
  min-width: 150px;
}
.admin-media-form .form-status {
  grid-column: 2 / -1;
  margin: 0;
}
:root[data-theme="dark"] .admin-media-form,
:root[data-theme="cutesy-dark"] .admin-media-form {
  background: color-mix(in srgb, var(--paper) 92%, #000 8%);
}
@media (max-width: 760px) {
  .admin-media-form {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .admin-media-clear {
    grid-column: 2;
    width: fit-content !important;
  }
  .admin-media-save,
  .admin-media-form .form-status {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  .admin-media-form {
    grid-template-columns: 1fr;
  }
  .admin-media-preview,
  .admin-media-preview.avatar-preview,
  .admin-media-preview.banner-preview {
    width: 100%;
    height: 96px;
  }
  .admin-media-preview.avatar-preview img {
    object-fit: contain;
    background: var(--soft);
  }
  .admin-media-clear,
  .admin-media-save,
  .admin-media-form .form-status {
    grid-column: 1;
    width: 100% !important;
  }
}

/* 2026-07 moderation controls, report stability, and visible profile-media tools */
.admin-panel-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.admin-panel-title-row h1 { margin-bottom: 5px; }
.admin-panel-title-row p { margin: 0; }
.admin-ban-state.is-active { color: #167137; }
.admin-ban-state.is-banned { color: #b01820; }
.admin-user-toolbar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
.admin-user-toolbar > button { width: auto !important; min-width: 88px; padding-inline: 12px; }
.admin-user-toolbar .warning-history { flex: 1 1 260px; padding: 6px 8px; }
.warning-history .is-expired { opacity: .55; }
.admin-temp-ban-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 110px 130px minmax(220px, 1fr) 150px;
  align-items: end;
  gap: 8px;
  padding: 11px;
  border: 1px solid #d8a5a8;
  background: color-mix(in srgb, var(--paper) 94%, #fff0f1 6%);
}
.admin-temp-ban-head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 10px;
}
.admin-temp-ban-head strong { color: #8e1118; }
.admin-temp-ban-head span { color: var(--muted); font-size: 11px; font-weight: 700; }
.admin-temp-ban-form label { min-width: 0; }
.admin-temp-ban-form input,
.admin-temp-ban-form select { width: 100% !important; }
.admin-media-tools {
  grid-column: 1 / -1;
  width: 100%;
  border: 1px solid #7c93ad;
  background: color-mix(in srgb, var(--paper) 96%, #eaf3ff 4%);
}
.admin-media-tools > summary {
  cursor: pointer;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--row) 86%, #dcecff 14%);
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}
.admin-media-tools[open] > summary { border-bottom: 1px solid #7c93ad; }
.admin-media-tools .admin-media-form { margin: 0; border: 0; }
.app-modal-field select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 7px 9px;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-temp-ban-form {
  background: #351f24;
  border-color: #825059;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-media-tools {
  background: #202a35;
  border-color: #526b86;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-media-tools > summary {
  background: #2b3948;
  color: #f4f7fb;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .app-modal-field select {
  background: #242a32;
  border-color: #596573;
  color: #f4f7fb;
}
@media (max-width: 820px) {
  .admin-panel-title-row { display: grid; }
  .admin-temp-ban-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-temp-ban-form .wide-field { grid-column: 1 / -1; }
  .admin-temp-ban-form button { width: 100% !important; }
}
@media (max-width: 520px) {
  .admin-temp-ban-form { grid-template-columns: 1fr; }
  .admin-temp-ban-form .wide-field,
  .admin-temp-ban-form button { grid-column: 1; }
  .admin-user-toolbar > button { flex: 1 1 44%; }
  .admin-media-tools > summary { font-size: 12px; }
}

/* 2026-07 signup-country capture and exact-IP alt investigation signals */
.admin-network-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 10px;
  border: 1px solid #b8c3cf;
  background: #b8c3cf;
}

.admin-network-card.is-protected {
  grid-template-columns: 1fr;
}

.admin-network-row {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--paper) 96%, #edf4fb 4%);
}

.admin-network-row > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.admin-network-row > strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.admin-network-row small {
  display: inline-block;
  margin-left: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.admin-network-tag {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  margin-left: 5px;
  padding: 1px 6px;
  border: 1px solid #9eacba;
  background: var(--row);
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .04em;
  vertical-align: middle;
}

.admin-alt-signals {
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid #bbc5cf;
  background: color-mix(in srgb, var(--paper) 97%, #eef2f5 3%);
}

.admin-alt-signals.is-flagged {
  border-color: #c47a22;
  background: color-mix(in srgb, var(--paper) 92%, #fff1d6 8%);
}

.admin-alt-signals-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-alt-signals-head strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.admin-alt-signals-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-alt-signals.is-flagged .admin-alt-signals-head span {
  color: #8a4a00;
}

.admin-alt-signals > p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.admin-alt-match-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.admin-alt-match {
  display: grid;
  grid-template-columns: minmax(145px, .8fr) minmax(190px, 1.35fr) auto;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  min-height: 46px !important;
  padding: 7px 9px;
  border: 1px solid #d2a15d !important;
  background: color-mix(in srgb, var(--paper) 96%, #fff4df 4%) !important;
  color: var(--ink) !important;
  text-align: left;
}

.admin-alt-match:hover {
  border-color: #9f5a0a !important;
  background: color-mix(in srgb, var(--paper) 89%, #ffe4b5 11%) !important;
}

.admin-alt-match > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-alt-match strong {
  color: var(--ink);
  font-size: 12px;
}

.admin-alt-match small {
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.admin-alt-match-reason {
  color: #73420a;
  font-size: 11px;
  font-weight: 850;
}

.admin-alt-match-reason small {
  display: block;
  margin-top: 2px;
}

.admin-alt-match > b {
  color: #8b4a00;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-application-reason {
  padding-top: 7px;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-network-card {
  border-color: #52606d;
  background: #52606d;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-network-row {
  background: #202833;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-network-tag {
  border-color: #627181;
  background: #2b3541;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-alt-signals {
  border-color: #52606d;
  background: #202833;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-alt-signals.is-flagged {
  border-color: #a76824;
  background: #332a1e;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-alt-signals.is-flagged .admin-alt-signals-head span,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-alt-match-reason,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-alt-match > b {
  color: #ffc476;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-alt-match {
  border-color: #8d602e !important;
  background: #2d281f !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-alt-match:hover {
  border-color: #d18a36 !important;
  background: #3a3021 !important;
}

@media (max-width: 820px) {
  .admin-network-card {
    grid-template-columns: 1fr;
  }
  .admin-alt-match {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .admin-alt-match-reason {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .admin-alt-match > b {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 520px) {
  .admin-network-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .admin-alt-match {
    grid-template-columns: 1fr;
  }
  .admin-alt-match-reason,
  .admin-alt-match > b {
    grid-column: 1;
    grid-row: auto;
  }
}

.admin-network-alerts-section {
  grid-column: 1 / -1;
  min-width: 0;
}

.admin-network-alerts-section > h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-network-alerts-section > h2 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 21px;
  padding: 1px 7px;
  border: 1px solid rgba(255, 255, 255, .45);
  font-size: 11px;
}

.admin-network-alert-intro {
  padding: 11px 13px;
  border: 1px solid #c47a22;
  border-top: 0;
  background: color-mix(in srgb, var(--paper) 92%, #fff1d6 8%);
}

.admin-network-alert-intro > strong {
  color: var(--ink);
  font-size: 12px;
}

.admin-network-alert-intro > p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.admin-network-alert-list {
  display: grid;
  border: 1px solid var(--line);
  border-top: 0;
}

.admin-network-alert-row {
  display: grid;
  grid-template-columns: minmax(270px, 1.35fr) minmax(200px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.admin-network-alert-row:nth-child(even) {
  background: var(--row);
}

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

.admin-network-alert-users > span,
.admin-network-alert-evidence {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-network-alert-users strong,
.admin-network-alert-evidence strong {
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.admin-network-alert-users small,
.admin-network-alert-evidence small {
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.admin-network-alert-users > b {
  color: #a25b08;
  font-size: 15px;
}

.admin-network-alert-evidence strong {
  color: #7f4707;
}

.admin-network-alert-row > button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #a25b08;
  background: #fff7e8;
  color: #7f4707;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-network-alert-row > button:hover {
  background: #ffe7bd;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-network-alert-intro {
  border-color: #a76824;
  background: #332a1e;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-network-alert-row > button {
  border-color: #b97a34;
  background: #362d21;
  color: #ffc476;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-network-alert-row > button:hover {
  background: #463722;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-network-alert-users > b,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-network-alert-evidence strong {
  color: #ffc476;
}

@media (max-width: 900px) {
  .admin-network-alert-row {
    grid-template-columns: 1fr auto;
  }
  .admin-network-alert-evidence {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .admin-network-alert-row > button {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 580px) {
  .admin-network-alert-row {
    grid-template-columns: 1fr;
  }
  .admin-network-alert-users {
    grid-template-columns: 1fr;
  }
  .admin-network-alert-users > b {
    transform: rotate(90deg);
    width: fit-content;
  }
  .admin-network-alert-evidence,
  .admin-network-alert-row > button {
    grid-column: 1;
    grid-row: auto;
  }
  .admin-network-alert-row > button {
    width: 100%;
  }
}


/* 2026-07 admin IP drawer, separate IPv4/IPv6 history, and clearer user cards */
.admin-users-section > .admin-table {
  display: grid;
  gap: 18px;
  border: 0;
  background: transparent;
}

.admin-table article.admin-user-row,
.admin-table article.admin-user-row:nth-child(even) {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 2px solid #9da9b6;
  border-left: 6px solid var(--black);
  background: var(--paper);
  box-shadow: 0 3px 9px rgba(25, 35, 45, .12);
}

.admin-user-main {
  border-bottom: 1px solid var(--line);
}

.admin-user-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--row) 88%, #dce6f0 12%);
  border-bottom: 1px solid var(--line);
}

.admin-user-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid #8f9dab;
  background: var(--paper);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-user-card-head > div {
  min-width: 0;
}

.admin-user-card-head > div > strong {
  display: block;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.admin-user-card-head p {
  margin-top: 2px;
}

.admin-user-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 18px;
  padding: 10px 14px 12px;
}

.admin-user-summary .admin-application-reason {
  grid-column: 1 / -1;
}

.admin-user-row > .admin-actions {
  padding: 13px 14px 15px;
}

.admin-ip-tools {
  grid-column: 1 / -1;
  width: 100%;
  border: 1px solid #7d8f9f;
  background: color-mix(in srgb, var(--paper) 96%, #edf4fa 4%);
}

.admin-ip-tools > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--row) 84%, #dcecf8 16%);
  color: var(--ink);
  font-weight: 950;
}

.admin-ip-tools > summary span {
  font-size: 13px;
}

.admin-ip-tools > summary small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-align: right;
}

.admin-ip-tools[open] > summary {
  border-bottom: 1px solid #7d8f9f;
}

.admin-ip-tools-body {
  display: grid;
  gap: 11px;
  padding: 11px;
}

.admin-ip-group {
  border: 1px solid var(--line);
  background: var(--paper);
}

.admin-ip-group > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--row);
}

.admin-ip-group > header strong {
  font-size: 12px;
}

.admin-ip-group > header span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.admin-ip-group .admin-network-card {
  margin: 0;
  border: 0;
}

.admin-network-row.admin-ip-row {
  grid-template-columns: minmax(105px, auto) minmax(0, 1fr);
}

.admin-network-row.admin-ip-row > .admin-ip-meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.admin-network-row.admin-ip-row > .admin-ip-meta small {
  margin: 0;
}

.admin-network-row strong.is-empty {
  color: var(--muted);
  font-style: italic;
  font-weight: 750;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-table article.admin-user-row,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-table article.admin-user-row:nth-child(even) {
  border-color: #596878;
  border-left-color: #d8e1eb;
  background: var(--paper);
  box-shadow: 0 4px 11px rgba(0, 0, 0, .28);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-user-card-head,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-ip-tools > summary {
  background: #2b3948;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-user-card-number {
  border-color: #657586;
  background: #202833;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-ip-tools {
  border-color: #526b86;
  background: #202a35;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-ip-group {
  border-color: #52606d;
  background: #202833;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .admin-ip-group > header {
  border-color: #52606d;
  background: #283442;
}

@media (max-width: 720px) {
  .admin-user-card-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .admin-user-card-head > .admin-ban-state {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .admin-user-summary {
    grid-template-columns: 1fr;
  }
  .admin-user-summary .admin-application-reason {
    grid-column: 1;
  }
  .admin-ip-tools > summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .admin-ip-tools > summary small {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .admin-table article.admin-user-row,
  .admin-table article.admin-user-row:nth-child(even) {
    border-left-width: 4px;
  }
  .admin-user-card-head {
    grid-template-columns: 1fr;
  }
  .admin-user-card-number {
    justify-self: start;
  }
  .admin-network-row.admin-ip-row {
    grid-template-columns: 1fr;
  }
  .admin-network-row.admin-ip-row > .admin-ip-meta {
    grid-column: 1;
  }
}

.admin-network-row.is-wide { grid-column: 1 / -1; }

/* Application approval queue, shared-IP cleanup, and pending-account lock */
.application-status-link { font-weight: 800; }
.application-status-page {
  max-width: 760px;
  margin: 28px auto;
  padding: 0;
  border: 1px solid var(--line, #d7d9dd);
  border-radius: 0;
  background: var(--paper, #fff);
  box-shadow: none;
  text-align: left;
}
.application-status-page h1 {
  margin: 0;
  padding: 13px 16px 12px;
  border-bottom: 3px solid var(--orange, #f06d22);
  background: var(--black, #1d2027);
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
}
.application-status-page > p {
  max-width: none;
  margin: 0;
  padding: 18px 18px 16px;
  line-height: 1.55;
}
.application-status-reason,
.application-status-note {
  text-align: left;
  padding: 13px 14px;
  margin: 0 18px 14px;
  border: 1px solid var(--line, #d7d9dd);
  border-radius: 0;
  background: var(--row, #f7f7f7);
}
.application-status-reason strong,
.application-status-note strong {
  display: block;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line, #d7d9dd);
  font-size: 13px;
  text-transform: uppercase;
}
.application-status-reason p,
.application-status-note p {
  margin: 9px 0 0;
  white-space: pre-wrap;
  line-height: 1.5;
}
.application-status-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 0;
  padding: 2px 18px 18px;
}
.application-status-actions .primary-action,
.application-status-actions .secondary-action {
  min-width: 88px;
  border-radius: 0;
}

.application-panel-page { display: grid; gap: 18px; }
.application-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 12px;
  background: var(--panel, #fff);
}
.application-panel-head h1 { margin: 0 0 5px; }
.application-panel-head p { margin: 0; }
.application-panel-head > span {
  min-width: 92px;
  padding: 10px 14px;
  text-align: center;
  border-radius: 10px;
  background: rgba(245, 158, 11, .13);
  border: 1px solid rgba(245, 158, 11, .35);
}
.application-panel-head > span b { display: block; font-size: 24px; }
.application-panel-section,
.application-reviewed-archive {
  border: 1px solid var(--border, #d1d5db);
  border-radius: 12px;
  background: var(--panel, #fff);
  padding: 16px;
}
.application-panel-section > h2 { margin: 0 0 14px; }
.application-reviewed-archive > summary { cursor: pointer; font-weight: 800; padding: 4px; }
.application-reviewed-archive[open] > summary { margin-bottom: 14px; }
.application-review-list { display: grid; gap: 14px; }
.application-review-card {
  border: 1px solid var(--border, #d1d5db);
  border-left: 5px solid #f59e0b;
  border-radius: 10px;
  padding: 14px;
  background: var(--panel-soft, rgba(148, 163, 184, .06));
}
.application-review-card.status-approved { border-left-color: #16a34a; }
.application-review-card.status-rejected { border-left-color: #dc2626; }
.application-review-card > header { display: flex; align-items: center; gap: 12px; }
.application-review-card > header > div:nth-child(2) { flex: 1; min-width: 0; }
.application-review-card > header p { margin: 3px 0 0; opacity: .78; }
.application-review-card > header time { font-size: 12px; opacity: .72; text-align: right; }
.application-review-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 12px; margin-top: 14px; }
.application-review-grid section,
.application-review-note { border: 1px solid var(--border, #d5d9df); border-radius: 8px; padding: 12px; background: var(--panel, #fff); }
.application-review-grid span { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .72; }
.application-review-grid p,
.application-review-note p { margin: 7px 0 0; white-space: pre-wrap; line-height: 1.5; }
.application-review-note { margin-top: 12px; }
.application-review-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.admin-shared-ip-cleanup-list { display: grid; gap: 10px; margin: 14px 0; }
.admin-shared-ip-cleanup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px;
  border: 1px solid rgba(220, 38, 38, .28);
  border-radius: 9px;
  background: rgba(220, 38, 38, .055);
}
.admin-shared-ip-cleanup-row > div { min-width: 0; }
.admin-shared-ip-cleanup-row strong { overflow-wrap: anywhere; }
.admin-shared-ip-cleanup-row p { margin: 6px 0 0; line-height: 1.45; }
.admin-ip-version-pill { display: inline-block; margin-right: 8px; padding: 3px 7px; border-radius: 999px; font-size: 11px; font-weight: 900; background: rgba(15, 23, 42, .1); }

@media (max-width: 720px) {
  .application-status-page { margin: 16px 0; }
  .application-status-page h1 { padding: 12px 13px 11px; font-size: 16px; }
  .application-status-page > p { padding: 14px 13px 13px; }
  .application-status-reason,
  .application-status-note { margin: 0 13px 12px; padding: 12px; }
  .application-status-actions { padding: 0 13px 14px; }
  .application-panel-head { align-items: flex-start; }
  .application-review-grid { grid-template-columns: 1fr; }
  .application-review-card > header { align-items: flex-start; flex-wrap: wrap; }
  .application-review-card > header time { width: 100%; text-align: left; padding-left: 52px; }
  .admin-shared-ip-cleanup-row { align-items: stretch; flex-direction: column; }
  .admin-shared-ip-cleanup-row button { width: 100%; }
}

/* 2026-07-14 comprehensive theme normalization.
   Newer pages used semantic variables that were never defined, so their
   fallback values remained white in dark themes. These aliases and final
   overrides make every major surface follow the active theme. */
:root {
  --panel: var(--paper);
  --panel-bg: var(--paper);
  --panel-soft: var(--soft);
  --border: var(--line);
  --border-color: var(--line);
  --text: var(--ink);
  --text-color: var(--ink);
  --link-color: var(--blue);
  --input-bg: #fff;
  --input-hover: #f4f5f6;
  --input-disabled: #eceff2;
  --placeholder: #737f8e;
  --surface-raised: #fff;
  --surface-muted: #eef0f2;
  --surface-hover: #f5f6f7;
  --focus-ring: color-mix(in srgb, var(--orange) 34%, transparent);
  --danger-soft: color-mix(in srgb, var(--red) 9%, var(--paper));
  color-scheme: light;
}

:root[data-theme="dark"] {
  --input-bg: #161b22;
  --input-hover: #252c36;
  --input-disabled: #20262f;
  --placeholder: #8f9baa;
  --surface-raised: #20262f;
  --surface-muted: #181d24;
  --surface-hover: #28313c;
  color-scheme: dark;
}

:root[data-theme="cutesy"] {
  --input-bg: #fffafd;
  --input-hover: #fff0f7;
  --input-disabled: #f7dce9;
  --placeholder: #a7748d;
  --surface-raised: #fffafd;
  --surface-muted: #ffedf6;
  --surface-hover: #ffe5f1;
  color-scheme: light;
}

:root[data-theme="cutesy-dark"] {
  --input-bg: #21151e;
  --input-hover: #392331;
  --input-disabled: #251821;
  --placeholder: #bd8da5;
  --surface-raised: #291824;
  --surface-muted: #21151e;
  --surface-hover: #3b2634;
  color-scheme: dark;
}

::selection {
  background: color-mix(in srgb, var(--orange) 38%, transparent);
  color: var(--ink);
}

input,
select,
textarea,
button {
  accent-color: var(--red);
}

input::placeholder,
textarea::placeholder,
.editor-surface:empty::before,
.rich-editor .editor-wysiwyg:empty::before {
  color: var(--placeholder) !important;
  opacity: 1;
}

/* Shared form controls across settings, messages, search, admin and dialogs. */
.settings-stack select,
.select-setting select,
.settings-grid select,
.reply-box textarea,
.topic-form textarea,
.topic-form input,
.topic-form select,
.auth-dialog input,
.auth-dialog textarea,
.wide-search,
.search,
.message-compose input,
.message-compose textarea,
.conversation-compose input,
.conversation-compose textarea,
.username-request-form input,
.username-request-form textarea,
.username-review-actions textarea,
.admin-actions input,
.admin-actions select,
.admin-actions textarea,
.admin-search-tool input,
.admin-temp-ban-form input,
.admin-temp-ban-form select,
.admin-identity-form input,
.admin-media-form input,
.admin-media-form select,
.app-modal-field input,
.app-modal-field textarea,
.thread-move-form select,
.share-link-input {
  background: var(--input-bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.settings-stack select:focus,
.select-setting select:focus,
.settings-grid select:focus,
.reply-box textarea:focus,
.topic-form textarea:focus,
.topic-form input:focus,
.topic-form select:focus,
.auth-dialog input:focus,
.auth-dialog textarea:focus,
.wide-search:focus-within,
.search:focus-within,
.message-compose input:focus,
.message-compose textarea:focus,
.conversation-compose input:focus,
.conversation-compose textarea:focus,
.username-request-form input:focus,
.username-request-form textarea:focus,
.username-review-actions textarea:focus,
.admin-actions input:focus,
.admin-actions select:focus,
.admin-actions textarea:focus,
.app-modal-field input:focus,
.app-modal-field textarea:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  outline: 0;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--input-disabled) !important;
  color: var(--muted) !important;
}

/* Editor source/visual modes now use the same themed surfaces. */
.rich-editor,
.rich-editor textarea,
.rich-editor .editor-wysiwyg,
.rich-editor .editor-source,
.rich-editor textarea.editor-source-visible,
.editor-surface,
.editor-preview {
  background: var(--input-bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.editor-toolbar,
.editor-footer {
  background: var(--surface-muted) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.editor-toolbar button,
.editor-toolbar select,
.editor-toolbar input[type="color"] {
  color: var(--ink) !important;
}

.editor-toolbar select,
.editor-toolbar input[type="color"] {
  background: var(--input-bg) !important;
  border-color: var(--line) !important;
}

.editor-toolbar button:hover,
.editor-toolbar button:focus-visible,
.editor-toolbar button.is-active {
  background: var(--surface-hover) !important;
  border-color: var(--line) !important;
}

.attach-button,
.upload-inline input[type="file"]::file-selector-button,
.close-btn,
.passkey-list button,
.password-row button {
  background: var(--surface-raised) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Main page containers that previously mixed themed and literal white cards. */
.info-panel,
.admin-panel,
.rules-doc,
.members-main,
.member-card,
.search-page-card,
.bookmarks-panel,
.following-panel,
.following-card,
.alerts-panel,
.pm-sidebar,
.pm-conversation,
.account-details,
.settings-card,
.security-card,
.password-card,
.two-step-card,
.push-settings-card,
.account-style-card,
.notification-card,
.points-shop-panel,
.points-shop-item,
.username-request-panel,
.username-request-form,
.username-request-row,
.username-review-center,
.username-review-case,
.inquiry-filter-row,
.application-status-page,
.application-panel-head,
.application-panel-section,
.application-reviewed-archive,
.application-review-card,
.application-review-grid section,
.application-review-note,
.app-modal,
.app-modal-body,
.app-modal-actions,
.auth-dialog,
.topic-dialog,
.welcome-panel,
.deleted-profile-card,
.quick-warn-form {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Rows and nested cards. */
.alert-row,
.pm-thread,
.pm-post,
.conversation-compose,
.bookmark-row,
.profile-activity-item,
.received-reaction-row,
.settings-row,
.password-row,
.toggle-row,
.admin-table article,
.admin-user-card-head,
.admin-user-summary,
.admin-network-card,
.admin-network-row,
.admin-ip-tools,
.admin-ip-tools > summary,
.admin-ip-group,
.admin-ip-group > header,
.admin-alt-match,
.admin-network-alert-row,
.staff-log-table,
.poll-card,
.solution-body-preview,
.report-collab,
.report-notes p,
.vip-payment-method,
.vip-checkout-summary,
.application-status-reason,
.application-status-note,
.application-review-card,
.application-review-grid section,
.application-review-note {
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.alert-row,
.pm-post,
.bookmark-row,
.profile-activity-item,
.received-reaction-row,
.admin-table article,
.admin-network-card,
.admin-ip-group,
.poll-card,
.solution-body-preview,
.report-collab,
.report-notes p,
.application-review-grid section,
.application-review-note {
  background: var(--paper) !important;
}

.alert-row:nth-child(even),
.pm-thread,
.conversation-compose,
.settings-row,
.password-row,
.toggle-row,
.admin-user-card-head,
.admin-ip-tools > summary,
.admin-ip-group > header,
.staff-log-table thead,
.vip-checkout-summary,
.application-status-reason,
.application-status-note,
.application-review-card {
  background: var(--row) !important;
}

.alert-row:hover,
.pm-thread:hover,
.pm-thread.active,
.bookmark-row:hover,
.profile-activity-item:hover,
.admin-table article:hover,
.application-review-card:hover {
  background: var(--surface-hover) !important;
}

.alert-row.is-unread,
.alert-row.alert-new {
  background: color-mix(in srgb, var(--orange) 10%, var(--paper)) !important;
  box-shadow: inset 4px 0 0 var(--orange);
}

/* Text that retained dark light-theme ink in dark modes. */
.account-details h1,
.account-details h2,
.account-details h3,
.settings-card h2,
.security-card h2,
.password-card h2,
.two-step-card h2,
.push-settings-card h2,
.alert-text,
.alert-main,
.pm-thread strong,
.pm-post,
.application-panel-head h1,
.application-panel-section h2,
.application-review-card strong,
.admin-panel h1,
.admin-panel h2,
.admin-panel h3,
.admin-user-card-head strong,
.admin-network-row strong,
.search-page-card h1,
.members-main h1,
.rules-doc h1,
.rules-doc h2 {
  color: var(--ink) !important;
}

.account-note,
.settings-copy,
.alert-row time,
.alert-row small,
.pm-thread p,
.pm-thread time,
.application-status-page > p,
.application-review-card > header p,
.application-review-card > header time,
.admin-user-card-head p,
.admin-network-row small,
.admin-ip-meta,
.form-status,
.editor-note {
  color: var(--muted) !important;
}

/* Application queue/status used undefined aliases and therefore stayed white. */
.application-status-reason,
.application-status-note,
.application-review-card {
  background: var(--panel-soft) !important;
}

.application-status-page h1 {
  background: var(--black) !important;
  color: #fff !important;
  border-bottom-color: var(--orange) !important;
}

.application-review-grid section,
.application-review-note {
  background: var(--panel) !important;
}

.admin-ip-version-pill {
  background: color-mix(in srgb, var(--ink) 11%, transparent) !important;
  color: var(--ink) !important;
}

.admin-shared-ip-cleanup-row {
  background: var(--danger-soft) !important;
  color: var(--ink) !important;
}

.thread-pagination span,
.pin {
  background: var(--surface-muted) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Forum index statistics and latest-post cells belong to the row itself.
   Keep them transparent so theme normalization does not turn each column
   into a separate boxed card. */
.forum-row > .count,
.forum-row > .last-post {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* Embedded media, accepted solutions and report cards. */
.bbcode-media,
.bbcode-media-preview,
.bbcode-media-footer,
.accepted-solution-banner,
.solution-summary,
.reported-content blockquote {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.bbcode-media-overlay,
.bbcode-media-play {
  color: #fff !important;
}

/* Browser autofill can otherwise force yellow/white fields in dark themes. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
  caret-color: var(--ink);
}

/* Re-apply the pink identity after generic dark normalization. */
:root[data-theme="cutesy-dark"] .nav-bar,
:root[data-theme="cutesy-dark"] .forum-table-head,
:root[data-theme="cutesy-dark"] .thread-list-head,
:root[data-theme="cutesy-dark"] .app-modal-head {
  background: #170d16 !important;
  border-color: #573247 !important;
}

:root[data-theme="cutesy-dark"] .account-menu a:hover,
:root[data-theme="cutesy-dark"] .account-menu a.active,
:root[data-theme="cutesy-dark"] .editor-toolbar button:hover,
:root[data-theme="cutesy-dark"] .editor-toolbar button.is-active {
  background: #45243a !important;
  color: #ffe7f2 !important;
  border-color: #74405b !important;
}

:root[data-theme="cutesy"] .primary-action,
:root[data-theme="cutesy"] .dialog-submit,
:root[data-theme="cutesy-dark"] .primary-action,
:root[data-theme="cutesy-dark"] .dialog-submit {
  border-color: var(--red);
  background: linear-gradient(180deg, var(--orange), var(--red));
  color: #fff;
}

@media (max-width: 720px) {
  .application-panel-head,
  .admin-user-card-head,
  .settings-row,
  .password-row,
  .settings-stack,
  .settings-grid,
  .application-review-grid section,
  .admin-ip-tools,
  .admin-network-card {
    min-width: 0;
  }
}

/* Security hardening: administrator payment review */
.admin-payment-review-section{margin:16px 0;padding:16px;border:1px solid var(--border);background:var(--panel);border-radius:10px}.admin-payment-review-section>h2{display:flex;gap:8px;align-items:center}.admin-payment-review-section>h2 span{font-size:.8em;padding:2px 7px;border-radius:999px;background:var(--panel-soft)}.admin-payment-review-row{align-items:flex-start}.admin-payment-review-row small{display:block;color:var(--muted);margin-top:6px}.admin-payment-review-row .admin-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ZAP hardening: move editor sizing out of inline style attributes. */
.new-topic-editor .editor-surface,
.new-topic-editor .editor-source {
  min-height: 360px;
}


/* 2026-07-15 mobile document editor, rectangular reactions, and route feedback. */
.route-loading-notice {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  z-index: 10020;
  min-width: 150px;
  max-width: calc(100vw - 28px);
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised, var(--panel));
  color: var(--text, var(--ink));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity .14s ease, transform .14s ease;
}
.route-loading-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
#app.route-is-loading {
  cursor: progress;
}

.reaction-picker {
  display: grid !important;
  grid-template-columns: repeat(6, 38px);
  align-items: center;
  gap: 5px;
  width: max-content;
  min-height: 0;
  max-width: min(286px, calc(100vw - 28px));
  padding: 8px;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  background: var(--surface-raised, var(--panel)) !important;
  color: var(--text, var(--ink)) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
  overflow: visible;
}
.reaction-control:hover .reaction-picker,
.reaction-control:focus-within .reaction-picker,
.reaction-control.is-open .reaction-picker {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.reaction-picker button {
  width: 38px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 4px !important;
  color: var(--text, var(--ink)) !important;
}
.reaction-picker button:hover,
.reaction-picker button:focus-visible {
  border-color: var(--border);
  background: var(--panel-soft) !important;
  transform: translateY(-1px);
}
.reaction-picker button[title^="Based"] {
  width: 38px;
  padding: 0 3px;
  border-radius: 4px !important;
}
:root[data-theme="cutesy"] .reaction-picker,
:root[data-theme="cutesy-dark"] .reaction-picker {
  border-color: var(--accent-soft, var(--border)) !important;
  box-shadow: 0 12px 28px rgba(255, 92, 168, .18);
}

.editor-toolbar {
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  touch-action: pan-x;
}
.editor-toolbar button,
.editor-toolbar select,
.editor-toolbar input[type="color"] {
  flex: 0 0 auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.editor-toolbar button.is-active,
.editor-toolbar button[aria-pressed="true"] {
  background: var(--panel-soft) !important;
  border-color: var(--accent, var(--blue)) !important;
  box-shadow: inset 0 -2px 0 var(--accent, var(--blue)) !important;
}
.editor-surface,
.editor-wysiwyg {
  caret-color: currentColor;
  -webkit-user-select: text;
  user-select: text;
}
@media (max-width: 720px) {
  .editor-toolbar {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 4px;
    padding: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .toolbar-group {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    gap: 3px;
    scroll-snap-align: start;
  }
  .toolbar-field {
    white-space: nowrap;
  }
  .editor-toolbar button,
  .editor-toolbar select {
    min-height: 36px;
  }
  .editor-toolbar input[type="color"] {
    width: 38px;
    height: 36px;
  }
  .reaction-picker {
    left: auto;
    right: 0;
    grid-template-columns: repeat(4, 40px);
    max-width: calc(100vw - 24px);
    overflow: visible;
  }
}

/* Keep the mobile reaction tray fully inside the viewport. */
@media (max-width: 720px) {
  .reaction-picker {
    position: fixed;
    left: 50% !important;
    right: auto !important;
    bottom: max(70px, calc(env(safe-area-inset-bottom) + 58px)) !important;
    transform: translate(-50%, 8px) !important;
  }
  .reaction-control:hover .reaction-picker,
  .reaction-control:focus-within .reaction-picker,
  .reaction-control.is-open .reaction-picker {
    transform: translate(-50%, 0) !important;
  }
}


/* 2026-07-15 member/search/alerts UX refinement. */
.route-loading-notice { display: none !important; }

.member-directory-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
}
.member-directory-head h1 { margin: 0; }
.member-search-box {
  width: min(520px, 100%);
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  min-height: 40px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.member-search-label {
  display: flex;
  align-items: center;
  padding: 0 13px;
  border-right: 1px solid var(--line);
  background: var(--row);
  color: var(--ink);
  font-weight: 850;
  white-space: nowrap;
}
.member-search-control {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  background: var(--input-bg, var(--paper));
}
.member-search-icon {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
}
.member-search-box input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  color: var(--ink) !important;
  font: inherit;
}
.member-search-box:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 18%, transparent);
}

.advanced-search-page { overflow: hidden; }
.advanced-search-form {
  display: grid;
  gap: 16px;
  padding: 18px;
  background: var(--paper);
}
.advanced-search-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 850;
}
.advanced-search-form label > span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.advanced-search-form input,
.advanced-search-form select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  background: var(--input-bg, var(--paper));
  color: var(--ink);
  font: inherit;
}
.advanced-search-form input:focus,
.advanced-search-form select:focus {
  outline: 2px solid color-mix(in srgb, var(--orange) 24%, transparent);
  outline-offset: 1px;
  border-color: var(--orange);
}
.advanced-search-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.advanced-search-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-empty-state {
  border-top: 1px solid var(--line);
  padding: 22px 18px;
}

@media (max-width: 880px) {
  .member-directory-head { align-items: stretch; flex-direction: column; gap: 10px; }
  .member-search-box { width: 100%; }
  .advanced-search-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .member-search-box { grid-template-columns: 1fr; }
  .member-search-label {
    min-height: 34px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .advanced-search-form { padding: 14px; }
  .advanced-search-filters { grid-template-columns: 1fr; }
  .advanced-search-actions { align-items: stretch; flex-direction: column; }
  .advanced-search-actions > * { width: 100%; justify-content: center; text-align: center; }
}

/* 2026-07-15 top notification icons and rendering-performance pass. */
.mast-actions,
.top-icon {
  overflow: visible !important;
}
.top-icon {
  isolation: isolate;
}
.top-icon > .top-icon-glyph {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
  pointer-events: none;
}
.top-icon-glyph svg {
  width: 22px;
  height: 22px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.top-icon-alerts .top-icon-glyph svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.85;
}
.top-icon > .top-icon-count {
  position: absolute !important;
  z-index: 4;
  top: 2px !important;
  right: 2px !important;
  min-width: 18px !important;
  width: auto !important;
  height: 18px !important;
  padding: 0 4px !important;
  display: inline-grid !important;
  place-items: center !important;
  box-sizing: border-box;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.02em;
  transform: translate(42%, -42%);
  pointer-events: none;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .top-icon > .top-icon-count {
  border-color: #171d24 !important;
}
:root[data-theme="cutesy"] .top-icon > .top-icon-count {
  border-color: #fff8fc !important;
}
.member-card,
.modern-alerts .alert-card,
.pm-thread {
  content-visibility: auto;
}
.member-card { contain-intrinsic-size: 72px; }
.modern-alerts .alert-card { contain-intrinsic-size: 78px; }
.pm-thread { contain-intrinsic-size: 64px; }

@media (max-width: 560px) {
  .top-icon > .top-icon-glyph {
    width: 22px !important;
    height: 22px !important;
  }
  .top-icon-glyph svg {
    width: 20px;
    height: 20px;
  }
  .top-icon > .top-icon-count {
    top: -1px !important;
    right: -1px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 3px !important;
    font-size: 9px !important;
    transform: translate(28%, -28%);
  }
}

/* 2026-07-15 private-message composer usability pass. */
.pm-page {
  display: grid;
  gap: 16px;
  margin: 0 18px 26px;
}

.pm-page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}

.pm-page-heading h1,
.pm-compose-card h2,
.pm-inbox-list h2 {
  margin: 0;
}

.pm-page-heading h1 {
  font-size: clamp(26px, 4vw, 34px);
}

.pm-page-heading p,
.pm-compose-card > header p,
.pm-inbox-list > header p,
.pm-reply-heading span {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.pm-page-count {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  padding: 6px 9px;
  background: var(--row);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.pm-compose-card,
.pm-inbox-list {
  border: 1px solid var(--line);
  background: var(--paper);
}

.pm-compose-card > header,
.pm-inbox-list > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.pm-compose-card > header {
  background: var(--black);
  color: #fff;
}

.pm-compose-card > header p {
  color: rgba(255, 255, 255, .68);
}

.pm-compose-card > header h2,
.pm-inbox-list > header h2 {
  font-size: 18px;
}

.pm-new-message.message-compose,
.conversation-compose.message-compose {
  display: block;
  margin: 0;
}

.pm-compose-fields {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
  border-bottom: 1px solid var(--line);
}

.pm-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 14px;
  border-right: 1px solid var(--line);
  background: var(--paper);
}

.pm-field:last-child {
  border-right: 0;
}

.pm-field-label {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.pm-field > input,
.pm-recipient-control {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.pm-field > input {
  padding: 0 11px;
}

.pm-recipient-control {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: stretch;
}

.pm-recipient-control > b {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  background: var(--row);
  color: var(--muted);
  font-size: 16px;
}

.pm-recipient-control input {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  outline: 0;
  padding: 0 11px;
  background: transparent !important;
  color: var(--ink) !important;
}

.pm-field > input:focus,
.pm-recipient-control:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 20%, transparent);
  outline: 0;
}

.pm-field small {
  min-height: 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.pm-field small.is-confirmed {
  color: #21813c;
  font-weight: 800;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-field small.is-confirmed {
  color: #71d58a;
}

.pm-compose-editor {
  padding: 14px;
  background: var(--paper);
}

.pm-compose-editor > .pm-field-label {
  display: block;
  margin-bottom: 7px;
}

.pm-compose-editor .rich-editor,
.conversation-compose .rich-editor {
  border: 1px solid var(--line);
  box-shadow: none;
}

.pm-compose-editor .editor-toolbar,
.conversation-compose .editor-toolbar {
  border-bottom: 1px solid var(--line);
}

.pm-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: var(--row);
}

.pm-compose-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.pm-compose-meta [data-pm-character-count] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pm-compose-meta [data-pm-character-count].is-near-limit {
  color: var(--red);
  font-weight: 900;
}

.pm-send-button {
  min-width: 190px;
  min-height: 40px;
}

.pm-inbox-list > header {
  background: var(--row);
}

.pm-inbox-rows {
  display: grid;
}

.pm-inbox-list .pm-inbox-row {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(180px, 1.2fr) auto;
  gap: 4px 14px;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
}

.pm-inbox-list .pm-inbox-row:last-child {
  border-bottom: 0;
}

.pm-inbox-list .pm-inbox-row:hover,
.pm-inbox-list .pm-inbox-row:focus-visible {
  background: var(--row);
}

.pm-inbox-list .pm-inbox-row.is-unread {
  box-shadow: inset 4px 0 0 var(--orange);
  background: color-mix(in srgb, var(--orange) 7%, var(--paper));
}

/* PM inbox rows already have their own unread styling. Do not also inherit the generic alert unread dot and left padding, which overlaps the sender name. */
.pm-inbox-list .pm-inbox-row.alert-row.is-unread {
  padding-left: 14px;
}

.pm-inbox-list .pm-inbox-row.alert-row.is-unread::before {
  content: none;
  display: none;
}

.pm-inbox-name,
.pm-inbox-subject {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-inbox-name {
  color: var(--ink);
  font-weight: 900;
}

.pm-inbox-subject {
  color: var(--ink);
  font-weight: 750;
}

.pm-inbox-date {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.pm-inbox-list .pm-inbox-row p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-empty-inbox {
  padding: 22px 14px;
}

.pm-reply-panel {
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.pm-reply-heading {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--row);
}

.pm-reply-heading strong,
.pm-reply-heading span {
  display: block;
}

.conversation-compose {
  padding: 14px;
}

.conversation-compose > .pm-compose-meta {
  justify-content: flex-end;
  padding-top: 7px;
}

.conversation-compose .editor-footer {
  align-items: center;
}

.conversation-compose .editor-submit {
  order: 3;
  margin-left: auto;
}

@media (max-width: 720px) {
  .pm-page {
    margin: 0 10px 18px;
    gap: 12px;
  }

  .pm-page-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .pm-compose-fields {
    grid-template-columns: 1fr;
  }

  .pm-field {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .pm-field:last-child {
    border-bottom: 0;
  }

  .pm-compose-card > header,
  .pm-inbox-list > header {
    align-items: flex-start;
  }

  /* The black PM conversation subject bar is too visually heavy on mobile. */
  .pm-conversation header {
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--row);
    color: var(--ink);
  }

  .pm-conversation-title h1 {
    font-size: 16px;
    line-height: 1.3;
  }

  .pm-conversation-title span {
    display: none;
  }

  .pm-compose-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .pm-compose-meta {
    justify-content: space-between;
  }

  .pm-send-button {
    width: 100%;
    min-width: 0;
  }

  .pm-inbox-list .pm-inbox-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pm-inbox-subject {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .pm-inbox-list .pm-inbox-row p {
    grid-row: 3;
  }

  .conversation-compose {
    padding: 10px;
  }

  .conversation-compose .editor-footer {
    align-items: stretch;
  }

  .conversation-compose .editor-note {
    display: none !important;
  }

  .conversation-compose .editor-submit {
    width: 100%;
    margin-left: 0;
  }
}

/* Keep the PM grid from inheriting the generic mobile <main> width and
   from expanding to the editor toolbar's min-content width. */
.pm-page,
.pm-page > *,
.pm-compose-card,
.pm-inbox-list,
.pm-new-message,
.pm-compose-fields,
.pm-field,
.pm-compose-editor,
.pm-compose-editor .rich-editor,
.pm-compose-card > header > div,
.pm-inbox-list > header > div,
.pm-compose-actions {
  min-width: 0;
  max-width: 100%;
}

.pm-compose-card > header p,
.pm-inbox-list > header p,
.pm-reply-heading span {
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  main.pm-page {
    width: auto !important;
    max-width: none !important;
  }

  .pm-compose-card,
  .pm-inbox-list {
    width: 100%;
  }

  .pm-compose-editor .editor-toolbar,
  .conversation-compose .editor-toolbar {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .pm-compose-editor .rich-editor,
  .conversation-compose .rich-editor {
    overflow: hidden;
  }
}


/* 2026-07-15 centered desktop/mobile masthead controls. */
.account-link.top-icon-settings[href="#/account"]::before {
  content: none !important;
  display: none !important;
}

.mast-actions > .top-icon,
.mast-actions > .account-link.top-icon-settings {
  position: relative;
  align-self: center;
}

.top-icon > .top-icon-glyph,
.account-link.top-icon-settings > .top-icon-glyph {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: translate(-50%, -50%) !important;
}

.top-icon-settings .top-icon-glyph svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.8;
}

/* The bell shape carries more visual weight above its midpoint than below it. */
.mast-actions > .top-icon.top-icon-alerts > .top-icon-glyph {
  top: calc(50% + 2px) !important;
}

@media (max-width: 560px) {
  .mast-actions {
    align-items: center !important;
  }

  .mast-actions > .account-chip,
  .mast-actions > .top-icon,
  .mast-actions > .account-link {
    align-self: center !important;
  }

  .account-chip .chip-avatar {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
  }

  .top-icon > .top-icon-glyph,
  .account-link.top-icon-settings > .top-icon-glyph {
    width: 20px !important;
    height: 20px !important;
    transform: translate(-50%, -50%) !important;
  }

  .top-icon-glyph svg,
  .top-icon-alerts .top-icon-glyph svg,
  .top-icon-settings .top-icon-glyph svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Keep the bell optically aligned without letting it sit too low. */
  .mast-actions > .top-icon.top-icon-alerts > .top-icon-glyph {
    top: calc(50% + 1px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}


/* 2026-07-16 compact mobile thread header and reply composer. */
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .attach-button {
  background: var(--surface-hover) !important;
  color: var(--ink) !important;
  border-color: color-mix(in srgb, var(--ink) 42%, var(--line)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .attach-button:hover,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .attach-button:focus-visible {
  background: color-mix(in srgb, var(--surface-hover) 82%, var(--ink) 18%) !important;
  color: var(--ink) !important;
  border-color: color-mix(in srgb, var(--ink) 62%, var(--line)) !important;
}

@media (max-width: 560px) {
  /* Smaller glyphs inside the existing touch targets. */
  .top-icon > .top-icon-glyph,
  .account-link.top-icon-settings > .top-icon-glyph {
    width: 18px !important;
    height: 18px !important;
  }

  .top-icon-glyph svg,
  .top-icon-alerts .top-icon-glyph svg,
  .top-icon-settings .top-icon-glyph svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* A thread page only needs its title in the mobile heading area. */
  .thread-breadcrumb,
  .thread-hero .thread-meta {
    display: none !important;
  }

  .thread-hero {
    padding-top: 0;
    padding-bottom: 12px;
  }

  .thread-hero h1 {
    font-size: clamp(23px, 7.4vw, 30px);
  }

  /* Keep the reply composer useful without letting it dominate the page. */
  .reply-box {
    padding: 12px;
  }

  .reply-box h2 {
    margin-bottom: 8px;
  }

  .reply-box .rich-editor .editor-wysiwyg,
  .reply-box .rich-editor textarea.editor-source-visible,
  .reply-box .rich-editor .editor-source {
    min-height: 150px !important;
  }

  .reply-box .rich-editor.has-editor-submit .editor-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    flex-wrap: nowrap !important;
    gap: 8px;
    padding: 8px 10px;
  }

  .reply-box .rich-editor.has-editor-submit .editor-note {
    display: none !important;
  }

  .reply-box .rich-editor.has-editor-submit .attach-button,
  .reply-box .rich-editor.has-editor-submit .editor-submit {
    flex: 0 0 100px;
    width: 100px !important;
    min-width: 100px;
    min-height: 34px;
    margin: 0 !important;
    padding: 0 10px;
  }

  .reply-box .rich-editor.has-editor-submit .editor-submit {
    margin-left: auto !important;
  }
}

/* 2026-07-16 PM thread separation, mobile containment, and anchored reaction tray. */
.pm-conversation-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.pm-conversation-title h1,
.pm-conversation-title span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pm-conversation-title span {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
}

.pm-layout,
.pm-layout > *,
.pm-sidebar,
.pm-conversation,
.pm-conversation > *,
.pm-posts,
.pm-reply-panel,
.conversation-compose,
.conversation-compose .rich-editor,
.conversation-compose .editor-toolbar,
.pm-thread,
.pm-post {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.pm-thread strong,
.pm-thread span,
.pm-post,
.pm-post .profile-bbcode {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 720px) {
  main.pm-page,
  .pm-layout {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    box-sizing: border-box !important;
  }

  .pm-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }

  .pm-sidebar,
  .pm-conversation,
  .pm-posts,
  .pm-reply-panel,
  .conversation-compose,
  .conversation-compose .rich-editor,
  .pm-compose-card,
  .pm-inbox-list,
  .pm-new-message,
  .pm-compose-fields,
  .pm-compose-editor,
  .pm-compose-editor .rich-editor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .pm-conversation > header {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .pm-conversation-title {
    flex: 1 1 180px;
  }

  .pm-posts {
    padding: 10px;
    overflow-x: clip;
  }

  .pm-post {
    width: auto;
    max-width: 100% !important;
  }

  .pm-compose-editor .editor-toolbar,
  .conversation-compose .editor-toolbar {
    display: flex;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .pm-compose-editor .toolbar-group,
  .conversation-compose .toolbar-group {
    flex: 0 0 auto;
  }

  /* The tray remains fixed to escape the post card's overflow clipping,
     but JavaScript places it immediately above the tapped reaction button. */
  .reaction-picker {
    position: fixed !important;
    left: var(--reaction-picker-left, 8px) !important;
    top: var(--reaction-picker-top, 8px) !important;
    right: auto !important;
    bottom: auto !important;
    max-width: calc(100vw - 16px) !important;
    z-index: 1100 !important;
    transform: translateY(6px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .reaction-control:hover .reaction-picker,
  .reaction-control:focus-within .reaction-picker {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(6px) !important;
  }

  .reaction-control.is-open .reaction-picker {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}


/* 2026-07-18 SOTF badge, exclusive styling, and account-page organization. */
[data-name-effect="sotf-bloodsteel"],
[data-name-effect="sotf-war-banner"],
[data-name-effect="sotf-nightblade"],
[data-name-effect="sotf-blood-moon"],
[data-name-effect="sotf-slayer-gold"] {
  position: relative;
  display: inline-block;
  background-size: 280% 100% !important;
  letter-spacing: .012em;
}
[data-name-effect="sotf-bloodsteel"] {
  animation: sotfSteelSweep 5.4s linear infinite, sotfSteelPulse 2.8s ease-in-out infinite alternate;
  text-shadow: 0 1px 0 rgba(255,255,255,.3), 0 0 7px rgba(140,0,18,.78), 0 0 15px rgba(20,20,24,.5) !important;
}
[data-name-effect="sotf-war-banner"] {
  animation: sotfBannerMarch 4.4s linear infinite;
  text-shadow: -1px 0 rgba(255,255,255,.3), 1px 0 rgba(155,0,20,.65), 0 0 9px rgba(150,0,20,.48) !important;
}
[data-name-effect="sotf-nightblade"] {
  animation: sotfBladeGlint 5.8s ease-in-out infinite;
  text-shadow: 0 1px 0 rgba(255,255,255,.2), 0 0 6px rgba(180,15,38,.58), 0 0 12px rgba(0,0,0,.6) !important;
}
[data-name-effect="sotf-blood-moon"] {
  animation: sotfMoonFlow 6.2s linear infinite, sotfMoonPulse 3.1s ease-in-out infinite alternate;
  text-shadow: 0 0 4px rgba(255,190,198,.55), 0 0 12px rgba(182,0,28,.72), 0 0 22px rgba(35,0,8,.58) !important;
}
[data-name-effect="sotf-blood-moon"]::after {
  content: "";
  position: absolute;
  inset: -.1em -.22em;
  z-index: -1;
  border-radius: 48%;
  background: radial-gradient(ellipse, rgba(180,0,28,.17), transparent 68%);
  filter: blur(4px);
  pointer-events: none;
}
[data-name-effect="sotf-slayer-gold"] {
  animation: sotfGoldFlow 5s linear infinite, sotfGoldPulse 2.8s ease-in-out infinite alternate;
  text-shadow: 0 0 3px rgba(255,249,205,.75), 0 0 10px rgba(201,153,37,.7), 0 0 17px rgba(100,0,16,.45) !important;
}

/* Focused premium text treatments: the animation lives inside the letters. */
[data-name-effect="ghostface"] {
  display: inline-block;
  overflow: clip;
  padding: 0;
  background-size: 220% 100% !important;
  animation: vipGhostSweep 5.5s ease-in-out infinite !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 0 7px rgba(0,0,0,.42) !important;
}
[data-name-effect="ghostface"]::before,
[data-name-effect="ghostface"]::after {
  content: none !important;
  display: none !important;
}

[data-name-effect="oceanic"] {
  display: inline-block;
  overflow: clip;
  background-size: 280% 100% !important;
  animation: vipOceanTextFlow 4.4s linear infinite !important;
  text-shadow: 0 0 4px rgba(234,252,255,.88), 0 0 10px rgba(34,211,238,.7), 0 0 17px rgba(3,105,161,.38) !important;
}
[data-name-effect="oceanic"]::before,
[data-name-effect="oceanic"]::after {
  content: none !important;
  display: none !important;
}

[data-name-effect="sotf-special-red"],
[data-name-effect="sotf-special-blue"] {
  display: inline-block;
  background-size: 260% 100% !important;
  letter-spacing: .01em;
}
[data-name-effect="sotf-special-red"] {
  animation: sotfSpecialRedFlow 3.6s linear infinite, sotfSpecialRedGlow 1.9s ease-in-out infinite alternate !important;
  text-shadow: 0 0 4px rgba(255,220,220,.88), 0 0 11px rgba(255,20,20,.92), 0 0 21px rgba(185,0,0,.58) !important;
}
[data-name-effect="sotf-special-blue"] {
  animation: sotfSpecialBlueFlow 4.2s linear infinite, sotfSpecialBlueGlow 2.15s ease-in-out infinite alternate !important;
  text-shadow: 0 0 4px rgba(224,247,255,.9), 0 0 11px rgba(28,129,255,.92), 0 0 22px rgba(0,73,190,.55) !important;
}
@keyframes vipOceanTextFlow { from { background-position: 0% 50%; filter: saturate(1.08) brightness(1); } to { background-position: 100% 50%; filter: saturate(1.28) brightness(1.14); } }
@keyframes sotfSpecialRedFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes sotfSpecialBlueFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes sotfSpecialRedGlow { from { filter: brightness(.97); } to { filter: brightness(1.2) saturate(1.22); } }
@keyframes sotfSpecialBlueGlow { from { filter: brightness(.98); } to { filter: brightness(1.22) saturate(1.18); } }
@keyframes sotfSteelSweep { from { background-position: 0 50%; } to { background-position: 280% 50%; } }
@keyframes sotfSteelPulse { from { filter: contrast(1) brightness(.98); } to { filter: contrast(1.12) brightness(1.08); } }
@keyframes sotfBannerMarch { 0% { background-position: 0 50%; } 100% { background-position: 280% 50%; } }
@keyframes sotfBladeGlint { 0%,100% { background-position: 0 50%; filter: brightness(.94); } 48% { background-position: 155% 50%; filter: brightness(1.12); } 58% { background-position: 210% 50%; filter: brightness(.98); } }
@keyframes sotfMoonFlow { from { background-position: 0 50%; } to { background-position: 280% 50%; } }
@keyframes sotfMoonPulse { from { filter: saturate(.95) brightness(.98); } to { filter: saturate(1.25) brightness(1.1); } }
@keyframes sotfGoldFlow { from { background-position: 0 50%; } to { background-position: 280% 50%; } }
@keyframes sotfGoldPulse { from { filter: saturate(1); } to { filter: saturate(1.2) brightness(1.1); } }

.role-badge.badge-sotf,
.badge-row.small .role-badge.badge-sotf {
  position: relative;
  overflow: hidden;
  border: 1px solid #f04a5f;
  background: linear-gradient(180deg,#4f0711 0%,#17070a 52%,#050505 100%);
  color: #fff4f5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.75), 0 0 0 1px rgba(80,0,12,.65), 0 0 8px rgba(205,15,45,.32);
  text-shadow: 0 1px 0 #000, 0 0 5px rgba(255,65,91,.72);
  letter-spacing: .08em;
}
.role-badge.badge-sotf::before {
  content: "†";
  color: #ff8898;
  font-weight: 950;
  text-shadow: 0 0 5px rgba(255,75,100,.8);
}
.role-badge.badge-sotf::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24%;
  left: -35%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  animation: sotfBadgeSweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sotfBadgeSweep { 0%,68% { left: -35%; } 86%,100% { left: 118%; } }

.account-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}
.account-page-head h1 { margin: 0 0 4px; }
.account-page-head p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.account-profile-copy-card,
.account-media-grid,
.account-form-grid { min-width: 0; }
.account-form-grid,
.account-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.account-form-grid > label,
.account-media-grid > label { margin: 0; min-width: 0; }
.account-form-grid .wide-field { grid-column: 1 / -1; }
.account-details label small { color: var(--muted); font-weight: 700; }
.account-details input,
.account-details textarea,
.account-details select { min-width: 0; box-sizing: border-box; }
.account-details textarea { resize: vertical; }
.account-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 -5px 12px rgba(0,0,0,.05);
  backdrop-filter: blur(4px);
}
.account-save-bar span { color: var(--muted); font-size: .82rem; font-weight: 700; }
.account-save-bar .primary-action { flex: 0 0 auto; }
.account-save-bar-actions-only { justify-content: flex-end; }
.sotf-access-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid #8d1c2d;
  border-left: 4px solid #d71d3b;
  background: linear-gradient(90deg,rgba(86,5,18,.11),rgba(20,20,22,.03));
}
.sotf-access-notice strong,
.sotf-access-notice small { display: block; }
.sotf-access-notice small { margin-top: 3px; color: var(--muted); line-height: 1.4; }
.username-style-panel {
  margin: 0 0 18px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.username-style-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--row);
}
.username-style-panel-head h2,
.username-style-panel-head p { margin: 0; }
.username-style-panel-head h2 { font-size: 1rem; }
.username-style-panel-head p { color: var(--muted); font-size: .82rem; }
.name-style-group { border-bottom: 1px solid var(--line); }
.name-style-group:last-child { border-bottom: 0; }
.name-style-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 10px 14px;
  cursor: pointer;
  list-style-position: inside;
  background: #272b31;
  color: #fff;
  user-select: none;
}
.name-style-group > summary span { min-width: 0; }
.name-style-group > summary strong,
.name-style-group > summary small { display: block; }
.name-style-group > summary small { margin-top: 2px; color: #c8ced6; font-size: .78rem; font-weight: 650; }
.name-style-group > summary b {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .69rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.name-style-group-sotf > summary { background: linear-gradient(180deg,#520916,#19080b); border-top: 1px solid #9e2033; }
.name-style-group-vip > summary { background: linear-gradient(180deg,#25334a,#101722); border-top: 1px solid #60799e; }
.name-style-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  background: var(--paper);
}
.account-details .name-style-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 48px;
  margin: 0;
  padding: 8px 11px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.account-details .name-style-choice:nth-child(2n) { border-right: 0; }
.account-details .name-style-choice input { width: auto; margin: 0; }
.name-style-choice-copy { min-width: 0; }
.name-style-choice-copy strong,
.name-style-choice-copy small { display: block; overflow-wrap: anywhere; }
.name-style-choice-copy small { margin-top: 2px; color: var(--muted); font-size: .72rem; font-weight: 650; }
.account-details .name-style-choice:has(input:checked) {
  background: color-mix(in srgb, var(--orange) 9%, var(--paper));
  box-shadow: inset 4px 0 0 var(--orange);
}
.account-details .name-style-choice.locked-choice { opacity: .62; cursor: not-allowed; background: var(--row); }

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-save-bar,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .username-style-panel,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .name-style-options,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-details .name-style-choice {
  background: var(--paper);
  border-color: var(--line);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .account-details .name-style-choice.locked-choice { background: var(--row); }

@media (max-width: 720px) {
  .account-layout { gap: 10px; padding: 0 9px; }
  .account-menu {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 12;
  }
  .account-menu strong { display: none; }
  .account-menu a,
  .account-menu button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 12px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
  .account-menu .active { border-left: 0; border-bottom: 3px solid var(--orange); }
  .account-details { padding: 12px; }
  .account-page-head { display: block; }
  .account-form-grid,
  .account-media-grid,
  .name-style-options { grid-template-columns: 1fr; }
  .account-details .name-style-choice,
  .account-details .name-style-choice:nth-child(2n) { border-right: 0; }
  .account-style-card { margin-bottom: 12px; padding: 12px; }
  .account-style-card-head { padding-bottom: 8px; margin-bottom: 10px; }
  .account-save-bar {
    margin: 14px -12px -12px;
    padding: 10px 12px;
    align-items: stretch;
    flex-direction: column;
  }
  .account-save-bar .primary-action { width: 100%; }
  .username-style-panel-head,
  .name-style-group > summary { align-items: flex-start; }
  .name-style-group > summary b { max-width: 42%; white-space: normal; text-align: right; }
  .sotf-access-notice { align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  [data-name-effect^="sotf-"],
  .role-badge.badge-sotf::after { animation: none !important; }
}


/* 2026-07-25 requested editor, application-panel, and PM clarity fixes. */
.reply-box .rich-editor.has-editor-submit .editor-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 8px 10px !important;
}

.reply-box .rich-editor.has-editor-submit .attach-button,
.reply-box .rich-editor.has-editor-submit .editor-submit {
  flex: 0 0 100px !important;
  width: 100px !important;
  min-width: 100px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  box-shadow: none !important;
}

.reply-box .rich-editor.has-editor-submit .editor-submit {
  position: static !important;
  margin-left: auto !important;
}

.editor-note {
  display: none !important;
}

.app-modal.edit-post-modal {
  width: min(900px, calc(100vw - 28px));
}

.edit-post-modal .app-modal-body,
.edit-post-modal .app-modal-rich-field,
.edit-post-modal .rich-editor {
  min-width: 0;
}

.edit-post-modal .rich-editor {
  width: 100%;
  border: 1px solid var(--line);
  box-shadow: none;
}

.edit-post-modal .editor-footer {
  justify-content: flex-start;
}

.application-read-only {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--row);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.pm-posts {
  align-items: start;
}

.pm-post {
  justify-self: start;
  width: fit-content;
  max-width: 72%;
  margin-right: 18%;
  border-radius: 14px 14px 14px 4px;
  border-color: color-mix(in srgb, var(--line) 80%, var(--blue)) !important;
  border-left: 4px solid color-mix(in srgb, var(--blue) 65%, var(--line)) !important;
  background: var(--row-alt) !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .05);
}

.pm-post.mine {
  justify-self: end;
  margin-right: 0;
  margin-left: 18%;
  border-radius: 14px 14px 4px 14px;
  border: 1px solid color-mix(in srgb, var(--orange) 52%, var(--line)) !important;
  border-right: 4px solid var(--orange) !important;
  background: color-mix(in srgb, var(--orange) 16%, var(--paper)) !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-post {
  background: color-mix(in srgb, var(--row-alt) 88%, var(--paper)) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-post.mine {
  background: color-mix(in srgb, var(--orange) 22%, var(--paper)) !important;
}

/* Per-message PM report button — discrete, hover-revealed on desktop, always visible (dim) on mobile. */
.pm-post { position: relative; }
.pm-report-button {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  padding: 2px 5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease;
  line-height: 1;
  z-index: 2;
}
.pm-post:hover .pm-report-button,
.pm-post:focus-within .pm-report-button { opacity: .6; }
.pm-report-button:hover,
.pm-report-button:focus-visible { opacity: 1 !important; color: var(--red); outline: none; }

@media (max-width: 720px) {
  .app-modal.edit-post-modal {
    width: calc(100vw - 18px);
  }

  .edit-post-modal .app-modal-body {
    padding: 10px;
  }

  .edit-post-modal .editor-toolbar {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .pm-post {
    max-width: 86% !important;
    margin-right: 8%;
  }

  .pm-post.mine {
    margin-right: 0;
    margin-left: 8%;
  }
}

/* 2026-07-25 PM Checkers and boxy conversation update. */
.pm-conversation > header {
  overflow: visible;
}

.pm-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex: 0 0 auto;
}

.pm-games-menu {
  position: relative;
  z-index: 35;
}

.pm-games-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--row);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  user-select: none;
}

.pm-games-menu > summary::-webkit-details-marker { display: none; }
.pm-games-menu > summary::after { content: "▾"; margin-left: 7px; font-size: 10px; }
.pm-games-menu[open] > summary { background: var(--paper); box-shadow: inset 0 -3px 0 var(--orange); }

.pm-games-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: min(330px, calc(100vw - 24px));
  border: 1px solid var(--line-strong, var(--line));
  background: var(--paper);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--line) 75%, transparent);
  text-align: left;
}

.pm-games-dropdown > header {
  display: block;
  min-height: 0;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--row);
}

.pm-games-dropdown > header strong,
.pm-games-dropdown > header span { display: block; }
.pm-games-dropdown > header strong { font-size: 13px; }
.pm-games-dropdown > header span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.pm-games-menu-body { padding: 8px; }
.pm-game-loading,
.pm-game-error,
.pm-game-empty { margin: 4px; color: var(--muted); font-size: 12px; }
.pm-game-error { color: var(--danger, #a82828); }

.pm-game-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  background: var(--row-alt);
}

.pm-game-row.status-active { border-left-color: var(--orange); }
.pm-game-row.status-completed,
.pm-game-row.status-declined,
.pm-game-row.status-cancelled { border-left-color: var(--muted); }
.pm-game-row > div:first-child { min-width: 0; }
.pm-game-row strong,
.pm-game-row span { display: block; }
.pm-game-row strong { font-size: 12px; }
.pm-game-row span { margin-top: 2px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.pm-game-row button,
.pm-game-menu-footer button,
.pm-game-load {
  min-height: 31px;
  padding: 0 9px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}
.pm-game-row button:hover,
.pm-game-menu-footer button:hover,
.pm-game-load:hover { background: var(--row); }
.pm-game-row button:disabled,
.pm-game-menu-footer button:disabled { opacity: .55; cursor: default; }
.pm-game-actions { display: flex; gap: 4px; }
.pm-game-actions .danger-action { color: var(--danger, #9d2626); }
.pm-game-menu-footer { display: flex; align-items: stretch; gap: 5px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.pm-game-menu-footer [data-checkers-invite] { flex: 1 1 auto; }
.pm-game-refresh { flex: 0 0 auto; }

/* Return PM messages to the forum's square, table-like visual language while retaining clear ownership. */
.pm-posts {
  gap: 7px;
  padding: 10px;
  background: color-mix(in srgb, var(--row) 55%, var(--paper));
}

.pm-post,
.pm-post.mine {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.pm-post {
  justify-self: start;
  width: min(78%, 720px);
  max-width: 78%;
  margin: 0 14% 0 0;
  border: 1px solid color-mix(in srgb, var(--blue) 40%, var(--line)) !important;
  border-left: 5px solid color-mix(in srgb, var(--blue) 72%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 6%, var(--paper)) !important;
}

.pm-post.mine {
  justify-self: end;
  margin: 0 0 0 14%;
  border: 1px solid color-mix(in srgb, var(--orange) 52%, var(--line)) !important;
  border-right: 5px solid var(--orange) !important;
  border-left-width: 1px !important;
  background: color-mix(in srgb, var(--orange) 10%, var(--paper)) !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-post {
  background: color-mix(in srgb, var(--blue) 10%, var(--paper)) !important;
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line)) !important;
}

:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .pm-post.mine {
  background: color-mix(in srgb, var(--orange) 16%, var(--paper)) !important;
  border-color: color-mix(in srgb, var(--orange) 58%, var(--line)) !important;
}

.checkers-dialog {
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .22);
}

.checkers-dialog::backdrop { background: rgba(0, 0, 0, .64); }
.checkers-window { min-width: 0; }
.checkers-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--row);
}
.checkers-window-head h2,
.checkers-window-head p { margin: 0; }
.checkers-window-head h2 { font-size: 18px; }
.checkers-window-head p { margin-top: 2px; color: var(--muted); font-size: 11px; }
.checkers-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.checkers-status {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  font-size: 12px;
  font-weight: 850;
}
.checkers-board-wrap { padding: 12px; overflow: auto; }
.checkers-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: min(100%, 520px);
  aspect-ratio: 1;
  margin: 0 auto;
  border: 3px solid var(--ink);
  background: var(--paper);
}
.checkers-square {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: default;
}
.checkers-square.is-light { background: #ded4bf; }
.checkers-square.is-dark { background: #66594c; }
.checkers-square.is-dark:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.checkers-square.is-selected { box-shadow: inset 0 0 0 4px #f2b632; }
.checkers-square.is-target::after {
  content: "";
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}
.checkers-square.is-target { cursor: pointer; }
.checkers-piece {
  display: grid;
  place-items: center;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .14), 0 2px 0 rgba(0, 0, 0, .35);
  pointer-events: none;
}
.checkers-piece.side-one { background: #a62323; }
.checkers-piece.side-two { background: #202020; }
.checkers-piece i {
  display: grid;
  place-items: center;
  width: 55%;
  aspect-ratio: 1;
  border: 2px solid #e6c45d;
  border-radius: 50%;
  color: #f5dc81;
  font-size: clamp(10px, 2.5vw, 18px);
  font-style: normal;
  font-weight: 950;
  visibility: hidden;
}
.checkers-piece.is-king i { visibility: visible; }
.checkers-error { min-height: 20px; margin: 0; padding: 0 12px 7px; color: var(--danger, #a32626); font-size: 12px; font-weight: 750; }
.checkers-window-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--row);
}
.checkers-window-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--paper);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}
.checkers-window-actions .danger-action { color: var(--danger, #9d2626); }

.checkers-leaderboard-page {
  border: 1px solid var(--line-strong, var(--line));
  background: var(--paper);
}
.checkers-leaderboard-page > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid var(--line-strong, var(--line));
  background: var(--row);
}
.checkers-leaderboard-page h1,
.checkers-leaderboard-page p { margin: 0; }
.checkers-leaderboard-page h1 { font-size: 21px; }
.checkers-leaderboard-page p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.checkers-leaderboard-page > header > span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.checkers-leaderboard-head,
.checkers-leaderboard-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 90px;
  align-items: center;
}
.checkers-leaderboard-head {
  min-height: 36px;
  border-bottom: 1px solid var(--line);
  background: var(--row-alt);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.checkers-leaderboard-head span,
.checkers-leaderboard-row > * { padding: 8px 12px; }
.checkers-leaderboard-row {
  min-height: 58px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.checkers-leaderboard-row:last-child { border-bottom: 0; }
.checkers-leaderboard-row:hover { background: var(--row); }
.checkers-leaderboard-row > b { color: var(--muted); font-size: 16px; }
.checkers-leaderboard-row > span { min-width: 0; font-weight: 850; }
.checkers-leaderboard-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 600; }
.checkers-leaderboard-row > strong { text-align: right; font-size: 18px; }
.checkers-leaderboard-row.rank-1 { box-shadow: inset 5px 0 0 #c99a22; }
.checkers-leaderboard-row.rank-2 { box-shadow: inset 5px 0 0 #8d9299; }
.checkers-leaderboard-row.rank-3 { box-shadow: inset 5px 0 0 #9c6138; }
.checkers-leaderboard-empty { padding: 24px 14px; color: var(--muted); text-align: center; }
.alert-kind-checkers { background: color-mix(in srgb, var(--orange) 18%, var(--paper)); }
.alert-kind-chess { background: color-mix(in srgb, var(--blue) 16%, var(--paper)); }

/* ===== Chess board + dialog (mirrors Checkers, with Unicode pieces) ===== */
.chess-dialog {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .22);
}
.chess-dialog::backdrop { background: rgba(0, 0, 0, .64); }
.chess-window { min-width: 0; }
.chess-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--row);
}
.chess-window-head h2,
.chess-window-head p { margin: 0; }
.chess-window-head h2 { font-size: 18px; }
.chess-window-head p { margin-top: 2px; color: var(--muted); font-size: 11px; }
.chess-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.chess-status {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  font-size: 12px;
  font-weight: 850;
}
.chess-side-label {
  padding: 4px 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chess-board-wrap { padding: 12px; overflow: auto; }
.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: min(100%, 520px);
  aspect-ratio: 1;
  margin: 0 auto;
  border: 3px solid var(--ink);
  background: var(--paper);
}
.chess-square {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: default;
}
/* Same board colors as checkers for visual consistency. */
.chess-square.is-light { background: #ded4bf; }
.chess-square.is-dark { background: #66594c; }
.chess-square.is-dark:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.chess-square.is-selected { box-shadow: inset 0 0 0 4px #f2b632; }
.chess-square.is-last-move { box-shadow: inset 0 0 0 3px rgba(242, 182, 50, 0.5); }
/* Target indicator — same white dot as checkers. */
.chess-square.is-target::after {
  content: "";
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}
.chess-square.is-target { cursor: pointer; }
/* Figurine pieces — Unicode chess symbols rendered large with a subtle drop shadow for legibility on both square colors. */
.chess-piece {
  display: block;
  line-height: 1;
  font-size: clamp(26px, 7vw, 44px);
  font-weight: 400;
  pointer-events: none;
  user-select: none;
}
.chess-piece.piece-white {
  color: #fafafa;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 1px rgba(0, 0, 0, 0.9);
}
.chess-piece.piece-black {
  color: #1a1a1a;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25), 0 0 1px rgba(255, 255, 255, 0.4);
}
.chess-error { min-height: 20px; margin: 0; padding: 0 12px 7px; color: var(--danger, #a32626); font-size: 12px; font-weight: 750; }
.chess-window-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--row);
}
.chess-window-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--paper);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}
.chess-window-actions .danger-action { color: var(--danger, #9d2626); }

/* Combined Leaderboard page (Checkers + Chess) */
.games-leaderboard-hero {
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.games-leaderboard-hero h1 { margin: 0; font-size: 26px; }
.games-leaderboard-hero p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.games-leaderboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.games-leaderboard-card {
  border: 1px solid var(--line-strong, var(--line));
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.games-leaderboard-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid var(--line-strong, var(--line));
  background: var(--row);
}
.games-leaderboard-card h2,
.games-leaderboard-card p { margin: 0; }
.games-leaderboard-card h2 { font-size: 18px; }
.games-leaderboard-card p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.games-leaderboard-card > header > span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.games-leaderboard-head,
.games-leaderboard-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 90px;
  align-items: center;
}
.games-leaderboard-head {
  min-height: 36px;
  border-bottom: 1px solid var(--line);
  background: var(--row-alt);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.games-leaderboard-head span,
.games-leaderboard-row > * { padding: 8px 12px; }
.games-leaderboard-row {
  min-height: 58px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.games-leaderboard-row:last-child { border-bottom: 0; }
.games-leaderboard-row:hover { background: var(--row); }
.games-leaderboard-row > b { color: var(--muted); font-size: 16px; }
.games-leaderboard-row > span { min-width: 0; font-weight: 850; }
.games-leaderboard-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 600; }
.games-leaderboard-row > strong { text-align: right; font-size: 18px; }
.games-leaderboard-row.rank-1 { box-shadow: inset 5px 0 0 #c99a22; }
.games-leaderboard-row.rank-2 { box-shadow: inset 5px 0 0 #8d9299; }
.games-leaderboard-row.rank-3 { box-shadow: inset 5px 0 0 #9c6138; }
.games-leaderboard-empty { padding: 24px 14px; color: var(--muted); text-align: center; }

/* PM games dropdown — section headers for unified Checkers + Chess menu. */
.pm-games-section { padding: 8px 10px 4px; border-top: 1px dashed var(--line); }
.pm-games-section:first-of-type { border-top: 0; }
.pm-games-section h3 { margin: 0 0 6px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 720px) {
  .pm-conversation > header { align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .pm-conversation-title { flex: 1 1 auto; min-width: 0; }
  .pm-header-actions { gap: 5px; flex: 0 0 auto; }
  .pm-games-menu > summary,
  .pm-header-actions .secondary-action { min-height: 32px; padding-inline: 9px; font-size: 11px; }
  /* Anchor dropdown to the left of the button on mobile so it never overflows offscreen. */
  .pm-games-dropdown { position: fixed; top: auto; right: 8px; left: 8px; width: auto; margin-top: 0; }
  .pm-post { width: 90%; max-width: 90% !important; margin-right: 10%; }
  .pm-post.mine { margin-right: 0; margin-left: 10%; }
  /* On touch devices there is no hover — always show the report button at low opacity. */
  .pm-report-button { opacity: .45; font-size: 9px; padding: 1px 4px; top: 4px; right: 6px; }
  .checkers-dialog { width: calc(100vw - 12px); max-height: calc(100vh - 12px); }
  .checkers-board-wrap { padding: 8px; }
  .checkers-window-actions { justify-content: stretch; }
  .checkers-window-actions button { flex: 1 1 0; padding-inline: 6px; }
  .checkers-leaderboard-head,
  .checkers-leaderboard-row { grid-template-columns: 55px minmax(0, 1fr) 68px; }
  .checkers-leaderboard-head span,
  .checkers-leaderboard-row > * { padding-inline: 8px; }
  .chess-dialog { width: calc(100vw - 12px); max-height: calc(100vh - 12px); }
  .chess-board-wrap { padding: 8px; }
  .chess-window-actions { justify-content: stretch; }
  .chess-window-actions button { flex: 1 1 0; padding-inline: 6px; }
  .games-leaderboard-head,
  .games-leaderboard-row { grid-template-columns: 55px minmax(0, 1fr) 68px; }
  .games-leaderboard-head span,
  .games-leaderboard-row > * { padding-inline: 8px; }
}

/* 2026-07-27 unified editor toolbar and color menu. */
.rich-editor,
.topic-form .rich-editor,
.app-modal .rich-editor,
.conversation-compose .rich-editor,
.pm-compose-editor .rich-editor {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.editor-toolbar {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  min-width: 0;
  max-width: 100%;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.editor-toolbar .toolbar-group {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  min-height: 40px;
  padding: 4px 6px !important;
  border-right: 1px solid var(--line) !important;
}
.editor-toolbar .toolbar-group:last-child {
  border-right: 0 !important;
}
/* On mobile, allow the toolbar to wrap so the GIF button and other controls
   are visible without horizontal scrolling. */
@media (max-width: 720px) {
  .editor-toolbar {
    flex-wrap: wrap !important;
  }
}
.editor-toolbar button,
.editor-toolbar select,
.editor-color-trigger {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  white-space: nowrap;
}
.editor-toolbar button {
  padding: 0 8px !important;
}
.editor-toolbar select {
  min-width: 82px;
  padding: 0 24px 0 8px !important;
}
.editor-toolbar .toolbar-field {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 5px !important;
  min-width: 0;
  margin: 0 !important;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.editor-color-trigger {
  display: inline-grid !important;
  place-items: center;
  width: 34px !important;
  min-width: 34px !important;
  padding: 4px !important;
  border: 1px solid var(--line-strong, var(--line)) !important;
  background: var(--input-bg, var(--paper)) !important;
  color: var(--ink) !important;
}
.editor-color-trigger:hover,
.editor-color-trigger:focus-visible,
.editor-color-trigger[aria-expanded="true"] {
  background: var(--row) !important;
  border-color: var(--blue, var(--accent)) !important;
  box-shadow: inset 0 -2px 0 var(--blue, var(--accent)) !important;
}
.editor-color-swatch {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  background: var(--editor-current-color, var(--ink));
}
.editor-color-menu {
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  width: 286px;
  max-width: calc(100vw - 16px);
  padding: 10px;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--line-strong, var(--line)) 55%, transparent);
}
.editor-color-menu[hidden] {
  display: none !important;
}
.editor-color-menu-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.editor-color-menu-grid button {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, var(--line));
  border-radius: 0;
  background: var(--preset-color);
  cursor: pointer;
}
.editor-color-menu-grid button:hover,
.editor-color-menu-grid button:focus-visible,
.editor-color-menu-grid button.is-selected {
  z-index: 1;
  outline: 2px solid var(--ink);
  outline-offset: -3px;
}
.editor-color-menu-grid button.is-selected::after {
  content: "✓";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 1px 2px #000, 0 0 2px #000;
}
.editor-color-menu-grid .editor-color-reset {
  display: grid;
  place-items: center;
  background: var(--row);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}
.editor-color-hex-label {
  display: block;
  margin: 9px 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.editor-color-custom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 7px;
}
.editor-color-custom-row input,
.editor-color-custom-row button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 36px;
  margin: 0;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 0;
  background: var(--input-bg, var(--paper));
  color: var(--ink);
  font: inherit;
}
.editor-color-custom-row input {
  padding: 0 9px;
}
.editor-color-custom-row button {
  padding: 0;
  background: var(--row);
  font-weight: 900;
  cursor: pointer;
}
.editor-color-custom-row button:hover,
.editor-color-custom-row button:focus-visible {
  background: var(--surface-hover, var(--row));
}
.editor-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-width: 0;
}
.editor-footer .attach-button,
.reply-box .rich-editor.has-editor-submit .attach-button,
.reply-box .rich-editor.has-editor-submit .editor-submit {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 100px !important;
  width: 100px !important;
  min-width: 100px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  overflow: hidden !important;
  font-size: 12px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.reply-box .rich-editor.has-editor-submit .editor-submit {
  margin-left: auto !important;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-color-menu {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-strong, var(--line));
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .38);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-color-trigger,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-color-custom-row input,
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .editor-color-custom-row button {
  background: var(--input-bg, #20252c) !important;
  color: var(--ink) !important;
  border-color: var(--line-strong, var(--line)) !important;
}
@media (max-width: 720px) {
  .editor-toolbar .toolbar-group {
    min-height: 38px;
    padding: 4px !important;
  }
  .editor-toolbar button {
    padding: 0 7px !important;
  }
  .editor-toolbar select {
    min-width: 78px;
  }
  .editor-color-menu {
    width: min(286px, calc(100vw - 16px)) !important;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: 9px;
  }
  .editor-color-menu-grid button {
    min-height: 31px;
  }
  .rich-editor .editor-wysiwyg,
  .rich-editor textarea.editor-source-visible,
  .rich-editor .editor-source {
    min-width: 0;
  }
}


/* Compact desktop toolbar sizing so topic and reply editors stay on one line. */
@media (min-width: 721px) {
  .editor-toolbar {
    font-size: 12px !important;
  }
  .editor-toolbar .toolbar-group {
    padding: 4px !important;
    gap: 1px !important;
  }
  .editor-toolbar button {
    padding: 0 6px !important;
  }
  .editor-toolbar select {
    min-width: 76px !important;
    padding-left: 6px !important;
  }
  .editor-toolbar .toolbar-field {
    gap: 4px !important;
    font-size: 9px !important;
  }
}

/* Keep collapsed quote controls flush with the quote frame. */
.bbcode-quote {
  box-sizing: border-box;
  padding-left: 0 !important;
  border: 1px solid #cbd0d7;
  border-left: 3px solid #737985;
}
.bbcode-quote-toggle {
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 0;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .bbcode-quote {
  border-color: #47505c;
  border-left-color: #7e8794;
}

/* I HATE IOS WITH ALL MY HEART*/
/* iOS only - New Topic editor
   Locks the dialog so only vertical scrolling is possible inside the form.
   No free pan / pinch-zoom of the dialog shell itself.
   iOS Safari treats <dialog> differently from other browsers — the dialog can be
   panned/dragged unless we explicitly set position:fixed, inset:0, and touch-action
   on the dialog element itself. The form inside still scrolls vertically. */
@supports (-webkit-touch-callout: none) {

  /* Lock the dialog shell: fixed position, no panning, no zooming */
  .topic-dialog {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    /* Block ALL touch gestures on the dialog shell — the form handles its own scrolling */
    touch-action: none !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* The form scrolls vertically inside the locked dialog */
  .topic-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* Only vertical panning allowed inside the scrollable form */
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    overscroll-behavior-x: none !important;
  }

  /* Prevent iOS from auto-zooming when focusing form fields */
  .topic-form input,
  .topic-form textarea,
  .topic-form select {
    font-size: 16px !important;
  }

  .topic-form .rich-editor,
  .topic-form .new-topic-editor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
  }

  .topic-form .editor-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
  }

  /* The contenteditable surface: allow vertical scroll + text selection,
     but block horizontal pan and pinch-zoom */
  .topic-form .editor-surface,
  .topic-form .editor-wysiwyg {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* pan-y allows vertical scrolling + text selection, blocks horizontal pan + zoom */
    touch-action: pan-y !important;
    /* Prevent iOS text-callout menu from interfering with editor interactions */
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
  }

  /* Resize handles stay visible and usable on iOS — just constrained by touch-action */
  .topic-form .editor-resize-box span {
    width: 16px !important;
    height: 16px !important;
    touch-action: manipulation !important;
  }
}
/* Resize handles remain visible on all touch devices — just bigger for easier touch targeting */
@media (pointer: coarse) {
  .editor-resize-box span {
    width: 16px !important;
    height: 16px !important;
    touch-action: manipulation !important;
  }
}
/* ===== Easter eggs (Konami matrix rain, founder's eye rainbow wordmark, confetti, egg toasts) ===== */
.egg-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 24px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 10px 14px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--paper);
  color: var(--ink);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.22);
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100000;
  pointer-events: none;
}
.egg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.egg-toast strong { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--red); }
.egg-toast span { font-size: 12px; color: var(--ink); font-weight: 700; }
.egg-toast.egg-theme-terminal strong { color: #6cff8a; }
.egg-toast.egg-theme-rainbow strong {
  background: linear-gradient(90deg, #d11111, #f06d22, #f2b632, #6cff8a, #5fa8ff, #ff5ba8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Founder's eye — clicking the wordmark 7 times triggers a rainbow pulse animation. */
.wordmark.is-rainbow {
  animation: egg-rainbow-pulse 5s ease-out;
}
.wordmark.is-rainbow .wordmark-black,
.wordmark.is-rainbow .wordmark-red {
  background: linear-gradient(90deg, #d11111, #f06d22, #f2b632, #6cff8a, #5fa8ff, #ff5ba8, #d11111);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: egg-rainbow-sweep 1.4s linear infinite;
}
@keyframes egg-rainbow-sweep { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes egg-rainbow-pulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  20% { transform: scale(1.04); filter: drop-shadow(0 0 12px rgba(255, 90, 168, 0.6)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
}

/* Reduced-motion safety net — disable the more aggressive effects. */
@media (prefers-reduced-motion: reduce) {
  .wordmark.is-rainbow,
  .wordmark.is-rainbow .wordmark-black,
  .wordmark.is-rainbow .wordmark-red { animation: none; }
}

/* ===== PM report — report centre context display ===== */
.reported-pm-subject {
  font-weight: 700;
  color: var(--ink);
}
.report-pm-context {
  margin: 10px 0;
}
.report-pm-context b {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 5px;
}
.report-pm-context ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.report-pm-context li {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr;
  gap: 2px 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  background: var(--paper);
  font-size: 12px;
  align-items: start;
}
.report-pm-context li strong {
  color: var(--ink);
  font-weight: 850;
}
.report-pm-context li small {
  grid-column: 1;
  color: var(--muted);
  font-size: 10px;
}
.report-pm-context li span {
  grid-column: 1 / -1;
  color: var(--ink);
  word-break: break-word;
  margin-top: 2px;
}
.report-pm-context li.is-reported {
  border-left-color: var(--red);
  background: color-mix(in srgb, var(--red) 6%, var(--paper));
}
.report-pm-context li.is-reported strong {
  color: var(--red);
}
.reported-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-style: normal;
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-pm-context li {
  background: var(--row-alt);
  border-color: var(--line);
}
:root:is([data-theme="dark"], [data-theme="cutesy-dark"]) .report-pm-context li.is-reported {
  background: color-mix(in srgb, var(--red) 14%, var(--row-alt));
}

/* ===== GIF picker modal — matches the old-school forum aesthetic ===== */
.app-modal.gif-picker-modal .app-modal-box { max-width: min(620px, calc(100vw - 24px)); }
.gif-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gif-picker input[type="search"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  border-radius: 0;
}
.gif-picker input[type="search"]:focus {
  outline: 0;
  border-color: var(--orange);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 22%, transparent);
}
.gif-picker-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-height: min(380px, calc(100vh - 220px));
  overflow-y: auto;
  padding: 2px;
  border: 1px solid var(--line);
  background: var(--row-alt);
}
.gif-result {
  position: relative;
  display: block;
  width: 100%;
  height: 120px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.gif-result:hover {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 30%, transparent);
  z-index: 1;
}
.gif-result img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gif-picker-empty,
.gif-picker-loading,
.gif-picker-error {
  grid-column: 1 / -1;
  padding: 24px 12px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}
.gif-picker-error { color: var(--red); }
.gif-picker-powered {
  text-align: right;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 850;
  opacity: 0.7;
}
@media (max-width: 600px) {
  .app-modal.gif-picker-modal .app-modal-box { max-width: calc(100vw - 12px); }
  .gif-picker-results { grid-template-columns: repeat(2, 1fr); max-height: min(300px, calc(100vh - 200px)); }
  .gif-result { height: 110px; }
}
/* Frontend-managed control plane */
.control-panel{padding:24px}.control-tabs{display:flex;gap:18px;border-bottom:1px solid var(--border,#d7dce2);margin:20px 0}.control-tabs a{padding:10px 2px;font-weight:700}.control-section{margin:28px 0}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.control-row,.control-page-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(260px,2fr) auto;gap:12px;align-items:start;border-top:1px solid var(--border,#d7dce2);padding:14px 0}.control-row small,.control-page-row span{display:block;color:var(--muted,#69737d);margin-top:4px}.control-form{display:grid;gap:9px;margin:12px 0}.control-form input,.control-form textarea{width:100%;padding:9px;border:1px solid var(--border,#cfd5dc);border-radius:4px;font:inherit}.control-form label{display:grid;gap:5px;font-size:.86rem;font-weight:700}.control-page-row{grid-template-columns:minmax(150px,1fr) minmax(280px,2fr) auto}.cms-page{padding:26px}.cms-page header{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid var(--border,#d7dce2);padding-bottom:16px;margin-bottom:22px}.cms-content{line-height:1.7}.cms-content h1,.cms-content h2,.cms-content h3{margin-top:1.4em}.cms-content blockquote{border-left:3px solid #b12635;padding-left:16px;color:var(--muted,#69737d)}
@media (max-width:800px){.control-grid{grid-template-columns:1fr}.control-row,.control-page-row{grid-template-columns:1fr}.control-panel{padding:16px}.cms-page header{align-items:flex-start;flex-direction:column}}