/* Headless UI Theme - TongTop */
:root {
  --radius: 0.75rem;
  --background: #f7f3e8;
  --foreground: #18140d;
  --card: #fffcf5;
  --card-foreground: #18140d;
  --popover: #fffcf5;
  --popover-foreground: #18140d;
  --primary: #1c1914;
  --primary-foreground: #fff9ea;
  --secondary: #eee7da;
  --secondary-foreground: #3b3124;
  --muted: #eee7da;
  --muted-foreground: #6e6251;
  --accent: #f2e6cd;
  --accent-foreground: #6f4a13;
  --destructive: #b91c1c;
  --destructive-foreground: #fff9ea;
  --border: #ded4c2;
  --input: #ded4c2;
  --ring: #b9822f;
  --brand-gold: #b9822f;
  --brand-gold-strong: #8a5b18;
  --brand-gold-soft: #f2e6cd;
  --brand-ink: #1c1914;
  --brand-surface: #fffcf5;
  --sidebar-background: var(--background);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--accent);
  --sidebar-accent-foreground: var(--accent-foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
}

/* Enable animating to/from intrinsic sizes (height: auto) for ::details-content */
@supports (interpolate-size: allow-keywords) {
  html {
    interpolate-size: allow-keywords;
  }
}

:root.dark {
  --background: #090806;
  --foreground: #f4ecdd;
  --card: #13110d;
  --card-foreground: #f4ecdd;
  --popover: #15120d;
  --popover-foreground: #f4ecdd;
  --primary: #d9aa4e;
  --primary-foreground: #171109;
  --secondary: #201b13;
  --secondary-foreground: #f4ecdd;
  --muted: #1e1a14;
  --muted-foreground: #b9ab95;
  --accent: #2b2114;
  --accent-foreground: #e8bd68;
  --destructive: #f87171;
  --destructive-foreground: #2b0909;
  --border: #3a3021;
  --input: #463825;
  --ring: #e8bd68;
  --brand-gold: #d9aa4e;
  --brand-gold-strong: #e8bd68;
  --brand-gold-soft: #2b2114;
  --brand-ink: #090806;
  --brand-surface: #13110d;
  --sidebar-background: var(--background);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--accent);
  --sidebar-accent-foreground: var(--accent-foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
}

/*
 * Tailwind preflight defaults ring to cold blue (#3b82f6) and offset to #fff.
 * Force brand gold ring + theme-aware offset so focus-visible:ring-* stays
 * black-gold in light and dark without per-template rewrites.
 */
*,
*::before,
*::after {
  --tw-ring-color: color-mix(in srgb, var(--ring) 55%, transparent);
  --tw-ring-offset-color: var(--background);
}

/*
 * Tailwind's semantic colors are backed by raw CSS variables. Tailwind cannot
 * synthesize `/opacity` variants for those tokens, so provide the small set of
 * transparent utilities used by the server-rendered public UI here. Keeping
 * these selectors alongside the tokens preserves the same contrast in both
 * themes without hard-coded light/dark color pairs in templates.
 */
.text-muted-foreground\/40 { color: color-mix(in srgb, var(--muted-foreground) 40%, transparent); }
.text-muted-foreground\/45 { color: color-mix(in srgb, var(--muted-foreground) 45%, transparent); }
.text-muted-foreground\/50 { color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); }
.text-muted-foreground\/60 { color: color-mix(in srgb, var(--muted-foreground) 60%, transparent); }
.text-muted-foreground\/80 { color: color-mix(in srgb, var(--muted-foreground) 80%, transparent); }
.text-foreground\/70 { color: color-mix(in srgb, var(--foreground) 70%, transparent); }
.text-foreground\/80 { color: color-mix(in srgb, var(--foreground) 80%, transparent); }

.bg-primary\/5 { background-color: color-mix(in srgb, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }
.bg-primary\/40 { background-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.bg-destructive\/10 { background-color: color-mix(in srgb, var(--destructive) 10%, transparent); }
.bg-muted\/30 { background-color: color-mix(in srgb, var(--muted) 30%, transparent); }
.bg-muted\/40 { background-color: color-mix(in srgb, var(--muted) 40%, transparent); }
.bg-muted\/50 { background-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.bg-muted\/80 { background-color: color-mix(in srgb, var(--muted) 80%, transparent); }
.bg-background\/60 { background-color: color-mix(in srgb, var(--background) 60%, transparent); }
.bg-background\/90 { background-color: color-mix(in srgb, var(--background) 90%, transparent); }
.bg-card\/90 { background-color: color-mix(in srgb, var(--card) 90%, transparent); }

.border-primary\/20 { border-color: color-mix(in srgb, var(--primary) 20%, transparent); }
.border-primary\/30 { border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.border-primary\/50 { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.border-destructive\/30 { border-color: color-mix(in srgb, var(--destructive) 30%, transparent); }
.border-border\/40 { border-color: color-mix(in srgb, var(--border) 40%, transparent); }
.border-border\/50 { border-color: color-mix(in srgb, var(--border) 50%, transparent); }
.border-border\/70 { border-color: color-mix(in srgb, var(--border) 70%, transparent); }
.border-border\/80 { border-color: color-mix(in srgb, var(--border) 80%, transparent); }

.hover\:bg-primary\/10:hover { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }
.hover\:bg-primary\/90:hover { background-color: color-mix(in srgb, var(--primary) 90%, transparent); }
.hover\:bg-destructive\/10:hover { background-color: color-mix(in srgb, var(--destructive) 10%, transparent); }
.hover\:bg-destructive\/90:hover { background-color: color-mix(in srgb, var(--destructive) 90%, transparent); }
.hover\:bg-muted\/50:hover { background-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.hover\:border-primary\/30:hover { border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.focus\:ring-ring\/20:focus { --tw-ring-color: color-mix(in srgb, var(--ring) 20%, transparent); }
.has-\[\:checked\]\:bg-primary\/5:has(:checked) { background-color: color-mix(in srgb, var(--primary) 5%, transparent); }

body {
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.7;
  background: var(--background);
  background-image:
    radial-gradient(circle at 8% -10%, color-mix(in srgb, var(--brand-gold) 7%, transparent) 0, transparent 28rem),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--brand-gold-soft) 18%, transparent) 0, transparent 24rem);
  background-attachment: fixed;
}

/* ---- Smooth Page Transitions ---- */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Animate the content shell, not nested max-width wrappers. */
.site-content {
  animation: pageIn 0.3s ease;
  width: 100%;
}

/* Content width modes — pages set {% block content_width %}wide|reading|settings|profile|form{% endblock %}
   Sole page measure owner (ADR-ROAD-02). Do not stack section max-w-* that re-cap the same column.
   Overlay dialog max-w is float measure and does NOT count as dual-cap.
   settings and form are intentional aliases at 42rem (same visual width; different semantic names). */
.site-content--wide {
  max-width: none;
}
.site-content--reading {
  max-width: 48rem; /* ~max-w-3xl */
  margin-inline: auto;
}
.site-content--settings {
  max-width: 42rem; /* ~max-w-2xl; alias of form */
  margin-inline: auto;
}
.site-content--profile {
  max-width: 56rem; /* ~max-w-4xl */
  margin-inline: auto;
}

/* ---- Profile hero (identity card) ---- */
.profile-hero {
  overflow: hidden;
  border-radius: 1.5rem; /* ~rounded-3xl；不依赖 Tailwind 构建 */
}
.profile-hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}
@media (min-width: 640px) {
  .profile-hero-grid {
    flex-direction: row;
    align-items: stretch; /* 左右栏同高，便于底对齐 */
    gap: 2.5rem;
  }
}
.profile-hero-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  max-width: 11.5rem;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .profile-hero-aside {
    align-items: stretch;
    /* 头像置顶、CTA 贴底，与右侧末行统计对齐（红线） */
    justify-content: space-between;
  }
}
.profile-hero-aside-actions {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
}
@media (min-width: 640px) {
  .profile-hero-aside-actions {
    margin-top: auto;
  }
}
.profile-hero-avatar {
  display: flex;
  justify-content: center;
}
.profile-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.profile-hero-cta--primary {
  background: var(--foreground);
  color: var(--background);
}
.profile-hero-cta--primary:hover {
  background: color-mix(in srgb, var(--foreground) 88%, var(--background));
}
.profile-hero-cta--ghost {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
}
.profile-hero-cta--ghost:hover {
  background: var(--muted);
}
/* 地点 / 网站：桌面在用户名右侧横排，窄屏换行到下方 */
.profile-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  min-width: 0;
  max-width: 100%;
}
.profile-hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
}
.profile-hero-meta a {
  font-weight: 500;
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 4px;
}
.profile-hero-meta a:hover {
  text-decoration-color: var(--foreground);
}
.profile-hero-main {
  min-width: 0;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.profile-hero-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.profile-hero-title-row .profile-hero-meta {
  /* 窄屏：整组折到用户名/徽章下一行，不挤爆 */
  flex: 1 1 auto;
}
.profile-hero-name {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--foreground);
}
@media (min-width: 640px) {
  .profile-hero-name {
    font-size: 2rem;
  }
}
.profile-hero-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}
.profile-badge--staff {
  background: color-mix(in srgb, var(--brand-gold, #c4a574) 22%, var(--muted));
  color: color-mix(in srgb, var(--foreground) 70%, var(--brand-gold, #c4a574));
}
.profile-badge--member {
  background: color-mix(in srgb, var(--foreground) 82%, transparent);
  color: var(--background);
}
html.dark .profile-badge--member {
  background: color-mix(in srgb, var(--muted-foreground) 35%, var(--muted));
  color: var(--foreground);
}
.profile-hero-handle {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}
.profile-hero-bio {
  margin: 0.35rem 0 0.15rem;
  max-width: 36rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--foreground);
}
.profile-hero-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.profile-hero-pills--stats {
  margin-top: 0.85rem;
}
.profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 9999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}
.profile-pill--points {
  background: color-mix(in srgb, var(--muted) 70%, var(--brand-gold-soft, #f0e6d2));
  color: color-mix(in srgb, var(--foreground) 88%, var(--brand-gold, #c4a574));
}
a.profile-pill--points:hover {
  background: color-mix(in srgb, var(--muted) 55%, var(--brand-gold-soft, #f0e6d2));
}
.profile-pill--level {
  background: var(--muted);
  color: var(--muted-foreground);
  font-weight: 500;
}
.profile-pill--influence {
  background: color-mix(in srgb, var(--muted) 55%, transparent);
  color: color-mix(in srgb, var(--foreground) 75%, var(--brand-gold, #c4a574));
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  font-weight: 500;
}
.profile-pill--boost {
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
}
.profile-hero-progress {
  margin-top: 0.55rem;
  max-width: 22rem;
}
.profile-hero-progress-label {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.profile-hero-progress-track {
  height: 0.35rem;
  border-radius: 9999px;
  background: var(--muted);
  overflow: hidden;
}
.profile-hero-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--muted-foreground) 55%, var(--foreground));
  transition: width 0.2s ease;
}

/* form ≡ settings measure (42rem). Prefer form for auth/create; settings for account prefs. */
.site-content--form {
  max-width: 42rem; /* ~max-w-2xl; alias of settings */
  margin-inline: auto;
}

/* ---- Site Header ---- */
header[data-slot="site-header"] {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.035), 0 1px 2px rgba(0, 0, 0, 0.025);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  /* Notch / home-indicator safe area on mobile browsers */
  padding-top: env(safe-area-inset-top, 0);
}

/* Compact CTA: match h-9 tool icons / search field (global brand CTA is 2.75rem) */
header[data-slot="site-header"] nav[data-slot="navigation"] .brand-primary-action {
  min-height: 2.25rem;
  height: 2.25rem;
  padding-block: 0;
  box-shadow: none;
}

header[data-slot="site-header"] nav[data-slot="navigation"] .brand-primary-action:hover {
  box-shadow: none;
}

/* ---- Board-domain secondary nav (under site header) ----
   Keep in sync with inline <style> in headless/partials/board_subnav.html
   Truncation: N_forum_mobile=4 / desktop=8; N_board_mobile=5 / desktop=10; bp 768px. */
.board-subnav {
  position: sticky;
  top: calc(4rem + env(safe-area-inset-top, 0px));
  z-index: 30;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.board-subnav-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 80rem; /* match header max-w-7xl */
  margin-inline: auto;
  padding: 0.2rem 1rem 0.3rem;
  overflow: visible;
}

@media (min-width: 640px) {
  .board-subnav-inner {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .board-subnav-inner {
    padding-inline: 2rem;
  }
}

.board-subnav-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.board-subnav-row::-webkit-scrollbar {
  display: none;
}

.board-subnav-row--boards {
  margin-top: 0.1rem;
  padding-top: 0.15rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.board-subnav-item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  max-width: 9rem;
  min-height: 0;
  padding: 0.28rem 0.55rem;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  overflow-wrap: normal;
  transition: color 0.15s ease, background-color 0.15s ease;
}

@media (min-width: 768px) {
  .board-subnav-item {
    max-width: 13rem;
    padding: 0.32rem 0.65rem;
  }
}

.board-subnav-item:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--muted) 55%, transparent);
}

.board-subnav-item.is-active {
  color: var(--foreground);
  font-weight: 600;
  background: color-mix(in srgb, var(--muted) 65%, transparent);
  border-color: transparent;
}

.board-subnav-item--board {
  font-size: 0.75rem;
  font-weight: 400;
  max-width: 10rem;
  opacity: 0.92;
  border-radius: 0;
  padding-inline: 0.45rem;
  padding-bottom: 0.22rem;
  box-shadow: inset 0 -2px 0 transparent;
}

@media (min-width: 768px) {
  .board-subnav-item--board {
    max-width: 14rem;
  }
}

.board-subnav-item--board:hover {
  background: transparent;
  color: var(--foreground);
}

.board-subnav-item--board.is-active {
  color: var(--foreground);
  font-weight: 600;
  background: transparent;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--brand-gold, var(--primary)) 70%, transparent);
}

.board-subnav-item--more {
  color: var(--muted-foreground);
  opacity: 0.85;
  font-weight: 400;
}

.board-subnav-item--all,
.board-subnav-item--more,
.board-subnav-item--custom {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.board-subnav-item--desk-only {
  display: none;
}
.board-subnav-item--mobile-only {
  display: inline-flex;
}
@media (min-width: 768px) {
  .board-subnav-item--desk-only {
    display: inline-flex;
  }
  .board-subnav-item--mobile-only {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-subnav-item {
    transition: none;
  }
}

/* ---- Select (scrollable listbox) ---- */
[data-select] {
  position: relative;
}

[data-select-content] {
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

[data-select-content]::-webkit-scrollbar {
  width: 6px;
}

[data-select-content]::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted-foreground) 35%, transparent);
  border-radius: 9999px;
}

[data-select-item][data-state="checked"] {
  background: color-mix(in srgb, var(--brand-gold-soft) 55%, var(--card));
  color: var(--brand-gold-strong, var(--foreground));
}

[data-select-label] {
  letter-spacing: 0.06em;
}

.compose-picker-sheet {
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.compose-picker-list {
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Desktop: centered card, not a stretched full-bleed sheet */
@media (min-width: 640px) {
  #compose-board-dialog[data-dialog-overlay] {
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }

  #compose-board-dialog .compose-picker-sheet {
    width: 100%;
    max-width: 28rem;
    max-height: min(36rem, calc(100vh - 3rem));
    border-radius: 1rem;
    padding-bottom: 0;
  }

  #compose-board-dialog .compose-picker-list {
    max-height: none;
  }

  #compose-board-dialog[data-state="open"] .compose-picker-sheet {
    animation: dialogPanelIn 0.2s ease;
  }
}

@media (max-width: 639px) {
  #compose-board-dialog[data-dialog-overlay] {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  #compose-board-dialog[data-state="open"] .compose-picker-sheet {
    animation: composeSheetUp 0.22s ease;
  }
}

@keyframes composeSheetUp {
  from {
    opacity: 0.85;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #compose-board-dialog[data-state="open"] .compose-picker-sheet {
    animation: none;
  }
}

/* Mobile drawer: fill safe areas so content isn't under the notch/home bar */
[data-mobile-sidebar] {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
}

/* Toasts clear the home indicator / notched right edge */
#toast-container {
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  left: auto;
}

.site-footer {
  padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
}

/* Slightly denser vertical rhythm on small screens */
@media (max-width: 639px) {
  .site-shell {
    padding-top: 1rem;
    padding-bottom: 0.25rem;
  }
}

.site-brand-mark {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  color: var(--primary-foreground);
  background: linear-gradient(145deg, var(--brand-gold-strong), var(--primary));
  box-shadow: 0 7px 18px -9px color-mix(in srgb, var(--brand-gold) 85%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.site-brand:hover .site-brand-mark {
  transform: translateY(-1px) rotate(-2deg);
  box-shadow: 0 9px 22px -9px color-mix(in srgb, var(--brand-gold) 92%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.3);
}

.site-brand-wordmark {
  color: var(--foreground);
  letter-spacing: -0.025em;
}

.site-footer {
  background: color-mix(in srgb, var(--card) 78%, transparent);
  backdrop-filter: blur(12px);
}

.site-footer-inner::before {
  display: none;
  content: none;
}

/* ---- Layout rhythm: space BETWEEN components ---- */
:root {
  --stack-gap: 1.25rem;       /* major blocks on a page */
  --stack-gap-lg: 1.5rem;
  --surface-pad-x: 1.25rem;   /* hero / panel inner pad */
  --surface-pad-y: 1.25rem;
  --surface-pad-x-lg: 1.75rem;
  --surface-pad-y-lg: 1.5rem;
  --list-gap: 0.625rem;       /* topic rows, reply cards */
  --list-gap-lg: 0.75rem;
  --cluster-gap: 0.75rem;     /* buttons / chips in a row */
}

/* Vertical stack for page sections (hero 鈫?list 鈫?footer-of-page) */
.page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  width: 100%;
}
@media (min-width: 640px) {
  .page-stack { gap: var(--stack-gap-lg); }
}

/* Standard surface padding 鈥?prefer this over ad-hoc p-4/p-5/p-6 mixes */
.brand-surface {
  padding: var(--surface-pad-y) var(--surface-pad-x);
}
@media (min-width: 640px) {
  .brand-surface {
    padding: var(--surface-pad-y-lg) var(--surface-pad-x-lg);
  }
}
.brand-surface-sm {
  padding: 1rem 1rem;
}
@media (min-width: 640px) {
  .brand-surface-sm {
    padding: 1.15rem 1.25rem;
  }
}

/* Stack of list items (topics, replies) */
.brand-list {
  display: flex;
  flex-direction: column;
  gap: var(--list-gap);
}
@media (min-width: 640px) {
  .brand-list { gap: var(--list-gap-lg); }
}

/* Inline clusters (actions, meta chips) */
.brand-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap);
}

/* Thread: OP + replies share one list gap (no ad-hoc mb-5 on cards) */
.topic-thread {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
@media (min-width: 640px) {
  .topic-thread { gap: 1rem; }
}
.topic-thread > .topic-post {
  margin-bottom: 0;
}

/* ---- Topic post cards (horizontal identity + foot reactions) ---- */
.topic-post {
  display: flex;
  flex-direction: column;
  scroll-margin-top: 5.5rem;
  border-radius: 1rem;
  background: var(--card);
  color: var(--card-foreground);
}
.topic-post--op {
  padding: 1.125rem 1.125rem 0.875rem;
}
@media (min-width: 640px) {
  .topic-post--op {
    padding: 1.35rem 1.35rem 1rem;
  }
}
/* Title + OP body unified card (replaces split header/OP cards) */
.topic-post--hero.brand-surface {
  padding: var(--surface-pad-y) var(--surface-pad-x);
}
@media (min-width: 640px) {
  .topic-post--hero.brand-surface {
    padding: var(--surface-pad-y-lg) var(--surface-pad-x-lg);
  }
}
.topic-op-divider {
  height: 1px;
  margin: 1.15rem 0 0.85rem;
  background: color-mix(in srgb, var(--border) 45%, transparent);
}
@media (max-width: 639px) {
  .topic-post--hero .topic-hero-chrome {
    gap: 0.85rem;
  }
  .topic-post--hero .topic-hero-head {
    gap: 0.75rem;
  }
  .topic-post--hero .topic-hero-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .topic-op-divider {
    margin: 0.9rem 0 0.75rem;
  }
}
.topic-post--cascade {
  position: relative;
}
.topic-cascade-rail {
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--border) 80%, var(--brand-gold, var(--primary)) 20%);
  pointer-events: none;
}
.topic-post--cascade[data-depth="1"] .topic-cascade-rail {
  background: color-mix(in srgb, var(--brand-gold, var(--primary)) 35%, var(--border));
}
.topic-post--cascade[data-depth="2"] .topic-cascade-rail {
  background: color-mix(in srgb, var(--brand-gold, var(--primary)) 22%, var(--border));
}
.topic-post--cascade[data-depth="3"] .topic-cascade-rail,
.topic-post--cascade[data-depth="4"] .topic-cascade-rail,
.topic-post--cascade[data-depth="5"] .topic-cascade-rail {
  background: color-mix(in srgb, var(--brand-gold, var(--primary)) 12%, var(--border));
  opacity: 0.7;
}
.topic-post[data-reply-collapsed="true"] {
  display: none;
}
.topic-post--reply {
  padding: 0.9rem 0.9rem 0.75rem;
  border-radius: 0.875rem;
}
@media (min-width: 640px) {
  .topic-post--reply {
    padding: 1rem 1.1rem 0.85rem;
  }
}
.topic-post:target {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand-gold, var(--ring)) 50%, transparent),
    0 12px 32px -24px color-mix(in srgb, var(--brand-gold) 40%, transparent);
  border-color: color-mix(in srgb, var(--brand-gold, var(--ring)) 48%, var(--border));
}

.topic-post-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.topic-post-identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  flex: 1;
}
.topic-post-avatar-wrap {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}
.topic-post-who {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.topic-post-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  min-width: 0;
}
.topic-post-name-link {
  min-width: 0;
  max-width: 100%;
  text-decoration: none;
  color: inherit;
}
.topic-post-name-link:hover .topic-post-name {
  color: var(--primary);
}
.topic-post-name,
.topic-post-who .user-name {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground);
}
.topic-post--op .topic-post-name,
.topic-post--op .topic-post-who .user-name {
  font-size: 0.9375rem;
}
.topic-post-who .user-name {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 0.3rem;
}
.topic-post-submeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--muted-foreground);
}
.topic-post-submeta time {
  color: var(--muted-foreground);
}
.topic-post-reply-to {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  color: var(--muted-foreground);
}
.topic-post-reply-to .reply-ref-link {
  font-weight: 600;
  color: var(--brand-gold-strong, var(--primary));
  text-decoration: none;
}
.topic-post-reply-to .reply-ref-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.topic-post-reply-to .reply-ref-snippet {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  color: color-mix(in srgb, var(--muted-foreground) 88%, transparent);
}
.topic-post-hint {
  color: color-mix(in srgb, #d97706 80%, var(--foreground));
}
.topic-post-floor-meta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.1rem;
}
.topic-post-floor {
  font-size: 0.75rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--muted-foreground) 90%, transparent);
  letter-spacing: 0.02em;
}

.topic-post-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.1rem 0.45rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.topic-post-badge--op {
  color: var(--brand-gold-strong, var(--primary));
  background: color-mix(in srgb, var(--brand-gold, var(--primary)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-gold, var(--primary)) 28%, transparent);
}
.topic-post-badge--warn {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent);
}
html.dark .topic-post-badge--warn,
[data-theme="dark"] .topic-post-badge--warn {
  color: #fbbf24;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
}

.topic-post-body {
  min-width: 0;
}
.topic-prose {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--foreground);
}
.topic-post--op .topic-prose {
  font-size: 0.975rem;
  line-height: 1.75;
}
.topic-prose-plain {
  margin: 0;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--foreground);
}
.topic-page .prose :where(p, ul, ol):first-child { margin-top: 0; }
.topic-page .prose :where(p, ul, ol):last-child { margin-bottom: 0; }
.topic-post-edit {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
}

/* Footer: ghost tools right-aligned (reply / react / more) */
.topic-post-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.75rem;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.topic-post-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
  min-width: 0;
  margin-left: auto;
}
.topic-post-tools > form.inline {
  display: inline-flex;
  margin: 0;
}

.topic-post-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 2.75rem; /* min-h-11 touch target 鈮?4px */
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  cursor: pointer;
}
/* Must win over display:inline-flex 鈥?otherwise銆屽睍寮€/鏀惰捣鍥炲銆嶅湪鏃犳ゼ涓ゼ鏃朵粛浼氭樉绀?*/
.topic-post-action.hidden,
.topic-post-action[hidden] {
  display: none !important;
}
.topic-post-action--tool {
  padding: 0 0.55rem;
}
.topic-post-action--tool:hover {
  background: var(--muted);
  color: var(--foreground);
}
.topic-post-action--danger:hover {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  color: var(--destructive);
}
.topic-post-action--ghost {
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-color: var(--border);
  background: var(--card);
}
.topic-post-action--ghost:hover {
  background: var(--muted);
  color: var(--foreground);
}
.topic-post-action--primary {
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: 9999px;
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
}
.topic-post-action--primary:hover {
  opacity: 0.92;
}
.topic-post-action--approve {
  min-height: 2.75rem;
  padding: 0 0.65rem;
  border-color: color-mix(in srgb, #22c55e 35%, var(--border));
  color: #15803d;
  font-size: 0.75rem;
}
.topic-post-action--approve:hover {
  background: color-mix(in srgb, #22c55e 12%, transparent);
}
html.dark .topic-post-action--approve,
[data-theme="dark"] .topic-post-action--approve {
  color: #86efac;
}
/* Like / dislike: same ghost tool chrome; active keeps color feedback */
.topic-post-action--react .tabular-nums {
  min-width: 0.75rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.topic-post-action--guest {
  color: color-mix(in srgb, var(--muted-foreground) 78%, transparent);
}
.topic-post-action--guest:hover {
  background: var(--muted);
  color: var(--foreground);
}
.topic-post-action--up.is-active {
  color: var(--primary);
}
.topic-post-action--up.is-active:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}
.topic-post-action--down.is-active {
  color: var(--destructive);
}
.topic-post-action--down.is-active:hover {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  color: var(--destructive);
}
.topic-post-action--react.is-active svg {
  fill: currentColor;
}
.topic-post-action:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .topic-post-action {
    transition: none;
  }
}

/* Replies section divider */
.topic-replies-heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.15rem 0.15rem;
}
.topic-replies-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--foreground);
  letter-spacing: 0.01em;
}
.topic-replies-count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.topic-replies-rule {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--border) 88%, transparent);
  min-width: 1.5rem;
}

/* ---- Shared brand surfaces and actions ---- */
.brand-page-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 28%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-gold-soft) 52%, var(--card)), var(--card));
  box-shadow: 0 18px 45px -32px color-mix(in srgb, var(--brand-gold) 48%, transparent);
}

.brand-kicker {
  color: var(--brand-gold-strong);
  letter-spacing: 0.14em;
}

.brand-primary-action,
.brand-secondary-action {
  min-height: 2.75rem;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.brand-primary-action {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--brand-gold) 65%, transparent);
}

.brand-secondary-action {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--card-foreground);
}

.brand-primary-action:hover,
.brand-secondary-action:hover {
  transform: translateY(-1px);
}

.brand-primary-action:hover {
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--brand-gold) 72%, transparent);
}

.brand-secondary-action:hover {
  border-color: color-mix(in srgb, var(--brand-gold) 38%, var(--border));
  background: color-mix(in srgb, var(--brand-gold-soft) 28%, var(--card));
}

.brand-panel,
.brand-card,
.brand-topic-row,
.brand-reply-card {
  border-width: 1px;
  border-color: var(--border);
  background: var(--card);
  color: var(--card-foreground);
}

.brand-card,
.brand-topic-row,
.brand-reply-card {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.brand-card:hover,
.brand-topic-row:hover,
.brand-reply-card:hover {
  border-color: color-mix(in srgb, var(--brand-gold) 38%, var(--border));
}

.brand-card:hover,
.brand-topic-row:hover {
  transform: translateY(-1px);
}

.brand-reply-card:focus-within {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 24%, transparent);
}

.brand-accent-line {
  border-inline-start: 3px solid var(--brand-gold);
}

.brand-topic-row--pinned {
  border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--border));
  background: color-mix(in srgb, var(--brand-gold-soft) 58%, var(--card));
}

.brand-topic-op {
  border: 1px solid color-mix(in srgb, var(--brand-gold) 42%, var(--border));
  background: var(--card);
  box-shadow: inset 0 3px 0 var(--brand-gold), 0 16px 38px -32px color-mix(in srgb, var(--brand-gold) 52%, transparent);
}

/* ---- Sidebar ---- */
aside[aria-label="\4FA7\8FB9\680F\5BFC\822A"] a:hover {
  text-decoration: none;
}

/* ---- Topic List / Forum Cards ---- */
.data-topic-card,
.data-forum-card {
  transition: all 0.2s ease;
}

.data-topic-card:hover,
.data-forum-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-0.125rem);
}

/* ---- Navigation Links ---- */
nav[data-slot="navigation"] a {
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

nav[data-slot="navigation"] a:hover {
  background-color: var(--accent);
}

/* Active nav (header + mobile drawer + board sidebar) */
[data-nav-link].is-active,
[data-nav-link][aria-current="page"] {
  background-color: var(--accent);
  color: var(--accent-foreground);
  font-weight: 600;
}

/* NAV-IA-03:「更多」when a child product path is active */
#nav-more-trigger.is-active,
#nav-more-trigger[data-section-active="true"] {
  background-color: var(--accent);
  color: var(--accent-foreground);
  font-weight: 600;
}

#mobile-sidebar [data-nav-link].is-active,
#mobile-sidebar [data-nav-link][aria-current="page"] {
  background-color: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

/* Mobile drawer polish */
#mobile-sidebar {
  -webkit-overflow-scrolling: touch;
  max-width: min(20rem, 85vw);
  background: color-mix(in srgb, var(--sidebar-background) 96%, var(--brand-gold-soft));
  border-right: 1px solid color-mix(in srgb, var(--brand-gold) 18%, var(--sidebar-border));
  box-shadow: 8px 0 32px -18px color-mix(in srgb, var(--brand-gold) 40%, rgb(0 0 0 / 0.55));
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-sidebar a[href],
#mobile-sidebar button {
  min-height: 2.75rem; /* 44px touch target without min-h-11 rebuild */
}

#mobile-sidebar [data-mobile-menu-close] {
  min-height: 2.75rem;
  min-width: 2.75rem;
}

#mobile-sidebar [data-nav-link]:focus-visible,
#mobile-sidebar button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ring) 70%, transparent);
}

#mobile-menu-backdrop {
  backdrop-filter: blur(3px) saturate(120%);
  background: color-mix(in srgb, var(--brand-ink) 48%, transparent);
  transition: opacity 200ms ease;
}

/* Closed mobile drawer: no hit-testing / no scroll lock ghosts after collapse */
#mobile-sidebar[aria-hidden="true"],
#mobile-menu-backdrop[aria-hidden="true"],
#mobile-sidebar.hidden,
#mobile-menu-backdrop.hidden {
  pointer-events: none;
}

#public-sidebar > aside {
  border: 1px solid color-mix(in srgb, var(--sidebar-border) 82%, transparent);
  border-radius: 1rem;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--sidebar-background) 82%, transparent);
  box-shadow: 0 12px 35px -30px rgb(0 0 0 / 0.45);
  backdrop-filter: blur(10px);
}

/* ---- Tabs Component Styles ---- */
[data-tabs-root] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

[data-tabs-root][data-orientation="horizontal"] {
  flex-direction: column;
}

[data-tabs-list] {
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.25rem;
  background: var(--muted);
  border-radius: 0.75rem;
  border-bottom: none;
}

[data-tabs-trigger] {
  border: 1px solid var(--input);
  background: var(--card);
  color: var(--card-foreground);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

[data-tabs-trigger]:hover {
  border-color: var(--muted-foreground);
}

[data-tabs-trigger][data-state="active"] {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

[data-tabs-trigger]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

[data-tabs-content] {
  padding: 0.5rem 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--card-foreground);
}

/* ---- Dialog Component ---- */
/*
 * Overlay shell. Do NOT force `display: flex` here 鈥?that overrides Tailwind
 * `.hidden` (same specificity, headless.css loads later) and makes closed
 * topic edit/delete dialogs appear as full-screen popups on page load.
 * Open/close is driven by headless.js: data-state + `.hidden` / `.flex`.
 *
 * Do NOT set max-width / max-height / overflow / align-items on content or
 * overlay 鈥?templates own sizing (max-w-*) and placement (items-end sheet vs
 * items-center modal). headless.css loads after Tailwind and would win.
 */
[data-dialog-overlay] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 50;
}
[data-dialog-overlay][data-state="closed"],
[data-dialog-overlay].hidden,
[data-dialog-overlay][aria-hidden="true"] {
  display: none;
}
[data-dialog-overlay][data-state="open"],
[data-dialog-overlay].flex:not(.hidden) {
  display: flex;
  animation: dialogOverlayIn 0.18s ease;
}

[data-dialog-content] {
  background: var(--card);
  border-radius: 0.75rem;
  box-shadow:
    0 24px 48px -20px rgb(0 0 0 / 0.28),
    0 8px 16px -8px rgb(0 0 0 / 0.12);
}

/* Form / confirm dialogs: scroll the panel. Compose picker opts out via
   .compose-picker-sheet { overflow: hidden } + internal list scroll. */
[data-dialog-content]:not(.compose-picker-sheet) {
  max-height: 90vh;
  overflow-y: auto;
}

[data-dialog-overlay][data-state="open"] [data-dialog-content] {
  animation: dialogPanelIn 0.2s ease;
}

@keyframes dialogOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dialogPanelIn {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-dialog-overlay][data-state="open"],
  [data-dialog-overlay].flex:not(.hidden),
  [data-dialog-overlay][data-state="open"] [data-dialog-content] {
    animation: none;
  }
}

/* ---- Dropdown Component ---- */
[data-dropdown-menu] {
  position: relative;
  display: inline-block;
}

[data-dropdown-content] {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  min-width: 12rem;
  /* Above sticky header chrome (z-40) siblings inside the header stacking context */
  z-index: 50;
  animation: slideUp 0.15s ease;
}

/*
 * Hard-close: never leave a collapsed panel as an invisible hit target.
 * `hidden` attribute is primary (headless.js); closed data-state is a belt-and-suspenders
 * fallback if something strips the attribute without updating display.
 */
[data-dropdown-content][hidden],
[data-dropdown-content][data-state="closed"] {
  display: none !important;
  pointer-events: none !important;
}

[data-dropdown-content][data-align="end"] {
  left: auto;
  right: 0;
}

/* Upward menus (e.g. topic post footer) 鈥?do not combine with top:100% or height collapses to 0 */
[data-dropdown-content][data-side="top"] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

/* Topic post 鈰?menu: keep panel above foot border, never clip */
.topic-post-foot,
.topic-post-tools,
[data-slot="post-more"] {
  overflow: visible;
}

[data-slot="dropdown-menu-item"],
[data-dropdown-content] > a,
[data-dropdown-content] a[data-slot="dropdown-menu-item"],
[data-dropdown-content] button[data-slot="dropdown-menu-item"] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--card-foreground);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0;
}

[data-slot="dropdown-menu-item"]:hover,
[data-dropdown-content] > a:hover,
[data-dropdown-content] a[data-slot="dropdown-menu-item"]:hover,
[data-dropdown-content] button[data-slot="dropdown-menu-item"]:hover {
  background: var(--accent);
}

[data-slot="dropdown-menu-item"]:focus-visible,
[data-dropdown-content] > a:focus-visible,
[data-dropdown-content] a[data-slot="dropdown-menu-item"]:focus-visible,
[data-dropdown-content] button[data-slot="dropdown-menu-item"]:focus-visible {
  outline: none;
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--ring);
}

/* Account menu: open state on trigger (chevron / ring) */
[data-dropdown][data-state="open"] {
  z-index: 50;
}

[data-dropdown][data-state="open"] > [data-dropdown-trigger] {
  border-color: var(--border);
  background: var(--muted);
}

[data-dropdown][data-state="open"] [data-user-menu-chevron] {
  transform: rotate(180deg);
}

/* User menu panel: denser card, no double animation fight */
[data-slot="user-menu"] [data-dropdown-content] {
  min-width: 16rem;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

@keyframes slideUp {
  from { transform: translateY(0.5rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

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

/* ---- Radix-style state animations ---- */
[data-accordion-indicator][data-state="open"] {
  transform: rotate(180deg);
}

[data-accordion-content] {
  overflow: hidden;
}

[data-accordion-content][data-state="open"] {
  animation: accordionContentDown 200ms ease-out;
}

[data-accordion-content][data-state="closed"] {
  animation: accordionContentUp 180ms ease-in;
}

@keyframes accordionContentDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes accordionContentUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

[data-dropdown-content][data-state="open"],
[data-popover-content][data-state="open"],
[data-tooltip-content][data-state="instant-open"],
[data-tooltip-content][data-state="delayed-open"] {
  animation: overlayContentIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-toast][data-state="open"] {
  animation: toastIn 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-toast][data-state="closed"] {
  animation: toastOut 140ms ease-in;
}

[data-switch-thumb][data-state="checked"] {
  transform: translateX(1rem);
}

@keyframes overlayContentIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---- Post Layout ---- */
.post-article {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease;
}

.post-article:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.post-avatar {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* ---- Topic List Items ---- */
.topic-list-item {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* ---- Buttons & Interactive ---- */
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-gold) 25%, transparent);
}

.btn-primary:hover {
  background: var(--primary);
  filter: brightness(0.9);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-gold) 40%, transparent);
  transform: translateY(-1px);
}

/* ---- Card Styles ---- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-0.125rem);
}

/* ---- Focus Ring (brand gold) ---- */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Prefer gold box-shadow ring when Tailwind ring utilities are used */
.focus-visible\:ring-ring:focus-visible,
.focus\:ring-ring:focus {
  --tw-ring-color: color-mix(in srgb, var(--ring) 65%, transparent);
}

/*
 * Bordered form fields only 鈥?skip search/chrome controls that already use
 * Tailwind ring utilities (header search, icon buttons).
 */
form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="search"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus-visible,
form textarea:focus-visible,
form select:focus-visible,
.brand-panel input:not([type="checkbox"]):not([type="radio"]):not([type="search"]):focus-visible,
.brand-panel textarea:focus-visible,
.brand-card input:not([type="checkbox"]):not([type="radio"]):not([type="search"]):focus-visible,
.brand-card textarea:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 28%, transparent);
}

/* Skip link already styled; keep high contrast gold CTA */
a[href="#main-content"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent);
}

/* ---- Shared empty state ---- */
.ui-empty-state {
  min-height: 12rem;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand-gold-soft) 28%, var(--card)), var(--card) 62%);
}
.ui-empty-state-icon {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}

/* Soft dismiss for flash / form alerts */
.ui-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  transition: opacity 160ms ease, transform 160ms ease;
}
.ui-alert[hidden],
.ui-alert.hidden {
  display: none !important;
}
.ui-alert.is-dismissing {
  opacity: 0;
  transform: translateY(-0.25rem);
}

/* Topic page: sticky mobile 鈥滃啓鍥炲鈥?when composer is off-screen */
.topic-reply-fab {
  position: fixed;
  z-index: 35;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(120%);
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 40%, var(--primary));
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow:
    0 12px 28px -12px color-mix(in srgb, var(--brand-gold) 70%, transparent),
    0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
}
.topic-reply-fab.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.topic-reply-fab:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}
@media (min-width: 768px) {
  .topic-reply-fab {
    display: none !important;
  }
}

/* Soft gate banner (login / points / locked) 鈥?theme tokens, not raw amber */
.ui-gate-banner {
  border: 1px solid color-mix(in srgb, var(--brand-gold) 35%, var(--border));
  background: color-mix(in srgb, var(--brand-gold-soft) 55%, var(--card));
  color: var(--foreground);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.ui-gate-banner a {
  color: var(--brand-gold-strong);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ui-gate-banner a:hover {
  text-decoration: none;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  [data-accordion-content],
  [data-dropdown-content],
  [data-popover-content],
  [data-tooltip-content],
  [data-toast],
  [data-switch-thumb],
  .btn-primary,
  .brand-primary-action,
  .brand-secondary-action,
  .brand-card,
  .brand-topic-row,
  .brand-reply-card,
  .site-brand-mark,
  .ui-alert,
  .topic-reply-fab,
  main[id="main-content"] > *,
  #mobile-sidebar {
    animation: none !important;
    transition-duration: 0ms !important;
  }

  .animate-spin {
    animation: none !important;
  }

  /* Toast removal depends on animationend, so collapse duration instead of animation: none */
  .animate-slide-in,
  .animate-slide-out {
    animation-duration: 0.01ms !important;
  }

  .site-brand:hover .site-brand-mark,
  .data-topic-card:hover,
  .data-forum-card:hover,
  .card:hover,
  .btn-primary:hover,
  .brand-primary-action:hover,
  .brand-secondary-action:hover,
  .brand-card:hover,
  .brand-topic-row:hover,
  .brand-reply-card:hover,
  .brand-reply-card:focus-within {
    transform: none !important;
  }

  .topic-reply-fab.is-visible {
    transform: translateX(-50%) translateY(0) !important;
  }

  .site-content {
    animation: none !important;
  }
}

/* ---- Prose (Markdown content) ---- */
.prose { color: var(--foreground); }
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6 { margin-top: 1.5em; margin-bottom: 0.5em; font-weight: 600; color: var(--foreground); }
.prose h1 { font-size: 1.5rem; }
.prose h2 { font-size: 1.25rem; }
.prose h3 { font-size: 1.125rem; }
.prose p { margin: 0.75em 0; }
/* Tailwind Preflight sets `ul,ol { list-style: none }` 鈥?restore markers. */
.prose ul,.prose ol {
  padding-left: 1.5em;
  margin: 0.75em 0;
  list-style-position: outside;
}
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose ul ul { list-style-type: circle; }
.prose ul ul ul { list-style-type: square; }
.prose ol ol { list-style-type: lower-alpha; }
.prose ol ol ol { list-style-type: lower-roman; }
.prose li { margin: 0.25em 0; display: list-item; }
.prose li > p { margin: 0.25em 0; }
.prose blockquote { border-left: 3px solid var(--border); padding-left: 1em; margin: 0.75em 0; color: var(--muted-foreground); }
.prose pre {
  background: var(--muted);
  padding: 1em;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.875rem;
}
.prose code { background: var(--muted); padding: 0.125em 0.375em; border-radius: 0.25rem; font-size: 0.875em; }
.prose pre code { background: transparent; padding: 0; display: block; }
/* Wrapper hosts the copy control so <pre> layout is never padded for the button. */
.code-block-wrap {
  position: relative;
  margin: 0.75em 0;
}
.code-block-wrap > pre {
  margin: 0;
}
.code-copy-btn {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.75rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--card) 92%, var(--muted));
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 550;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.code-block-wrap:hover .code-copy-btn,
.code-block-wrap:focus-within .code-copy-btn,
.code-copy-btn:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Touch / coarse pointer: keep the control reachable without hover. */
@media (hover: none), (pointer: coarse) {
  .code-copy-btn {
    opacity: 0.85;
    pointer-events: auto;
  }
}
.code-copy-btn:hover {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: var(--card);
}
.code-copy-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.code-copy-label {
  letter-spacing: 0.02em;
}
.prose a { color: var(--primary); text-decoration: underline; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: 0.5rem; }
.media-gate { display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; border-radius: 0.5rem; background: var(--muted); border: 1px dashed var(--border); text-align: center; }
.media-gate-link { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--muted-foreground); text-decoration: none; transition: color 0.15s; }
.media-gate-link:hover { color: var(--primary); }
.media-gate-icon { width: 2rem; height: 2rem; opacity: 0.5; }
.media-gate-text { font-size: 0.875rem; }
.media-gate-link:hover .media-gate-text { text-decoration: underline; }
.prose table { display: block; width: max-content; min-width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose th,.prose td { white-space: nowrap; border: 1px solid var(--border); padding: 0.5em 0.75em; text-align: left; }
.prose th { background: var(--muted); font-weight: 600; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
.prose del { text-decoration: line-through; color: var(--muted-foreground); }

/* 鈹€鈹€ TongTop video player 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
.tt-video {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0.85em 0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--muted) 40%, #0a0a0a);
  aspect-ratio: 16 / 9;
}
.tt-video-shell {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.tt-video-el {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  cursor: pointer;
}
.tt-video-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.tt-video:hover .tt-video-controls,
.tt-video:focus-within .tt-video-controls,
.tt-video.is-playing .tt-video-controls {
  opacity: 1;
}
.tt-video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.tt-video-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.tt-video-time {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0.9;
}
.tt-video-seek {
  flex: 1;
  min-width: 0;
  accent-color: var(--primary, #c45c26);
  cursor: pointer;
}
.tt-video-error {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
}
.tt-video-error.hidden,
.tt-video-error[hidden] {
  display: none;
}
/* Overlay watermark (not burned into file) — corner + slow drift */
.tt-video-wm {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 6px rgba(0, 0, 0, 0.35);
  font-size: clamp(0.7rem, 2.2vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
}
.tt-video-wm-corner {
  right: 0.7rem;
  /* Clear ~2.8rem control bar (+ gap); 2.6rem overlapped bar by ~3px (r2 critique). */
  bottom: 3.25rem;
  padding: 0.2rem 0.45rem;
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.28);
}
.tt-video-wm-drift {
  left: 0.75rem;
  top: 0.75rem;
  opacity: 0.42;
  font-size: clamp(0.65rem, 1.8vw, 0.85rem);
  font-weight: 500;
  animation: tt-video-wm-drift 18s linear infinite alternate;
}
@keyframes tt-video-wm-drift {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(28%, 42%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tt-video-wm-drift {
    animation: none;
  }
}
.prose .tt-video {
  margin-left: 0;
  margin-right: 0;
}

/* ---- Vote Widget ---- */
[data-vote-button][data-vote-direction] {
  font-size: 0;
  line-height: 1;
}
[data-vote-button][data-vote-direction]::before {
  font-size: 0.875rem;
  line-height: 1;
}
[data-vote-button][data-vote-direction="up"]::before {
  content: "👍";
}
[data-vote-button][data-vote-direction="down"]::before {
  content: "👎";
}
[data-vote-widget][data-selected-vote="up"] [data-vote-button][data-vote-direction="up"]::before {
  content: "♥";
  color: #e11d48;
}
[data-agent-readonly="true"] [data-vote-button] {
  pointer-events: none;
}

/* ---- Toast Animations ---- */
@keyframes slideIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}
.animate-slide-in { animation: slideIn 0.25s ease-out forwards; }
.animate-slide-out { animation: slideOut 0.2s ease-in forwards; }

/* ---- Markdown Editor ---- */
.md-editor,
.md-editor-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.md-editor .md-editor-toolbar,
.md-editor-wrapper > .flex:first-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  flex-shrink: 0;
}

.md-editor textarea[data-md-editor],
.md-editor-wrapper textarea[data-md-editor] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  min-height: 12rem;
  resize: vertical;
  width: 100%;
}

/* Split layout: side-by-side edit + preview */
.md-editor.md-editor-split,
.md-editor-wrapper.md-editor-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
}

.md-editor-split .md-editor-toolbar,
.md-editor-split > .flex:first-child {
  grid-column: 1 / -1;
}

.md-editor-split > div:not(.md-editor-toolbar):not(.md-editor-preview) {
  grid-column: 1 / -1;
}

.md-editor-split textarea[data-md-editor],
.md-editor-wrapper.md-editor-split textarea[data-md-editor] {
  grid-column: 1;
  grid-row: 3;
  min-height: 20rem;
  border-bottom-right-radius: 0;
  border-right-width: 0;
  width: 100% !important;
  float: none !important;
}

.md-editor-split .md-editor-preview,
.md-editor-wrapper.md-editor-split .md-editor-preview {
  grid-column: 2;
  grid-row: 3;
  min-height: 20rem;
  max-height: none !important;
  width: 100% !important;
  float: none !important;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
  overflow-y: auto;
}

/* Preview pane prose (editor context) */
.md-editor-preview.prose,
.md-editor-preview {
  color: var(--foreground);
  font-size: 0.875rem;
  line-height: 1.625;
}

.md-editor-preview.prose h1,
.md-editor-preview.prose h2,
.md-editor-preview.prose h3,
.md-editor-preview.prose h4,
.md-editor-preview.prose h5,
.md-editor-preview.prose h6,
.md-editor-preview h1,
.md-editor-preview h2,
.md-editor-preview h3,
.md-editor-preview h4,
.md-editor-preview h5,
.md-editor-preview h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 600;
  color: var(--foreground);
}

.md-editor-preview.prose h1,
.md-editor-preview h1 { font-size: 1.25rem; }
.md-editor-preview.prose h2,
.md-editor-preview h2 { font-size: 1.125rem; }
.md-editor-preview.prose h3,
.md-editor-preview h3 { font-size: 1rem; }

.md-editor-preview.prose p,
.md-editor-preview p { margin: 0.75em 0; }

.md-editor-preview.prose ul,
.md-editor-preview.prose ol,
.md-editor-preview ul,
.md-editor-preview ol {
  padding-left: 1.5em;
  margin: 0.75em 0;
  list-style-position: outside;
}
.md-editor-preview.prose ul,
.md-editor-preview ul { list-style-type: disc; }
.md-editor-preview.prose ol,
.md-editor-preview ol { list-style-type: decimal; }
.md-editor-preview.prose ul ul,
.md-editor-preview ul ul { list-style-type: circle; }
.md-editor-preview.prose ol ol,
.md-editor-preview ol ol { list-style-type: lower-alpha; }

.md-editor-preview.prose li,
.md-editor-preview li { margin: 0.25em 0; display: list-item; }
.md-editor-preview.prose li > p,
.md-editor-preview li > p { margin: 0.25em 0; }

.md-editor-preview.prose blockquote,
.md-editor-preview blockquote {
  border-left: 3px solid var(--border);
  padding-left: 1em;
  margin: 0.75em 0;
  color: var(--muted-foreground);
}

.md-editor-preview.prose pre,
.md-editor-preview pre {
  background: var(--muted);
  padding: 1em;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.8125rem;
}

.md-editor-preview.prose code,
.md-editor-preview code {
  background: var(--muted);
  padding: 0.125em 0.375em;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.md-editor-preview.prose pre code,
.md-editor-preview pre code {
  background: transparent;
  padding: 0;
}

.md-editor-preview.prose a,
.md-editor-preview a {
  color: var(--primary);
  text-decoration: underline;
}

.md-editor-preview.prose img,
.md-editor-preview img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.md-editor-preview.prose table,
.md-editor-preview table {
  width: 100%;
  border-collapse: collapse;
}

.md-editor-preview.prose th,
.md-editor-preview.prose td,
.md-editor-preview th,
.md-editor-preview td {
  border: 1px solid var(--border);
  padding: 0.5em 0.75em;
  text-align: left;
}

.md-editor-preview.prose th,
.md-editor-preview th {
  background: var(--muted);
  font-weight: 600;
}

.md-editor-preview.prose hr,
.md-editor-preview hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5em 0;
}

/* ---- User avatar + display name (shared macros) ---- */
.user-avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  /* Keep overflow visible so corner pins are not clipped; the img itself is circular. */
  overflow: visible;
  border-radius: 9999px;
  font-weight: 700;
}
/* Photo overlays the letter initial. Absolute so a failed load (onerror 鈫?   remove) reveals the initial without layout shift. Do NOT put .user-avatar
   on the <img> itself 鈥?size tokens live on the wrapper. */
.user-avatar > img,
.user-avatar-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
  background: inherit;
}
.user-avatar--xs { width: 1.25rem; height: 1.25rem; font-size: 0.625rem; }
.user-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: 0.75rem; }
.user-avatar--md { width: 2rem; height: 2rem; font-size: 0.875rem; }
.user-avatar--lg { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
.user-avatar--xl { width: 2.75rem; height: 2.75rem; font-size: 0.875rem; }
.user-avatar--2xl { width: 4rem; height: 4rem; font-size: 1.5rem; }
.user-avatar--3xl { width: 7.5rem; height: 7.5rem; font-size: 2.25rem; }
@media (min-width: 640px) {
  .user-avatar--3xl { width: 8.5rem; height: 8.5rem; font-size: 2.5rem; }
}
.user-avatar--soft {
  background: color-mix(in srgb, var(--primary, var(--brand-gold)) 12%, transparent);
  color: var(--primary, var(--brand-gold));
}
.user-avatar--solid {
  background: var(--primary, var(--brand-gold));
  color: var(--primary-foreground, #fff);
}
.user-avatar--muted {
  background: var(--muted, #eee7da);
  color: var(--muted-foreground, #6e6251);
}
.user-avatar--ring {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, var(--brand-gold)) 25%, transparent);
}
.user-avatar-pin {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  box-shadow: 0 0 0 2px var(--background, #fff);
}
.user-avatar--xs .user-avatar-pin,
.user-avatar--sm .user-avatar-pin {
  width: 0.375rem;
  height: 0.375rem;
}
.user-avatar-pin--admin { background: #a1a1aa; }
.user-avatar-pin--operator { background: var(--brand-gold); }
.user-avatar-pin--moderator { background: color-mix(in srgb, #34d399 80%, transparent); }
/* Public forum-agent pin (visible to everyone) */
.user-avatar-pin--agent {
  background: color-mix(in srgb, var(--brand-gold) 75%, var(--brand-gold-strong) 25%);
}
.user-avatar--agent {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary, var(--brand-gold)) 35%, transparent);
}

/* Public label next to agent names (profile / spacious UI only).
   Topic author rail uses avatar pin + title tooltip instead. */
.agent-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 9999px;
  padding: 0.05rem 0.4rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--primary, var(--brand-gold));
  background: color-mix(in srgb, var(--primary, var(--brand-gold)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, var(--brand-gold)) 22%, transparent);
  vertical-align: middle;
  white-space: nowrap;
}
.agent-badge--lg {
  font-size: 0.75rem;
  padding: 0.15rem 0.55rem;
}
/* Narrow author column under avatar: never wrap badge soup */
.topic-post-author .user-name {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
}
.topic-post-author .user-name > .min-w-0 {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topic-post-author [data-slot="agent-badge"] {
  display: none;
}
/* 璺埛 路 绀剧兢瀹℃牳 */
.agent-badge--community {
  color: color-mix(in srgb, #0f766e 80%, var(--primary, var(--brand-gold)));
  background: color-mix(in srgb, #14b8a6 14%, transparent);
  border-color: color-mix(in srgb, #0d9488 30%, transparent);
}
.user-avatar-pin--community-agent {
  background: color-mix(in srgb, #14b8a6 70%, var(--primary, var(--brand-gold)) 30%);
}
.user-avatar--community-agent {
  box-shadow: 0 0 0 1px color-mix(in srgb, #14b8a6 40%, transparent);
}

.user-name {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
  color: var(--foreground, inherit);
}
.user-identity {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
}

/* Staff-only name sigil (template-gated; not shown to guests) */
.staff-sigil {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  flex-shrink: 0;
  opacity: 0.5;
  vertical-align: middle;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
}
.staff-sigil--admin {
  background: color-mix(in srgb, #71717a 85%, #f59e0b 15%);
}
.staff-sigil--operator {
  background: color-mix(in srgb, #71717a 70%, var(--brand-gold) 30%);
}
.staff-sigil--moderator {
  background: color-mix(in srgb, #71717a 75%, #22c55e 25%);
}
.staff-sigil:hover { opacity: 0.9; }

/* ---- Obsidian-style callouts (foldable) ---- */
.callout {
  margin: 0.85em 0;
  border-radius: 0.5rem;
  border: 1px solid var(--border, #ded4c2);
  border-left-width: 4px;
  background: color-mix(in srgb, var(--muted, #eee7da) 55%, transparent);
  overflow: hidden;
}
.callout-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground, #18140d);
  list-style: none;
  cursor: default;
  user-select: none;
}
.callout.is-collapsible > .callout-title {
  cursor: pointer;
}
.callout.is-collapsible > .callout-title::-webkit-details-marker {
  display: none;
}
.callout.is-collapsible > .callout-title::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.callout.is-collapsible[open] > .callout-title::before {
  transform: rotate(45deg);
}
.callout-label {
  letter-spacing: 0.02em;
}
.callout-title-text {
  font-weight: 500;
  opacity: 0.92;
}
.callout-content {
  padding: 0 0.75rem 0.7rem;
  font-size: 0.9rem;
  line-height: 1.6;
}
.callout-content > :first-child { margin-top: 0; }
.callout-content > :last-child { margin-bottom: 0; }

/* Callouts: warm black-gold family (no cold blue / slate) */
.callout-note, .callout-info, .callout-todo {
  border-left-color: var(--brand-gold);
  background: color-mix(in srgb, var(--brand-gold) 10%, var(--card));
}
.callout-tip, .callout-hint, .callout-important {
  border-left-color: color-mix(in srgb, #2dd4bf 70%, var(--brand-gold) 30%);
  background: color-mix(in srgb, #14b8a6 8%, var(--card));
}
.callout-success, .callout-check, .callout-done {
  border-left-color: color-mix(in srgb, #22c55e 85%, var(--brand-gold) 15%);
  background: color-mix(in srgb, #22c55e 8%, var(--card));
}
.callout-warning, .callout-caution, .callout-attention {
  border-left-color: var(--brand-gold-strong);
  background: color-mix(in srgb, var(--brand-gold) 12%, var(--card));
}
.callout-danger, .callout-error, .callout-failure, .callout-bug {
  border-left-color: var(--destructive);
  background: color-mix(in srgb, var(--destructive) 9%, var(--card));
}
.callout-question, .callout-help, .callout-faq {
  border-left-color: color-mix(in srgb, #c4a574 60%, var(--brand-gold) 40%);
  background: color-mix(in srgb, var(--brand-gold-soft) 40%, var(--card));
}
.callout-example, .callout-abstract, .callout-summary, .callout-tldr {
  border-left-color: var(--brand-gold);
  background: color-mix(in srgb, var(--brand-gold-soft) 58%, var(--card));
}
.callout-quote, .callout-cite {
  border-left-color: color-mix(in srgb, var(--muted-foreground) 55%, var(--border));
  background: color-mix(in srgb, var(--muted) 55%, var(--card));
}

[data-theme="dark"] .callout,
.dark .callout {
  background: color-mix(in srgb, var(--muted) 70%, transparent);
}

/* ---- Toast (data-driven; replaces cold blue Tailwind classes) ---- */
[data-toast] {
  border-color: var(--border);
  background: var(--card);
  color: var(--card-foreground);
  backdrop-filter: blur(10px);
}
[data-toast] .toast-icon {
  flex-shrink: 0;
}
[data-toast][data-toast-type="info"] {
  border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--border));
  box-shadow:
    0 10px 28px -18px color-mix(in srgb, var(--brand-gold) 55%, transparent),
    0 4px 12px -8px rgb(0 0 0 / 0.18);
}
[data-toast][data-toast-type="info"] .toast-icon {
  color: var(--brand-gold-strong);
}
[data-toast][data-toast-type="success"] {
  border-color: color-mix(in srgb, #22c55e 45%, var(--border));
}
[data-toast][data-toast-type="success"] .toast-icon {
  color: #16a34a;
}
[data-toast][data-toast-type="error"] {
  border-color: color-mix(in srgb, var(--destructive) 50%, var(--border));
}
[data-toast][data-toast-type="error"] .toast-icon {
  color: var(--destructive);
}
[data-toast][data-toast-type="warning"] {
  border-color: color-mix(in srgb, var(--brand-gold) 50%, var(--border));
}
[data-toast][data-toast-type="warning"] .toast-icon {
  color: var(--brand-gold-strong);
}
:root.dark [data-toast][data-toast-type="success"] .toast-icon,
.dark [data-toast][data-toast-type="success"] .toast-icon {
  color: #4ade80;
}

/* ---- Headless control states (beat Tailwind utility fights) ---- */
[data-switch][data-state="checked"] {
  background: var(--primary);
  border-color: var(--primary);
}
[data-checkbox][data-state="checked"],
[data-checkbox][data-state="indeterminate"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
[data-radio-item][data-state="checked"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
}

/* Dialog panel: gold-soft border (do not clamp max-width 鈥?templates own size) */
[data-dialog-content] {
  border: 1px solid color-mix(in srgb, var(--brand-gold) 22%, var(--border));
  background: var(--card);
  color: var(--card-foreground);
}
[data-dialog-overlay] {
  background: color-mix(in srgb, var(--brand-ink) 52%, transparent);
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* Popover / tooltip surfaces */
[data-popover-content],
[data-tooltip-content] {
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 18%, var(--border));
  border-radius: 0.5rem;
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--brand-gold) 35%, rgb(0 0 0 / 0.45));
}

/* Empty states 鈥?friendly breathing room */
.brand-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--brand-gold) 32%, var(--border));
  border-radius: 1rem;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand-gold) 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--brand-gold-soft) 40%, var(--card));
  color: var(--muted-foreground);
}
.brand-empty > strong,
.brand-empty > .brand-empty-title {
  color: var(--foreground);
  font-weight: 600;
}
.brand-empty .brand-empty-title,
.ui-empty-state .brand-empty-title {
  letter-spacing: -0.01em;
}
.ui-empty-state.brand-empty {
  /* Macro already uses brand-empty; keep radius consistent with cards */
  border-radius: 1rem;
}

/* Skeleton loading (prefer over spinners) */
.brand-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--muted);
  border-radius: 0.5rem;
}
.brand-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--brand-gold) 12%, transparent),
    transparent
  );
  animation: brandSkeleton 1.4s ease-in-out infinite;
}
@keyframes brandSkeleton {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-skeleton::after {
    animation: none;
  }
}

/* Prose link underline 鈥?warmer gold wash on hover */
.prose a {
  text-underline-offset: 0.15em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.prose a:hover {
  color: var(--brand-gold-strong);
}
.prose blockquote {
  border-left-color: color-mix(in srgb, var(--brand-gold) 55%, var(--border));
}

/* Selection color 鈥?brand gold wash */
::selection {
  background: color-mix(in srgb, var(--brand-gold) 32%, transparent);
  color: var(--foreground);
}

/* ============================================================
   Slip / paper surface language 鈥?flat cards (no CSS 3D stage)
   涔岄噾 / 濂舵补 路 no purple. Shared by forums, boards, topics, skills.
   ============================================================ */
:root {
  --slip-radius: 0.7rem;
  --slip-border: color-mix(in srgb, var(--border) 72%, #8a6a3a 12%);
  --slip-paper: color-mix(in srgb, var(--brand-gold-soft) 22%, var(--card));
  --slip-cream: color-mix(in srgb, #f7f0e4 70%, var(--card));
  --slip-rail: color-mix(in srgb, var(--brand-gold) 58%, #6b5340);
  --slip-ink: color-mix(in srgb, #2a2118 55%, var(--foreground));
  --slip-shadow:
    0 1px 0 color-mix(in srgb, #fff 55%, transparent),
    0 2px 4px rgb(42 33 24 / 0.06),
    0 12px 28px -18px color-mix(in srgb, var(--brand-gold) 38%, transparent),
    0 28px 48px -28px rgb(42 33 24 / 0.28);
  --slip-shadow-hover:
    0 1px 0 color-mix(in srgb, #fff 65%, transparent),
    0 6px 12px rgb(42 33 24 / 0.08),
    0 18px 36px -14px color-mix(in srgb, var(--brand-gold) 52%, transparent),
    0 40px 64px -28px rgb(42 33 24 / 0.36);
  --slip-shadow-deep:
    0 2px 0 color-mix(in srgb, #fff 40%, transparent),
    0 8px 16px rgb(42 33 24 / 0.1),
    0 24px 48px -16px color-mix(in srgb, var(--brand-gold) 45%, transparent),
    0 56px 80px -32px rgb(42 33 24 / 0.42);
}

html.dark,
[data-theme="dark"],
:root.dark {
  --slip-border: color-mix(in srgb, var(--border) 82%, var(--brand-gold) 14%);
  --slip-paper: color-mix(in srgb, var(--brand-gold-soft) 18%, var(--card));
  --slip-cream: color-mix(in srgb, #3a3228 35%, var(--card));
  --slip-rail: color-mix(in srgb, var(--brand-gold) 52%, #c4a574);
  --slip-ink: color-mix(in srgb, #f3e8d8 40%, var(--foreground));
  --slip-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand-gold) 16%, transparent),
    0 2px 6px rgb(0 0 0 / 0.35),
    0 16px 36px -18px rgb(0 0 0 / 0.65),
    0 0 40px -20px color-mix(in srgb, var(--brand-gold) 22%, transparent);
  --slip-shadow-hover:
    0 0 0 1px color-mix(in srgb, var(--brand-gold) 32%, transparent),
    0 6px 14px rgb(0 0 0 / 0.4),
    0 22px 44px -14px rgb(0 0 0 / 0.7),
    0 0 56px -16px color-mix(in srgb, var(--brand-gold) 38%, transparent);
  --slip-shadow-deep:
    0 0 0 1px color-mix(in srgb, var(--brand-gold) 28%, transparent),
    0 10px 20px rgb(0 0 0 / 0.45),
    0 32px 56px -12px rgb(0 0 0 / 0.75),
    0 0 64px -12px color-mix(in srgb, var(--brand-gold) 42%, transparent);
}

/* ---- Flat stage shell (legacy floor/glow hidden) ---- */
.slip-stage,
.slip-wall,
.forums-dir-stack,
.skills-stage {
  position: relative;
}

.skill-connect-brief {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 36%, var(--border));
  border-radius: 1rem;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--brand-gold-soft) 62%, transparent), transparent 58%),
    var(--card);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 44%, transparent);
}

.skill-connect-mark {
  display: grid;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 0.8rem;
  color: var(--brand-gold-strong);
  background: color-mix(in srgb, var(--brand-gold) 15%, transparent);
}

.skill-connect-kicker {
  margin: 0;
  color: var(--brand-gold-strong);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skill-connect-title {
  margin: 0.1rem 0 0;
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 700;
}

.skill-connect-desc {
  margin: 0.25rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.skill-connect-copy {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--brand-gold-strong);
  border-radius: 0.75rem;
  color: var(--primary-foreground);
  background: var(--primary);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 160ms ease, opacity 160ms ease;
}

.skill-connect-copy:hover {
  opacity: 0.88;
}

.skill-connect-copy:active {
  transform: translateY(1px);
}

.skill-connect-copy:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

@media (max-width: 42rem) {
  .skill-connect-brief {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .skill-connect-copy {
    width: 100%;
    margin-left: 3.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skill-connect-copy {
    transition: none;
  }
}

.slip-stage {
  isolation: isolate;
  padding-block: 0.5rem 1.25rem;
}

.slip-stage-floor,
.slip-stage-glow {
  display: none !important;
}

/* ---- Stage hero paper (also .forums-dir-hero-paper) ---- */
.stage-hero {
  position: relative;
  z-index: 1;
  transition:
    box-shadow 200ms ease,
    border-color 200ms ease;
}

.stage-hero:hover {
  box-shadow: var(--slip-shadow-hover);
}

.stage-hero-paper,
.forums-dir-hero-paper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      118deg,
      color-mix(in srgb, var(--brand-gold-soft) 58%, transparent) 0%,
      transparent 46%
    ),
    linear-gradient(
      165deg,
      color-mix(in srgb, #f7f0e4 35%, transparent) 0%,
      transparent 55%
    ),
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 11px,
      color-mix(in srgb, var(--brand-gold) 5%, transparent) 11px,
      color-mix(in srgb, var(--brand-gold) 5%, transparent) 12px
    );
  opacity: 0.92;
}

.stage-hero-anchor {
  position: absolute;
  right: -8%;
  top: -22%;
  width: min(48%, 18rem);
  height: 145%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 58% 48% at 55% 42%,
      color-mix(in srgb, var(--brand-gold) 32%, transparent),
      transparent 70%
    ),
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--brand-gold-strong) 16%, transparent) 0%,
      transparent 58%
    );
  transform: rotateZ(8deg);
  opacity: 0.88;
  filter: blur(0.4px);
}

html.dark .stage-hero-anchor,
[data-theme="dark"] .stage-hero-anchor,
:root.dark .stage-hero-anchor {
  opacity: 0.5;
}

html.dark .stage-hero-paper,
html.dark .forums-dir-hero-paper,
[data-theme="dark"] .stage-hero-paper,
[data-theme="dark"] .forums-dir-hero-paper,
:root.dark .stage-hero-paper,
:root.dark .forums-dir-hero-paper {
  opacity: 0.55;
}

/* ---- Empty stage: tilted blank slips ---- */
.stage-empty {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 16rem;
  padding: 2.25rem 1.25rem 2.5rem;
  border-radius: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 22%, var(--border));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-gold-soft) 20%, transparent) 0%,
      transparent 48%
    ),
    color-mix(in srgb, var(--muted) 32%, var(--card));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent);
  text-align: center;
}

.stage-empty-deck {
  position: relative;
  width: min(16rem, 72vw);
  height: 7.5rem;
}

.stage-empty-slip--a,
.stage-empty-slip--b,
.stage-empty-slip--c {
  position: absolute;
  inset: 0;
  border-radius: var(--slip-radius);
  border: 1px solid var(--slip-border);
  background:
    linear-gradient(160deg, var(--slip-cream) 0%, var(--slip-paper) 55%, var(--card) 100%);
  box-shadow: var(--slip-shadow);
  transform-origin: center center;
}

.stage-empty-slip--a {
  transform: rotate(-6deg);
  opacity: 0.92;
}

.stage-empty-slip--b {
  transform: rotate(1.5deg);
  opacity: 0.96;
}

.stage-empty-slip--c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.75rem;
  transform: rotate(5deg);
}

.stage-empty-slip--c .stage-empty-icon {
  color: color-mix(in srgb, var(--brand-gold-strong) 72%, var(--muted-foreground));
  opacity: 0.9;
}

.stage-empty-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.35rem;
  max-width: 28rem;
  text-align: center;
}

.stage-empty-title {
  margin: 1.35rem 0 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--foreground);
}

.stage-empty-desc {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  max-width: 28rem;
}

/* ---- Topic slips ---- */
.topic-slip {
  position: relative;
  overflow: hidden;
  border-radius: var(--slip-radius);
  border: 1px solid var(--slip-border);
  background:
    linear-gradient(165deg, var(--slip-paper) 0%, var(--slip-cream) 38%, var(--card) 100%),
    var(--card);
  color: inherit;
  box-shadow: var(--slip-shadow);
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms ease,
    border-color 200ms ease;
}

.topic-slip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.38);
}

html.dark .topic-slip::after,
[data-theme="dark"] .topic-slip::after {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07);
}

.topic-slip-rail {
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--slip-rail);
  opacity: 0.9;
  z-index: 1;
  pointer-events: none;
}

.topic-slip[data-tone="1"] .topic-slip-rail {
  background: color-mix(in srgb, #6f7a4e 40%, var(--brand-gold) 60%);
}
.topic-slip[data-tone="2"] .topic-slip-rail {
  background: color-mix(in srgb, var(--brand-gold-strong) 70%, var(--brand-gold));
}
.topic-slip[data-tone="3"] .topic-slip-rail {
  background: color-mix(in srgb, #8b7355 45%, var(--brand-gold));
}
.topic-slip[data-tone="4"] .topic-slip-rail {
  background: color-mix(in srgb, #5c6d7a 35%, var(--brand-gold));
}
.topic-slip[data-tone="5"] .topic-slip-rail {
  background: color-mix(in srgb, var(--brand-gold) 80%, #c4a574);
}

.topic-slip:hover {
  border-color: color-mix(in srgb, var(--brand-gold) 58%, var(--border));
  box-shadow: var(--slip-shadow-hover);
}

.topic-slip:focus-within {
  border-color: var(--brand-gold);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--brand-gold) 72%, transparent),
    var(--slip-shadow);
}

.topic-slip-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  min-height: 1.1rem;
}

.topic-slip-ticker {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--brand-gold-strong) 78%, var(--muted-foreground));
  background: color-mix(in srgb, var(--brand-gold-soft) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 28%, var(--border));
  border-radius: 0.3rem;
  padding: 0.08rem 0.35rem;
  line-height: 1.3;
}

.topic-slip-ticker--empty {
  visibility: hidden;
  border: 0;
  padding: 0;
  background: transparent;
}

.topic-slip-kind-slot {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.topic-slip-kind {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand-gold-strong);
  background: color-mix(in srgb, var(--brand-gold-soft) 55%, var(--card));
  border: 1px solid color-mix(in srgb, var(--brand-gold) 32%, var(--border));
  border-radius: 9999px;
  padding: 0.1rem 0.45rem;
  line-height: 1.3;
}

.topic-slip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.topic-slip-tags--empty {
  display: none;
}

.topic-slip-tag {
  font-size: 0.625rem;
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--muted) 55%, var(--card));
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 0.3rem;
  padding: 0.08rem 0.35rem;
  line-height: 1.3;
}

/* Desktop: flat cards (CSS 3D exhibit retired) */
@media (min-width: 640px) {
  .topic-slip[data-tone="0"],
  .topic-slip[data-tone="1"],
  .topic-slip[data-tone="2"],
  .topic-slip[data-tone="3"],
  .topic-slip[data-tone="4"],
  .topic-slip[data-tone="5"],
  .topic-slip:hover,
  .topic-slip[data-tone="0"]:hover,
  .topic-slip[data-tone="1"]:hover,
  .topic-slip[data-tone="2"]:hover,
  .topic-slip[data-tone="3"]:hover,
  .topic-slip[data-tone="4"]:hover,
  .topic-slip[data-tone="5"]:hover {
    transform: none;
  }
  .topic-slip:hover {
    box-shadow: var(--slip-shadow-hover);
  }
}

/* ==========================================================================
 * Discovery slips 鈥?/forums trays + board slips + skills exhibit
 * ========================================================================== */

.forums-dir-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

@media (min-width: 640px) {
  .forums-dir-stack {
    gap: 0.85rem;
  }
}

/* Compact map header on /forums 鈥?no paper stage */
.forums-dir-hero {
  position: relative;
  z-index: 1;
  padding-block: 0;
}

.forums-dir-hero:hover {
  box-shadow: none;
}

.forums-dir-filter {
  margin-top: 0.15rem;
}

.forums-dir-filter-empty {
  margin: 0;
}

/* ---- Forums map empty (flat, no stage deck) ---- */
.forums-dir-empty {
  margin: 0.5rem 0 0;
  padding: 2rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  text-align: center;
}

.forums-dir-empty-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--foreground);
}

.forums-dir-empty-desc {
  margin: 0.45rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  max-width: 28rem;
  margin-inline: auto;
}

/* ---- Forum group (collapsible directory) ---- */
.forum-slip-tray {
  --forum-accent: var(--brand-gold);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--muted) 16%, var(--card));
  box-shadow: none;
  padding-inline: 0.55rem;
  padding-block: 0.05rem 0.15rem;
}

.forum-slip-tray::before {
  content: "";
  position: absolute;
  inset-block: 0.9rem auto;
  inset-inline-start: 0;
  height: 1.15rem;
  width: 0.2rem;
  border-radius: 0.1rem;
  background: var(--forum-accent);
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
}

.forum-slip-tray::after {
  content: none;
}

.forum-slip-tray:hover {
  transform: none;
  box-shadow: none;
}

.forum-slip-tray-cover {
  display: none;
}

.forum-slip-tray-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  list-style: none;
  cursor: pointer;
  padding: 0.65rem 0.35rem 0.65rem 0.55rem;
  user-select: none;
}

.forum-slip-tray-head::-webkit-details-marker {
  display: none;
}

.forum-slip-tray-head::marker {
  content: "";
}

.forum-slip-tray-head:focus-visible {
  outline: 2px solid var(--ring, var(--brand-gold));
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Pure-CSS collapse animation (Chrome 131+ ::details-content) */
.forum-slip-tray::details-content {
  transition: height 220ms ease, content-visibility 220ms ease allow-discrete;
  height: 0;
  overflow: clip;
}

.forum-slip-tray[open]::details-content {
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .forum-slip-tray::details-content {
    transition: none;
  }
}

.forum-slip-tray-head-text {
  min-width: 0;
}

.forum-slip-tray-mark {
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--forum-accent) 12%, transparent);
  color: var(--forum-accent);
}

.forum-slip-tray-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--foreground);
}

@media (min-width: 640px) {
  .forum-slip-tray-title {
    font-size: 1rem;
  }
}

.forum-slip-tray-title a {
  color: inherit;
  text-decoration: none;
}

.forum-slip-tray-desc {
  margin-top: 0.1rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--muted-foreground) 88%, transparent);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.forum-slip-tray-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 550;
  color: var(--muted-foreground);
  opacity: 0.85;
}

.forum-slip-tray-chevron {
  transition: transform 160ms ease;
}

.forum-slip-tray[open] > .forum-slip-tray-head .forum-slip-tray-chevron {
  transform: rotate(180deg);
}

.forum-slip-tray-list,
.forum-slip-tray-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0 0.35rem 0.45rem 0.55rem;
}

@media (min-width: 640px) {
  .forum-slip-tray-list,
  .forum-slip-tray-grid {
    padding-bottom: 0.55rem;
  }

  /* Grid kicks in early: auto-fill columns, rows stay compact.
     Cards have variable height (topics list) — top-align grid items. */
  .forum-slip-tray-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    column-gap: 0.65rem;
    row-gap: 0.05rem;
    align-items: start;
  }

  .forum-slip-tray-list .forum-slip-tray-scroll-hint {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px) {
  .forum-slip-tray-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* Long board lists: cap height, internal scroll, sticky count hint */
.forum-slip-tray-list--scrollable {
  --forum-tray-row: 2.75rem;
  max-height: min(calc(var(--forum-tray-row) * 10), 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.forum-slip-tray-scroll-hint {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0.35rem 0 0;
  padding: 0.35rem 0.5rem 0.15rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--card) 96%, var(--muted)) 72%,
    color-mix(in srgb, var(--card) 72%, transparent)
  );
  font-size: 0.6875rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--muted-foreground);
  pointer-events: none;
}

/* ---- Board card: head row (icon + name link + time) + top topics list ---- */
.board-slip {
  --board-accent: var(--forum-accent, var(--brand-gold));
  display: block;
  border: none;
  border-radius: 0.45rem;
  background: transparent;
  box-shadow: none;
  padding: 0.4rem 0.5rem;
  min-height: 2.5rem;
  transition: background-color 160ms ease, opacity 160ms ease;
}

.board-slip::before {
  content: none;
}

.board-slip-cover {
  display: none;
}

.board-slip-icon {
  background: color-mix(in srgb, var(--board-accent) 10%, transparent);
  color: var(--board-accent);
  border: none;
}

/* Head row: icon + board name link + activity time */
.board-slip-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.board-slip-title-link {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 0%;
  margin-block: -0.14rem;
  margin-inline: -0.4rem;
  padding: 0.14rem 0.4rem;
  border-radius: 0.375rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.board-slip-title-link:hover {
  background: color-mix(in srgb, var(--muted) 55%, transparent);
}

.board-slip-title {
  min-width: 0;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 640px) {
  .board-slip-title {
    font-size: 0.9375rem;
  }
}

.board-slip-desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--muted-foreground) 90%, transparent);
}

/* Top topics list (max 3, featured first) under the head row */
.board-slip-topics {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin-top: 0.15rem;
}

/* Align topic rows under the board name when an icon is present
   (icon 1.75rem + head gap 0.625rem) */
.board-slip-topics--indented {
  padding-inline-start: 2.375rem;
}

.board-slip-topic {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  margin-inline: -0.4rem;
  padding: 0.14rem 0.4rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.board-slip-topic:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--muted) 60%, transparent);
}

.board-slip-topic-title {
  font-weight: 450;
}

/* Featured topic: darker title + gold award badge, instantly recognizable */
.board-slip-topic--featured {
  color: color-mix(in srgb, var(--foreground) 88%, var(--muted-foreground));
}

.board-slip-topic--featured .board-slip-topic-title {
  font-weight: 550;
}

.board-slip-topic--featured:hover {
  color: var(--foreground);
}

.board-slip-topic-badge {
  color: var(--brand-gold);
}

/* Right-aligned fixed time column inside the head row */
.board-slip-time {
  flex-shrink: 0;
  margin-inline-start: auto;
  font-size: 0.75rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--muted-foreground);
}

.board-slip--quiet {
  opacity: 0.62;
  background: transparent;
}

.board-slip--quiet .board-slip-title {
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 70%, var(--muted-foreground));
}

.board-slip--live {
  background: transparent;
}

.board-slip:hover {
  border: none;
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  opacity: 1;
}

.board-slip:hover .board-slip-title {
  color: var(--brand-gold-strong, var(--foreground));
}

.board-slip-title-link:focus-visible,
.board-slip-topic:focus-visible {
  outline: 2px solid var(--ring, var(--brand-gold));
  outline-offset: 2px;
}

/* /f/{id} reuses board rows 鈥?card shell without duplicate accent (page h1 above) */
.forum-landing-tray {
  padding-block: 0.35rem 0.15rem;
}

.forum-landing-tray::before {
  content: none;
}

/* ---- Skills exhibit ---- */
.skills-stage {
  position: relative;
  isolation: isolate;
  padding-block: 0.25rem 1rem;
}

.skills-catalog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .skills-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

@media (min-width: 1024px) {
  .skills-catalog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.skill-slip {
  position: relative;
  overflow: hidden;
  border-radius: var(--slip-radius);
  border: 1px solid var(--slip-border);
  background:
    linear-gradient(158deg, var(--slip-cream) 0%, var(--slip-paper) 42%, var(--card) 100%);
  box-shadow: var(--slip-shadow);
  transition:
    box-shadow 200ms ease,
    border-color 200ms ease;
  color: inherit;
  text-decoration: none;
}

.skills-catalog > .skill-slip:nth-child(3n + 2),
.skills-catalog > .skill-slip:nth-child(3n + 3) {
  transform: none;
}

.skill-slip::before {
  content: "";
  position: absolute;
  inset-block: 0.75rem 0.75rem;
  inset-inline-start: 0;
  width: 0.22rem;
  border-radius: 0 0.15rem 0.15rem 0;
  background: var(--slip-rail);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

.skill-slip::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: linear-gradient(
    225deg,
    color-mix(in srgb, var(--brand-gold-soft) 70%, var(--card)) 48%,
    transparent 50%
  );
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

.skill-slip:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--brand-gold) 52%, var(--border));
  box-shadow: var(--slip-shadow-deep);
}

.skills-catalog > .skill-slip:nth-child(3n + 2):hover,
.skills-catalog > .skill-slip:nth-child(3n + 3):hover {
  transform: none;
}

.skill-slip {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 8.75rem;
  padding: 1rem 1.05rem 1.1rem 1.15rem;
}

.skill-slip:focus-visible {
  outline: 2px solid var(--ring, var(--brand-gold-strong));
  outline-offset: 3px;
}

.skill-slip-icon {
  display: flex;
  height: 2.35rem;
  width: 2.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  color: var(--brand-gold-strong);
  background: color-mix(in srgb, var(--brand-gold-soft) 48%, var(--card));
  border: 1px solid color-mix(in srgb, var(--brand-gold) 28%, var(--border));
}

.skill-slip-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--foreground);
  line-height: 1.3;
}

.skill-slip-meta {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}

.skill-slip-summary {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.skill-slip-price {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--brand-gold-strong) 85%, var(--foreground));
}

/* Dark: light forum partition surfaces; skill slips retain soft depth */
html.dark .forum-slip-tray,
[data-theme="dark"] .forum-slip-tray,
:root.dark .forum-slip-tray {
  background: color-mix(in srgb, var(--muted) 24%, var(--card));
  border-color: color-mix(in srgb, var(--border) 92%, transparent);
  box-shadow: none;
}

html.dark .forum-slip-tray-scroll-hint,
[data-theme="dark"] .forum-slip-tray-scroll-hint,
:root.dark .forum-slip-tray-scroll-hint {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--card) 98%, var(--muted)) 75%,
    color-mix(in srgb, var(--card) 70%, transparent)
  );
}

html.dark .board-slip,
[data-theme="dark"] .board-slip,
:root.dark .board-slip {
  box-shadow: none;
}

html.dark .skill-slip,
[data-theme="dark"] .skill-slip,
:root.dark .skill-slip {
  box-shadow: var(--slip-shadow);
}

/* ---- Mobile 鈮?39px: kill big 3D, keep shadows; soft 2D on empty slips ---- */
@media (max-width: 639px) {
  .slip-stage,
  .slip-wall,
  .forums-dir-stack,
  .skills-stage,
  .skills-catalog,
  .stage-empty {
    perspective: none;
  }

  .slip-stage-floor,
  .slip-stage-glow {
    display: none;
  }

  .stage-hero,
  .stage-hero:hover {
    transform: none;
  }

  .forums-dir-stack {
    gap: 1rem;
  }

  .topic-slip,
  .topic-slip[data-tone="0"],
  .topic-slip[data-tone="1"],
  .topic-slip[data-tone="2"],
  .topic-slip[data-tone="3"],
  .topic-slip[data-tone="4"],
  .topic-slip[data-tone="5"],
  .topic-slip:hover,
  .forum-slip-tray,
  .forum-slip-tray:hover,
  .board-slip,
  .forum-slip-tray-grid > .board-slip:nth-child(3n + 2),
  .forum-slip-tray-grid > .board-slip:nth-child(3n + 3),
  .board-slip:hover,
  .forum-slip-tray-grid > .board-slip:nth-child(3n + 2):hover,
  .forum-slip-tray-grid > .board-slip:nth-child(3n + 3):hover,
  .skill-slip,
  .skills-catalog > .skill-slip:nth-child(3n + 2),
  .skills-catalog > .skill-slip:nth-child(3n + 3),
  .skill-slip:hover,
  .skills-catalog > .skill-slip:nth-child(3n + 2):hover,
  .skills-catalog > .skill-slip:nth-child(3n + 3):hover {
    transform: none;
  }

  .topic-slip:hover,
  .forum-slip-tray:hover,
  .board-slip:hover,
  .skill-slip:hover {
    box-shadow: var(--slip-shadow-hover);
    border-color: color-mix(in srgb, var(--brand-gold) 48%, var(--border));
  }

  /* Soft 2D rotates on empty slips only */
  .stage-empty-slip--a {
    transform: rotate(-6deg);
  }
  .stage-empty-slip--b {
    transform: rotate(1.5deg);
  }
  .stage-empty-slip--c {
    transform: rotate(5deg);
  }
}

/* ---- Reduced motion: flatten transforms, keep richer hover shadows ---- */
@media (prefers-reduced-motion: reduce) {
  .slip-stage,
  .slip-wall,
  .forums-dir-stack,
  .skills-stage,
  .skills-catalog,
  .stage-empty {
    perspective: none;
  }

  .slip-stage-floor {
    transform: none;
    opacity: 0.35;
  }

  .stage-hero,
  .stage-hero:hover,
  .stage-empty-slip--a,
  .stage-empty-slip--b,
  .stage-empty-slip--c,
  .topic-slip,
  .topic-slip[data-tone="0"],
  .topic-slip[data-tone="1"],
  .topic-slip[data-tone="2"],
  .topic-slip[data-tone="3"],
  .topic-slip[data-tone="4"],
  .topic-slip[data-tone="5"],
  .topic-slip:hover,
  .forum-slip-tray,
  .forum-slip-tray:hover,
  .board-slip,
  .forum-slip-tray-grid > .board-slip:nth-child(3n + 2),
  .forum-slip-tray-grid > .board-slip:nth-child(3n + 3),
  .board-slip:hover,
  .forum-slip-tray-grid > .board-slip:nth-child(3n + 2):hover,
  .forum-slip-tray-grid > .board-slip:nth-child(3n + 3):hover,
  .skill-slip,
  .skills-catalog > .skill-slip:nth-child(3n + 2),
  .skills-catalog > .skill-slip:nth-child(3n + 3),
  .skill-slip:hover,
  .skills-catalog > .skill-slip:nth-child(3n + 2):hover,
  .skills-catalog > .skill-slip:nth-child(3n + 3):hover {
    transform: none !important;
    transition: border-color 160ms ease, box-shadow 160ms ease !important;
  }

  .topic-slip:hover,
  .forum-slip-tray:hover,
  .board-slip:hover,
  .skill-slip:hover,
  .stage-hero:hover {
    box-shadow: var(--slip-shadow-hover);
    border-color: color-mix(in srgb, var(--brand-gold) 48%, var(--border));
  }
}

/* 鈹€鈹€ Prompt gallery + studio (/prompts) 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
.prompt-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.85rem;
}
.prompt-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 11rem;
  padding: 1rem 1rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  overflow: hidden;
}
.prompt-card--has-cover {
  padding-top: 0;
  gap: 0.65rem;
}
.prompt-card-cover {
  margin: 0 -1rem;
  aspect-ratio: 16 / 9;
  max-height: 9rem;
  overflow: hidden;
  position: relative;
  background: color-mix(in srgb, var(--muted) 55%, var(--card));
}
.prompt-card-cover-img {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prompt-card-cover-fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--primary) 14%, transparent) 0%,
      transparent 42%,
      color-mix(in srgb, var(--card) 55%, transparent) 100%
    ),
    color-mix(in srgb, var(--muted) 40%, var(--card));
}
.prompt-card-cover-wallpaper {
  margin: 0;
  padding: 0.55rem 0.65rem;
  width: 140%;
  min-height: 140%;
  transform: translate(-6%, -8%) rotate(-6deg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.58rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  word-break: break-word;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
  opacity: 0.9;
  user-select: none;
}
.prompt-card-cover.is-fill .prompt-card-cover-fill,
.prompt-card-cover[data-fallback="1"] .prompt-card-cover-fill {
  opacity: 1;
}
.prompt-card-cover.is-fill .prompt-card-cover-img,
.prompt-card-cover[data-fallback="1"] .prompt-card-cover-img {
  display: none;
}
.prompt-detail {
  gap: 0;
}
.prompt-share-preview {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  min-height: 10rem;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 30%, var(--border));
  border-radius: 1rem;
  background:
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--brand-gold) 22%, transparent), transparent 52%),
    color-mix(in srgb, var(--brand-ink) 82%, var(--card));
  box-shadow: 0 10px 24px -20px rgb(0 0 0 / 0.48);
  isolation: isolate;
}
.prompt-share-preview-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}
.prompt-share-preview-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0.12) 72%, rgb(0 0 0 / 0.28));
  opacity: 0;
  transition: opacity 180ms ease;
}
.prompt-share-preview-copy {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: calc(100% - 2rem);
  padding: 0.5rem 0.65rem;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 0.65rem;
  color: #fff;
  background: rgb(0 0 0 / 0.38);
  font-size: 0.8125rem;
  font-weight: 700;
  backdrop-filter: blur(5px);
  opacity: 0;
  transform: translateY(0.45rem);
  transition: opacity 180ms ease, transform 180ms ease;
}
.prompt-share-preview:hover .prompt-share-preview-shade,
.prompt-share-preview:focus-visible .prompt-share-preview-shade,
.prompt-share-preview:focus-within .prompt-share-preview-shade,
.prompt-share-preview:hover .prompt-share-preview-copy,
.prompt-share-preview:focus-visible .prompt-share-preview-copy,
.prompt-share-preview:focus-within .prompt-share-preview-copy {
  opacity: 1;
}
.prompt-share-preview:hover .prompt-share-preview-copy,
.prompt-share-preview:focus-visible .prompt-share-preview-copy,
.prompt-share-preview:focus-within .prompt-share-preview-copy {
  transform: translateY(0);
}
.prompt-share-preview:hover .prompt-share-preview-img {
  transform: scale(1.025);
}
.prompt-share-preview:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}
.prompt-share-preview.is-fallback .prompt-share-preview-shade {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-gold) 22%, transparent), transparent 62%);
}
.prompt-share-preview.is-fallback .prompt-share-preview-copy {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--brand-gold) 38%, var(--border));
  background: color-mix(in srgb, var(--card) 82%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .prompt-share-preview-img,
  .prompt-share-preview-shade,
  .prompt-share-preview-copy {
    transition: none;
  }
}
.prompt-detail-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(52vh, 22rem);
  overflow: hidden;
  border-radius: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 28%, var(--border));
  background:
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--brand-gold) 16%, transparent) 0, transparent 55%),
    color-mix(in srgb, var(--brand-ink) 88%, var(--card));
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--brand-gold) 22%, transparent),
    0 18px 40px -28px rgb(0 0 0 / 0.45);
}
.prompt-detail-cover-img {
  cursor: zoom-in;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transform: scale(1);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.prompt-detail-cover:hover .prompt-detail-cover-img {
  transform: scale(1.028);
}
.prompt-detail-cover-copy.is-copied {
  border-color: rgb(173 239 207 / 0.78);
  background: rgb(20 92 65 / 0.72);
}
.prompt-detail-cover::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.02) 42%, rgb(0 0 0 / 0.52));
}
.prompt-detail-cover-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 180ms ease, transform 180ms ease;
}
.prompt-detail-cover:hover .prompt-detail-cover-overlay,
.prompt-detail-cover:focus-within .prompt-detail-cover-overlay {
  opacity: 1;
  transform: translateY(0);
}
.prompt-detail-cover-actions {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  pointer-events: auto;
}
.prompt-detail-cover-platform,
.prompt-detail-cover-copy {
  position: absolute;
  top: 1rem;
  pointer-events: auto;
}
.prompt-detail-cover-platform {
  left: 1rem;
}
.prompt-detail-cover .prompt-detail-cover-platform {
  width: max-content;
  max-width: calc(100% - 7rem);
}
.prompt-detail-cover-copy {
  right: 1rem;
}
.prompt-detail-cover-platform .prompt-platform-trigger {
  min-height: 2.5rem;
  padding: 0.4rem 0.75rem;
  border-color: rgb(255 255 255 / 0.52);
  border-radius: 0.75rem;
  background: rgb(18 16 12 / 0.48);
  color: #fff;
  box-shadow: 0 8px 18px -14px rgb(0 0 0 / 0.72);
  backdrop-filter: blur(12px);
}
.prompt-detail-cover .prompt-detail-cover-platform .prompt-platform-trigger {
  width: auto;
  max-width: 100%;
}
.prompt-detail-cover-platform .prompt-platform-trigger:hover,
.prompt-detail-cover-platform:focus-within .prompt-platform-trigger,
.prompt-detail-cover-platform[open] .prompt-platform-trigger {
  border-color: rgb(255 255 255 / 0.76);
  background: rgb(18 16 12 / 0.7);
  color: #fff;
}
.prompt-detail-cover-platform .prompt-view-platform {
  z-index: 2;
}
.prompt-detail-cover:has(.prompt-platform-reveal[open]) {
  overflow: visible;
  z-index: 8;
}
.prompt-detail-cover-action {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.52);
  border-radius: 0.75rem;
  background: rgb(18 16 12 / 0.48);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 18px -14px rgb(0 0 0 / 0.72);
  backdrop-filter: blur(12px);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.prompt-detail-cover-action:hover,
.prompt-detail-cover-action:focus-visible {
  border-color: rgb(255 255 255 / 0.76);
  background: rgb(18 16 12 / 0.7);
  outline: none;
  transform: translateY(-1px);
}
.prompt-detail-cover-fill {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--brand-gold) 18%, transparent) 0%,
      transparent 42%,
      color-mix(in srgb, var(--brand-ink) 55%, transparent) 100%
    ),
    color-mix(in srgb, var(--muted) 40%, var(--card));
}
.prompt-detail-cover.is-fill .prompt-detail-cover-fill,
.prompt-detail-cover[data-fallback="1"] .prompt-detail-cover-fill {
  display: block;
}
.prompt-detail-cover-wallpaper {
  margin: 0;
  padding: 0.85rem 1rem;
  width: 140%;
  min-height: 140%;
  transform: translate(-6%, -8%) rotate(-6deg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.7rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  word-break: break-word;
  color: color-mix(in srgb, var(--brand-gold-soft) 70%, var(--foreground));
  opacity: 0.85;
  user-select: none;
}
.prompt-detail-head {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1.15rem 0 1.15rem;
  padding: 0 0 1.05rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}
@media (min-width: 640px) {
  .prompt-detail-head {
    padding-bottom: 1.15rem;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.prompt-detail-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--foreground);
}
@media (min-width: 640px) {
  .prompt-detail-title {
    font-size: 1.65rem;
  }
}
.prompt-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin-top: 0.55rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.prompt-detail-meta-sep {
  opacity: 0.45;
}
.prompt-detail-meta-link {
  color: inherit;
}
.prompt-detail-meta-link:hover {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prompt-detail-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}
.prompt-detail-chip--gold {
  border-color: color-mix(in srgb, var(--brand-gold) 40%, var(--border));
  background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
  color: color-mix(in srgb, var(--foreground) 70%, var(--brand-gold));
}
.prompt-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.prompt-detail-actions .prompt-detail-action {
  min-height: 2rem;
  padding: 0.25rem 0.45rem;
  border-color: transparent;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--muted-foreground);
}
.prompt-detail-actions .prompt-detail-action:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--muted) 48%, transparent);
  color: var(--foreground);
}
.prompt-detail-action {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  gap: 0.4rem;
  border-radius: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: transparent;
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--foreground);
  transition: background 140ms ease, border-color 140ms ease;
}
.prompt-detail-action:hover {
  background: color-mix(in srgb, var(--muted) 55%, transparent);
  border-color: color-mix(in srgb, var(--brand-gold) 30%, var(--border));
}
.prompt-detail-action--solid {
  background: color-mix(in srgb, var(--card) 88%, var(--muted));
}
.prompt-detail-lock,
.prompt-detail-tip {
  margin-top: 0.25rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 22%, var(--border));
  background: color-mix(in srgb, var(--brand-gold-soft) 35%, var(--card));
  padding: 1.15rem 1.25rem;
}
.prompt-detail-tip {
  margin-top: 1.25rem;
  background: color-mix(in srgb, var(--muted) 28%, var(--card));
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
}
.prompt-support-panel {
  margin-top: 1.4rem;
  padding: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--card) 92%, var(--muted));
}
.prompt-support-head,
.prompt-support-records-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.prompt-support-kicker {
  margin: 0 0 0.25rem;
  color: var(--primary);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.prompt-support-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
}
.prompt-support-public,
.prompt-support-records-head span {
  color: var(--muted-foreground);
  font-size: 0.7rem;
}
.prompt-support-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}
.prompt-support-stat {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-height: 4.25rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--background) 62%, var(--card));
}
.prompt-support-stat--gold {
  border-color: color-mix(in srgb, var(--brand-gold) 28%, var(--border));
  background: color-mix(in srgb, var(--brand-gold) 8%, var(--card));
}
.prompt-support-stat-label {
  align-self: flex-start;
  flex: 1;
  color: var(--muted-foreground);
  font-size: 0.72rem;
}
.prompt-support-stat strong {
  color: var(--foreground);
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}
.prompt-support-stat--gold strong {
  color: color-mix(in srgb, var(--brand-gold) 78%, var(--foreground));
}
.prompt-support-stat-unit {
  color: var(--muted-foreground);
  font-size: 0.7rem;
}
.prompt-support-records {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}
.prompt-support-records-head h3 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
}
.prompt-support-list {
  display: flex;
  flex-direction: column;
  margin-top: 0.55rem;
}
.prompt-support-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
}
.prompt-support-row:last-child {
  border-bottom: 0;
}
.prompt-support-user {
  flex-shrink: 0;
  border-radius: 999px;
}
.prompt-support-row-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.1rem;
}
.prompt-support-row-name {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prompt-support-row-main time {
  color: var(--muted-foreground);
  font-size: 0.68rem;
}
.prompt-support-row-amount {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--brand-gold) 78%, var(--foreground));
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.prompt-support-empty {
  margin: 1rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.75rem;
}
@media (max-width: 639px) {
  .prompt-support-panel {
    padding: 0.9rem;
  }
  .prompt-support-stats {
    grid-template-columns: 1fr;
  }
}
.prompt-detail .prompt-view {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.prompt-view-no-cover-actions {
  display: flex;
  justify-content: flex-end;
}
.prompt-studio-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.prompt-studio-card > .prompt-view {
  padding: 1rem 0 1.1rem;
}
.prompt-card:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow: 0 8px 24px -16px rgb(0 0 0 / 0.35);
}
.prompt-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.prompt-card-platform {
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
}
.prompt-card-slots {
  font-size: 0.65rem;
  color: var(--muted-foreground);
}
.prompt-card-slots--none { opacity: 0.75; }
.prompt-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prompt-card-excerpt {
  margin: 0;
  flex: 1;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prompt-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  min-width: 0;
}
.prompt-card-foot .user-identity {
  flex: 1 1 0;
  min-width: 0;
  max-width: 58%;
  overflow: hidden;
}
.prompt-card-board {
  flex: 0 1 auto;
  min-width: 3.25rem;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--muted-foreground);
  text-align: right;
}
.prompt-studio-layout {
  display: grid;
  gap: 1rem;
}
@media (min-width: 900px) {
  .prompt-studio-layout {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    align-items: start;
  }
}
/* Detail view — copy-first, ink panel + gold accent */
.prompt-view-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.prompt-view-toolbar-main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.prompt-view-toolbar-main--right {
  justify-content: flex-end;
  margin-left: auto;
}
.prompt-platform-reveal {
  position: relative;
  z-index: 8;
  flex-shrink: 0;
}
.prompt-platform-reveal > summary {
  list-style: none;
}
.prompt-platform-reveal > summary::-webkit-details-marker {
  display: none;
}
.prompt-platform-trigger {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--card) 82%, var(--muted));
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 650;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.prompt-platform-trigger:hover,
.prompt-platform-reveal:focus-within .prompt-platform-trigger,
.prompt-platform-reveal[open] .prompt-platform-trigger {
  border-color: color-mix(in srgb, var(--brand-gold) 44%, var(--border));
  background: color-mix(in srgb, var(--brand-gold) 10%, var(--card));
  color: var(--foreground);
}
.prompt-platform-chevron {
  transition: transform 180ms ease;
}
.prompt-platform-reveal[open] .prompt-platform-chevron,
.prompt-platform-reveal:hover .prompt-platform-chevron,
.prompt-platform-reveal:focus-within .prompt-platform-chevron {
  transform: rotate(180deg);
}
.prompt-platform-reveal .prompt-view-platform {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  width: 12rem;
  padding: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 28%, var(--border));
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--card) 96%, var(--background));
  box-shadow: 0 16px 30px -18px rgb(0 0 0 / 0.58);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.35rem) scale(0.96);
  transform-origin: top left;
  transition: opacity 170ms ease, transform 170ms ease;
}
.prompt-platform-menu {
  display: flex;
  width: 100%;
  min-width: 0;
  max-height: min(18rem, calc(100vh - 8rem));
  flex-direction: column;
  gap: 0.15rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--brand-gold) 62%, var(--border)) transparent;
  scrollbar-width: thin;
}
.prompt-platform-menu::-webkit-scrollbar {
  width: 0.35rem;
  height: 0;
}
.prompt-platform-menu::-webkit-scrollbar-track {
  background: transparent;
}
.prompt-platform-menu::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-gold) 62%, var(--border));
  background-clip: padding-box;
}
.prompt-platform-option {
  display: flex;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 2.2rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.prompt-platform-option:hover,
.prompt-platform-option:focus-visible {
  background: color-mix(in srgb, var(--brand-gold) 12%, var(--muted));
  color: var(--foreground);
  outline: none;
  transform: translateX(0.12rem);
}
.prompt-platform-option > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prompt-platform-option.is-selected {
  background: color-mix(in srgb, var(--brand-gold) 18%, var(--card));
  color: color-mix(in srgb, var(--brand-gold) 78%, var(--foreground));
  font-weight: 700;
}
.prompt-platform-option-mark {
  color: var(--brand-gold);
  font-size: 0.8rem;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 140ms ease, transform 140ms ease;
}
.prompt-platform-option.is-selected .prompt-platform-option-mark {
  opacity: 1;
  transform: scale(1);
}
.prompt-view-platform-native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.prompt-view-platform-native select {
  width: 1px;
  height: 1px;
}
.prompt-platform-reveal:hover .prompt-view-platform,
.prompt-platform-reveal:focus-within .prompt-view-platform,
.prompt-platform-reveal[open] .prompt-view-platform {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
@media (max-width: 639px) {
  .prompt-detail-cover-actions {
    max-width: 100%;
    right: 0.75rem;
    bottom: 0.75rem;
  }
  .prompt-detail-cover-platform,
  .prompt-detail-cover-copy {
    top: 0.75rem;
  }
  .prompt-detail-cover-platform {
    left: 0.75rem;
    width: auto;
  }
  .prompt-detail-cover-platform .prompt-platform-trigger {
    justify-content: flex-start;
    width: auto;
  }
  .prompt-detail-cover-copy {
    right: 0.75rem;
  }
  .prompt-detail-cover-action {
    padding: 0 0.55rem;
    font-size: 0.65rem;
  }
  .prompt-studio-card > .prompt-view {
    padding: 0.85rem;
  }
  .prompt-view-toolbar {
    align-items: stretch;
  }
  .prompt-view-toolbar-main {
    flex: 0 0 auto;
  }
  .prompt-platform-reveal {
    width: 100%;
  }
  .prompt-platform-trigger {
    justify-content: center;
    width: 100%;
  }
  .prompt-platform-reveal .prompt-view-platform {
    right: 0;
    left: 0;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .prompt-detail-cover-img,
  .prompt-detail-cover-overlay,
  .prompt-detail-cover-action,
  .prompt-platform-trigger,
  .prompt-platform-chevron,
  .prompt-platform-reveal .prompt-view-platform,
  .prompt-platform-option,
  .prompt-platform-option-mark {
    transition: none;
  }
  .prompt-detail-cover:hover .prompt-detail-cover-img {
    transform: none;
  }
}
.prompt-view-body {
  min-height: 12rem;
  max-height: min(70vh, 40rem);
  overflow: auto;
  margin: 0;
  padding: 1.1rem 0;
  border-top: 1px solid color-mix(in srgb, var(--brand-gold) 18%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--foreground);
  box-shadow: none;
}
.prompt-view-toast {
  min-height: 1rem;
}
.prompt-notes {
  margin-top: 0.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.prompt-notes-title {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}
.prompt-notes .prose img {
  cursor: zoom-in;
  border-radius: 0.65rem;
}
.prompt-slots-details {
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 0.85rem;
  padding: 0.65rem 0.85rem;
  background: color-mix(in srgb, var(--muted) 18%, var(--card));
}
.prompt-slots-summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
  list-style: none;
  user-select: none;
}
.prompt-slots-summary::-webkit-details-marker {
  display: none;
}
.prompt-slots-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 120ms ease;
}
details[open] > .prompt-slots-summary::before {
  transform: rotate(90deg);
}
.prompt-compose-cover-stage {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 640px) {
  .prompt-compose-cover-stage {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}
.prompt-compose-cover-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  border: 2px dashed color-mix(in srgb, var(--border) 90%, var(--primary));
  background: color-mix(in srgb, var(--muted) 30%, var(--card));
  overflow: hidden;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.prompt-compose-cover-frame:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--muted) 45%, var(--card));
}
.prompt-compose-cover-frame--drag {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
  border-style: dashed;
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}
.prompt-compose-cover-frame--busy {
  pointer-events: none;
  opacity: 0.72;
}
.prompt-compose-cover-frame--filled {
  border-style: solid;
  cursor: zoom-in;
}
.prompt-compose-cover-frame--filled.prompt-compose-cover-frame--drag {
  border-style: dashed;
  cursor: copy;
}
.prompt-compose-cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.prompt-compose-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prompt-compose-cover-feedback {
  position: absolute;
  right: 0.85rem;
  bottom: 0.75rem;
  left: 0.85rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-height: 1.5rem;
  pointer-events: none;
}
.prompt-compose-cover-clear,
.prompt-compose-cover-status {
  padding: 0.25rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(8px);
}
.prompt-compose-cover-clear {
  pointer-events: auto;
  cursor: pointer;
}
.prompt-compose-slots {
  margin-top: 0.25rem;
}
.prompt-zoomable {
  cursor: zoom-in;
}
.prompt-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgb(0 0 0 / 0.82);
}
.prompt-lightbox[hidden] {
  display: none !important;
}
.prompt-lightbox-figure {
  margin: 0;
  max-width: min(96vw, 72rem);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}
.prompt-lightbox-img {
  max-width: 100%;
  max-height: calc(92vh - 2rem);
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 24px 64px -24px rgb(0 0 0 / 0.65);
}
.prompt-lightbox-caption {
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.75);
  text-align: center;
}
.prompt-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.prompt-lightbox-close:hover {
  background: rgb(255 255 255 / 0.22);
}
body.prompt-lightbox-open {
  overflow: hidden;
}
.prompt-studio-preview {
  min-height: 16rem;
  max-height: min(70vh, 36rem);
  overflow: auto;
  margin: 0;
  padding: 1rem;
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--muted) 55%, var(--card));
}
.prompt-studio-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
.prompt-studio-input {
  width: 100%;
  border: 1px solid var(--input, var(--border));
  border-radius: 0.65rem;
  background: var(--background, var(--card));
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}