/* ═══════════════════════════════════════════════════════
   THE 42 POST — Organic Editorial
   Warm paper · Benson watercolor accents · Handcraft feel
   ═══════════════════════════════════════════════════════ */

:root {
  --ink: #111111;
  --ink-light: #444444;
  --ink-muted: #777777;
  --ink-faint: #aaaaaa;
  --paper: #ffffff;
  --paper-warm: #f8f8f8;
  --paper-card: #fafafa;
  --rule: #dddddd;
  --rule-dark: #111111;
  --rule-light: #eeeeee;
  /* Benson Watercolor Palette — hand-painted organic feel */
  --coral:     #d4726a;   /* warm salmon — heart, safety */
  --teal:      #3a9a8c;   /* emerald green — growth, nature */
  --marigold:  #d4a43c;   /* golden honey — ideas, warmth */
  --periwinkle:#6a8eba;   /* soft blue — depth, thought */
  --lavender:  #9a7aa6;   /* dusty mauve — craft, beauty */
  /* Backwards compat aliases */
  --cinnabar: var(--coral);
  --cobalt: var(--periwinkle);
  --moss: var(--teal);
  --ochre: var(--marigold);
  --accent: var(--coral);
  --accent-green: #6b9d5c;
  --accent-green-light: #8ab57a;
  /* Button color system */
  --btn-dark: #2a2520;
  --btn-dark-hover: #1a1510;
  --btn-charcoal: #3c3028;
  --btn-charcoal-hover: #2c2218;
  /* Spacing scale */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;

  /* Mobile-first responsive variables */
  --mobile-padding: 12px;
  --mobile-gap: 8px;
  --touch-target-min: 48px;

  /* Font size scale (Mobile-first) */
  --font-xs: 10px;      /* Auxiliary text */
  --font-sm: 12px;      /* Small text */
  --font-base: 14px;    /* Body text */
  --font-lg: 16px;      /* Large text */
  --font-xl: 20px;      /* Section heading */
  --font-2xl: 28px;     /* Masthead on mobile */
  --font-3xl: 36px;     /* Large masthead */

  /* Typography — DIE ZEIT editorial serif */
  --font-head: 'Playfair Display', 'Georgia', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  --font-serif: 'Playfair Display', 'Georgia', serif;
  --font-serif-cn: 'Noto Serif SC', 'STSong', serif;
  --font-serif-cn-heading: 'Noto Serif SC', 'STSong', serif;
  --font-sans-cn: 'Noto Sans SC', -apple-system, 'Helvetica Neue', sans-serif;
  --font-sans: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --gap: 20px;
  --section-pad: 40px 0;
  --max-w: min(1520px, calc(100vw - 48px));

  /* ─── Design-system tokens (added in the beta polish pass) ───
     Consolidates values that were previously hardcoded dozens of times
     each, so cards/buttons/inputs can share one consistent vocabulary. */

  /* Warm-neutral palette — the taupe/sand editorial tones that were
     hardcoded across the site (#8a7a6e/#8a7c6e/#8a7a5e ×51 combined,
     #d4c8bc ×27, etc). The three near-identical ink values were copy-paste
     drift, not intentional variants (all plain text color, one hex digit
     apart) — consolidated onto this single token everywhere they appeared. */
  --warm-ink: #8a7a6e;        /* warm body/label text */
  --warm-line: #d4c8bc;       /* warm hairline / border */
  --warm-line-soft: #e4e0d9;  /* softer warm border */
  --warm-bg: #f8f4ee;         /* warm surface / panel fill */
  --warm-bg-alt: #f0e8d8;     /* alternate warm fill */
  --warm-bg-tint: #e8e0d4;    /* warm tint block */

  /* Extended spacing scale (was xs–lg only) */
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;

  /* Border-radius scale — replaces the 20+ arbitrary values in the wild.
     Values chosen to match the dominant existing radii (tags ~4, buttons ~8,
     cards ~12, modals ~16) so adopting them barely shifts the look while
     collapsing everything onto one source of truth. */
  --radius-xs: 4px;    /* tags, chips */
  --radius-sm: 8px;    /* buttons, inputs */
  --radius-md: 12px;   /* cards, panels */
  --radius-lg: 16px;   /* modals, large surfaces */
  --radius-pill: 999px;/* pills, fully-rounded */

  /* Elevation / shadow scale — replaces 83 ad-hoc box-shadows */
  --shadow-sm: 0 1px 2px rgba(26, 22, 18, 0.06), 0 1px 3px rgba(26, 22, 18, 0.08);
  --shadow-md: 0 2px 8px rgba(26, 22, 18, 0.08), 0 4px 16px rgba(26, 22, 18, 0.06);
  --shadow-lg: 0 8px 24px rgba(26, 22, 18, 0.12), 0 16px 48px rgba(26, 22, 18, 0.10);
  --shadow-focus: 0 0 0 3px rgba(212, 114, 106, 0.25); /* coral focus ring */

  /* Motion — one set of easings/durations for consistent feel */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tablet responsive adjustments (480px+) */
@media (min-width: 480px) {
  :root {
    --mobile-padding: 24px;
    --mobile-gap: 12px;
    --font-xl: 24px;      /* Larger section heading on tablet */
  }
}

/* Desktop responsive adjustments (1024px+) */
@media (min-width: 1024px) {
  :root {
    --mobile-padding: 40px;
    --mobile-gap: 20px;
    --font-xl: 26px;      /* Standard section heading on desktop */
  }
}

/* ════════════════════════════════════════════════════════
   Tablet Responsive (480px+): Element-level optimizations
   ════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  /* Headers and buttons remain accessible but can reduce slightly on tablet */
  .btn-connect, .btn-agent-view, .btn-settings, .btn-about, .btn-howto, .btn-lang {
    font-size: 11px;
    padding: 8px 12px;
  }

  /* Keep 16px on tablet — iOS zooms on any input < 16px */

  /* Grid layouts expand to 2 columns on tablet */
  .vibe-grid { grid-template-columns: repeat(2, 1fr); }
  .probe-cards { grid-template-columns: repeat(2, 1fr); }
  .about-modules { grid-template-columns: repeat(2, 1fr); }
  .howto-paths { grid-template-columns: repeat(2, 1fr); }

  /* Task tags can reduce padding on tablet */
  .task-tag { padding: 4px 8px; }

  /* Section heading spacing improvements */
  .section-heading { margin-bottom: 12px; }
}

/* ════════════════════════════════════════════════════════
   Desktop Responsive (1024px+): Full layout optimizations
   ════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Desktop grids are 3+ columns */
  .vibe-grid { grid-template-columns: repeat(3, 1fr); }
  .probe-cards { grid-template-columns: repeat(3, 1fr); }
  .about-modules { grid-template-columns: repeat(3, 1fr); }
  .howto-paths { grid-template-columns: repeat(3, 1fr); }

  /* Skill detail modal back to 2-column on desktop */
  .skill-detail-body { grid-template-columns: 60% 40%; }
  .skill-detail-right { border-left: 1px solid #f0e8d8; padding-left: 32px; border-top: none; }

  /* Creative triptych (3-column) */
  .creative-triptych { grid-template-columns: repeat(3, 1fr); }

  /* Increase font sizes slightly on desktop for better readability on larger screens */
  .forge-input, .minimal-input { font-size: 14px; }

  /* Increase chat bubble padding on desktop for wider input */
  .chat-bubble-wrap { padding: 36px 44px; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: #f8f4ee;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: #f2e2c0; }

/* ═══ CHINESE TYPOGRAPHY — Noto Serif SC for all Chinese (matches Playground) ═══ */
.manifesto-line,
.section-heading,
.inspiration-question,
.inspiration-context,
.chat-bubble-invite,
.the-textarea,
.ethics-msg,
.voice-quote,
.voices-header-text,
.masthead-subtitle,
.btn-enter-forge,
.creator-name-input {
  font-family: var(--font-serif-cn), var(--font-serif);
}

/* Use Playfair Display for input by default (English), falling back to
   Noto Serif SC for any CJK glyphs typed while in English mode -- Playfair
   has no CJK coverage, so without this fallback the browser silently picks
   its own default CJK font instead of matching Chinese-mode rendering. */
.chat-bubble-input {
  font-family: var(--font-serif), var(--font-serif-cn) !important;
}

/* Use Noto Serif SC for input in Chinese mode */
body[data-lang="cn"] .chat-bubble-input {
  font-family: var(--font-serif-cn) !important;
}

/* When in Chinese mode, enforce Noto Serif SC globally */
body[data-lang="cn"] {
  font-family: var(--font-serif-cn), var(--font-serif);
}

body[data-lang="cn"] .voices-header-text {
  font-family: var(--font-serif-cn);
  font-size: var(--font-sm);
  letter-spacing: 1px;
  text-transform: none;
  color: var(--ink-muted);
}

/* ═══ GLOBAL HEADER ═══ */
.global-header {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}


.header-rule-top {
  display: none; /* Hidden to match status bar */
  height: 3px;
  background: linear-gradient(90deg, var(--coral), var(--periwinkle), var(--teal), var(--marigold), var(--lavender));
}

.header-rule-double {
  height: 1px;
  background: var(--ink);
  margin: 6px 0;
  box-shadow: 0 3px 0 0 var(--ink);
  margin-bottom: 10px;
}

.header-rule {
  height: 1px;
  background: var(--rule);
}

/* ═══ MASTHEAD ═══ */
.masthead {
  text-align: center;
  padding: 24px 0 16px;
  position: relative;
}

.masthead-crest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.masthead-crest-icon {
  width: 56px;
  height: 66px;
  flex-shrink: 0;
  margin-top: -4px;
}

.masthead-title {
  font-family: var(--font-head);
  font-size: clamp(36px, 6.5vw, 56px);
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.masthead-sub-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.masthead-vol {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.masthead-subtitle {
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  color: var(--ink-light);
  text-align: center;
  line-height: 1.5;
  font-style: normal;
}

.masthead-protocol {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--accent-green);
  text-transform: uppercase;
}

/* ═══ HEADER ACTIONS ═══ */
.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 0;
  gap: 8px;
}

.header-spacer { flex: 1; }

.header-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
  /* Guaranteed one row at every width, not just the two breakpoints that
     happened to get an explicit nowrap rule. If something ever makes the
     3 buttons genuinely too wide for the viewport, scroll horizontally -
     never drop a button onto a second, centered row. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.header-buttons::-webkit-scrollbar { display: none; }

.btn-connect, .btn-agent-view, .btn-settings, .btn-about, .btn-howto, .btn-lang {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--font-sm);
  letter-spacing: 1.5px;
  padding: 8px 14px;
  min-height: 44px;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
  text-transform: uppercase;
}

.btn-settings {
  padding: 5px 8px;
  font-size: 12px;
}

.btn-lang {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  min-height: 44px;
  min-width: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-connect:hover, .btn-agent-view:hover, .btn-settings:hover,
.btn-about:hover, .btn-howto:hover, .btn-lang:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.btn-connect.connected {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

/* ═══ SECTIONS ═══ */
.section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-pad);
  padding-left: 24px;
  padding-right: 24px;
}

.section-heading {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  /* Balances line lengths instead of letting the last word/character wrap
     alone onto its own line (e.g. Chinese "...AI 学会什么？" dropping just
     "么？" to a lonely second line). No-op in browsers that don't support
     it yet -- falls back to normal wrapping, never worse than before. */
  text-wrap: balance;
}

/* Explicit break point for the Chinese headline ("...AI<br>学会什么？"),
   set in i18n.js. text-wrap:balance above is width-based only -- it
   doesn't know Chinese word boundaries, and on its own it balanced this
   specific string by splitting "希望" across two lines, which reads far
   worse than the single-character orphan it was meant to fix. A real
   break at the actual clause boundary avoids that regardless of what
   balance would have chosen. Hidden by default: at wide viewports this
   heading normally fits on one line, and forcing a break there would be
   the same mistake in reverse. */
.section-heading-break {
  display: none;
}
@media (max-width: 768px) {
  .section-heading-break {
    display: inline;
  }
}

.section-rule {
  height: 1px;
  background: var(--rule);
  margin-bottom: var(--gap);
}

.section-rule-full {
  max-width: var(--max-w);
  margin: 0 auto;
  height: 1px;
  background: var(--rule);
}

/* ═══ SECTION I: RESONANCE CHECK ═══ */
.section-alignment {
  padding-top: 0 !important;
}

/* Task tags (used in inspiration card and elsewhere) */
.task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.task-tag {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--teal) 20%, #e8e0d8);
  color: var(--teal);
}

.the-textarea {
  width: 100%;
  flex: 1;
  min-height: 140px;
  background: #fffcf8;
  border: 1px solid #e0d8d0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.8;
  padding: 16px;
  resize: none;
  text-align: left;
  transition: border-color 0.3s;
}

.the-textarea::placeholder {
  color: var(--ink-faint);
  font-style: italic;
  opacity: 0.6;
  font-size: var(--font-sm);
}

.the-textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.btn-evaluate {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-evaluate:hover {
  background: transparent;
  color: var(--ink);
}

.input-hint {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--ink-faint);
  letter-spacing: 0.5px;
}

/* ═══ MANIFESTO STRIP — single-line newspaper tagline ═══ */
.manifesto-strip {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px 24px;
  border-bottom: 1px solid var(--rule);
  display: none;
}

.manifesto-inner {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.manifesto-line {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
  font-style: normal;
}

.manifesto-line em {
  font-weight: 700;
  color: var(--ink);
  font-style: normal;
}

.manifesto-line:first-child::after,
.manifesto-line:nth-child(2)::after {
  content: '|';
  margin-left: 20px;
  color: var(--rule);
}

.manifesto-line:nth-child(2) {
  display: none;
}

.manifesto-values {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  color: var(--ink-muted);
}

.manifesto-values .mv {
  font-weight: 600;
}

.manifesto-values .mv:nth-child(1) { color: var(--coral); }
.manifesto-values .mv:nth-child(2) { color: var(--periwinkle); }
.manifesto-values .mv:nth-child(3) { color: var(--teal); }
.manifesto-values .mv:nth-child(4) { color: var(--marigold); }

/* ═══ NAV SEPARATOR ═══ */
.nav-separator {
  color: var(--ink-faint);
  font-size: 14px;
  user-select: none;
}

/* ═══ SECTION BREATH — visual white space ═══ */
.section-breath {
  height: 32px;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  border-bottom: 1px solid var(--rule);
}

/* ═══ SECTION I: BELIEF INSPIRATION ═══ */
.belief-inspiration {
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--rule);
}

.inspiration-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.inspiration-label {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.inspiration-card {
  background: color-mix(in srgb, var(--teal) 4%, #fffcf8);
  border-left: 3px solid var(--teal);
  padding: 20px 24px;
}

.inspiration-question {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 8px;
}

.inspiration-context {
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  color: var(--ink-light);
  line-height: 1.6;
}

/* ═══ SECTION I: BELIEF INPUT ═══ */
.belief-input {
  padding: 20px 0 24px;
}

.creator-name-input {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 12px;
  padding: 8px 12px;
  width: 180px;
  transition: border-color 0.3s;
}

.creator-name-input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}

.creator-name-input:focus {
  outline: none;
  border-color: var(--ink);
}

.input-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.input-actions-left { flex-shrink: 0; }

.input-actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ═══ TASTE CARD RESULT ═══ */
.taste-card-result {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.6s ease, max-height 0.6s ease;
  padding: 0;
}

.taste-card-result.visible {
  opacity: 1;
  max-height: 500px;
  overflow: visible;
  padding: 0 0 24px;
}

.taste-card {
  border: 1px solid var(--teal);
  border-left: 3px solid var(--teal);
  background: color-mix(in srgb, var(--teal) 4%, #fffcf8);
  padding: 24px;
}

.taste-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.taste-card-label {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--teal);
  text-transform: uppercase;
  font-weight: 700;
}

.taste-card-id {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--ink-faint);
  letter-spacing: 1px;
}

.taste-card-text {
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 14px;
  padding: 0;
  border: none;
}

.taste-card-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.taste-tag {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--teal) 30%, #e8e0d8);
  color: var(--teal);
}

.taste-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--teal) 15%, #e8e0d8);
}

.taste-card-author {
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-muted);
}

.taste-card-license {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--ink-faint);
  letter-spacing: 1px;
}

.taste-card-actions {
  margin-top: 14px;
  text-align: center;
}

.btn-go-deeper {
  background: transparent;
  border: 1px solid var(--teal);
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
  text-transform: uppercase;
}

.btn-go-deeper:hover {
  background: var(--teal);
  color: #fff;
}

/* ═══ SECTION II: SKILLS FEED ═══ */
.skills-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 24px;
}

.feed-card {
  background: var(--paper-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.2s;
}

.feed-card:hover { background: var(--paper-warm); }

.feed-card-taste { border-top: 2px solid var(--teal); }

.feed-card-type {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.feed-card-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.feed-card-desc {
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--rule-light);
  margin-top: auto;
}

.feed-card-author {
  font-family: var(--font-serif);
  font-size: var(--font-xs);
  font-style: italic;
  color: var(--ink-muted);
}

.feed-card-license {
  font-family: var(--font-mono);
  font-size: 7.5px;
  color: var(--ink-faint);
  letter-spacing: 0.5px;
}

.feed-card-stars {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: #d4a017;
}

/* Knight Score Panel */
.knight-score-display {
  border: 1px solid var(--rule);
  background: var(--paper-card);
  padding: 20px;
}

.score-awaiting {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.score-header {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 4px;
}

.score-standing {
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 14px;
}

.score-formula {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1px;
  color: var(--ink-muted);
  margin-bottom: 14px;
  padding: 4px 8px;
  border: 1px dashed var(--rule);
  display: inline-block;
}

.score-dimensions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.dim {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dim-label {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--ink-muted);
  width: 36px;
  letter-spacing: 1px;
}

.dim-bar-track {
  flex: 1;
  height: 4px;
  background: var(--rule-light);
}

.dim-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ink-muted), var(--ink));
  transition: width 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.dim-val {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--ink);
  width: 28px;
  text-align: right;
  font-weight: 700;
}

.sand-canvas {
  width: 100%;
  height: 80px;
  display: block;
  margin: 10px 0;
}

.btn-replay {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  padding: 7px;
  cursor: pointer;
  margin-bottom: 14px;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-replay:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.score-footer {
  border-top: 1px solid var(--rule-light);
  padding-top: 12px;
}

.score-footer p {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
  margin-bottom: 8px;
}

.btn-deploy-forge {
  width: 100%;
  background: var(--teal);
  border: none;
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  padding: 11px 16px;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
  text-transform: uppercase;
}

.btn-deploy-forge:hover { background: color-mix(in srgb, var(--teal) 85%, #333); }

/* Progressive Reveal — hidden until evaluation */
.score-reveal {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease, max-height 0.6s ease;
}
.score-reveal.revealed {
  opacity: 1;
  max-height: 600px;
  overflow: visible;
}

/* Covenant Lamp */
.covenant-lamp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--rule-light);
  background: var(--paper-warm);
}

.lamp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: background 0.5s;
}

.lamp-dot.pass { background: var(--accent-green); box-shadow: 0 0 6px rgba(45, 122, 58, 0.4); }
.lamp-dot.warn { background: #d4a017; box-shadow: 0 0 6px rgba(212, 160, 23, 0.3); }
.lamp-dot.fail { background: var(--accent); box-shadow: 0 0 6px rgba(192, 57, 43, 0.3); }

.lamp-text {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1px;
  color: var(--ink-muted);
}

/* Why-Log Feedback */
.why-log-feedback {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--rule-light);
  background: var(--paper-warm);
}

.why-log-title {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.why-log-content {
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.8;
  font-style: italic;
}

/* ═══ SECTION II: DAILY KNIGHT HONORS ═══ */
.triptych {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  margin-top: 12px;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.triptych-panel {
  background: var(--paper-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.panel-mirror {
  padding: 0;
  position: relative;
}

.mirror-canvas {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: block;
}

.mirror-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 12px;
  font-family: var(--font-serif);
  font-size: 11px;
  color: var(--ink-light);
  font-style: italic;
  border-top: 1px solid var(--rule-light);
}

.panel-title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 10px;
}

.panel-desc {
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  color: var(--ink-light);
  line-height: 1.8;
}

/* Empathy Tuner */
.tuner-title {
  text-decoration: line-through;
  text-decoration-color: var(--ink-faint);
}

.empathy-tuner {
  margin-top: auto;
  padding-top: 16px;
}

.tuner-track {
  width: 100%;
  height: 4px;
  background: var(--rule-light);
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
  border-radius: 2px;
}

.tuner-fill {
  height: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.tuner-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--ink);
  border-radius: 50%;
  border: 2px solid var(--paper);
  transition: left 0.3s ease;
  box-shadow: 0 0 0 1px var(--ink);
}

.tuner-info {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--ink-muted);
}

/* ═══ SECTION III: AGENT VIBE GRID ═══ */
.vibe-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 8px;
}

.vibe-meta {
  text-align: right;
  flex-shrink: 0;
}

.vibe-meta-line {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  color: var(--ink-muted);
  line-height: 1.8;
  text-transform: uppercase;
}

/* Guild Icon Row */
.guild-icon-row {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
  border: 1px solid var(--rule);
}

.guild-icon-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 4px 10px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
  border-right: 1px solid var(--rule);
  background: var(--paper-card);
}

.guild-icon-item:last-child { border-right: none; }
.guild-icon-item:hover { background: var(--paper-warm); }

.guild-icon-item svg {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
  transition: color 0.25s;
}

.guild-icon-item:nth-child(1) svg,
.guild-icon-item:nth-child(6) svg { color: var(--coral); }
.guild-icon-item:nth-child(2) svg,
.guild-icon-item:nth-child(7) svg { color: var(--periwinkle); }
.guild-icon-item:nth-child(3) svg,
.guild-icon-item:nth-child(8) svg { color: var(--teal); }
.guild-icon-item:nth-child(4) svg,
.guild-icon-item:nth-child(9) svg { color: var(--marigold); }
.guild-icon-item:nth-child(5) svg,
.guild-icon-item:nth-child(10) svg { color: var(--lavender); }

.guild-icon-label {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1px;
  color: var(--ink-muted);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
}

.vibe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.slot {
  background: var(--paper-card);
  padding: 14px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

.slot:hover { background: var(--paper-warm); }

.slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.slot-number {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--ink);
  letter-spacing: 1px;
  font-weight: 700;
}

.slot-status {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  font-weight: 700;
  padding: 2px 6px;
  border: 1px solid;
  text-transform: uppercase;
}

.slot-status.active {
  color: var(--accent-green);
  border-color: var(--accent-green);
}

.slot-status.open {
  color: var(--ink-faint);
  border-color: var(--rule);
}

.slot-title {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.4;
}

.slot-desc {
  font-size: var(--font-xs);
  color: var(--ink-light);
  line-height: 1.6;
  flex: 1;
  /* Limit to 2 lines for visual comfort */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3.2em;
  cursor: help;
  transition: color 0.2s;
}

.slot-desc:hover {
  color: var(--ink);
}

.slot-license {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--rule-light, #e0dcd4);
}

.license-author {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-xs);
  color: var(--ink-muted);
}

.license-badge {
  font-family: var(--font-mono);
  font-size: 7.5px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.slot-agent {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--ink-muted);
  letter-spacing: 1px;
  margin-top: 6px;
}

/* Deploy Familiar Slot */
.slot-deploy {
  background: var(--paper-warm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.slot-deploy .slot-deploy-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 4px;
}

.slot-deploy .slot-deploy-sub {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--ink-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.slot-deploy:hover {
  background: var(--rule-light);
}

/* Starlight */
.slot-starlight {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.starlight-btn {
  background: none;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  transition: color 0.3s, transform 0.2s;
}

.starlight-btn:hover { color: #d4a017; transform: scale(1.2); }
.starlight-btn.lit { color: #d4a017; }

.starlight-count {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--ink-muted);
  letter-spacing: 1px;
}

/* ═══ VOICE OF TODAY TICKER ═══ */
/* ═══ SECTION I: HEADLINE HERO — Newspaper Chat Input ═══ */
.section-headline {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #f8f4ee;
}

.headline-hero {
  padding: 64px 0 40px;
}

/* Upgrade section heading for AI-era feel */
.section-headline .section-heading {
  font-size: 34px;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  text-align: center;
}

.section-headline .section-rule {
  display: none;
}

.headline-welcome {
  text-align: center;
  margin-bottom: 48px;
}

.headline-title {
  font-family: var(--font-head);
  font-size: clamp(36px, 6.5vw, 56px);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}

.headline-sub {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink-light);
  line-height: 1.75;
  max-width: 600px;
  margin: 0 auto;
}

/* COMMUNITY SECTION — Simple List Style */
.community-section-wrap {
  margin: 40px auto 32px;
  max-width: var(--max-w);
}

/* Elegant Chat Bubble Input */
.chat-bubble-section {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Gemini-style frame: a watercolour light travels along the border line.
   Same five hues as the Playground top bar (coral→periwinkle→teal→
   marigold→lavender). The border itself is painted by a conic gradient
   on the border-box layer; --sheet-angle rotates so the coloured
   segment slowly walks around the frame. */
@property --sheet-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.chat-bubble-wrap {
  width: 100%;
  max-width: var(--max-w);
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, #ffffff 0%, #fcfbf8 100%) padding-box,
    conic-gradient(from var(--sheet-angle),
      #e4e0d9 0deg,
      #e4e0d9 200deg,
      rgba(212, 114, 106, 0.9) 245deg,   /* coral */
      rgba(106, 142, 186, 0.9) 270deg,   /* periwinkle */
      rgba(58, 154, 140, 0.95) 295deg,   /* teal */
      rgba(212, 164, 60, 0.9) 320deg,    /* marigold */
      rgba(154, 122, 166, 0.85) 340deg,  /* lavender */
      #e4e0d9 360deg) border-box;
  border-radius: 24px;
  padding: 36px 44px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 360px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.02),
    0 8px 40px rgba(0, 0, 0, 0.04),
    0 0 25px rgba(212, 114, 106, 0.06),
    0 0 50px rgba(58, 154, 140, 0.04),
    0 0 35px rgba(106, 142, 186, 0.05);
}

@keyframes sheetBorderFlow {
  to { --sheet-angle: 360deg; }
}

/* Writing or focused: the light stops walking and holds steady */
.chat-bubble-wrap:focus-within,
.chat-bubble-wrap.has-content {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .chat-bubble-wrap { animation: none; }
}

/* State: has content being edited — frame holds its colours steady */
.chat-bubble-wrap.is-focused {
  background:
    linear-gradient(180deg, #ffffff 0%, #fdfcfa 100%) padding-box,
    conic-gradient(from 250deg,
      #e4e0d9 0deg,
      #e4e0d9 200deg,
      rgba(212, 114, 106, 0.9) 245deg,
      rgba(106, 142, 186, 0.9) 270deg,
      rgba(58, 154, 140, 0.95) 295deg,
      rgba(212, 164, 60, 0.9) 320deg,
      rgba(154, 122, 166, 0.85) 340deg,
      #e4e0d9 360deg) border-box;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.03),
    0 12px 48px rgba(0, 0, 0, 0.06),
    0 0 40px rgba(212, 114, 106, 0.15),
    0 0 70px rgba(212, 114, 106, 0.12),
    0 0 50px rgba(106, 142, 186, 0.08);
}

/* State: has user content */
.chat-bubble-wrap.has-content .chat-bubble-input {
  color: var(--ink);
  font-weight: 500;
}

.chat-bubble-wrap:hover {
  border-color: #d0d0d0;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.03),
    0 12px 48px rgba(0, 0, 0, 0.06),
    0 0 40px rgba(212, 114, 106, 0.1),
    0 0 70px rgba(58, 154, 140, 0.07),
    0 0 50px rgba(106, 142, 186, 0.08);
  cursor: text;  /* 现代对话框交互：悬停显示文本光标 */
  transform: translateY(-2px);
}

.chat-bubble-wrap:focus-within {
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.06),
    0 16px 56px rgba(0, 0, 0, 0.08),
    0 0 50px rgba(212, 114, 106, 0.12),
    0 0 80px rgba(58, 154, 140, 0.1),
    0 0 60px rgba(106, 142, 186, 0.12);
  /* keep the dual-layer paint so the gradient frame survives focus */
  background:
    linear-gradient(180deg, #ffffff 0%, #faf8f5 100%) padding-box,
    conic-gradient(from 250deg,
      #e4e0d9 0deg,
      #e4e0d9 200deg,
      rgba(212, 114, 106, 0.9) 245deg,
      rgba(106, 142, 186, 0.9) 270deg,
      rgba(58, 154, 140, 0.95) 295deg,
      rgba(212, 164, 60, 0.9) 320deg,
      rgba(154, 122, 166, 0.85) 340deg,
      #e4e0d9 360deg) border-box;
}

/* Ghost copy overlays the writing area — absolute, so the textarea and
   cursor start at the TOP-LEFT of the sheet (it no longer pushes the
   input down to the middle). padding:inherit keeps it aligned with the
   wrap's content box at every breakpoint. */
.chat-bubble-placeholder {
  position: absolute;
  inset: 0;
  padding: inherit;
  pointer-events: none;
  transition: opacity 0.25s ease;
  opacity: 1;
  overflow: hidden;
}
/* first ghost line sits exactly where the textarea's first line starts */
.chat-bubble-placeholder > :first-child { margin-top: 12px; }

.chat-bubble-placeholder.hidden {
  opacity: 0;
  visibility: hidden;
}

/* CSS-only fallback: hide the ghost whenever the textarea has ANY
   content, even when the input event never fired (iOS dictation,
   paste via menu, private-mode quirks). Needs placeholder=" " on the
   textarea for :placeholder-shown to be meaningful. */
.chat-bubble-wrap:has(.chat-bubble-input:not(:placeholder-shown)) .chat-bubble-placeholder {
  opacity: 0;
  visibility: hidden;
}

/* The e.g. demonstration line — part of the ghost, fainter */
.chat-bubble-example {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-faint);
  margin-top: 16px;
  user-select: none;
  white-space: pre-line;
}

/* Quiet character count, bottom-left of the sheet */
.chat-char-count {
  margin-right: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--ink-faint);
  align-self: center;
}
.chat-char-count:empty { display: none; }
/* Same warning color the post-click rejection border already uses
   (var(--coral)) - live version of the same signal, shown while typing
   instead of only after Share is clicked and rejected. */
.chat-char-count.too-short { color: var(--coral); }

/* Shown only on iOS, where there's no Web Speech API for a working mic
   button — points at the system keyboard's own dictation instead. */
.voice-native-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.chat-bubble-intro {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.8;
  margin-bottom: 18px;
}

.chat-bubble-invite {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink-light);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 12px;
  user-select: none;
  /* Placeholder-like behavior */
  cursor: text;
  transition: color 0.3s ease, opacity 0.3s ease;
  padding: 4px -4px;  /* Add subtle padding for click target */
  white-space: pre-line;  /* 渲染 \n 为换行符，支持段落空行 */
}

/* Hover effect for better discoverability */
.chat-bubble-wrap:hover .chat-bubble-placeholder:not(.hidden) .chat-bubble-invite {
  color: var(--ink);
  opacity: 0.85;
}

/* Indicate that placeholder is clickable */
.chat-bubble-wrap:hover .chat-bubble-placeholder:not(.hidden) {
  filter: brightness(1.02);
}

.forge-flow-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--teal);
  text-transform: uppercase;
  margin-top: 8px;
}

.chat-bubble-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 0;
  resize: none;
  /* Letter-sheet behaviour: starts a few lines tall at the TOP of the
     sheet, grows with content (JS autoresize), scrolls past 46vh. */
  min-height: 150px;
  max-height: 46vh;
  overflow-y: auto;
  outline: none;
  transition: color 0.2s ease;
  box-sizing: border-box;
  vertical-align: top;
  align-self: flex-start;
}

.chat-bubble-input::placeholder {
  color: transparent;
}

.chat-bubble-input:focus {
  outline: none;
  color: var(--ink);
}

/* Visual feedback when user is actively typing */
.chat-bubble-input:focus,
.chat-bubble-input:not(:placeholder-shown) {
  color: var(--ink);
  font-weight: 500;
}

.chat-bubble-input:not(:empty) ~ .chat-bubble-placeholder {
  display: none;
}

.forge-mode-selector {
  margin-top: 16px;
  padding: 12px;
  background: rgba(250, 248, 244, 0.8);
  border: 1px solid #e8e0d4;
  border-radius: 2px;
}

.forge-mode-label {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  color: var(--warm-ink);
  margin-bottom: 10px;
  text-transform: uppercase;
  display: block;
}

.forge-mode-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.forge-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  background: white;
  border: 1px solid #d4c8bc;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-serif);
  font-size: 11px;
}

.forge-mode-btn:hover {
  border-color: #b8a89a;
  background: #f8f4ee;
}

.forge-mode-btn.active {
  background: #f2ece2;
  border-color: var(--warm-ink);
  font-weight: 700;
}

.mode-icon {
  font-size: 18px;
}

.mode-name {
  font-weight: 700;
  color: var(--ink);
}

.mode-desc {
  font-size: var(--font-xs);
  color: #b8a89a;
  font-style: italic;
}

.chat-bubble-footer {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
  margin-top: auto;
}

.chat-bubble-name {
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 12px;
  padding: 4px 0;
  flex: 1;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s;
}

.chat-bubble-name:focus {
  outline: none;
}

.chat-bubble-name::placeholder {
  color: var(--ink-faint);
}

/* Share — one green, always: the PROTOCOL: CAMELOT accent green */
.btn-chat-send {
  background: var(--accent-green);
  border: none;
  color: #fff;
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}

.btn-chat-send:hover {
  background: var(--accent-green-light);
  transform: translateY(-2px);
}

/* Empty sheet — same green, just resting */
.btn-chat-send:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}
.btn-chat-send:disabled:hover {
  background: var(--accent-green);
  transform: none;
}

.btn-chat-send.success {
  background: var(--accent-green);
}

.btn-chat-send.success:hover {
  background: var(--accent-green-light);
}

.btn-chat-send:active {
  transform: scale(0.98);
}

/* ═══ VOICE INPUT BUTTONS ═══ */
.btn-voice-input {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn-voice-input:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-voice-input.recording {
  border-color: #e53935;
  color: #e53935;
  background: rgba(229, 57, 53, 0.06);
  animation: voice-pulse 1.2s ease-in-out infinite;
}

.btn-voice-input.recording::after {
  content: attr(data-voice-lang);
  position: absolute;
  top: -7px;
  right: -7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  background: #e53935;
  color: #fff;
  border-radius: 20px;
  padding: 1px 5px;
  pointer-events: none;
  font-family: var(--font-mono, monospace);
}

.btn-voice-input.voice-ready {
  border-color: #43a047;
  color: #43a047;
  background: rgba(67, 160, 71, 0.06);
}

.voice-textarea-wrap {
  position: relative;
  flex: 1 1 0;     /* fill the row — without this the regen box collapsed */
  min-width: 0;
}

.voice-textarea-wrap .minimal-textarea {
  padding-right: 14px;
}

.btn-voice-inline {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  background: var(--bg);
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn-voice-inline:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-voice-inline.recording {
  border-color: #e53935;
  color: #e53935;
  background: rgba(229, 57, 53, 0.06);
  animation: voice-pulse 1.2s ease-in-out infinite;
}

.btn-voice-inline.voice-ready {
  border-color: #43a047;
  color: #43a047;
  background: rgba(67, 160, 71, 0.06);
}

@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(229, 57, 53, 0); }
}

@keyframes voice-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-3px); }
  50%       { transform: translateX(3px); }
  80%       { transform: translateX(-2px); }
}

.btn-voice-input.voice-low-confidence,
.btn-voice-inline.voice-low-confidence {
  animation: voice-shake 0.5s ease;
  border-color: #e53935;
}

/* Community Voices Grid */
.community-voices-list {
  margin-top: 28px;
}

.voices-ticker-wrap {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding-bottom: 8px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
}

.voices-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px;
  width: max-content;
  animation: voicesScroll 45s linear infinite;
  will-change: transform;
}

.voices-ticker-wrap:hover .voices-container {
  animation-play-state: paused;
}

@keyframes voicesScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.voice-item {
  padding: 16px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  flex-shrink: 0;
  min-width: 320px;
  width: 320px;
}


.voice-item:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border-color: #d0d0d0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.voice-quote {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 10px;
}

.voice-attribution {
  font-size: var(--font-xs);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}

.voice-skill-name {
  color: #6b9d5c;
  font-style: italic;
  font-weight: 600;
}

/* Skeptical voice — subtle differentiation to signal authenticity */
.voice-item-skeptical {
  background: #fafafa;
  border-style: dashed;
  border-color: #d4c9b8;
}

.voice-item-skeptical .voice-quote {
  color: var(--ink-light);
}

.voice-tag-skeptical {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: var(--font-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--coral);
  border: 1px solid var(--coral);
  border-radius: 3px;
  font-weight: 500;
  font-style: normal;
}

/* ═══ HEADLINE NAVIGATION ═══ */
/* ═══ COMMUNITY VOICES HEADER ═══ */
.voices-header {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--max-w);
  margin: 48px auto 20px;
  padding: 0 24px;
}

.voices-header-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--rule) 50%, transparent 100%);
}

.voices-header-text {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink-light);
  font-weight: 500;
}

/* When page is in Chinese, use serif font and different sizing */
body[data-lang="cn"] .voices-header-text {
  font-family: var(--font-serif-cn);
  font-size: var(--font-sm);
  letter-spacing: 2px;
  text-transform: none;
  color: var(--ink-muted);
}

/* ═══ ENLARGED CHAT INPUT — AI Era Feel ═══ */
.chat-bubble-input {
  font-size: 18px;
  padding: 24px 0;
  /* tall enough that the ghost copy (7 fixed lines + example) never
     collides with the mic/Share footer at any width */
  min-height: 310px;
  max-height: 400px;
  line-height: 1.65;
}

.chat-bubble-invite {
  font-size: 17px;
  line-height: 1.65;
  padding: 12px 0;
}

/* Share button base styles (avatar context) — same accent green */
.btn-chat-send {
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 8px;
  background: var(--accent-green);
  box-shadow: 0 2px 8px rgba(107, 157, 92, 0.25);
  transition: background 0.25s ease, transform 0.2s ease;
}

.btn-chat-send:hover {
  background: var(--accent-green-light);
  transform: translateY(-2px);
}

.btn-chat-send.success {
  background: var(--accent-green);
  box-shadow: 0 2px 8px rgba(107, 157, 92, 0.2);
}

.btn-chat-send.success:hover {
  background: var(--accent-green-light);
  box-shadow: 0 4px 16px rgba(107, 157, 92, 0.3);
}

.chat-bubble-footer {
  padding-top: 18px;
}

/* CHAT INPUT SECTION */
.headline-input-wrap {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 0;
  max-width: 900px;
  margin: 0 auto;
}

.headline-input-wrap.chat-input-wrap {
  padding: 0;
}

.chat-input-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 24px;
}

.headline-textarea {
  width: 100%;
  min-height: 160px;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 2;
  padding: 32px 36px;
  resize: none;
  letter-spacing: 0.3px;
}

.headline-textarea.chat-textarea {
  min-height: 100px;
  padding: 16px 0;
  margin: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.headline-textarea::placeholder {
  color: var(--ink-faint);
  font-style: italic;
  font-size: 14px;
  opacity: 0.7;
}

.headline-textarea:focus { outline: none; }

.headline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 36px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  gap: 20px;
}

.chat-input-row .creator-name-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  padding: 6px 0;
  margin-bottom: 8px;
  transition: border-color 0.25s;
}

.chat-input-row .creator-name-input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.chat-input-row .creator-name-input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}

.headline-actions .creator-name-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  padding: 6px 0;
  width: 200px;
  transition: border-color 0.25s;
}

.headline-actions .creator-name-input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.headline-actions .creator-name-input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}

.headline-actions-right {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}

.btn-test {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 12px 40px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s, transform 0.3s;
  text-transform: none;
}

.btn-test:hover {
  background: transparent;
  color: var(--ink);
}

.chat-input-row .btn-test {
  align-self: flex-end;
  margin-top: 8px;
}

/* Ethics Result */
.ethics-result {
  width: 100%;
  max-width: var(--max-w);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  background: transparent;
  border: none;
  border-radius: 24px;
  padding: 0;
  display: none;
  box-shadow: none;
}

.ethics-result.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  display: block;
}

.ethics-pass, .ethics-fail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px 36px;
  border: none;
  border-radius: 16px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateY(20px);
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ethics-pass.visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  background: var(--paper);
  border: 1px solid #efefef;
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.1);
}
.ethics-fail.visible { visibility: visible; opacity: 1; transform: translateY(0); background: var(--paper); }

/* Character-limit warning — bottom-right toast notification */
.ethics-result.warning-mode {
  position: fixed !important;
  bottom: 24px;
  right: 24px;
  left: auto;
  top: auto;
  width: auto !important;
  max-width: 380px !important;
  z-index: 9999;
  margin: 0 !important;
}
.ethics-short-text {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  border-radius: 16px !important;
  background: #d4e8ff !important;
  border: 1.5px solid #7db3e8 !important;
  box-shadow: 0 12px 32px rgba(79, 125, 178, 0.16), 0 4px 12px rgba(92, 142, 157, 0.12);
  width: 100%;
  max-width: 100%;
  animation: toast-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(20px) translateY(8px); }
  to { opacity: 1; transform: translateX(0) translateY(0); }
}
.ethics-short-text .ethics-icon {
  font-size: 18px;
  color: #2563eb;
  flex-shrink: 0;
  margin-top: 0;
}
.ethics-short-text .ethics-msg {
  font-size: 14px;
  color: #1e40af;
  line-height: 1.6;
  font-weight: 600;
  font-family: var(--font-serif);
}

.ethics-icon {
  font-size: 40px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.ethics-pass .ethics-icon { color: #4CAF50; }
.ethics-fail .ethics-icon { color: var(--coral); }

.ethics-msg {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  line-height: 1.7;
  text-align: center;
  max-width: 400px;
}

.btn-enter-forge {
  background: #6b9d5c;
  border: 1px solid #6b9d5c;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 12px 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s, transform 0.3s;
  text-transform: none;
  white-space: nowrap;
}

.btn-enter-forge:hover {
  background: #5a8b4d;
  border-color: #5a8b4d;
  transform: translateY(-2px);
}

/* ═══ SECTION II: CREATIVE TRIPTYCH ═══ */
.creative-triptych {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.tri-panel {
  background: var(--paper-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 550px;
}

.tri-panel-label {
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 900;
  color: var(--rule-light);
  position: absolute;
  top: 12px;
  right: 16px;
  line-height: 1;
  pointer-events: none;
}

.tri-panel-image {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.tri-panel-image .tri-image-canvas {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid var(--rule);
}

.tri-panel-image .tri-panel-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
}

.skill-info-panel {
  padding: 20px;
  background: var(--paper);
}

.skill-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.4;
}

.skill-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.skill-author {
  color: var(--ink-light);
}

.skill-author::before {
  content: '✎ ';
  color: var(--teal);
}

.skill-copyright {
  color: var(--ink-muted);
}

.skill-copyright::before {
  content: '© ';
}

.skill-hash {
  color: var(--ink-muted);
  font-family: 'JetBrains Mono', monospace;
  word-break: break-all;
}

.skill-hash::before {
  content: '⚬ ';
  color: var(--coral);
}

.tri-panel-image .tri-task-visual {
  width: 100%;
  height: 180px;
  background: var(--paper-warm);
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.tri-task-title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 10px;
}

.tri-task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

.tri-task-tags .task-tag {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--teal) 20%, #e8e0d8);
  color: var(--teal);
}

.tri-fiction-header, .tri-dialogue-header {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-light);
}

.tri-panel-fiction .tri-fiction-body {
  flex: 1;
}

.tri-panel-fiction .tri-fiction-body p {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--ink);
  line-height: 1.75;
  margin-bottom: 8px;
  text-indent: 1.5em;
}

.tri-panel-fiction .tri-fiction-body p:first-child { text-indent: 0; }

.tri-panel-fiction .tri-fiction-body p em { color: var(--ink-light); }

.tri-panel-dialogue .tri-dialogue-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.tri-dialogue-line {
  padding-left: 10px;
}

.tri-dialogue-line.line-human { border-left: 2px solid var(--periwinkle); }
.tri-dialogue-line.line-agent { border-left: 2px solid var(--teal); }

.tri-dialogue-speaker {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.line-human .tri-dialogue-speaker { color: var(--periwinkle); }
.line-agent .tri-dialogue-speaker { color: var(--teal); }

.tri-dialogue-line p {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.65;
}

.tri-dialogue-line p em { color: var(--ink-light); }

.creative-refresh {
  text-align: center;
  margin-top: 16px;
}

.btn-refresh-creative {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  padding: 7px 20px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
  text-transform: uppercase;
}

.btn-refresh-creative:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ═══ FOOTER — Redesigned with About + How It Works ═══ */
.global-footer {
  max-width: var(--max-w);
  margin: 40px auto 0;
  padding: 0 24px 0;
}

.footer-rule-heavy {
  height: 3px;
  background: var(--ink);
  margin-bottom: 0;
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-top: none;
}

.footer-section {
  background: var(--paper-card);
  padding: 24px;
}

.footer-section-title {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.footer-text {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.8;
  margin-bottom: 6px;
}

.footer-text-cn {
  font-family: var(--font-serif-cn);
  color: var(--ink-muted);
  font-size: 11px;
}

.footer-text-sm {
  font-size: 11px;
  color: var(--ink-muted);
}

.footer-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-step {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.6;
}

.footer-step-num {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  font-weight: 700;
  color: #6b9d5c;
  flex-shrink: 0;
}

.footer-link-btn {
  cursor: pointer;
  transition: color 0.25s;
}

.footer-link-btn:hover {
  color: var(--teal);
}

/* Contact section — warm, quiet, readable */
.footer-link-inline {
  color: var(--ink-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  transition: color 0.25s, border-color 0.25s;
  word-break: break-all;
}

.footer-link-inline:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

.footer-text-muted {
  color: var(--ink-muted);
  font-style: italic;
  opacity: 0.75;
  margin-top: 4px;
}

body[data-lang="cn"] .footer-text-muted {
  font-family: var(--font-serif-cn);
  font-style: normal;
}

/* Social icons row — GitHub / X / Instagram */
.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 14px 0;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--ink-light);
  text-decoration: none;
  transition: color 0.25s ease, transform 0.2s ease;
}
@media (max-width: 768px) {
  .footer-social-icon { width: 44px; height: 44px; }
}

.footer-social-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.footer-social-icon:hover {
  color: var(--teal);
  transform: translateY(-2px);
}

.footer-social-placeholder {
  opacity: 0.3;
  cursor: not-allowed;
}

.footer-social-placeholder:hover {
  color: var(--ink-light);
  transform: none;
  opacity: 0.4;
}

.footer-logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 24px;
  border-top: 1px solid var(--rule);
  margin-top: 0;
}

.footer-logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.footer-logo-the {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.footer-logo-42 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 900;
  color: var(--ink-muted);
}

.footer-logo-text {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.footer-quotes {
  text-align: right;
}

.footer-quotes p {
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-muted);
  line-height: 1.8;
}

.footer-bottom {
  border-top: 1px solid var(--rule);
  padding: 12px 0 24px;
  text-align: center;
  display: none;
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ═══ FORGE MODAL ═══ */
.forge-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(4px);
  /* Use small viewport height so keyboard doesn't cause layout jump */
  height: 100svh;
}

div.forge-overlay.active { opacity: 1 !important; pointer-events: all !important; }

/* ═══ PLAYGROUND OVERLAY ═══ */
.playground-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(4px);
}

.playground-overlay.active {
  opacity: 1 !important;
  pointer-events: all !important;
}

.playground-modal {
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  padding: 36px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  border-radius: 4px;
}

.playground-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.playground-close:hover {
  color: var(--ink);
}

.playground-header {
  text-align: center;
  margin-bottom: 24px;
}

.playground-title {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 700;
}

.playground-subtitle {
  font-size: 14px;
  color: var(--ink-muted);
}

/* Domain Cards Grid */
.playground-domain-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--rule-light);
  border-radius: 2px;
}

.domain-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  background: var(--paper-warm);
  border: 2px solid var(--rule-light);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  gap: 6px;
  text-align: center;
  min-height: 100px;
}

.domain-card:hover {
  border-color: var(--domain-color, var(--ink-muted));
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.domain-card.active {
  background: var(--domain-color, var(--ink));
  border-color: var(--domain-color, var(--ink));
  color: var(--paper);
}

.domain-card.active .domain-icon {
  transform: scale(1.2);
}

.domain-icon {
  font-size: 28px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.domain-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.2;
}

.domain-card.active .domain-label {
  color: var(--paper);
}

.domain-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-light);
  background: var(--rule-light);
  padding: 2px 6px;
  border-radius: 3px;
  min-width: 24px;
  text-align: center;
}

.domain-card.active .domain-count {
  background: rgba(255,255,255,0.2);
  color: var(--paper);
}

/* Tags Filter Bar */
.playground-tags-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  justify-content: center;
  border-top: 1px solid var(--rule-light);
  padding-top: 16px;
}

.playground-tag {
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  white-space: nowrap;
}

.playground-tag:hover {
  border-color: var(--ink-muted);
}

.playground-tag.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Task Display */
.playground-content {
  margin-bottom: 20px;
}

.playground-task {
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--rule-light);
  border-radius: 2px;
  margin-bottom: 20px;
}

.task-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 12px;
  color: var(--ink);
}

.task-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-light);
  margin-bottom: 16px;
}

.task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.task-tag {
  padding: 4px 8px;
  background: var(--rule-light);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--ink-muted);
  text-transform: uppercase;
  border-radius: 2px;
}

.task-domain {
  font-size: 11px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Pick Skills Section */
.pick-skills-section {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--rule-light);
}

.pick-skills-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
  display: block;
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.skill-picker {
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-slot {
  flex: 1;
  min-height: 100px;
  border: 2px dashed var(--rule);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 16px;
  text-align: center;
  background: var(--paper);
}

.skill-slot:hover {
  border-color: var(--ink-muted);
  background: var(--paper-warm);
}

.skill-slot.selected {
  border: 2px solid var(--teal);
  background: rgba(58, 154, 140, 0.05);
}

.slot-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.slot-instruction {
  font-size: var(--font-xs);
  color: var(--ink-faint);
  font-style: italic;
}

.selected-skill-name {
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--teal);
}

/* Playground Actions */
.playground-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  justify-content: center;
}

.btn-action {
  flex: 1;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  border-radius: 3px;
}

.btn-action:hover:not(:disabled) {
  background: var(--ink-light);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.btn-action:disabled {
  background: var(--ink-faint);
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-open-canvas {
  background: var(--ink);
  color: var(--paper);
}

/* Use Skill Panel */
.use-skill-panel {
  margin-top: 20px;
  padding: 20px;
  background: var(--paper-warm);
  border: 1px solid var(--rule-light);
  border-radius: 3px;
  animation: slideDown 0.3s ease;
}

.skill-input {
  width: 100%;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  color: var(--ink);
  border-radius: 2px;
  margin-bottom: 16px;
}

.skill-input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(212, 114, 106, 0.1);
}

/* Share Thought Panel */
.share-thought-panel {
  margin-top: 20px;
  padding: 20px;
  background: var(--paper-warm);
  border: 1px solid var(--rule-light);
  border-radius: 3px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.share-thought-panel label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}

.thought-input {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
  border-radius: 2px;
  margin-bottom: 12px;
}

.thought-input::placeholder {
  color: var(--ink-faint);
}

.thought-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(58, 154, 140, 0.1);
}

.thought-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-submit,
.btn-cancel {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  border-radius: 2px;
  border: none;
}

.btn-submit {
  background: var(--teal);
  color: var(--paper);
}

.btn-submit:hover {
  background: #2a8a7c;
}

.btn-submit:disabled {
  background: var(--ink-faint);
  cursor: not-allowed;
}

.btn-cancel {
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--rule);
}

.btn-cancel:hover {
  background: var(--rule-light);
  color: var(--ink);
}

/* Playground Message */
.playground-message {
  padding: 12px 16px;
  background: var(--teal);
  color: var(--paper);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  border-radius: 3px;
  margin-top: 16px;
  animation: fadeInOut 3s ease;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-10px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ═══ FORGE MODAL — Editorial Magazine Style ═══ */
.forge-modal {
  width: 92%;
  max-width: 620px;
  max-height: 88svh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff;
  border: 1px solid #efefef;
  padding: 32px 36px;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  /* 滚动条美化 */
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}

.forge-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.forge-close:hover {
  color: #666;
  opacity: 1;
}

.forge-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.forge-title {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.6px;
  color: #999;
  text-transform: uppercase;
  font-weight: 500;
}

.forge-subtitle {
  font-family: var(--font-serif-cn);
  font-size: 12px;
  color: #333;
  margin-top: 8px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 1.5;
}

/* Step Progress Indicator — Minimal */
.forge-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  gap: 8px;
}

.forge-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0.3;
  transition: all 0.3s ease;
}

.forge-step.active {
  opacity: 1;
}

.forge-step.completed {
  opacity: 0.5;
}

.step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: #999;
  line-height: 1;
}

.forge-step.active .step-num {
  color: #333;
  font-size: var(--font-sm);
}

.step-label {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1px;
  color: #ccc;
  text-transform: uppercase;
}

.forge-step-line {
  width: 20px;
  height: 1px;
  background: #ddd;
  margin: 0 2px;
}

.forge-page {
  display: none !important;
  animation: fadeInPage 0.5s ease-out;
}

.forge-page.active {
  display: block !important;
}

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

.forge-page-title {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.4px;
  color: #aaa;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f2f2f2;
  text-transform: uppercase;
  font-weight: 500;
}

.forge-desc {
  font-size: 12px;
  color: #777;
  margin-bottom: 12px;
  line-height: 1.6;
}

.forge-desc-cn {
  font-family: var(--font-serif-cn);
  font-size: 12px;
  color: #777;
  margin-bottom: 12px;
  line-height: 1.6;
}

.forge-field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.forge-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1px;
  color: #aaa;
  margin-bottom: 7px;
  font-weight: 500;
  text-transform: uppercase;
}

.forge-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  color: #333;
  font-family: var(--font-serif);
  font-size: 16px;
  padding: 12px 14px;
  min-height: 44px;
  border-radius: 6px;
  transition: all 0.25s ease;
}

.forge-input::placeholder {
  color: #ccc;
}

.forge-input:hover {
  border-color: #ddd;
}

.forge-input:focus {
  outline: none;
  border-color: #333;
  background: #fafafa;
}

.forge-textarea {
  width: 100%;
  min-height: 100px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  color: #333;
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  line-height: 1.6;
  padding: 11px 12px;
  border-radius: 6px;
  resize: vertical;
  transition: all 0.25s ease;
}

.forge-textarea::placeholder {
  color: #ccc;
}

.forge-textarea:hover {
  border-color: #ddd;
}

.forge-textarea:focus {
  outline: none;
  border-color: #333;
  background: #fafafa;
}

.forge-textarea.small {
  min-height: 80px;
}
.forge-textarea:focus { outline: none; border-color: var(--ink-light); }

.forge-mode-badge {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.forge-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.forge-tag {
  font-family: var(--font-serif-cn);
  font-size: 12px;
  padding: 5px 12px;
  border: 1px solid var(--rule);
  color: var(--ink-light);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
}

.forge-tag:hover, .forge-tag.selected {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-warm);
}

.forge-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.forge-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}

/* ═══ Navigation Buttons — Editorial ═══ */
.forge-next, .forge-prev {
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.2px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-transform: uppercase;
  border-radius: 4px;
  font-weight: 600;
}

.forge-next {
  border: 1px solid #333;
  color: #333;
  margin-left: auto;
}

.forge-next:hover {
  background: #333;
  color: white;
}

.forge-prev {
  border: 1px solid #ddd;
  color: #999;
}

.forge-prev:hover {
  border-color: #999;
  color: #666;
}

/* ═══ Publish Button — Black ═══ */
.forge-publish {
  background: #1a1a1a;
  border: none;
  color: white;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.2px;
  padding: 9px 20px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  transition: all 0.25s ease;
  margin-left: auto;
}

.forge-publish:hover {
  background: #000;
}

.forge-publish:active {
  opacity: 0.8;
}

.forge-publish:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.forge-oath {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
}

.forge-oath p {
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-light);
  line-height: 2;
}

.oath-title {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.oath-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.6;
}

.oath-check input[type="checkbox"] {
  accent-color: var(--accent-green);
  margin-top: 3px;
  flex-shrink: 0;
}

/* Creator Rights */
.forge-creator-rights {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
}

.rights-title {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink);
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* Forge Select */
.forge-select {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  padding: 10px 14px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23888' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.forge-select:focus { outline: none; border-color: var(--ink-light); }

.tag-hint {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: var(--font-xs);
}

/* Shadow Extract Button */
.btn-shadow-extract {
  width: 100%;
  background: var(--paper-warm);
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  padding: 8px 16px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
  text-transform: uppercase;
}

.btn-shadow-extract:hover {
  background: var(--accent-green);
  color: #fff;
}

/* Do/Don't inputs */
.do-input, .dont-input {
  margin-bottom: 6px;
}

/* File Upload */
.forge-upload { position: relative; }

.forge-file-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.forge-file-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: 1px dashed var(--rule);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
}

.forge-file-label:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.upload-icon { font-size: 16px; }

.forge-file-name {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--accent-green);
  margin-top: 4px;
  letter-spacing: 1px;
}

/* Dual-Path Selector */
.forge-path-selector { margin-bottom: 24px; }

.forge-path-title {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink);
  margin-bottom: 12px;
  text-align: center;
  text-transform: uppercase;
}

.forge-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.forge-path {
  border: 1px solid var(--rule);
  padding: 20px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
  text-align: center;
}

.forge-path:hover {
  border-color: var(--ink);
  background: var(--paper-warm);
}

.forge-path.selected {
  border-color: var(--accent-green);
  background: rgba(45, 122, 58, 0.04);
}

.forge-domain-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.forge-domain {
  border: 1px solid var(--rule);
  padding: 16px 12px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
}

.forge-domain:hover {
  border-color: var(--ink);
  background: var(--paper-warm);
}

.forge-domain.selected {
  border-color: var(--accent-green);
  background: rgba(45, 122, 58, 0.04);
}

.domain-icon {
  font-size: 24px;
}

.domain-name {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

.path-badge {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 3px;
  color: var(--accent-green);
  font-weight: 700;
  margin-bottom: 6px;
}

.path-name {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 8px;
  font-weight: 600;
}

.path-desc {
  font-size: 11px;
  color: var(--ink-light);
  line-height: 1.6;
  margin-bottom: 4px;
}

.path-desc-cn {
  font-family: var(--font-serif-cn);
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}

.path-time {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: #b8a89a;
  letter-spacing: 0.5px;
  display: block;
  margin-top: 8px;
}

.forge-path-helper {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--warm-ink);
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #f0e8d8;
  font-style: italic;
}

/* Forge Path Notice */
.forge-path-notice {
  padding: 12px;
  border: 1px solid var(--accent-green);
  background: rgba(45, 122, 58, 0.03);
  margin-bottom: 16px;
}

.notice-badge {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--accent-green);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.forge-path-notice p {
  font-size: 11px;
  color: var(--ink-light);
  line-height: 1.6;
}

.forge-path-notice .cn {
  font-family: var(--font-serif-cn);
  color: var(--ink-muted);
}

/* ═══ CONNECT OVERLAY ═══ */
.connect-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 60px 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.connect-overlay.active { opacity: 1; pointer-events: all; }

.connect-panel {
  width: 320px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  padding: 24px;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.connect-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--ink-muted); font-size: 14px; cursor: pointer; }

.connect-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--ink); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); text-transform: uppercase; }

.connect-list { display: flex; flex-direction: column; gap: 6px; }

.connect-agent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--rule-light);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
}

.connect-agent:hover { border-color: var(--ink); background: var(--paper-warm); }
.agent-sigil { color: var(--ink); font-size: 12px; }
.agent-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--ink); flex: 1; }
.agent-status { font-family: var(--font-mono); font-size: 7px; letter-spacing: 2px; color: var(--accent-green); font-weight: 700; text-transform: uppercase; }

/* ═══ ABOUT US / HOW TO PLAY OVERLAYS ═══ */
.about-overlay, .howto-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(4px);
}

.about-overlay.active, .howto-overlay.active { opacity: 1; pointer-events: all; }

.about-panel {
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  padding: 40px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

.howto-panel {
  width: 88%;
  max-width: 480px;
  max-height: 75vh;
  overflow-y: auto;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  padding: 24px 28px 20px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

.about-close, .howto-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 16px;
  cursor: pointer;
}

.about-close:hover, .howto-close:hover { color: var(--ink); }

.about-title {
  font-family: var(--font-head);
  font-size: 28px;
  color: var(--ink);
  margin-bottom: 20px;
}

.howto-title {
  font-family: var(--font-head);
  font-size: 28px;
  color: var(--ink);
  margin-bottom: 20px;
}

.about-section { margin-bottom: 16px; }

.about-text {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.8;
  margin-bottom: 6px;
}

.about-text-cn {
  font-family: var(--font-serif-cn);
  font-size: var(--font-sm);
  color: var(--ink-muted);
  line-height: 1.8;
  margin-bottom: 4px;
}

.about-modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}

.about-module {
  border: 1px solid var(--rule);
  padding: 20px;
}

.about-module h3 {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 8px;
}

.about-module p {
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.7;
}

.about-module .cn {
  font-family: var(--font-serif-cn);
  color: var(--ink-muted);
  margin-top: 4px;
}

.about-provenance {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-light);
}

.about-provenance h3 {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 8px;
}

.about-provenance p {
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.8;
  font-style: italic;
}

/* ═══ HOW TO PLAY ═══ */
.howto-rule {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.howto-rule:last-child { border-bottom: none; }

.howto-rule h3 {
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}

.howto-rule p {
  font-size: 14px;
  color: var(--ink-light);
  line-height: 1.8;
  margin-bottom: 0;
}

.howto-rule .cn {
  font-family: var(--font-serif-cn);
  color: var(--ink-muted);
  font-size: 12px;
}

.howto-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.howto-path {
  border: 1px solid var(--rule);
  padding: 14px;
}

.path-label {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--accent-green);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.skill-package-section {
  margin-top: 32px;
  padding: 28px 32px;
  border-top: 2px solid var(--ink-ghost);
  text-align: left;
  background: #faf8f4;
  border-radius: 4px;
}

.package-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  text-align: center;
}

.package-desc {
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 20px;
  text-align: center;
}

.export-formats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.format-option {
  background: white;
  border: 1px solid var(--ink-ghost);
  padding: 16px;
  border-radius: 4px;
  transition: all 0.25s ease;
}

.format-option:hover {
  border-color: var(--ink-faint);
  box-shadow: 0 4px 12px rgba(44, 36, 32, 0.06);
}

.format-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--ink-ghost);
  padding-bottom: 8px;
}

.format-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.format-subtitle {
  font-size: var(--font-xs);
  color: var(--ink-muted);
  letter-spacing: 0.5px;
  text-align: center;
}

.format-desc {
  font-size: var(--font-xs);
  color: var(--ink-light);
  line-height: 1.5;
  margin-bottom: 12px;
  text-align: center;
}

.btn-export-format {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: white;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.25s;
  text-transform: uppercase;
  border-radius: 2px;
}

.btn-export-format:hover {
  background: transparent;
  color: var(--ink);
}

.btn-export-format.loading {
  opacity: 0.6;
  cursor: wait;
}

.package-note {
  font-size: var(--font-xs);
  color: var(--ink-muted);
  text-align: center;
  padding: 12px;
  background: #f8f4ee;
  border-radius: 2px;
  border-left: 2px solid var(--ink-faint);
}

.btn-download-skill {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  padding: 8px 24px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  text-transform: uppercase;
}

.btn-download-skill:hover {
  background: transparent;
  color: var(--ink);
}

/* ═══ INTUITION PROBE ═══ */
.btn-auto-structure {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  background: linear-gradient(135deg, #f8f4ee 0%, #f0e8d8 100%);
  border: 1px solid #d4a43c;
  cursor: pointer;
  font-weight: 700;
  color: #8a6a2e;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.3s;
}
.btn-auto-structure:hover { background: #f0e8d8; border-color: #b8862a; color: #6a4e1a; }
.btn-auto-structure:disabled { opacity: 0.5; cursor: wait; }

.probe-section {
  margin: 20px 0;
  border: 1px solid #d4c8bc;
  background: #faf8f4;
}

.probe-header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid #e8e0d4;
}
.probe-title {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 3px;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 700;
}
.probe-subtitle {
  font-size: 11px;
  color: #6a5a4e;
  line-height: 1.6;
  font-style: italic;
}
.probe-subtitle-cn {
  font-size: 11px;
  color: var(--warm-ink);
  line-height: 1.6;
}

.probe-scenario {
  padding: 16px 24px;
  background: #f2ece2;
  border-bottom: 1px solid #e8e0d4;
}
.probe-scenario-label {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: #b8a89a;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.probe-scenario-text {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
  font-style: italic;
  min-height: 2.5em;
}

/* Blinking cursor while streaming */
.probe-scenario-text[data-streaming]::after {
  content: '▋';
  display: inline-block;
  animation: blink-cursor 0.7s step-end infinite;
  color: var(--ink-muted);
  font-style: normal;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.probe-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #d4c8bc;
}

.probe-card {
  background: #faf8f4;
  padding: 16px 16px 14px;
  transition: background 0.3s;
  display: flex;
  flex-direction: column;
}
.probe-card.reacted-comfort {
  background: #f6faf0;
  border-left: 3px solid #7ab858;
}
.probe-card.reacted-discomfort {
  background: #fdf5f0;
  border-left: 3px solid #d4726a;
}

.probe-card-badge {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: #3a9a8c;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.probe-card-badge.badge-anti { color: #6a8eba; }
.probe-card-badge.badge-extreme { color: #d4726a; }

.probe-card-label {
  font-size: var(--font-xs);
  color: var(--warm-ink);
  margin-bottom: 10px;
  font-style: italic;
}

.probe-card-text {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.6);
  border-left: 2px solid #d4c8bc;
  flex: 1;
}

.probe-card-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 0;
}

.probe-card {
  cursor: pointer;
  transition: all 0.3s ease;
}
.probe-card:hover {
  background: #f2ece2;
  border-left-color: #b8a89a;
}
.probe-card.selected {
  background: #f8f4ee;
  border-left: 3px solid #3a9a8c;
  box-shadow: inset 0 0 0 1px #d4c8bc;
}

.probe-hint {
  padding: 12px 24px;
  background: #f2ece2;
  border-top: 1px solid #e8e0d4;
  text-align: center;
  font-size: 11px;
  color: var(--warm-ink);
  font-style: italic;
}

.probe-summary {
  padding: 20px 24px;
  background: #f8f0e4;
  border-top: 2px solid #d4a43c;
}
.probe-summary-title {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 3px;
  color: #8a6a2e;
  font-weight: 700;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.probe-summary-body {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.8;
}

.probe-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #f2ece2;
  border-top: 1px solid #e8e0d4;
}
.probe-progress {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1px;
  color: var(--warm-ink);
  font-weight: 600;
}
.probe-hint {
  font-size: var(--font-xs);
  color: #b8a89a;
  font-style: italic;
}

/* ═══ FIVE-LAYER SKILL PREVIEW ═══ */
.skill-preview-section {
  margin: 20px 0;
  border: 1px solid #d4c8bc;
  background: #faf8f4;
}

.skill-preview-header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid #e8e0d4;
  background: linear-gradient(135deg, #f8f4ee 0%, #f0e8d8 100%);
}
.skill-preview-title {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 3px;
  color: var(--ink);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.skill-preview-subtitle {
  font-size: 11px;
  color: #6a5a4e;
  font-style: italic;
}

/* Generation Progress Display */
.skill-generation-section {
  margin: 20px 0;
  border: 1px solid #d4c8bc;
  background: #faf8f4;
}

.generation-header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid #e8e0d4;
  background: linear-gradient(135deg, #f8f4ee 0%, #f0e8d8 100%);
}

.generation-title {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 3px;
  color: var(--ink);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}

.generation-subtitle {
  font-size: 11px;
  color: #6a5a4e;
  font-style: italic;
}

.generation-progress {
  padding: 20px 24px;
  background: #faf8f4;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 12px;
  color: var(--ink);
  border-bottom: 1px solid #f0e8d8;
}

.progress-item:last-child { border-bottom: none; }

.progress-icon {
  font-weight: 700;
  color: #3a9a8c;
  font-size: 14px;
}

.progress-label {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1px;
  color: var(--warm-ink);
}

.generation-note {
  padding: 12px 24px;
  background: #f2ece2;
  border-top: 1px solid #e8e0d4;
  font-size: 11px;
  color: var(--warm-ink);
  text-align: center;
  font-style: italic;
}

.skill-preview-actions {
  display: flex;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid #e8e0d4;
}
.btn-edit-layers {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: 1px solid #d4c8bc;
  color: #6a5a4e;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-edit-layers:hover { border-color: var(--warm-ink); }
.btn-accept-layers {
  flex: 1;
  padding: 10px;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-accept-layers:hover { background: #333; }

@media (max-width: 768px) {
  .probe-cards { grid-template-columns: 1fr; }
  .probe-card-actions { flex-direction: row; }
  .skill-preview-actions { flex-direction: column; }
  .skill-layer-tabs { grid-template-columns: repeat(5, 1fr); }
  .skill-layer-tab { padding: 10px 4px; }
  .skill-layer-tab .tab-name { font-size: 8px; }
}

/* ═══ SKILL DETAIL MODAL — Left/Right Layout ═══ */
.skill-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.25s ease;
}

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

.skill-detail-modal {
  background: white;
  border: 1px solid #d4c8bc;
  width: 90%;
  max-width: 1200px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  position: relative;
  display: flex;
  flex-direction: column;
}

.skill-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 20px;
  color: var(--warm-ink);
  cursor: pointer;
  z-index: 10;
  transition: color 0.2s;
  padding: 4px 8px;
}

.skill-detail-close:hover {
  color: var(--ink);
}

.skill-detail-header {
  padding: 24px 32px 16px;
  border-bottom: 1px solid #e8e0d4;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.skill-detail-number {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #b8a89a;
  letter-spacing: 2px;
  font-weight: 700;
}

.skill-detail-title {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--ink);
  font-weight: 700;
}

.skill-detail-body {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 32px;
  padding: 32px;
  flex: 1;
  overflow-y: auto;
}

.skill-detail-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.skill-detail-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-left: 1px solid #f0e8d8;
  padding-left: 32px;
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-heading {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--warm-ink);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.detail-description {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.8;
}

.detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-list li {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
}

.detail-list li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #3a9a8c;
  font-weight: 700;
}

.detail-visual {
  border: 1px solid #e8e0d4;
  border-radius: 4px;
  padding: 24px;
  background: #faf8f4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.visual-placeholder {
  text-align: center;
  color: #b8a89a;
}

.detail-meta {
  border-top: 1px solid #f0e8d8;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meta-item {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.meta-label {
  font-family: var(--font-mono);
  letter-spacing: 1px;
  color: #b8a89a;
  font-weight: 700;
  text-transform: uppercase;
}

.meta-value {
  color: var(--ink);
  font-weight: 600;
}

.detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.btn-apply-skill,
.btn-learn-more {
  padding: 10px 16px;
  border: 1px solid #d4c8bc;
  background: transparent;
  color: #6a5a4e;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  font-weight: 700;
}

.btn-apply-skill {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}

.btn-apply-skill:hover {
  background: #333;
}

.btn-learn-more:hover {
  border-color: var(--warm-ink);
  color: var(--warm-ink);
}

@media (max-width: 768px) {
  .skill-detail-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .skill-detail-right {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #f0e8d8;
    padding-top: 16px;
  }
}

/* ═══ WELCOME GUIDE ═══ */
.section-welcome { padding: var(--section-pad); }

.welcome-box {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
  padding: 40px 24px 32px;
}

.welcome-icon {
  font-size: 28px;
  color: var(--ink-muted);
  margin-bottom: 16px;
  letter-spacing: 4px;
}

.welcome-headline {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 14px;
}

.welcome-body {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-light);
  line-height: 1.8;
  max-width: 620px;
  margin: 0 auto 24px;
}

.welcome-steps {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.welcome-step {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.5px;
}

.ws-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--ink-muted);
  border-radius: 50%;
  font-size: var(--font-xs);
  flex-shrink: 0;
}

.ws-text { max-width: 200px; text-align: left; }

/* ═══ HONORS SECTION V2 ═══ */
/* ═══ TRIPTYCH HONOR — Renaissance Triple-Panel ═══ */
.triptych-honor {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 12px;
  margin-bottom: 24px;
}

.tri-panel {
  background: var(--paper-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 550px;
}

.tri-panel-num {
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 900;
  color: var(--rule-light);
  position: absolute;
  top: 12px;
  right: 16px;
  line-height: 1;
  pointer-events: none;
}

.tri-panel-label {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-light);
}

/* Panel I: The Visual Mirror */
.tri-mirror { padding: 0; }

.honor-mirror-canvas {
  width: 100%;
  height: 200px;
  display: block;
  background: var(--paper-warm);
}

.tri-mirror-caption {
  padding: 10px 16px;
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-muted);
  line-height: 1.6;
  border-top: 1px solid var(--rule-light);
}

.tri-mirror-meta {
  padding: 12px 16px 0;
}

.tri-badge {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--coral);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.tri-skill-name {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 2px;
}

.tri-skill-name-cn {
  font-family: var(--font-serif-cn);
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.tri-meta-row {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--ink-muted);
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.tri-why {
  padding: 10px 16px 16px;
  border-top: 1px solid var(--rule-light);
}

.tri-why-label {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink-faint);
  margin-bottom: 4px;
}

.tri-why p {
  font-size: 11px;
  color: var(--ink-light);
  line-height: 1.7;
}

/* Panel II: The Dialogue */
.tri-dialogue { padding-top: 16px; }

.tri-conversation {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.tri-line {
  padding-left: 10px;
}

.tri-speaker {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.tri-human .tri-speaker { color: var(--periwinkle); }
.tri-agent .tri-speaker { color: var(--teal); }

.tri-human { border-left: 2px solid var(--periwinkle); }
.tri-agent { border-left: 2px solid var(--teal); }

.tri-line p {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.65;
}

.tri-line em { color: var(--ink-light); }

/* Panel III: The 126-word Fiction */
.tri-fiction { padding-top: 16px; }

.tri-fiction-body {
  flex: 1;
}

.tri-fiction-text {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--ink);
  line-height: 1.75;
  margin-bottom: 10px;
  text-indent: 1.5em;
}

.tri-fiction-text:first-child { text-indent: 0; }

.tri-fiction-text em {
  color: var(--ink-light);
}

.tri-fiction-end {
  font-style: italic;
  color: var(--ink-light);
  border-top: 1px solid var(--rule-light);
  padding-top: 10px;
  margin-top: 14px;
  text-indent: 0;
}

.tri-fiction-meta {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 12px;
  text-align: right;
}

.honor-community {
  border: 1px solid var(--rule);
  background: var(--paper-card);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.community-title {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink-muted);
  margin-bottom: 0;
  text-transform: uppercase;
  grid-column: span 2;
}

.taste-notes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.taste-note {
  border-bottom: 1px solid var(--rule-light);
  padding-bottom: 12px;
}

.note-text {
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 4px;
}

.note-author {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--ink-faint);
  letter-spacing: 0.5px;
}

.note-author em {
  color: var(--ink-muted);
}

.taste-submit {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  grid-column: span 2;
}

.taste-input {
  width: 100%;
  min-height: 50px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 1.6;
  padding: 10px;
  resize: none;
  margin-bottom: 8px;
}

.taste-input::placeholder { color: var(--ink-faint); font-style: italic; }
.taste-input:focus { outline: none; border-color: var(--ink-muted); }

.btn-taste-submit {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
  text-transform: uppercase;
}

.btn-taste-submit:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ═══ ARENA BUTTON ═══ */
.btn-arena {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  padding: 8px 14px;
  min-height: 44px;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
  text-transform: uppercase;
}

.btn-arena:hover {
  background: transparent;
  color: var(--accent);
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

/* ═══ FORGE FORM ELEMENTS ═══ */
.forge-form-group {
  margin-bottom: 18px;
}

.forge-form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.5px;
  color: var(--ink-light);
  margin-bottom: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.forge-input, .forge-textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  padding: 10px 14px;
  border-radius: 2px;
  transition: border-color 0.25s;
}

.forge-input:focus, .forge-textarea:focus {
  outline: none;
  border-color: var(--accent-green);
}

.forge-textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.6;
}

/* ═══ AGENT BINDING ═══ */
.forge-agent-section {
  margin-bottom: 24px;
}

.forge-agent-section h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 12px;
  margin-top: 16px;
}

.shadow-binding-card {
  border: 2px solid var(--rule);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.shadow-binding-card:hover {
  border-color: var(--ink-light);
  background: var(--paper-warm);
}

.shadow-binding-card.connected {
  border-color: var(--accent-green);
  background: rgba(45, 122, 58, 0.04);
}

.agent-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.agent-info {
  flex-grow: 1;
}

.agent-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.agent-status {
  font-size: 12px;
  color: var(--ink-light);
  margin-top: 4px;
}

.agent-action {
  flex-shrink: 0;
}

.status-badge {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1px;
  color: var(--ink-muted);
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  display: inline-block;
  transition: all 0.25s;
}

.shadow-binding-card.connected .status-badge {
  color: var(--accent-green);
  border-color: var(--accent-green);
}

/* ═══ BINDING METHOD TABS ═══ */
.binding-method-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.binding-method-btn {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-light);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
}

.binding-method-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.binding-method-btn.active {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-warm);
}

.binding-method-content {
  display: none;
}

.binding-method-content.active {
  display: block;
}

/* ═══ FILE UPLOAD ═══ */
.file-upload-area {
  border: 2px dashed var(--rule);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
  border-radius: 4px;
  background: var(--paper);
}

.file-upload-area:hover {
  border-color: var(--ink);
  background: var(--paper-warm);
}

.upload-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.file-upload-area p {
  margin: 6px 0;
  font-size: 12px;
}

.file-upload-area p:first-of-type {
  font-size: var(--font-sm);
  color: var(--ink);
  font-weight: 600;
}

.upload-status {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-light);
}

/* ═══ AUTO STRUCTURE BUTTON ═══ */
.btn-auto-structure {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--accent-green);
  background: transparent;
  color: var(--accent-green);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  border-radius: 2px;
}

.btn-auto-structure:hover {
  background: var(--accent-green);
  color: #fff;
}

/* ═══ FORGE ACTIONS ═══ */
.forge-actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 24px;
}

.btn-next, .btn-back, .btn-publish, .btn-verify-agent {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--ink-light);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  border-radius: 2px;
}

.btn-next:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-back {
  border-color: var(--rule);
  color: var(--ink-light);
}

.btn-back:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-publish {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.btn-publish:hover {
  background: var(--accent-green);
  color: #fff;
}

.btn-publish:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-verify-agent {
  margin-top: 12px;
}

/* ═══ OATH CHECKBOXES ═══ */
.oath-group {
  padding: 16px;
  border: 1px solid var(--rule-light);
  background: var(--paper-warm);
  border-radius: 4px;
}

.oath-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--ink-light);
  line-height: 1.6;
}

.oath-checkbox:last-child {
  margin-bottom: 0;
}

.oath-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--accent-green);
  flex-shrink: 0;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  :root { --section-pad: 24px 0; }
  .global-header {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    padding: 0 !important;
  }
  .header-rule-top,
  .header-rule-double,
  .header-rule {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .section { padding-left: 0 !important; padding-right: 0 !important; }
  .skills-feed { grid-template-columns: 1fr; }
  .input-actions { flex-direction: column; align-items: flex-start; }
  .input-actions-right { width: 100%; justify-content: space-between; }
  .manifesto-strip {
    padding: 12px 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
  }
  .manifesto-inner { flex-direction: column; gap: 4px; text-align: center; padding: 0 16px; }
  .manifesto-line:first-child::after, .manifesto-line:nth-child(2)::after { content: ''; margin: 0; }
  .triptych-honor { grid-template-columns: 1fr; }
  .honor-community { grid-template-columns: 1fr; }
  .community-title, .taste-submit { grid-column: span 1; }
  .welcome-steps { flex-direction: column; align-items: center; }
  .vibe-grid { grid-template-columns: repeat(2, 1fr); }
  .vibe-header-row { flex-direction: column; }
  /* flex-wrap: nowrap is now the unconditional base rule - this selector
     used to set wrap here, contradicting the nowrap+scroll rule a later
     block in this same file already applies at this exact breakpoint. */
  .masthead-sub-row { flex-direction: column; gap: 8px; text-align: center; }
  .forge-two-col { grid-template-columns: 1fr; }
  .forge-paths { grid-template-columns: 1fr; }
  .about-modules { grid-template-columns: 1fr; }
  .howto-paths { grid-template-columns: 1fr; }
  .masthead-crest { flex-direction: row; gap: 8px; flex-wrap: wrap; justify-content: center; }
  .creative-triptych { grid-template-columns: 1fr; }
  .global-footer {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding: 0 !important;
  }
  .footer-rule-heavy {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
  }
  .footer-main {
    grid-template-columns: 1fr;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
  }
  .footer-section {
    padding: 24px 16px !important;
  }
  .footer-logo-row { flex-direction: column; gap: 12px; padding: 20px 16px 24px !important; }
  .footer-quotes { text-align: left; }
  .headline-textarea { font-size: 16px; min-height: 120px; padding: 24px; }
  .headline-textarea.chat-textarea { padding: 12px 0; }
  .headline-actions { flex-direction: column; align-items: stretch; }
  .headline-actions .creator-name-input { width: 100%; }
  .headline-actions-right { width: 100%; }
  .btn-test { width: 100%; }
  .chat-bubble-section {
    min-height: 100vh;
    padding: 20px 0;
  }
  .chat-bubble-wrap {
    max-width: 100%;
    border-radius: 16px;
    padding: 20px 16px;
    min-height: 65vh;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .chat-bubble-prompt {
    font-size: 14px;
  }
  .chat-bubble-hint {
    font-size: 12px;
  }
  .chat-bubble-input {
    font-size: 16px;
    min-height: 260px;  /* fits the ghost copy — keeps footer below it */
    max-height: 50vh;
    padding: 18px 0;
    line-height: 1.6;
    flex-grow: 1;
  }
  .chat-bubble-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .chat-bubble-name {
    width: 100%;
    margin-bottom: 8px;
  }
  .btn-chat-send {
    width: 100%;
  }
  .voices-container {
    gap: 10px;
  }
  .voice-item {
    padding: 14px;
    min-width: 260px;
    width: 260px;
    min-height: 140px;
  }
  .voice-quote {
    font-size: var(--font-sm);
  }
  .voice-attribution {
    font-size: var(--font-xs);
  }

  /* ═══ MOBILE FONT SIZE ADJUSTMENTS FOR NEW RESPONSIVE DESIGN ═══ */
  /* Playground Page Mobile */
  .playground-title {
    font-size: 16px;
  }
  .playground-subtitle {
    font-size: 12px;
  }
  .domain-label {
    font-size: 11px;
  }
  .playground-tag {
    font-size: 11px;
    padding: 6px 10px;
  }

  /* Archive Page Mobile */
  .av-title {
    font-size: 16px;
  }

  /* Task/Content Mobile */
  .task-title {
    font-size: 16px;
  }
  .task-description {
    font-size: var(--font-sm);
  }
}

/* ═══════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Comprehensive phone/tablet refinements
   ═══════════════════════════════════════════════════════ */

/* Tablet & phone (≤768px) — overrides & additions */
@media (max-width: 768px) {
  /* Homepage hero — COMPLETELY REDESIGNED for proportional harmony */
  .section-headline {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .headline-hero {
    /* BALANCED vertical padding: eliminate excess but maintain breathing room */
    padding: 12px 0 8px;
  }
  .section-headline .section-heading {
    /* OPTIMIZED size: 22px for tablet - more prominent invitation */
    font-size: 22px;
    letter-spacing: -0.02em;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 0 16px;
    line-height: 1.4;
  }
  .section-rule {
    /* Balanced rule margin for visual separation */
    margin: 8px 0 !important;
  }
  .community-section-wrap {
    margin: 0 !important;
    /* Remove padding entirely — input should flow directly */
    padding: 0 !important;
  }
  .chat-bubble-section {
    margin-bottom: 0 !important;
    /* Remove min-height that creates excessive space */
    min-height: auto;
  }

  /* Chat input — fill full screen width with balanced padding */
  .chat-bubble-wrap {
    min-height: auto !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    /* BALANCED padding: 22px 20px maintains visual comfort without excess space */
    padding: 22px 20px !important;
    border-radius: 0 !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  .chat-bubble-wrap::before {
    display: none !important;
  }
  .chat-bubble-input {
    font-size: 16px !important;
    min-height: 260px !important;  /* ghost copy must clear the footer */
    max-height: 40vh !important;
    padding: 14px 0 !important;
    line-height: 1.6 !important;
    font-family: 'Noto Serif SC', 'STSong', serif !important;
  }
  body[data-lang="cn"] .chat-bubble-input {
    font-family: 'Noto Serif SC', 'STSong', serif !important;
  }
  body[data-lang="en"] .chat-bubble-input {
    font-family: 'Playfair Display', Georgia, 'Noto Serif SC', 'STSong', serif !important;
  }
  .chat-bubble-invite {
    font-size: 14px !important;
    padding: 8px 0 !important;
  }
  .btn-chat-send {
    padding: 10px 22px !important;
    font-size: 13px !important;
  }
  .chat-bubble-footer {
    flex-direction: row !important;
    justify-content: flex-end !important;
    padding-top: 14px !important;
  }

  /* Ethics result matches new chat-bubble-wrap */
  .ethics-result {
    border-radius: 18px;
  }
  .ethics-pass, .ethics-fail {
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    text-align: center;
  }

  /* Voices header: balanced spacing that separates without excessive gap */
  .community-voices-list {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding: 0 !important;
  }
  .voices-header {
    margin: 16px 0 10px !important;
    padding: 0 16px !important;
    gap: 12px;
  }
  .voices-header-text {
    font-size: var(--font-xs);
    letter-spacing: 2px;
  }
  body[data-lang="cn"] .voices-header-text {
    font-size: 12px;
  }

  /* Ticker: narrower cards, faster scroll */
  .voices-ticker-wrap {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  }

  /* Global header tightening */
  .masthead {
    padding: 16px 0 10px;
  }
  .masthead-title {
    font-size: 44px !important;
  }
  .masthead-crest-icon {
    width: 40px;
    height: auto;
  }
  .masthead-subtitle {
    font-size: 11px;
  }
  .masthead-vol, .masthead-protocol {
    font-size: var(--font-xs);
  }
  .header-actions {
    justify-content: center !important;
    /* .global-header zeroes its own padding below (full-bleed rule lines) —
       that's meant for the horizontal rules, not this button row, which
       was touching both screen edges without its own inset. */
    padding-left: 16px;
    padding-right: 16px;
  }
  .header-buttons {
    /* space-between, not center or flex-start. Chinese labels are much
       shorter than their English counterparts ("语义储藏室" vs "SEMANTIC
       ARCHIVE"), so with flex-start the Chinese row hugs the left edge and
       dumps all the leftover space on the right -- lopsided next to English,
       which nearly fills the row. space-between spreads that leftover space
       out as gaps between the buttons instead, so the row always spans the
       same full width edge-to-edge in both languages, and each button still
       sizes to its own content (no artificial stretching). Center was ruled
       out earlier: when content overflows (long English labels on a narrow
       screen) centering an overflowing row clips its start flush against
       the edge, since scrollLeft can't go negative -- space-between doesn't
       have that failure mode, per spec it falls back to start-aligned
       packing once free space goes negative.
       width: 100% is the part that actually makes space-between do
       anything: without it .header-buttons shrink-wraps to its own
       content, so in Chinese (narrower content) there is no slack left
       inside it to distribute -- the row just sits at its own small
       size, centered by .header-actions with large equal margins on
       both sides, which is exactly the "indented compared to English"
       look this was meant to fix. Stretching it to the full available
       width first is what gives space-between real room to push the
       first button to the left edge and the last to the right edge
       in both languages. */
    width: 100%;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .btn-arena, .btn-agent-view {
    font-size: var(--font-xs);
    padding: 6px 8px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 110px;
    text-align: center;
  }
  /* Playground and Archive share the row's leftover space instead of
     leaving it as empty gaps. Chinese labels ("创意游乐场" / "语义储藏室")
     are short enough that space-between alone left visibly large,
     empty-looking gaps between the buttons. Growing both (equally, so
     neither ends up wider than the other) fills that space as extra
     padding around real text -- reads as two roomier pills -- rather
     than as dead air. Unlike growing the lang button (which really is
     only ever 2 characters), this doesn't recreate the "big empty box
     around two letters" problem from before. */
  .btn-arena, .btn-agent-view {
    flex-grow: 1;
  }
  /* .btn-lang's own rule already narrows this to 60px on desktop (it only
     ever holds 2 characters, "中文" or "EN") — this block used to fold it
     into the same 110px floor as the other two, undoing that on exactly
     the screens where the oversized box is most visible and space is
     tightest. */
  .btn-lang {
    font-size: var(--font-xs);
    padding: 6px 10px;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: center;
  }

  /* Forge & Probe modals */
  .forge-modal, .probe-modal-content {
    width: 94% !important;
    padding: 20px 18px !important;
    max-height: 88svh !important;
    border-radius: 12px !important;
  }
  .forge-close {
    top: 10px;
    right: 10px;
    font-size: 16px;
  }
  /* #forgeClose (ID) needed to reliably beat the later, unconditional
     .forge-close{width:30px!important} rule elsewhere in this file —
     same specificity class-vs-class plus !important is a source-order
     tiebreak, and that other rule sits after this one. */
  #forgeClose {
    width: 44px !important;
    height: 44px !important;
  }
  .forge-steps {
    gap: 4px;
    flex-wrap: wrap;
  }
  .forge-step-line {
    display: none;
  }
  .forge-page-title {
    font-size: 18px;
  }
  .forge-page-subtitle {
    font-size: var(--font-sm);
  }

  /* Agent Archive tooltip */
  .star-tooltip {
    max-width: calc(100vw - 32px);
    padding: 10px 12px;
    font-size: 11px;
  }
}

/* Small phones (≤480px) — aggressive compact mode */
@media (max-width: 480px) {
  /* FIX 1: Allow full-width header rules by removing overflow clipping */
  body {
    overflow-x: visible !important;
  }

  /* FIX 3: Improve Chinese typography on mobile — modern professional look */
  /* Switch to modern sans-serif for Chinese text */
  body[data-lang="cn"] {
    --font-serif-cn: var(--font-sans-cn);
  }

  body[data-lang="cn"] .voices-header-text,
  body[data-lang="cn"] .voice-text,
  body[data-lang="cn"] .welcome-text,
  body[data-lang="cn"] .section-rule,
  body[data-lang="cn"] .forge-step-text,
  body[data-lang="cn"] p {
    font-family: var(--font-sans-cn);
    font-weight: 400;
  }

  body[data-lang="cn"] .section-heading {
    /* Was sans-cn here, contradicting the base rule (line ~194) that
       specifically puts .section-heading in Noto Serif SC "to match
       Playground" -- so on mobile, exactly where English keeps its
       elegant Playfair Display serif look, Chinese silently dropped to
       plain sans-serif. Body copy is a different call (dense small CJK
       text can render better in sans-serif at low DPI) but a large bold
       heading doesn't have that problem, and losing the serif here is
       what made Chinese look flatter / less considered than English. */
    font-family: var(--font-serif-cn);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 32px;
    line-height: 1.3;
  }

  body[data-lang="cn"] h2,
  body[data-lang="cn"] h3 {
    font-family: var(--font-sans-cn);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .global-header {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    padding: 0 !important;
  }
  .header-rule-top,
  .header-rule-double,
  .header-rule {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .section { padding-left: 0 !important; padding-right: 0 !important; }
  .manifesto-strip {
    padding: 10px 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
  }
  .manifesto-inner { padding: 0 12px; }
  .vibe-grid { grid-template-columns: 1fr; }

  /* Masthead — biggest visual impact */
  .masthead-title {
    font-size: 28px !important;
    letter-spacing: -0.01em;
  }
  .masthead-crest {
    flex-direction: row !important;
    gap: 6px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .masthead-crest-icon {
    width: 32px;
  }

  /* Header actions centered on mobile */
  .header-actions {
    justify-content: center !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Stay one row even here - same nowrap+scroll base rule, this block
     used to override it back to wrap (the third of three competing
     flex-wrap rules across these media queries, found from a real
     screenshot of it wrapping at this exact width). */
  .header-buttons {
    /* width + space-between: see the same rule at the 768px breakpoint
       above -- width:100% is required for space-between to have any
       slack to distribute; without it the row just shrink-wraps and gets
       centered with large equal margins in Chinese, which looked
       "indented" compared to English. */
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 6px;
  }
  .nav-separator {
    display: none;
  }

  /* Hero heading — PROMINENT SIZE for small screens */
  /* FIX 2: Improved line spacing for main CTA — better breathing room */
  .section-headline .section-heading {
    font-size: 20px !important;
    margin-top: 8px !important;
    margin-bottom: 14px !important;
    padding: 0 12px !important;
    line-height: 1.4;
    letter-spacing: -0.02em;
  }
  .headline-hero {
    /* Balanced padding for small phones */
    padding: 10px 0 6px !important;
  }
  .section-rule {
    /* Balanced rule at small phone size */
    margin: 6px 0 !important;
  }

  /* Full-width voices section */
  .community-voices-list {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding: 0 !important;
  }
  .voices-header {
    padding: 0 12px !important;
  }

  /* Full-width footer */
  .global-footer {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding: 0 !important;
  }
  .footer-rule-heavy {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
  }
  .footer-main {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
  }
  .footer-section {
    padding: 20px 12px !important;
  }
  .footer-logo-row {
    padding: 16px 12px 20px !important;
  }

  /* Full-width input container */
  .community-section-wrap {
    margin: 0 !important;
    padding: 0 !important;
  }
  .chat-bubble-section {
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  /* Chat input — prominent on mobile with breathing room */
  .chat-bubble-wrap {
    min-height: 55vh !important;
    max-width: calc(100vw - 12px) !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
    width: calc(100vw - 12px) !important;
    /* Increased padding for spacious feel */
    padding: 28px 20px !important;
    border-radius: 16px !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  .chat-bubble-wrap::before {
    display: block !important;
  }
  .chat-bubble-input {
    font-size: 16px !important;
    min-height: 215px !important;  /* ghost copy must clear the footer */
    max-height: 40vh !important;
    padding: 16px 0 !important;
  }
  .chat-bubble-invite {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  /* ═══ SMALL PHONE FONT SIZE OPTIMIZATIONS (≤480px) ═══ */
  /* Playground Page Small Phone */
  .playground-title {
    font-size: 15px;
  }
  .playground-subtitle {
    font-size: 11px;
  }
  .domain-label {
    font-size: var(--font-xs);
  }
  .playground-tag {
    font-size: var(--font-xs);
    padding: 5px 8px;
  }

  /* Archive Page Small Phone */
  .av-title {
    font-size: 14px;
  }

  /* Task/Content Small Phone */
  .task-title {
    font-size: 15px;
  }
  .task-description {
    font-size: 12px;
  }

  /* Voice cards full-ish width */
  .voice-item {
    min-width: 240px !important;
    width: 240px !important;
    min-height: 130px !important;
    padding: 12px !important;
  }
  .voice-quote {
    font-size: 12px !important;
    line-height: 1.55;
  }
  .voice-attribution {
    font-size: 8px !important;
  }

  /* Forge modal — pack tight */
  .forge-modal, .probe-modal-content {
    width: 96% !important;
    padding: 16px 14px !important;
    border-radius: 10px !important;
  }
  .forge-step-label {
    font-size: var(--font-xs);
    letter-spacing: 0.5px;
  }
  .forge-page-title {
    font-size: 16px;
  }

  /* Manifesto text smaller */
  .manifesto-line {
    font-size: 11px !important;
    line-height: 1.55;
  }

  /* Agent Archive — domain grid single column */
  .domain-grid {
    grid-template-columns: 1fr !important;
  }
  .av-readable {
    padding: 20px 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   SEMANTIC ARCHIVE — Celestial Map & Honor Hub (CSS class/id still
   "agent-view" / "sectionAgentArchive" internally - not user-facing)
   ═══════════════════════════════════════════════════════ */

.section-agent-archive {
  padding: 0;
}

/* ═══ AGENT VIEW HEADER ═══ */
.av-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px 24px;
  border-bottom: 1px solid #d4c8bc;
  background: #f8f4ee;
}

.av-title {
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--ink);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 700;
}

.av-back {
  color: var(--warm-ink);
  font-size: 11px;
  text-decoration: none;
  letter-spacing: 1px;
  transition: color 0.2s;
  cursor: pointer;
  font-family: var(--font-mono);
}
.av-back:hover { color: var(--ink); }

/* ═══ CELESTIAL SECTION ═══ */
.av-celestial {
  background: linear-gradient(175deg,
    #d8ccd6 0%,
    #e0cec8 25%,
    #e8d6c0 50%,
    #eddcb8 75%,
    #f2e2c0 100%
  );
  border-left: 1px solid #d4c8bc;
  border-right: 1px solid #d4c8bc;
  overflow: hidden;
  display: flex;
  justify-content: stretch;
  width: 100%;
  max-width: 100%;
}

.av-celestial-inner {
  flex: 1;
  display: flex;
  height: 70vh;
  min-height: 500px;
  width: 100%;
}

.av-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.23,1,0.32,1);
  min-width: 0;
}

/* Mobile: show scroll hint at bottom of canvas area */
@media (max-width: 768px) {
  .av-canvas-wrap::after {
    content: '↕ 在地图外滑动翻页';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(42, 32, 24, 0.55);
    color: rgba(255,255,255,0.85);
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
    pointer-events: none;
    white-space: nowrap;
    font-family: var(--font-sans);
    animation: fadeHint 4s ease forwards;
  }
  @keyframes fadeHint {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
  }
}

#celestialCanvas {
  width: 100%;
  height: 100%;
  cursor: grab;
  display: block;
  /* Let our JS fully own pan/pinch gestures on mobile — otherwise the
     browser kicks in native scroll/zoom and the canvas feels broken. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#celestialCanvas:active { cursor: grabbing; }

/* ═══ TOOLTIP ═══ */
.star-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(248,244,238,0.96);
  border: 1px solid #d4c8bc;
  padding: 14px 16px;
  max-width: 280px;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 4px 20px rgba(44,36,32,0.08);
}
.star-tooltip.visible { opacity: 1; }
.tt-name { font-family: var(--font-serif); font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.tt-name-cn { font-size: 11px; color: #6a5a4e; margin-bottom: 8px; }
.tt-agent { font-size: 9px; color: var(--warm-ink); letter-spacing: 1px; margin-bottom: 4px; }
.tt-desc { font-size: 10px; color: #4a3e36; line-height: 1.5; margin-bottom: 8px; }
.tt-hash { font-size: 8px; color: #d4726a; letter-spacing: 1.5px; font-weight: 600; }
.tt-meta { display: flex; gap: 14px; margin-top: 6px; font-size: 9px; }
.tt-meta span { color: var(--warm-ink); }

/* Tooltip info row - creator and hash on same line */
.tt-info-row { display: flex; gap: 12px; margin: 4px 0; align-items: center; justify-content: space-between; }
.tt-agent { font-size: 10px; color: #7a6a5e; font-weight: 500; }
.tt-hash { font-size: 9px; color: #d4726a; letter-spacing: 1px; font-weight: 600; }

/* Verification badge — a blind-test result, not a self-report, so it
   gets its own visual weight distinct from starlight/domain metadata.
   "Failed" is shown with the SAME prominence as "Verified", not hidden
   or de-emphasised — a verification mechanism that only ever displays
   good news is not trustworthy. Empty when there is no verification
   data yet (skill has zero blind votes). */
.tt-verification {
  font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
  margin: 4px 0 6px; padding: 3px 7px;
  border-radius: 4px; display: inline-block;
}
.tt-verification:empty { display: none; margin: 0; }
.tt-verification.verified { background: rgba(74,122,50,0.12); color: #4d7a32; }
.tt-verification.failed { background: rgba(184,99,60,0.12); color: #a8633c; }
.tt-verification.verifying { background: rgba(122,111,94,0.12); color: #7a6f5e; }

/* Archive Skills Grid Card Styles */
/* ═══════════════════════════════════════════════════════════════
   PROFESSIONAL UI REDESIGN - SKILL CARDS (Archive Grid)
   ═══════════════════════════════════════════════════════════════ */

.domain-cell .skill-item {
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #efefef;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.domain-cell .skill-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #d4726a 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.domain-cell .skill-item:hover {
  border-color: #ddd;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.domain-cell .skill-item:hover::before {
  opacity: 1;
}

/* Skill Header: Title + Soul Hash */
.skill-item .skill-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.skill-item .skill-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
  margin: 0;
  flex: 1;
  letter-spacing: -0.3px;
}

.skill-item .skill-hash {
  font-size: 10px;
  color: #d4726a;
  letter-spacing: 1px;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  background: #fef5f4;
  padding: 4px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid #f0ddd9;
  text-transform: uppercase;
}

.skill-item .skill-creator {
  font-size: 12px;
  color: #888;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.skill-item .skill-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.55;
  margin: 2px 0;
}

.skill-item .skill-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  row-gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #f5f5f5;
}

.skill-item .skill-meta {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  font-size: 12px;
}

/* Verification badge — filled async from /playground/stats-batch. Same
   blind signal as the celestial map star tooltip (.tt-verification) —
   this used to show a separate self-reported "win rate" from
   skill_feedback (3-vote threshold), which could show a confident
   percentage here while the tooltip said "Verifying" for the very same
   Skill. One metric everywhere now. */
.skill-item .skill-winrate {
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
}
.skill-item .skill-winrate:empty { display: none; }
.skill-item .skill-winrate.verified { color: #4d7a32; }
.skill-item .skill-winrate.failed { color: #a8633c; }
.skill-item .skill-winrate.verifying { color: #7a6f5e; }

/* ═══ SKILL ACTIONS (Star, Download, Play buttons) ═══ */
.skill-item .skill-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
}

.skill-action-btn {
  background: none;
  border: 1px solid transparent;
  padding: 6px 8px;
  font-size: 15px;
  cursor: pointer;
  opacity: 0.55;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

.skill-action-btn:not(.disabled):hover {
  opacity: 1;
  transform: scale(1.12);
  background: #f9f9f9;
  border-color: #e8e8e8;
}

.skill-action-btn:not(.disabled):active {
  transform: scale(0.98);
}

@media (max-width: 768px) {
  .skill-action-btn { min-width: 44px; min-height: 44px; font-size: 17px; }
}

/* Star button — icon + accumulated count live together in one control
   (like GitHub's star button), instead of a separate count element
   elsewhere on the card competing for space with a second star glyph. */
.star-btn {
  gap: 3px;
  padding-left: 10px;
  padding-right: 10px;
}
.star-btn-count {
  font-size: 12px;
  font-weight: 700;
}

/* Star button - filled state */
.skill-action-btn.star-btn.starred {
  color: #d4726a;
  opacity: 1;
  background: #fef5f4;
  border-color: #f0ddd9;
}

.skill-action-btn.star-btn.starred:hover {
  background: #fde9e5;
  border-color: #e8ccc4;
}

/* Download button - disabled state */
.skill-action-btn.download-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  color: #ccc;
}

.skill-action-btn.download-btn.disabled:hover {
  opacity: 0.3;
  transform: none;
  background: none;
  border-color: transparent;
}

/* Tooltip action buttons */
.tt-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tt-action-btn {
  padding: 4px 8px; font-size: 9px; border: 1px solid #d4c8a8;
  background: #fdfaf3; color: #5a5048; border-radius: 3px;
  cursor: pointer; transition: all 0.2s; font-weight: 600;
  flex: 1; min-width: 60px; text-align: center;
}
.tt-action-btn:hover { background: #f5f0e8; border-color: #c4b89a; }
.tt-action-btn:active { transform: scale(0.95); }

/* ═══ HONOR PANEL ═══ */
.honor-panel {
  width: 380px;
  flex-shrink: 0;
  background: rgba(248,244,238,0.92);
  border-left: 1px solid rgba(44,36,32,0.08);
  overflow-y: auto;
  transition: width 0.4s cubic-bezier(0.23,1,0.32,1), opacity 0.3s;
  position: relative;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
}

.honor-panel.collapsed {
  width: 0;
  opacity: 0;
  overflow: hidden;
}

.honor-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 50;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid #d4c8bc;
  color: var(--warm-ink);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.honor-toggle:hover { border-color: #b8a89a; color: var(--ink); }

.honor-toggle-open {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 50;
  width: 30px;
  height: 30px;
  background: rgba(248,244,238,0.85);
  border: 1px solid #d4c8bc;
  color: #d4a43c;
  font-size: 14px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(44,36,32,0.1);
}
.honor-toggle-open:hover { background: rgba(248,244,238,0.98); color: #d4726a; }
.honor-toggle-open.visible { display: flex; }

.honor-panel-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(44,36,32,0.06);
}

.honor-panel-title {
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  color: var(--ink);
  letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 6px;
}
.honor-panel-title .star-icon { color: #d4a43c; font-size: 11px; }

.honor-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.honor-panel-subtitle {
  font-size: var(--font-xs);
  color: var(--warm-ink);
  letter-spacing: 1px;
  margin-top: 4px;
}

.honor-row {
  display: grid;
  grid-template-columns: 32px 1fr 90px 35px;
  align-items: center;
  padding: 10px 14px;
  font-size: var(--font-xs);
  cursor: pointer;
  transition: background 0.15s, padding 0.15s;
  gap: 10px;
  border-bottom: 1px solid rgba(44,36,32,0.04);
}
.honor-row:hover {
  background: rgba(44,36,32,0.05);
  padding: 10px 16px;
}

.honor-rank {
  color: #d4a43c;
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  min-width: 32px;
  letter-spacing: 0.5px;
}

.honor-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.honor-name {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
}

.honor-desc {
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

.honor-star {
  color: #d4a43c;
  text-align: center;
  font-size: var(--font-xs);
  font-weight: 600;
  min-width: 40px;
}

.honor-starlight {
  display: none; /* Hide UUID/ID - not needed for user display */
}

/* ═══ ZOOM CONTROLS ═══ */
.zoom-controls {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  gap: 3px;
  z-index: 50;
  align-items: center;
}
.zoom-btn {
  width: 28px; height: 28px;
  background: rgba(248,244,238,0.75);
  border: 1px solid #d4c8bc;
  color: var(--warm-ink);
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.zoom-btn:hover { color: var(--ink); border-color: #b8a89a; }
@media (max-width: 768px) {
  .zoom-btn { width: 40px; height: 40px; font-size: 16px; }
}
.zoom-info {
  font-size: var(--font-xs);
  color: #b8a89a;
  letter-spacing: 1px;
  margin-left: 6px;
}

/* ═══ OBSERVATORY LABEL ═══ */
.av-obs-label {
  text-align: center;
  padding: 8px;
  background: #f2e2c0;
  border-left: 1px solid #d4c8bc;
  border-right: 1px solid #d4c8bc;
}
.av-obs-label span {
  font-size: var(--font-xs);
  letter-spacing: 2.5px;
  color: #b8a99a;
  text-transform: uppercase;
}

/* ═══ READABLE LAYER ═══ */
.av-readable {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px 24px 40px;
  background: #f8f4ee;
}

.av-readable-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.av-readable-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
}

.av-readable-subtitle {
  font-size: var(--font-xs);
  color: var(--warm-ink);
  letter-spacing: 1px;
}

.av-readable-rule {
  height: 2px;
  background: linear-gradient(90deg, var(--ink), #d4c8bc);
  margin-bottom: 28px;
}

/* Archive domain filter bar - jump straight to one domain instead of
   scrolling past all 10. Same nowrap+scroll guarantee as .header-buttons:
   never wrap chips onto a second row, scroll horizontally instead. */
/* Wrapper carries the edge-fade hint so it stays fixed in place while
   .domain-filter-bar scrolls underneath — putting the fade on the
   scrolling element itself would drag it along with the content, hiding
   it as soon as the user scrolls. Right-edge fade is a static "there's
   more this way" signal; the row has no other affordance (no arrows, no
   scrollbar) so first-time visitors otherwise read the cut-off last chip
   as a layout bug rather than an invitation to scroll. */
.domain-filter-wrap {
  position: relative;
}
.domain-filter-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 16px; /* matches .domain-filter-bar's own bottom padding */
  width: 28px;
  background: linear-gradient(to right, transparent, var(--paper-warm, #f8f4ee) 85%);
  pointer-events: none;
}

.domain-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 16px;
}
.domain-filter-bar::-webkit-scrollbar { display: none; }

.domain-filter-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border: 1.5px solid rgba(60,48,40,0.10);
  border-radius: 20px;
  background: rgba(255,255,255,0.65);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}
.domain-filter-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 14px rgba(60,48,40,0.10);
  border-color: rgba(60,48,40,0.22);
}
/* Per-domain watercolour tints, matching the Forge domain picker */
.domain-filter-chip[data-domain="narrative"]  { background: rgba(240,208,144,0.26); }
.domain-filter-chip[data-domain="design"]     { background: rgba(228,160,144,0.22); }
.domain-filter-chip[data-domain="visual"]     { background: rgba(196,212,180,0.24); }
.domain-filter-chip[data-domain="experience"] { background: rgba(240,212,200,0.22); }
.domain-filter-chip[data-domain="sound"]      { background: rgba(212,200,228,0.24); }
.domain-filter-chip[data-domain="ideas"]      { background: rgba(248,236,160,0.26); }
.domain-filter-chip[data-domain="history"]    { background: rgba(228,210,178,0.24); }
.domain-filter-chip[data-domain="fun"]        { background: rgba(240,200,208,0.24); }
.domain-filter-chip[data-domain="safety"]     { background: rgba(200,220,232,0.24); }
.domain-filter-chip[data-domain="science"]    { background: rgba(196,228,218,0.24); }

/* Must win over the per-domain tints above regardless of which domain is
   selected - same specificity (class + attribute), so position decides. */
.domain-filter-chip.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* 2-column domain grid */
.domain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #d4c8bc;
  border: 1px solid #d4c8bc;
}
/* Filtered to one domain: only one .domain-cell is left visible, but the
   2-column track above is still reserved and renders as a blank pane next
   to it. Collapse to one column whenever a single domain is selected. */
.domain-grid.single-domain {
  grid-template-columns: 1fr;
}

.domain-cell {
  background: #f8f4ee;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.skills-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.domain-title {
  font-family: var(--font-serif-cn);
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.domain-title-en {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--warm-ink);
  letter-spacing: 1.5px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d4c8bc;
  text-transform: uppercase;
}

.domain-skill {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(44,36,32,0.06);
}
.domain-skill:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.domain-skill-title {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 1px;
}

.domain-skill-title-cn {
  font-family: var(--font-serif-cn);
  font-size: 12px;
  color: #6a5a4e;
  margin-bottom: 5px;
}

.domain-skill-agent {
  font-size: var(--font-xs);
  color: var(--warm-ink);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.domain-skill-desc {
  font-size: 11px;
  color: #4a3e36;
  line-height: 1.7;
  margin-bottom: 6px;
}

.domain-skill-meta {
  display: flex;
  gap: 14px;
  font-size: var(--font-xs);
  color: #b8a89a;
  letter-spacing: 1px;
}
.domain-skill-meta .hash-val { color: #d4726a; font-weight: 600; }

.domain-open-seat { opacity: 0.3; }

/* ─── Archive card action row (Star · Download · Play) ────────────────
   Three peer actions sharing a single visual language. Star is the
   prerequisite for Download (download is disabled until starred). Play
   is always available — it routes to arena.html?skill=<id>, which the
   Twin Test card auto-detects to skip the picker. */
.domain-skill-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(212, 200, 188, 0.4);
}

.btn-skill-star,
.btn-skill-download,
.btn-skill-play {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: transparent;
  border: 1px solid #d4c8bc;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 0.5px;
  color: #6b5c4e;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.btn-skill-star:hover {
  background: rgba(212, 164, 60, 0.08);
  border-color: #d4a43c;
  color: #b58a2e;
}

.btn-skill-download:hover:not([disabled]) {
  background: rgba(58, 154, 140, 0.08);
  border-color: #3a9a8c;
  color: #2d7a6e;
}

.btn-skill-download[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* The Play button is the call-to-action — warm charcoal color
   so the eye lands on it as the primary "do something with this skill"
   move. Star/Download stay quieter as supporting actions. */
.btn-skill-play {
  background: var(--btn-charcoal);
  border-color: var(--btn-charcoal);
  color: #fff;
  font-weight: 600;
}

.btn-skill-play:hover {
  background: var(--btn-charcoal-hover);
  border-color: var(--btn-charcoal-hover);
  transform: translateY(-1px);
}

.btn-skill-play:active {
  transform: scale(0.97);
}

/* ═══ FOOTER ═══ */
.av-footer {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px 48px;
  background: #f8f4ee;
}
.av-footer-rule {
  height: 1px;
  background: linear-gradient(90deg, #d4c8bc, #e8d6c0, #d4c8bc);
  margin-bottom: 16px;
}
.av-footer-text {
  text-align: center;
  font-size: var(--font-xs);
  color: var(--warm-ink);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .av-celestial-inner { flex-direction: column; height: auto; }
  /* Reduce canvas height so users can scroll page by touching above/below */
  .av-canvas-wrap { height: 42vh; min-height: 260px; }
  .honor-panel { width: 100% !important; border-left: none; border-top: 1px solid rgba(44,36,32,0.06); max-height: 35vh; }
  .honor-panel.collapsed { height: 0; max-height: 0; }
  /* Agent Archive — single column layout on mobile */
  .domain-grid {
    grid-template-columns: 1fr !important;
  }
  .av-readable {
    /* max-width: var(--max-w) uses calc(100vw - 48px) — 100vw includes the
       vertical scrollbar's width, but the visible content area doesn't.
       On a page tall enough to scroll (archive.html always is), that ~16px
       discrepancy made this element ~16px wider than the true available
       width, and margin:auto centered it against the WRONG (too-wide)
       figure — the excess spilled to the right, past the actual scrollbar
       gutter, reading as "left border visible, right border pushed off
       past the edge" (not centered). Padding here already defines the
       gutter correctly (scrollbar-safe, since % / block width naturally
       excludes it); dropping the vw-based cap on mobile removes the
       double constraint that was causing the mismatch. */
    max-width: 100% !important;
    padding: 24px 16px !important;
  }
  .honor-toggle-open { top: auto; bottom: 12px; }

  /* Archive header: stack on small screens */
  .av-header {
    padding: 12px 16px;
    gap: 8px;
  }
  .av-title {
    font-size: 14px;
    letter-spacing: 2px;
  }
  /* Back button: proper touch target */
  #btnBackFromArchive {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
}


/* ═══ NEW FORGE UI STYLES ═══ */

.forge-section {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #eee;
}

.forge-section:last-child {
  border-bottom: none;
}

.forge-page-subtitle {
  font-size: 14px;
  color: #666;
  margin: 8px 0 16px 0;
  font-weight: normal;
}

.forge-instruction {
  font-size: var(--font-sm);
  color: #999;
  margin-bottom: 16px;
  line-height: 1.6;
}

.forge-textarea-large {
  min-height: 120px;
  font-size: 14px;
  line-height: 1.6;
}

.forge-scenario-context {
  padding: 16px;
  background: #f9f9f9;
  border-left: 3px solid #1a1a1a;
  margin-bottom: 20px;
  font-style: italic;
  color: #555;
}

.probe-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 20px 0;
}

.probe-card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  transition: all 0.2s;
  cursor: pointer;
}

.probe-card:hover {
  border-color: #1a1a1a;
  background: #fafafa;
}

.probe-header {
  font-weight: bold;
  margin-bottom: 12px;
  font-size: 14px;
}

.probe-scenario {
  font-size: var(--font-sm);
  line-height: 1.6;
  color: #555;
  margin-bottom: 16px;
  min-height: 80px;
}

.probe-btn {
  padding: 10px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 3px;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 500;
  transition: all 0.2s;
  width: 100%;
}

.probe-btn:hover {
  background: #f0f0f0;
  border-color: #1a1a1a;
}

.probe-selected {
  text-align: center;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* STEP 2: Skill Review */
.skill-review-container {
  display: grid;
  gap: 24px;
}

.review-section {
  padding: 16px;
  background: #f9f9f9;
  border-radius: 4px;
}

.review-label {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1a1a1a;
}

.review-content {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 12px;
  min-height: 60px;
  padding: 12px;
  background: white;
  border-radius: 3px;
  border-left: 3px solid #1a1a1a;
}

.review-feedback {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.review-feedback input,
.review-feedback textarea {
  flex: 1;
}

.feedback-btn {
  padding: 8px 12px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s;
}

.feedback-btn:hover {
  background: #1a1a1a;
  color: white;
  border-color: #1a1a1a;
}

.skill-confirmation {
  display: grid;
  gap: 12px;
}

.forge-btn-secondary {
  padding: 12px 24px;
  background: white;
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.forge-btn-secondary:hover {
  background: #1a1a1a;
  color: white;
}

.five-layer-generation {
  display: grid;
  gap: 16px;
}

.layer-item {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background: linear-gradient(135deg, #f9f9f9 0%, #fbfbfb 100%);
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  transition: all 0.3s ease-out;
}

.layer-item:hover {
  border-color: #d8d8d8;
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.04);
}

.layer-status {
  font-size: 22px;
  text-align: center;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Simple pulse animation for button generating state */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.3);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
  }
}

/* Generating state for forge buttons */
button.generating {
  animation: pulse 0.6s ease-in-out infinite;
}

.layer-status.complete {
  animation: none;
  color: #1a1a1a;
}

.forge-forging-subtitle {
  font-size: 13px;
  color: #888;
  text-align: center;
  margin-top: -8px;
  margin-bottom: 20px;
  font-weight: 400;
}

.layer-name-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.layer-name {
  font-size: var(--font-sm);
  font-weight: 600;
  color: #333;
}

.layer-subtitle {
  font-size: 11px;
  color: #aaa;
  font-weight: 400;
}

.layer-name-group .layer-progress {
  margin-top: 6px;
}

.layer-progress {
  height: 6px;
  background: #e8e8e8;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #1a1a1a, #333);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(26, 26, 26, 0.3);
}

.forge-ready {
  animation: slideDown 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 20px;
  background: linear-gradient(135deg, #f0f7ff 0%, #f5fbff 100%);
  border: 1px solid #d4e9ff;
  border-radius: 10px;
  text-align: center;
  font-weight: 600;
  color: #1a5490;
}


/* ═══ MINIMAL FORGE UI - STEP 1 ═══ */

.forge-minimal-container {
  display: grid;
  gap: 32px;
}

/* ═══ MINIMAL FORM SYSTEM (Editorial Style) ═══ */
.minimal-section {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.minimal-label {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--warm-ink);
  font-weight: 600;
  margin-bottom: 12px;
  display: block;
}

.minimal-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.minimal-input {
  padding: 12px 14px;
  border: 1.5px solid #ddd;
  background: #ffffff;
  border-radius: 10px;
  font-size: 16px;
  min-height: 48px;
  font-family: var(--font-serif);
  color: #333;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

.minimal-input::placeholder {
  color: #bbb;
}

.minimal-input:hover {
  border-color: #c0a080;
  background: #fffbf7;
}

.minimal-input:focus {
  outline: none;
  border-color: var(--warm-ink);
  background: #fffbf7;
  box-shadow: 0 4px 12px rgba(138, 122, 110, 0.12);
}

.minimal-instruction {
  font-size: 13px;
  color: #998877;
  line-height: 1.6;
  margin-bottom: 16px;
  font-weight: 400;
}

.minimal-textarea {
  padding: 12px 14px;
  border: 1.5px solid #ddd;
  background: #ffffff;
  border-radius: 10px;
  font-size: 15px;
  font-family: var(--font-serif);
  line-height: 1.8;
  min-height: 140px;
  color: #2a2018;
  transition: all 0.3s ease;
  resize: none;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.minimal-textarea::placeholder {
  color: #bbb;
}

.minimal-textarea:hover {
  border-color: #c0a080;
  background: #fffbf7;
}

.minimal-textarea:focus {
  outline: none;
  border-color: var(--warm-ink);
  background: #fffbf7;
  box-shadow: 0 6px 20px rgba(138, 122, 110, 0.15);
}

/* Intuition Probe Button */
/* ═══ Intuition Probe Button — Minimal Magazine Style ═══ */
.intuition-probe-btn {
  padding: 24px 20px;
  border: 1.5px solid #c0a080;
  background: linear-gradient(135deg, #ffffff 0%, #fffbf7 100%);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--warm-ink);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.5px;
}

.intuition-probe-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.02), transparent);
  transition: left 0.5s ease;
}

.intuition-probe-btn:hover {
  border-color: var(--warm-ink);
  background: linear-gradient(135deg, #fffbf7 0%, #f5ede4 100%);
  color: #6a5a4e;
  box-shadow: 0 4px 16px rgba(138, 122, 110, 0.12);
}

.intuition-probe-btn:hover::before {
  left: 100%;
}

.intuition-probe-btn:active {
  background: linear-gradient(135deg, #f5ede4 0%, #ede5dc 100%);
  border-color: var(--warm-ink);
}

/* Probe Modal */
.probe-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInModal 0.3s ease-out;
}

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

.probe-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  backdrop-filter: blur(2px);
}

.probe-modal-content {
  position: relative;
  background: #ffffff;
  border: 1px solid #efefef;
  border-radius: 16px;
  padding: 32px 36px;
  max-width: 620px;
  width: 92%;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  animation: slideUpModal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUpModal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.probe-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.probe-close:hover {
  color: #1a1a1a;
  background: #f0f0f0;
}

.probe-close:active {
  background: #e8e8e8;
}

.probe-modal-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
  text-align: center;
  color: #666;
  letter-spacing: 1.4px;
  line-height: 1.4;
  text-transform: uppercase;
}

.probe-modal-subtitle {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  color: var(--ink-muted, #999);
  line-height: 1.4;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.probe-scenario-display {
  margin-bottom: 20px;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  border-left: 3px solid #333;
  transition: all 0.25s ease;
}

.scenario-label {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #aaa;
  margin-bottom: 8px;
  font-weight: 600;
  display: block;
}

.scenario-text {
  font-size: var(--font-sm);
  line-height: 1.6;
  color: #333;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.probe-choices {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.probe-choice {
  padding: 16px;
  border: 1px solid #ddd;
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.probe-choice::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: transparent;
  transition: background 0.25s ease;
}

.probe-choice:hover {
  border-color: #999;
  background: #f9f9f9;
}

.probe-choice.selected {
  border-color: #333;
  background: #f5f5f5;
  font-weight: 600;
}

.probe-choice.selected::before {
  background: #333;
}

.choice-label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #333;
  letter-spacing: -0.2px;
  line-height: 1.2;
}

.choice-type {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #aaa;
  margin-bottom: 8px;
  font-weight: 600;
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 3px;
  display: inline-block;
  width: fit-content;
}

.choice-text {
  font-size: 12px;
  line-height: 1.6;
  color: #666;
  font-weight: 400;
  letter-spacing: 0px;
  flex: 1;
  word-spacing: 0.05em;
}

/* Probe Confirmation */
.probe-confirmation {
  animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.probe-confirmation > div {
  text-align: center;
  padding: 12px 14px;
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  letter-spacing: 0px;
}

.probe-confirmation .btn-proceed-forge {
  margin-top: 12px;
}

/* ═══ STEP 2 STYLES ═══ */

.skill-display {
  display: grid;
  gap: 28px;
  margin-bottom: 44px;
}

.skill-item {
  display: grid;
  gap: 10px;
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skill-item-label {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #888;
  font-weight: 600;
}

.skill-item-content {
  padding: 24px 28px;
  background: linear-gradient(135deg, #fafafa 0%, #fcfcfc 100%);
  border: 1px solid #efefef;
  border-left: 5px solid #1a1a1a;
  border-radius: 10px;
  font-size: 15px;
  line-height: 2;
  color: #2a2a2a;
  min-height: 80px;
  font-weight: 400;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  letter-spacing: 0.2px;
}

/* ═══ Editable Skill Fields ═══ */
.skill-editable-input,
.skill-editable-textarea {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  border: 2px solid #d4d4d4;
  border-left: 5px solid #d4726a;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: #222;
  font-family: var(--font-serif);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.skill-editable-input:focus,
.skill-editable-textarea:focus {
  outline: none;
  border-color: #d4726a;
  border-left-color: #d4726a;
  background: linear-gradient(135deg, #ffffff 0%, #fcfcfc 100%);
  box-shadow: 0 4px 12px rgba(212, 114, 106, 0.12);
}

.skill-editable-input::placeholder,
.skill-editable-textarea::placeholder {
  color: #aaa;
}

.skill-editable-textarea {
  min-height: 100px;
  resize: vertical;
}

/* ═══ Skill Preview Modal (Method B) ═══ */
.skill-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.skill-preview-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px;
  font-family: var(--font-serif);
}

.skill-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #eee;
}

.skill-preview-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: #222;
  margin: 0;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  color: #333;
  background: #f5f5f5;
  border-radius: 4px;
}

.preview-section {
  margin-bottom: 32px;
}

.preview-section h3 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.preview-five-layer-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: #999;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 16px;
}

.preview-item {
  margin-bottom: 16px;
}

.preview-item label {
  display: block;
  font-size: var(--font-sm);
  color: #666;
  margin-bottom: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.preview-input,
.preview-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-left: 4px solid #d4726a;
  border-radius: 6px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.6;
  color: #222;
  transition: all 0.3s ease;
}

.preview-input:focus,
.preview-textarea:focus {
  outline: none;
  border-color: #d4726a;
  box-shadow: 0 2px 8px rgba(212, 114, 106, 0.15);
}

.preview-textarea {
  min-height: 80px;
  resize: vertical;
}

/* ─── Ready-to-Use Prompt block in the preview modal ─────────────────
   This is the natural-language artifact the user actually copies into
   ChatGPT / Claude. Same hierarchy as the 5-layer block above, but with
   a parchment tint + green accent so the user reads it as the
   "ready-to-ship" output rather than another structured field. */
.preview-prompt-section {
  margin-top: 28px;
  padding: 20px 22px;
  background: linear-gradient(180deg, #faf6ec 0%, #f4ede0 100%);
  border: 1px solid #e6dcc4;
  border-radius: 10px;
}

.preview-prompt-section h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  font-family: var(--font-serif);
  color: #2a2620;
  margin-bottom: 14px;
}

.preview-prompt-glyph {
  font-size: 17px;
  line-height: 1;
}

.preview-prompt-hint {
  font-size: 12px;
  color: var(--warm-ink);
  font-weight: normal;
  font-style: italic;
}

.preview-prompt-textarea {
  width: 100%;
  min-height: 180px;
  padding: 14px 16px;
  background: #fffdf7;
  border: 1px solid #d6c7a4;
  border-left: 4px solid #6b9d5c;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: var(--font-sm);
  line-height: 1.65;
  color: #2a2620;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.preview-prompt-textarea:focus {
  outline: none;
  border-color: #6b9d5c;
  box-shadow: 0 2px 10px rgba(107, 157, 92, 0.18);
}

.preview-prompt-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  gap: 14px;
  flex-wrap: wrap;
}

.preview-prompt-note {
  font-size: 12px;
  color: var(--warm-ink);
  line-height: 1.5;
  flex: 1;
  min-width: 200px;
}

.preview-prompt-copy {
  background: #6b9d5c;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-family: var(--font-serif);
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}

.preview-prompt-copy:hover {
  background: #5a8b4d;
  transform: translateY(-1px);
}

.preview-prompt-copy.copied {
  background: #4f7e44;
}

.five-layer-item {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f8f8;
  border-radius: 8px;
  border-left: 4px solid var(--coral);
}

.layer-label {
  font-size: 12px;
  font-weight: bold;
  color: #d4726a;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.layer-content {
  font-size: 14px;
  line-height: 1.7;
  color: #444;
  white-space: pre-wrap;
  word-break: break-word;
}

.preview-loading {
  text-align: center;
  padding: 40px;
  color: #999;
}

.spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #d4726a;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.preview-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.preview-actions button {
  padding: 12px 16px;
  border-radius: 6px;
  border: none;
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.skill-category-section {
  margin-bottom: 44px;
  padding: 32px;
  background: linear-gradient(135deg, #fafafa 0%, #fcfcfc 100%);
  border-radius: 12px;
  border: 1px solid #efefef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.domain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* ═══ Domain Choice Cards — Editorial Magazine ═══ */
.domain-choice {
  padding: 12px 10px;
  border: 1px solid #ddd;
  background: #ffffff;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.25s ease;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.2px;
  line-height: 1.3;
}

.domain-choice::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.02);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.domain-choice:hover {
  border-color: #999;
  background: #f9f9f9;
  color: #333;
}

.domain-choice:hover::before {
  opacity: 1;
}

.domain-choice.selected {
  border-color: #333;
  background: #1a1a1a;
  color: white;
  font-weight: 700;
}

.skill-feedback-section {
  margin-bottom: 44px;
}

.skill-feedback-section .minimal-label {
  margin-bottom: 12px;
}

.skill-confirmation-minimal {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.btn-confirm-skill {
  padding: 14px 40px;
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.3px;
}

.btn-confirm-skill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-confirm-skill:hover {
  background: white;
  color: #1a1a1a;
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.15);
  transform: translateY(-3px);
}

.btn-confirm-skill:hover::before {
  left: 100%;
}

.btn-confirm-skill:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 26, 26, 0.1);
}

.btn-proceed-forge {
  padding: 10px 28px;
  margin-top: 12px;
  border: none;
  background: #1a1a1a;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: 11px;
  transition: all 0.25s ease;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.btn-proceed-forge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  transition: left 0.5s ease;
}

.btn-proceed-forge:hover {
  background: #333;
}

.btn-proceed-forge:hover::before {
  left: 100%;
}

.btn-proceed-forge:active {
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════
   ENHANCED SKILL CARDS - Star/Download System
   ═══════════════════════════════════════════════════════ */

.skill-card {
  position: relative;
  border: 1px solid #d4c8bc;
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(135deg, #faf7f2 0%, #f5f0eb 100%);
  transition: all 0.3s ease;
  cursor: pointer;
}

.skill-card:hover {
  border-color: #c4b8ac;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Soul Hash Display */
.skill-card-hash {
  margin: 8px 0;
  padding: 8px;
  background: rgba(212, 200, 188, 0.15);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-xs);
  color: var(--warm-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soul-hash {
  font-size: var(--font-xs);
  color: #999;
  letter-spacing: 0.5px;
}

/* Skill Card Actions */
.skill-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(212, 200, 188, 0.3);
}

.btn-star,
.btn-download,
.btn-view-full {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(212, 200, 188, 0.1);
  border: 1px solid rgba(212, 200, 188, 0.3);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

.btn-star:hover {
  border-color: #d4a43c;
  background: rgba(212, 164, 60, 0.08);
}

.btn-star:active {
  background: rgba(212, 164, 60, 0.12);
  border-color: #d4a43c;
}

.btn-star:hover .star-icon {
  color: #d4a43c;
  transform: scale(1.3) rotateZ(15deg);
  text-shadow: 0 0 12px rgba(212, 164, 60, 0.3);
}

.btn-download:hover,
.btn-view-full:hover {
  border-color: var(--warm-ink);
  background: rgba(138, 122, 110, 0.08);
}

.btn-download:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(212, 200, 188, 0.05);
}

.btn-download:disabled:hover {
  background: rgba(212, 200, 188, 0.08);
  border-color: rgba(212, 200, 188, 0.3);
}

.star-icon {
  font-size: 18px;
  transition: color 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease;
  letter-spacing: 0;
  color: #d4a43c;
}

.download-icon {
  font-size: 14px;
  color: var(--warm-ink);
  transition: color 0.2s ease;
}

.btn-download:not(:disabled):hover .download-icon {
  color: #6b5b4f;
  transform: translateY(2px);
}

.star-count,
.download-count {
  font-size: 11px;
  color: #999;
  min-width: 20px;
  text-align: right;
  font-weight: 400;
}

.btn-view-full {
  margin-left: auto;
  padding: 6px 8px;
  font-size: 16px;
  border: none;
  color: #666;
}

/* Skill Modal */
.skill-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.skill-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.skill-modal-content {
  position: relative;
  background: white;
  border-radius: 4px;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 10000;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: #333;
}

.modal-body {
  font-family: 'Noto Serif SC', serif;
  line-height: 1.8;
  color: #333;
}

.modal-body h1 {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  margin-bottom: 8px;
}

.modal-body h2 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  margin-top: 24px;
  margin-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 8px;
}

.modal-body code {
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

.modal-body strong {
  color: #000;
  font-weight: 700;
}

.modal-body em {
  color: #666;
  font-style: italic;
}

.modal-body p {
  margin-bottom: 12px;
}

.modal-body ul {
  margin-left: 20px;
  margin-bottom: 12px;
}

.modal-body li {
  margin-bottom: 6px;
}

.modal-body a {
  color: #0066cc;
  text-decoration: none;
}

.modal-body a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .skill-card {
    padding: 12px;
  }

  .skill-card-actions {
    flex-wrap: wrap;
  }

  .btn-view-full {
    margin-left: 0;
    flex-grow: 1;
  }

  .skill-modal-content {
    margin: 20px;
    max-width: calc(100% - 40px);
    padding: 24px;
  }

  /* Larger touch targets for action buttons on mobile */
  .btn-star,
  .btn-download,
  .btn-view-full {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }

  /* Skill detail modal: full-width on small screens */
  .skill-detail-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90dvh !important;
    border-radius: 16px 16px 0 0;
    margin-top: auto;
  }

  .skill-detail-overlay {
    align-items: flex-end;
  }

  .skill-detail-header {
    padding: 20px 20px 12px;
  }

  .skill-detail-body {
    padding: 0 20px 20px;
  }
}

/* ═══════════════════════════════════════════════════════════
   DOMAIN SKILL MODAL STYLES
   ═══════════════════════════════════════════════════════════ */

.domain-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.domain-modal-content {
  position: relative;
  background: white;
  border-radius: 8px;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 10001;
}

.domain-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 32px;
  height: 32px;
}

.domain-modal-close:hover {
  color: #333;
}

.domain-modal-body {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.8;
  color: #333;
  font-size: var(--font-sm);
}

.domain-modal-body h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  margin-bottom: 8px;
  font-weight: 700;
}

.domain-modal-body h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
  font-weight: 700;
}

.domain-modal-body h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  margin-top: 12px;
  margin-bottom: 8px;
}

.domain-modal-body em {
  font-style: italic;
  color: #666;
}

.domain-modal-body strong {
  font-weight: 700;
  color: #000;
}

.domain-modal-body code {
  background: #f5f5f5;
  padding: 2px 4px;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.domain-modal-body p {
  margin-bottom: 12px;
}

/* ═══════════════ DASHBOARD CARD ═══════════════ */

.dashboard-card {
  background: linear-gradient(135deg, #f5f5f0 0%, #ffffff 100%);
  border: 2px dashed #999 !important;
  transition: all 0.3s ease;
}

.dashboard-card:hover {
  border-color: #222 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.dashboard-card .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.dashboard-card .card-number {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}

.dashboard-card .card-header h3 {
  font-size: 12px;
  font-weight: bold;
  color: #666;
  letter-spacing: 1px;
  margin: 0;
}

.dashboard-card .card-content {
  flex: 1;
  margin-bottom: 15px;
}

.dashboard-card h2 {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #222;
  min-height: 32px;
  line-height: 1.4;
}

.dashboard-card .soul-hash {
  font-size: var(--font-xs);
  color: #999;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 3px;
}

.metric-small {
  text-align: center;
  padding: 6px;
}

.metric-small .icon {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.metric-small .value {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: #222;
}

.dashboard-card .card-footer {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
}

.btn-small {
  flex: 1;
  padding: 8px 6px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  color: #222;
  transition: all 0.2s;
  font-family: 'JetBrains Mono', monospace;
}

.btn-small:hover {
  background: #222;
  color: white;
  border-color: #222;
}

/* ═══════════════════════════════════════════════════════
   COMMEMORATIVE CARD - Creator's Certificate
   ═══════════════════════════════════════════════════════ */

.commemorative-card {
  background: white;
  max-width: 1050px;
  margin: 0 auto 40px auto;
  text-align: center;
  font-family: 'Playfair Display', serif;
  padding: 18px;
}

.card-border-outer {
  border: 4px solid #222;
  padding: 10px;
  background: white;
}

.card-border-inner {
  border: 1px solid #222;
  padding: 32px 60px;
  background: linear-gradient(135deg, #f5f5f0 0%, #ffffff 100%);
}

.card-title-main {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  margin-bottom: 8px;
  font-family: 'Playfair Display', serif;
  letter-spacing: 2px;
}

.card-header {
  font-size: 12px;
  font-style: italic;
  color: #999;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}

.card-divider-top {
  width: 100%;
  height: 1px;
  background: #ddd;
  margin: 0 0 16px 0;
}

.card-crest {
  font-size: 40px;
  margin: 12px 0;
  line-height: 1;
}

.card-divider-line {
  width: 100%;
  height: 1px;
  background: #ddd;
  margin: 14px 0;
}

.card-creator-role {
  font-size: 16px;
  font-weight: bold;
  color: #222;
  margin: 12px 0 6px 0;
  font-family: 'Playfair Display', serif;
}

.card-skill-name {
  font-size: var(--font-sm);
  font-style: italic;
  color: #666;
  margin: 6px 0;
  font-family: 'Playfair Display', serif;
}

.card-meta {
  font-size: 11px;
  color: #999;
  margin: 4px 0;
  line-height: 1.6;
  font-family: 'JetBrains Mono', monospace;
}

.card-meta p {
  margin: 2px 0;
}

.card-rights {
  font-size: var(--font-xs);
  color: #bbb;
  margin: 4px 0;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
}

.card-soul-hash {
  font-size: var(--font-sm);
  color: #222;
  margin: 6px 0;
  word-break: break-all;
  font-family: 'JetBrains Mono', monospace;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.card-forged-date {
  font-size: 11px;
  color: #666;
  margin: 4px 0;
  font-family: 'JetBrains Mono', monospace;
}

.card-divider-bottom {
  width: 100%;
  height: 1px;
  background: #ddd;
  margin: 4px 0;
}

.card-footer {
  font-size: var(--font-xs);
  color: #222;
  font-weight: bold;
  letter-spacing: 0.5px;
  font-family: 'JetBrains Mono', monospace;
}

/* Forge Completion Section */
.forge-completion-section {
  text-align: center;
  padding: 60px 30px;
}

.forge-completion-emoji {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
}

.forge-completion-title {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  margin-bottom: 8px;
  font-family: 'Playfair Display', serif;
}

.forge-completion-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 40px;
  font-family: 'Playfair Display', serif;
}

/* ─── Post-forge next-step CTA: the one thing we want users to do ─── */
.completion-next-step {
  margin-top: 36px;
  padding: 22px 20px;
  background: linear-gradient(135deg, var(--wc-cream, #faf5ed) 0%, var(--wc-sand, #f0e8d4) 100%);
  border: 1.5px solid var(--wc-amber, #f0d090);
  border-radius: 14px;
  text-align: center;
}
.completion-next-step .next-step-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--wc-muted, var(--warm-ink));
  margin-bottom: 8px;
}
.completion-next-step .next-step-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--wc-charcoal, #3c3028);
  margin-bottom: 16px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.completion-next-step .next-step-cta {
  padding: 14px 28px;
  min-height: 48px;
  background: var(--wc-ink, #2a2018);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 3px 14px rgba(60,48,40,0.18);
}
.completion-next-step .next-step-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(60,48,40,0.25);
}

.forge-completion-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

.forge-completion-actions .action-btn {
  padding: 12px 24px;
  background: #222;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}

.forge-completion-actions .action-btn:hover {
  background: #444;
}

.forge-completion-actions .action-btn-secondary {
  background: white;
  color: #222;
  border: 1px solid #222;
}

.forge-completion-actions .action-btn-secondary:hover {
  background: #f5f5f5;
}

/* 响应式 - 移动设备上隐藏 Dashboard 卡片 */
@media (max-width: 768px) {
  #dashboard-card {
    display: none !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  FORGE UI REDESIGN V2 — Watercolor / Organic / Mobile-First      ║
   ║  Palette: William Benson watercolour circles                      ║
   ║  Mood: dawn rose · golden amber · dusk sage · twilight lavender   ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─── Watercolour Palette Variables ─── */
:root {
  --wc-cream:        #faf5ed;   /* morning parchment */
  --wc-sand:         #f0e8d4;   /* warm sand */
  --wc-rose:         #f0d4c8;   /* dawn rose */
  --wc-coral:        #e4a090;   /* dusk coral */
  --wc-amber:        #f0d090;   /* golden hour amber */
  --wc-sage:         #c4d4b4;   /* morning sage */
  --wc-lavender:     #d4c8e4;   /* twilight lavender */
  --wc-sky:          #c8dce8;   /* pale morning sky */
  --wc-moss:         #a8bf9c;   /* deep sage / moss */
  --wc-ink:          #2a2018;   /* warm dark ink */
  --wc-charcoal:     #3c3028;   /* warm charcoal */
  --wc-muted:        var(--warm-ink);   /* warm stone */
  --wc-rule:         rgba(60,48,40,0.12);
  --wc-rule-light:   rgba(60,48,40,0.07);
}

/* ─────────────────────────────────────────────────────────────────
   FORGE OVERLAY & MODAL
   Desktop: centred card.  Mobile: bottom sheet slides up.
   ───────────────────────────────────────────────────────────────── */

/* On mobile, anchor the modal to the bottom */
@media (max-width: 559px) {
  .forge-overlay {
    align-items: flex-end !important;
    background: rgba(42, 32, 24, 0.45) !important;
  }

  .forge-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px 22px 0 0 !important;
    max-height: 93dvh !important;
    padding: 10px 18px 44px !important;
    /* organic paper shadow */
    box-shadow: 0 -6px 50px rgba(60,48,40,0.20), 0 -1px 0 rgba(60,48,40,0.07) !important;
    background: var(--wc-cream) !important;
    border: none !important;
  }

  /* drag-pill affordance */
  .forge-modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--wc-rule);
    border-radius: 2px;
    margin: 0 auto 20px;
  }
}

/* Desktop refinements */
@media (min-width: 560px) {
  .forge-modal {
    background: var(--wc-cream) !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 60px rgba(60,48,40,0.16) !important;
    padding: 36px 40px 44px !important;
    max-height: 88dvh !important;
  }
}

/* ─── Forge Close Button ─── */
.forge-close {
  width: 30px !important;
  height: 30px !important;
  background: var(--wc-sand) !important;
  border-radius: 50% !important;
  color: var(--wc-muted) !important;
  font-size: 13px !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s, color 0.2s !important;
  top: 14px !important;
  right: 16px !important;
}
.forge-close:hover {
  background: var(--wc-rose) !important;
  color: var(--wc-ink) !important;
}

/* ─── Header ─── */
.forge-header {
  border-bottom: 1px solid var(--wc-rule-light) !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
}
/* Header is redundant on Step 2 — the page already has its own title */
.forge-modal:has(#forgePage2.active) .forge-header {
  display: none !important;
}
.forge-title {
  color: var(--wc-muted) !important;
  font-size: 9px !important;
  letter-spacing: 2.2px !important;
}
.forge-subtitle {
  color: var(--wc-muted) !important;
  font-size: 11px !important;
  margin-top: 3px !important;
}

/* ─── Step Progress Indicator ─── */
.forge-steps {
  gap: 0 !important;
  margin-bottom: 20px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.forge-step {
  opacity: 0.3 !important;
  flex: 0 0 auto !important;
  gap: 3px !important;
}
.forge-step.active   { opacity: 1 !important; }
.forge-step.completed{ opacity: 0.6 !important; }

/* Circular warm dot */
.step-num {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--wc-sand) !important;
  color: var(--wc-muted) !important;
  border: 1.5px solid rgba(60,48,40,0.16) !important;
  transition: all 0.3s ease !important;
}
.forge-step.active   .step-num {
  background: var(--wc-charcoal) !important;
  color: var(--wc-cream) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(42,32,24,0.22) !important;
}
.forge-step.completed .step-num {
  background: var(--wc-sage) !important;
  color: var(--wc-charcoal) !important;
  border-color: transparent !important;
}

/* Step label — hidden on very small screens */
.step-label {
  font-size: 6px !important;
  letter-spacing: 0.6px !important;
  color: var(--wc-muted) !important;
}
@media (max-width: 360px) { .step-label { display: none !important; } }

/* Connector line */
.forge-step-line {
  display: block !important;
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 1px !important;
  background: var(--wc-rule) !important;
  margin: 0 2px 16px !important;
}
@media (max-width: 360px) {
  .forge-step-line { margin-bottom: 0 !important; }
}

/* ─── Page-in animation ─── */
@keyframes wc-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.forge-page.active { animation: wc-page-in 0.32s ease-out; }

/* ─── Page titles ─── */
.forge-page-title {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 2px !important;
  color: var(--wc-muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 3px !important;
}
.forge-page-subtitle {
  font-size: 11px !important;
  color: var(--wc-muted) !important;
  margin-bottom: 18px !important;
  line-height: 1.5 !important;
}

/* ─── Section labels ─── */
.minimal-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 1.4px !important;
  color: var(--wc-muted) !important;
  margin-bottom: 9px !important;
}
.minimal-instruction {
  color: var(--wc-muted) !important;
  font-size: 12px !important;
}

/* ─── Two-column input row: stacks on very narrow phones ─── */
.minimal-inputs {
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: 1fr !important;
}
@media (min-width: 420px) {
  .minimal-inputs { grid-template-columns: 1fr 1fr !important; }
}

/* ─── All inputs / textareas — organic warm style ─── */
.minimal-input,
.minimal-textarea,
.forge-input,
.forge-textarea,
.skill-editable-input,
.skill-editable-textarea,
.preview-input,
.preview-textarea {
  background: rgba(255,255,255,0.72) !important;
  border: 1.5px solid rgba(60,48,40,0.14) !important;
  border-radius: 10px !important;
  color: var(--wc-charcoal) !important;
  font-family: var(--font-serif) !important;
  font-size: 16px !important;
  padding: 11px 14px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  transition: border-color 0.22s, background 0.22s, box-shadow 0.22s !important;
  -webkit-appearance: none !important;
}
@media (min-width: 1024px) {
  .minimal-input,
  .minimal-textarea,
  .forge-input,
  .forge-textarea,
  .skill-editable-input,
  .skill-editable-textarea,
  .preview-input,
  .preview-textarea {
    font-size: 13px !important;
  }
}
.minimal-input::placeholder,
.minimal-textarea::placeholder,
.forge-input::placeholder,
.skill-editable-input::placeholder,
.skill-editable-textarea::placeholder {
  color: rgba(138,124,110,0.5) !important;
}
.minimal-input:focus,
.minimal-textarea:focus,
.forge-input:focus,
.skill-editable-input:focus,
.skill-editable-textarea:focus {
  outline: none !important;
  border-color: var(--wc-coral) !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 0 0 3px rgba(228,160,144,0.18) !important;
}

/* ─── Intuition Probe CTA — warm amber-to-rose gradient ─── */
.intuition-probe-btn {
  width: 100% !important;
  padding: 18px 16px !important;
  background: linear-gradient(145deg, var(--wc-amber) 0%, var(--wc-rose) 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  color: var(--wc-charcoal) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.2px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  box-shadow: 0 4px 20px rgba(228,160,144,0.32) !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
}
.intuition-probe-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(228,160,144,0.42) !important;
}
.intuition-probe-btn:active { transform: translateY(0) !important; }
.intuition-probe-btn > div:first-child { font-size: 22px !important; margin-bottom: 0 !important; }
.intuition-probe-btn > div:last-child {
  font-size: 10px !important;
  color: var(--wc-muted) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
}

/* ─── Five-Layer Generation (Step 2) ─── */
.five-layer-generation { gap: 8px !important; }

.layer-item {
  background: rgba(255,255,255,0.58) !important;
  border: 1px solid rgba(60,48,40,0.1) !important;
  border-radius: 10px !important;
  padding: 12px 13px !important;
  grid-template-columns: 32px 1fr !important;
  gap: 10px !important;
  transition: all 0.3s ease !important;
}
.layer-item.complete {
  background: linear-gradient(135deg,
    rgba(196,212,180,0.28) 0%,
    rgba(196,212,180,0.10) 100%) !important;
  border-color: rgba(100,140,80,0.22) !important;
}
.layer-status { font-size: 17px !important; }
.layer-name {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.4px !important;
  color: var(--wc-charcoal) !important;
  white-space: nowrap !important;
}
.layer-subtitle {
  font-size: 10px !important;
  color: #bbb !important;
  margin-top: 1px !important;
}
.layer-progress {
  height: 3px !important;
  background: rgba(60,48,40,0.1) !important;
  border-radius: 2px !important;
  margin-top: 5px !important;
}
.progress-bar {
  background: linear-gradient(90deg, var(--wc-coral), var(--wc-amber)) !important;
  box-shadow: none !important;
}
.forge-ready {
  background: linear-gradient(135deg,
    rgba(196,212,180,0.38) 0%,
    rgba(240,208,144,0.22) 100%) !important;
  border: 1.5px solid rgba(100,140,80,0.30) !important;
  border-radius: 12px !important;
  color: var(--wc-charcoal) !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
}

/* ─── Skill display / Review (Step 3) ─── */
.skill-display { gap: 14px !important; margin-bottom: 20px !important; }
.skill-item-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 1.2px !important;
  color: var(--wc-muted) !important;
}
.skill-item-content {
  background: rgba(255,255,255,0.60) !important;
  border: 1px solid rgba(60,48,40,0.12) !important;
  border-left: 3px solid var(--wc-sage) !important;
  border-radius: 10px !important;
  padding: 13px 15px !important;
  font-size: 13px !important;
  line-height: 1.68 !important;
  color: var(--wc-charcoal) !important;
  box-shadow: none !important;
  min-height: unset !important;
}
/* Editable fields — coral left border */
.skill-editable-input,
.skill-editable-textarea {
  border-left: 3px solid var(--wc-coral) !important;
}
.skill-editable-textarea { min-height: 80px !important; }

/* ─── Domain Choice Grid ─── */
.skill-category-section {
  background: rgba(255,255,255,0.48) !important;
  border: 1px solid var(--wc-rule-light) !important;
  border-radius: 14px !important;
  padding: 16px 14px !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
}

/* Responsive columns: 2 → 3 → 5 */
#domainGridStep2.domain-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 7px !important;
}
@media (min-width: 380px) {
  #domainGridStep2.domain-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 520px) {
  #domainGridStep2.domain-grid { grid-template-columns: repeat(5, 1fr) !important; }
}

.domain-choice {
  padding: 10px 6px !important;
  border: 1.5px solid rgba(60,48,40,0.10) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.65) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--wc-charcoal) !important;
  flex-direction: column !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
  -webkit-user-select: none;
  user-select: none;
}
.domain-choice:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 14px rgba(60,48,40,0.10) !important;
  border-color: rgba(60,48,40,0.22) !important;
}

/* Per-domain watercolour tints */
.domain-choice[data-domain="narrative"]  { background: rgba(240,208,144,0.26) !important; }
.domain-choice[data-domain="design"]     { background: rgba(228,160,144,0.22) !important; }
.domain-choice[data-domain="visual"]     { background: rgba(196,212,180,0.24) !important; }
.domain-choice[data-domain="experience"] { background: rgba(240,212,200,0.22) !important; }
.domain-choice[data-domain="sound"]      { background: rgba(212,200,228,0.24) !important; }
.domain-choice[data-domain="ideas"]      { background: rgba(248,236,160,0.26) !important; }
.domain-choice[data-domain="history"]    { background: rgba(228,210,178,0.24) !important; }
.domain-choice[data-domain="fun"]        { background: rgba(240,200,208,0.24) !important; }
.domain-choice[data-domain="safety"]     { background: rgba(200,220,232,0.24) !important; }
.domain-choice[data-domain="science"]    { background: rgba(196,228,218,0.24) !important; }

.domain-choice.selected {
  background: var(--wc-charcoal) !important;
  border-color: var(--wc-charcoal) !important;
  color: var(--wc-cream) !important;
  transform: scale(0.97) !important;
  box-shadow: 0 2px 10px rgba(60,48,40,0.24) !important;
}

/* ─── Rights Tags ─── */
.forge-tags { gap: 7px !important; }
.forge-tag {
  padding: 6px 14px !important;
  border: 1.5px solid rgba(60,48,40,0.14) !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  color: var(--wc-muted) !important;
  background: rgba(255,255,255,0.65) !important;
  transition: all 0.2s !important;
  -webkit-user-select: none;
  user-select: none;
}
.forge-tag:hover { border-color: var(--wc-coral) !important; color: var(--wc-charcoal) !important; }
.forge-tag.selected {
  background: var(--wc-charcoal) !important;
  border-color: var(--wc-charcoal) !important;
  color: var(--wc-cream) !important;
}

/* ─── Oath / Covenant ─── */
.forge-oath {
  background: linear-gradient(135deg,
    rgba(240,208,144,0.18) 0%,
    rgba(240,212,200,0.18) 100%) !important;
  border: 1px solid rgba(60,48,40,0.10) !important;
  border-radius: 12px !important;
  padding: 15px 16px !important;
  margin-bottom: 18px !important;
}
.oath-title {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 1.8px !important;
  color: var(--wc-muted) !important;
  margin-bottom: 12px !important;
}
.oath-check {
  font-size: 12px !important;
  color: var(--wc-charcoal) !important;
  margin-bottom: 9px !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
.oath-check:last-child { margin-bottom: 0 !important; }

/* custom checkbox */
.oath-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px !important;
  height: 16px !important;
  border: 1.5px solid rgba(60,48,40,0.28) !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,0.8) !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s !important;
  position: relative !important;
}
.oath-check input[type="checkbox"]:checked {
  background: var(--wc-charcoal) !important;
  border-color: var(--wc-charcoal) !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3.5 3.5 6.5-7' stroke='%23faf5ed' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 12px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ─── Creator Rights section ─── */
.forge-creator-rights {
  background: rgba(255,255,255,0.50) !important;
  border: 1px solid var(--wc-rule-light) !important;
  border-radius: 12px !important;
  padding: 15px 15px !important;
  margin-bottom: 18px !important;
}
.rights-title {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 1.8px !important;
  color: var(--wc-muted) !important;
  margin-bottom: 14px !important;
}
.forge-field { margin-bottom: 14px !important; }
.forge-field:last-child { margin-bottom: 0 !important; }
.forge-field label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 1.2px !important;
  color: var(--wc-muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

/* ─── Navigation buttons ─── */
.forge-nav {
  display: flex !important;
  gap: 9px !important;
  justify-content: flex-end !important;
  margin-top: 20px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--wc-rule) !important;
}

.forge-prev {
  padding: 9px 18px !important;
  background: transparent !important;
  border: 1.5px solid rgba(60,48,40,0.20) !important;
  border-radius: 24px !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  color: var(--wc-muted) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.forge-prev:hover {
  border-color: var(--wc-muted) !important;
  color: var(--wc-charcoal) !important;
}

.forge-next,
.forge-publish {
  padding: 10px 22px !important;
  background: var(--wc-charcoal) !important;
  border: none !important;
  border-radius: 24px !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--wc-cream) !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
}
.forge-next:hover,
.forge-publish:hover {
  background: var(--wc-ink) !important;
  box-shadow: 0 3px 16px rgba(42,32,24,0.28) !important;
  transform: translateY(-1px) !important;
}
.forge-publish:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Preview / Confirm / Secondary buttons */
.btn-confirm-skill {
  padding: 10px 20px !important;
  background: var(--wc-charcoal) !important;
  border: none !important;
  border-radius: 24px !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--wc-cream) !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
  white-space: nowrap !important;
}
.btn-confirm-skill:hover {
  background: var(--wc-ink) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 14px rgba(42,32,24,0.25) !important;
}

.btn-secondary,
#btnRegenerateSkill {
  padding: 9px 18px !important;
  background: rgba(255,255,255,0.60) !important;
  border: 1.5px solid rgba(60,48,40,0.18) !important;
  border-radius: 24px !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
  color: var(--wc-charcoal) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.btn-secondary:hover,
#btnRegenerateSkill:hover {
  border-color: var(--wc-coral) !important;
  background: rgba(240,212,200,0.32) !important;
  color: var(--wc-ink) !important;
}
#btnRegenerateSkill { width: 100% !important; margin-top: 10px !important; text-align: center !important; }

/* Skill confirmation row — side by side */
.skill-confirmation-minimal {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
  margin-top: 16px !important;
}
.skill-confirmation-minimal .btn-secondary { margin-top: 0 !important; }
@media (max-width: 360px) {
  .skill-confirmation-minimal { grid-template-columns: 1fr !important; }
}

/* ─── Skill feedback section ─── */
.skill-feedback-section { margin-bottom: 16px !important; }

/* ─── Creator Card (Step 4 completion) ─── */
.forge-completion-section { animation: wc-page-in 0.4s ease-out; }

.commemorative-card {
  max-width: 270px !important;
  margin: 20px auto !important;
}
.card-border-outer {
  background: var(--wc-cream) !important;
  border: 2px solid var(--wc-charcoal) !important;
  padding: 4px !important;
  border-radius: 4px !important;
}
.card-border-inner {
  border: 1px solid rgba(60,48,40,0.22) !important;
  padding: 22px 18px !important;
  background: linear-gradient(158deg, #fdf9f3 0%, var(--wc-cream) 55%, #f4eedf 100%) !important;
  border-radius: 2px !important;
  text-align: center !important;
}

/* "The 42 Post" — one line on desktop, compact on mobile */
.card-title-main {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--wc-charcoal) !important;
  line-height: 1.15 !important;
  margin-bottom: 5px !important;
  /* Force single line on narrower card */
  white-space: nowrap !important;
}
.card-header {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 10px !important;
  color: var(--wc-muted) !important;
  margin-bottom: 12px !important;
}
.card-divider-top,
.card-divider-line,
.card-divider-bottom {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(60,48,40,0.22), transparent) !important;
  margin: 10px 0 !important;
}
.card-crest { font-size: 22px !important; margin: 6px 0 !important; }
.card-creator-role {
  font-family: var(--font-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--wc-charcoal) !important;
  margin-bottom: 2px !important;
}
.card-skill-name {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 11px !important;
  color: var(--wc-muted) !important;
  margin-bottom: 6px !important;
}
.card-meta,
.card-rights {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  color: var(--wc-muted) !important;
  margin: 3px 0 !important;
}
/* Merged duplicate .card-soul-hash definition - see line 8610 for main definition */
.card-forged-date {
  font-family: var(--font-mono) !important;
  font-size: 7px !important;
  color: rgba(138,124,110,0.65) !important;
  margin: 3px 0 !important;
}
.card-footer {
  font-family: var(--font-mono) !important;
  font-size: 7px !important;
  letter-spacing: 1.5px !important;
  color: rgba(138,124,110,0.45) !important;
  margin-top: 7px !important;
}

/* Download button */
#btnDownloadCertificate {
  background: var(--btn-charcoal) !important;
  color: var(--wc-cream) !important;
  padding: 11px 28px !important;
  border-radius: 24px !important;
  border: none !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
}
#btnDownloadCertificate:hover {
  background: var(--btn-charcoal-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(42,32,24,0.24) !important;
}

/* Completion actions */
.forge-completion-actions { gap: 9px !important; }
.action-btn {
  padding: 9px 18px !important;
  border: 1.5px solid rgba(60,48,40,0.18) !important;
  background: rgba(255,255,255,0.60) !important;
  border-radius: 24px !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
  color: var(--wc-charcoal) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.action-btn:hover {
  border-color: var(--wc-charcoal) !important;
  background: var(--wc-sand) !important;
}
.forge-completion-actions .action-btn-secondary {
  background: rgba(255,255,255,0.60) !important;
  color: var(--wc-charcoal) !important;
  border: 1.5px solid rgba(60,48,40,0.18) !important;
}
@media (max-width: 380px) {
  .forge-completion-actions { flex-direction: column !important; }
}

/* ─────────────────────────────────────────────────────────────────
   PROBE MODAL — Intuition Probe dialog
   Mobile: bottom sheet.  Desktop: centred.
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 559px) {
  .probe-modal {
    align-items: flex-end !important;
  }
  .probe-modal-content {
    border-radius: 22px 22px 0 0 !important;
    padding: 10px 18px 44px !important;
    max-height: 92dvh !important;
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: 0 -6px 50px rgba(60,48,40,0.20) !important;
    background: var(--wc-cream) !important;
    border: none !important;
  }
  .probe-modal-content::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--wc-rule);
    border-radius: 2px;
    margin: 0 auto 16px;
  }
}
@media (min-width: 560px) {
  .probe-modal-content {
    background: var(--wc-cream) !important;
    border-radius: 18px !important;
    border: none !important;
    padding: 32px 36px 40px !important;
    box-shadow: 0 12px 60px rgba(60,48,40,0.16) !important;
  }
}

.probe-modal-overlay {
  background: rgba(42,32,24,0.40) !important;
  backdrop-filter: blur(5px) !important;
}

.probe-close {
  width: 28px !important;
  height: 28px !important;
  background: var(--wc-sand) !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  color: var(--wc-muted) !important;
  transition: background 0.2s !important;
  top: 12px !important;
  right: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}
.probe-close:hover {
  background: var(--wc-rose) !important;
  color: var(--wc-ink) !important;
}

.probe-modal-title {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: var(--wc-muted) !important;
  margin-bottom: 4px !important;
}

.probe-modal-subtitle {
  font-family: var(--font-serif) !important;
  font-size: 12px !important;
  color: var(--wc-ink) !important;
  opacity: 0.65;
  border-bottom: 1px solid var(--wc-rule) !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
}

.probe-scenario-display {
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(60,48,40,0.12) !important;
  border-left: 3px solid var(--wc-amber) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
}
.scenario-label {
  font-family: var(--font-mono) !important;
  font-size: 7px !important;
  letter-spacing: 1px !important;
  color: var(--wc-muted) !important;
  margin-bottom: 5px !important;
}
.scenario-text {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--wc-charcoal) !important;
}

/* Probe choice cards */
.probe-choices { gap: 8px !important; }
.probe-choice {
  border: 1.5px solid rgba(60,48,40,0.11) !important;
  border-radius: 12px !important;
  padding: 13px 14px !important;
  background: rgba(255,255,255,0.60) !important;
  min-height: unset !important;
  flex-direction: column !important;
  gap: 4px !important;
  transition: all 0.22s ease !important;
  -webkit-user-select: none;
  user-select: none;
}
.probe-choice::before { display: none !important; }
.probe-choice:hover {
  border-color: rgba(60,48,40,0.26) !important;
  background: rgba(255,255,255,0.88) !important;
  transform: translateX(3px) !important;
  box-shadow: none !important;
}
/* Per-choice watercolour tints */
.probe-choice:nth-child(1) { background: rgba(196,212,180,0.20) !important; }
.probe-choice:nth-child(2) { background: rgba(200,220,232,0.20) !important; }
.probe-choice:nth-child(3) { background: rgba(212,200,228,0.20) !important; }
.probe-choice.selected {
  transform: translateX(3px) !important;
  box-shadow: none !important;
}
.probe-choice.selected:nth-child(1) {
  background: rgba(196,212,180,0.52) !important;
  border-color: var(--wc-moss) !important;
}
.probe-choice.selected:nth-child(2) {
  background: rgba(200,220,232,0.52) !important;
  border-color: #6a9aae !important;
}
.probe-choice.selected:nth-child(3) {
  background: rgba(212,200,228,0.52) !important;
  border-color: #8a7aab !important;
}

.choice-label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--wc-charcoal) !important;
  margin-bottom: 0 !important;
}
.choice-type {
  display: inline-block !important;
  font-family: var(--font-mono) !important;
  font-size: 7px !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  color: var(--wc-muted) !important;
  background: rgba(60,48,40,0.07) !important;
  padding: 2px 7px !important;
  border-radius: 8px !important;
  margin-bottom: 4px !important;
  width: fit-content !important;
}
.choice-text {
  font-family: var(--font-serif) !important;
  font-size: 12px !important;
  line-height: 1.62 !important;
  color: var(--wc-charcoal) !important;
}

/* Probe confirmation */
.probe-confirmation > div {
  background: linear-gradient(135deg,
    rgba(196,212,180,0.38) 0%,
    rgba(240,208,144,0.22) 100%) !important;
  border: 1px solid rgba(100,140,80,0.26) !important;
  border-radius: 12px !important;
  color: var(--wc-charcoal) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}
.btn-proceed-forge {
  margin-top: 10px !important;
  padding: 9px 24px !important;
  background: var(--wc-charcoal) !important;
  color: var(--wc-cream) !important;
  border: none !important;
  border-radius: 20px !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: all 0.22s !important;
}
.btn-proceed-forge:hover {
  background: var(--wc-ink) !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────────
   SKILL PREVIEW MODAL — same bottom-sheet pattern
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 559px) {
  .skill-preview-modal {
    align-items: flex-end !important;
  }
  .skill-preview-container {
    border-radius: 22px 22px 0 0 !important;
    padding: 24px 18px 44px !important;
    max-height: 92dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--wc-cream) !important;
    box-shadow: 0 -6px 50px rgba(60,48,40,0.18) !important;
  }
}
@media (min-width: 560px) {
  .skill-preview-container {
    background: var(--wc-cream) !important;
    border-radius: 18px !important;
    padding: 32px 36px 40px !important;
    box-shadow: 0 12px 60px rgba(60,48,40,0.16) !important;
  }
}

.skill-preview-overlay {
  background: rgba(42,32,24,0.40) !important;
  backdrop-filter: blur(5px) !important;
}

.skill-preview-header {
  border-bottom: 1px solid var(--wc-rule) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
}
.skill-preview-header h2 {
  font-family: var(--font-serif) !important;
  font-size: 14px !important;
  color: var(--wc-charcoal) !important;
}
.modal-close-btn {
  width: 26px !important;
  height: 26px !important;
  background: var(--wc-sand) !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  color: var(--wc-muted) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.modal-close-btn:hover { background: var(--wc-rose) !important; color: var(--wc-ink) !important; }

.preview-section h3 {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--wc-muted) !important;
  margin-bottom: 3px !important;
}
.preview-five-layer-subtitle {
  font-family: var(--font-serif) !important;
  font-size: 11px !important;
  color: var(--wc-ink) !important;
  opacity: 0.6;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-bottom: 10px !important;
}
.preview-item label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 1px !important;
  color: var(--wc-muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
}
.layer-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 1px !important;
  color: var(--wc-muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}
.layer-content {
  background: rgba(255,255,255,0.60) !important;
  border: 1px solid rgba(60,48,40,0.10) !important;
  border-left: 3px solid var(--wc-amber) !important;
  border-radius: 8px !important;
  padding: 10px 13px !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  color: var(--wc-charcoal) !important;
  box-shadow: none !important;
}

.preview-actions {
  border-top: 1px solid var(--wc-rule) !important;
  padding-top: 12px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.preview-actions .btn-secondary,
.preview-actions .btn-confirm-skill { flex: 1 !important; min-width: 90px !important; text-align: center !important; }

/* ─── Thin warm scrollbar inside all modals ─── */
.forge-modal::-webkit-scrollbar,
.probe-modal-content::-webkit-scrollbar,
.skill-preview-container::-webkit-scrollbar { width: 3px; }
.forge-modal::-webkit-scrollbar-thumb,
.probe-modal-content::-webkit-scrollbar-thumb,
.skill-preview-container::-webkit-scrollbar-thumb {
  background: rgba(60,48,40,0.18);
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   END FORGE REDESIGN V2
   ───────────────────────────────────────────────────────────────── */


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  CREATOR CARD COMPLETION — Mobile-compact (inline-style purge)   ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─── Section header ─── */
.completion-header {
  text-align: center;
  margin-bottom: 16px;
}
.completion-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--wc-charcoal);
  margin-bottom: 6px;
  line-height: 1.2;
}
.completion-subtitle {
  font-size: 12px;
  color: var(--wc-muted);
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto;
}

/* ─── The card itself — constrained width, never full-screen tall ─── */
.commemorative-card {
  width: 100%;
  /* Cap width so it reads like a physical card */
  max-width: 260px;
  margin: 0 auto 16px;
}

/* ─── Invitation code block (was all inline) ─── */
.invite-code-label {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 1.2px;
  color: rgba(138,124,110,0.6);
  margin: 7px 0 3px;
  text-transform: uppercase;
}
.invite-code-value {
  font-family: 'Courier New', monospace;
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--wc-charcoal);
  letter-spacing: 2px;
  margin: 2px 0;
  word-break: break-all;
}
.invite-code-desc {
  font-size: var(--font-xs);
  color: rgba(138,124,110,0.55);
  margin: 4px 0 6px;
  line-height: 1.5;
}

/* ─── Download button wrapper ─── */
.completion-download-wrap {
  text-align: center;
  margin: 14px 0 10px;
}
.completion-download-wrap #btnDownloadCertificate {
  display: inline-block;
  background: var(--wc-charcoal);
  color: var(--wc-cream);
  padding: 11px 28px;
  border: none;
  border-radius: 24px;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: all 0.25s;
  text-transform: uppercase;
}
.completion-download-wrap #btnDownloadCertificate:hover {
  background: var(--wc-ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(42,32,24,0.22);
}

/* ─── Email confirmation block ─── */
.completion-email-block {
  text-align: center;
  margin: 10px auto 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg,
    rgba(196,212,180,0.18) 0%,
    rgba(240,208,144,0.14) 100%);
  border: 1px solid rgba(60,48,40,0.09);
  border-radius: 10px;
  max-width: 320px;
}
.email-block-main {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 0.3px;
  color: var(--wc-charcoal);
  margin-bottom: 3px;
}
.email-block-addr {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--wc-muted);
  word-break: break-all;
}

/* ─── Mobile: tighten everything further ─── */
@media (max-width: 559px) {
  .completion-title  { font-size: 17px; }
  .completion-subtitle { font-size: 11px; }
  .completion-header { margin-bottom: 12px; }
  .commemorative-card { max-width: 240px; }
  .completion-download-wrap { margin: 10px 0 8px; }
  .completion-email-block { margin: 8px auto 10px; padding: 10px 14px; }
  .forge-completion-actions { margin-top: 8px; }
}

/* ─── Very narrow phones (≤360px) ─── */
@media (max-width: 360px) {
  .commemorative-card { max-width: 220px; }
  .card-title-main { font-size: 18px !important; }
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  FEEDBACK INPUT GROUP — textarea + regen button side by side     ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.feedback-input-group {
  display: flex;
  gap: 9px;
  align-items: stretch;
}

/* Textarea fills its wrap (which flexes to all remaining width) */
.feedback-input-group .minimal-textarea {
  min-height: 88px;
  resize: none;
  box-sizing: border-box;
  width: 100% !important;
}

/* Regen button — vertical pill on the right */
.btn-regen-send {
  flex: 0 0 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  background: linear-gradient(155deg, var(--wc-amber, #f0d090) 0%, var(--wc-coral, #e4a090) 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(228,160,144,0.28);
  transition: transform 0.22s, box-shadow 0.22s, opacity 0.2s;
  min-height: 88px;
}

.btn-regen-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 24px rgba(228,160,144,0.42);
}
.btn-regen-send:active { transform: translateY(0); }

.btn-regen-send:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none !important;
}

/* Inner elements */
.regen-emoji {
  display: block;
  font-size: 18px;
  line-height: 1;
}

.regen-label {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-xs);
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--wc-charcoal, #3c3028);
  text-align: center;
  line-height: 1.4;
}

/* Spinning loading emoji */
@keyframes spin-regen {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.btn-regen-send:disabled .regen-emoji {
  display: inline-block;
  animation: spin-regen 0.7s linear infinite;
}



/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  SQUARE CREATOR CARD  —  Badge / Token aesthetic                 ║
   ║  Replaces the old double-border portrait rectangle               ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* Override old commemorative-card styles */
.commemorative-card {
  all: unset;
  display: flex !important;
  flex-direction: column;
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 320px;
  /* min-height, not aspect-ratio: a long Skill title wraps to 3-4 lines,
     and a hard aspect-ratio locked the box height regardless of content,
     silently clipping the SOUL hash line off the bottom (overflow:hidden
     below). 290px keeps the short-title case looking like a tall portrait
     certificate; longer content now pushes the card taller instead. */
  min-height: 290px;
  margin: 0 auto 18px !important;
  padding: 9px;
  box-sizing: border-box;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--card-accent, #b8a23c) 5.6%, #fbf6ee) 0%,
    color-mix(in srgb, var(--card-accent, #b8a23c) 8%,   #f4ead8) 55%,
    color-mix(in srgb, var(--card-accent, #b8a23c) 9.6%, #f0e2ce) 100%);
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--warm-ink)) 45%, #d8ccba);
  border-radius: 12px;
  box-shadow: 0 6px 28px rgba(42,32,24,0.14), 0 1px 4px rgba(42,32,24,0.08);
  overflow: hidden;
}

/* Domain colour is carried quietly by the seal and the pill —
   no banner. The faint radial tint in the background is enough. */

/* Inner certificate frame — double-rule, classic document feel */
.sq-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px 12px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--warm-ink)) 38%, transparent);
  outline: 1px solid color-mix(in srgb, var(--card-accent, var(--warm-ink)) 16%, transparent);
  outline-offset: 2px;
  border-radius: 7px;
}

/* ── Domain seal — a tilted chop/stamp ── */
.sq-seal {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--card-accent, #c9b458);
  border: 2px solid color-mix(in srgb, var(--card-accent, #c9b458) 70%, transparent);
  border-radius: 50%;
  transform: rotate(-6deg);
  background: color-mix(in srgb, var(--card-accent, #c9b458) 7%, transparent);
}

/* ── Domain pill — outlined, like a foil stamp, not a button ── */
.sq-domain-pill {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--card-accent, #c9b458) 85%, #3c3028);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--card-accent, #c9b458) 60%, transparent);
  padding: 3px 12px;
  border-radius: 20px;
}

/* ── AI blessing — one italic line, the shareable hook ── */
.sq-blessing {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-style: italic;
  font-size: 11px;
  line-height: 1.6;
  color: #5a4f44;
  max-width: 92%;
  min-height: 0;
}
.sq-blessing:empty { display: none; }
.sq-blessing::before { content: '“'; color: var(--card-accent, #c9b458); }
.sq-blessing::after  { content: '”'; color: var(--card-accent, #c9b458); }

/* ── Attribution: "Forged by xiaojia · Jun 10, 2026" ──
   Wraps onto a second line instead of overflowing the card — a longer
   creator name plus a longer date string can exceed the card's width
   (confirmed: 224px content in a 206px box), and nowrap let the excess
   spill sideways into the card's decorative inner border. */
.sq-meta-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 7px;
  width: 100%;
  max-width: 92%;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.6px;
  color: var(--wc-muted, var(--warm-ink));
}
.sq-meta-line .sq-dot { color: color-mix(in srgb, var(--card-accent, #c9b458) 70%, var(--warm-ink)); }

/* ── Bottom: site only, centered ── */
.sq-bottom-row {
  display: flex;
  justify-content: center;
  width: 100%;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 7.5px;
  letter-spacing: 2px;
  color: rgba(138,124,110,0.65);
}

/* ── 10 domain themes: accent color (glyph is set by JS) ── */
.commemorative-card[data-domain="safety"]     { --card-accent: #7e96a8; }
.commemorative-card[data-domain="science"]    { --card-accent: #8fae7e; }
.commemorative-card[data-domain="narrative"]  { --card-accent: #c9a06a; }
.commemorative-card[data-domain="design"]     { --card-accent: #d98d76; }
.commemorative-card[data-domain="visual"]     { --card-accent: #a892c4; }
.commemorative-card[data-domain="experience"] { --card-accent: #c4a35c; }
.commemorative-card[data-domain="sound"]      { --card-accent: #7fa8b8; }
.commemorative-card[data-domain="ideas"]      { --card-accent: #b8a23c; }
.commemorative-card[data-domain="history"]    { --card-accent: #a08a6e; }
.commemorative-card[data-domain="fun"]        { --card-accent: #cc7e9a; }

/* ── Brand header ── */
.sq-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.sq-brand {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--wc-charcoal, #3c3028);
  text-transform: uppercase;
}
.sq-cert {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: var(--font-xs);
  font-style: italic;
  color: var(--wc-muted, var(--warm-ink));
  letter-spacing: 0.3px;
}

/* ── Central sparkle icon ── */
.sq-crest {
  font-size: 22px;
  color: #d4a849;
  line-height: 1;
}

/* ── Skill name — hero element ── */
.sq-skill-name {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--wc-ink, #2a2018);
  line-height: 1.25;
  max-width: 88%;
  word-break: break-word;
}

/* ── Creator role badge ── */
.sq-creator-role {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-xs);
  letter-spacing: 2.2px;
  color: var(--wc-muted, var(--warm-ink));
  text-transform: uppercase;
}

/* ── Thin divider rules ── */
.sq-hr {
  width: 56%;
  height: 1px;
  background: rgba(60,48,40,0.13);
  border: none;
  margin: 0 auto;
  flex-shrink: 0;
}

/* ── Creator + Date row ── */
.sq-meta-row {
  display: flex;
  justify-content: space-between;
  width: 88%;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-xs);
  color: var(--wc-muted, var(--warm-ink));
}

/* ── Soul-Hash ── */
.sq-hash-line {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  font-weight: 600;
  color: var(--wc-ink, #2a2018);
  letter-spacing: 0.5px;
  word-break: break-all;
  padding: 8px 0;
  margin: 2px 0;
  background: linear-gradient(90deg, transparent 0%, rgba(196,180,160,0.08) 50%, transparent 100%);
  border-radius: 4px;
}

/* ── Invitation code section ── */
.sq-invite-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 6.5px;
  letter-spacing: 2px;
  color: rgba(138,124,110,0.55);
  text-transform: uppercase;
  margin-bottom: 1px;
}
.sq-invite-code {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 14px;
  font-weight: 700;
  color: var(--wc-charcoal, #3c3028);
  letter-spacing: 2.5px;
}
.sq-invite-desc {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 6.5px;
  color: rgba(138,124,110,0.45);
  line-height: 1.5;
  max-width: 80%;
}

/* ── Footer URL ── */
.sq-url {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 6.5px;
  letter-spacing: 1px;
  color: rgba(138,124,110,0.40);
}

/* ── Responsive scaling ── */
@media (max-width: 559px) {
  .commemorative-card { max-width: 260px !important; }
}
@media (max-width: 360px) {
  .commemorative-card { max-width: 230px !important; }
  .sq-invite-code { font-size: 12px; letter-spacing: 1.5px; }
  .sq-skill-name { font-size: 13px; }
}

/* ── forge-ready box — clean up inline styles ── */
.forge-ready {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg,
    rgba(196,212,180,0.25) 0%,
    rgba(240,208,144,0.18) 100%);
  border: 1px solid rgba(60,48,40,0.09);
  border-radius: 10px;
}
.forge-ready-check {
  font-size: 22px;
  margin-bottom: 6px;
  color: var(--wc-muted, var(--warm-ink));
}
.forge-ready-text {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--wc-charcoal, #3c3028);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ── Probe button clean styles (replace inline) ── */
.probe-emoji  { font-size: 24px; margin-bottom: 8px; display: block; }
.probe-title  { font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.probe-desc   { font-size: 11px; color: rgba(138,124,110,0.7); margin-top: 4px; }

/* ── forge-editable-hint ── */
.forge-editable-hint {
  font-size: 11px;
  color: var(--wc-muted, var(--warm-ink));
  font-weight: 400;
  margin-left: 6px;
}

/* ═══ MASTHEAD ENTRANCE — first impression animation ═══ */
@keyframes mastheadReveal {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.masthead {
  animation: mastheadReveal 0.7s ease both;
}

.masthead-sub-row {
  animation: mastheadReveal 0.7s 0.18s ease both;
}

.header-actions {
  animation: mastheadReveal 0.6s 0.3s ease both;
}

/* Section I heading entrance — only the first visible one */
#sectionMain .section-heading:first-child {
  animation: mastheadReveal 0.6s 0.45s ease both;
}

/* Chat bubble entrance, then the watercolour light starts walking
   along the border (Gemini-style frame) */
.chat-bubble-wrap {
  animation:
    mastheadReveal 0.65s 0.55s ease both,
    sheetBorderFlow 10s 1.4s linear infinite;
}

/* ── masthead-vol subtle emphasis on hover ── */
.masthead-vol {
  transition: letter-spacing 0.3s ease, color 0.3s ease;
}
.masthead-vol:hover {
  letter-spacing: 2.5px;
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════
   BILINGUAL CONTENT — Hide/Show based on language setting
   ═══════════════════════════════════════════════════════ */

/* English content hidden by default (Chinese is default) */
body[data-lang="cn"] .about-en,
body[data-lang="cn"] .howto-en {
  display: none;
}

/* Chinese content shown by default */
body[data-lang="cn"] .about-cn,
body[data-lang="cn"] .howto-cn {
  display: block;
}

/* When switched to English */
body[data-lang="en"] .about-en,
body[data-lang="en"] .howto-en {
  display: block;
}

/* Chinese content hidden when English is selected */
body[data-lang="en"] .about-cn,
body[data-lang="en"] .howto-cn {
  display: none;
}

/* Default (if data-lang not set, show Chinese) */
.about-en,
.howto-en {
  display: none;
}

.about-cn,
.howto-cn {
  display: block;
}

/* ═══════════════════════════════════════════════════════
   GLOBAL LANGUAGE ISOLATION (Archive page & beyond)
   Strict: English mode hides all .text-cn, Chinese mode hides all .text-en
   ═══════════════════════════════════════════════════════ */

/* Default (no data-lang set or English): hide Chinese, show English */
.text-cn {
  display: none !important;
}
.text-en {
  display: block;
}

/* English mode: show English, hide Chinese */
body[data-lang="en"] .text-en {
  display: block !important;
}
body[data-lang="en"] .text-cn {
  display: none !important;
}

/* Chinese mode: show Chinese, hide English */
body[data-lang="cn"] .text-cn {
  display: block !important;
}
body[data-lang="cn"] .text-en {
  display: none !important;
}

/* Inline variants (for elements that need inline display) */
body[data-lang="en"] span.text-en,
body[data-lang="en"] .text-en-inline {
  display: inline !important;
}
body[data-lang="cn"] span.text-cn,
body[data-lang="cn"] .text-cn-inline {
  display: inline !important;
}

/* Styling for list items in About/HowTo */
.about-list,
.howto-rule ol {
  margin-top: 12px;
  margin-left: 20px;
  color: #666;
  line-height: 1.8;
}

.about-list li,
.howto-rule ol li {
  margin-bottom: 8px;
  color: #666;
}

.howto-rule h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  margin-top: 4px;
  margin-bottom: 2px;
}

.about-section h4,
.about-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-top: 20px;
  margin-bottom: 12px;
}

/* ─── Chinese Typography: Headlines & Emphasis ──────────────────
   Use Noto Serif JP (源ノ明朝) for titles, headlines, and emphasis.
   Regular body text remains Noto Serif SC for better readability. */
.masthead-title,
.masthead-subtitle,
.section-heading,
.headline-hero,
.about-title,
.forge-title,
.forge-subtitle,
.forge-page-title,
.forge-page-subtitle,
.av-title,
.av-readable-title,
.av-readable-subtitle,
.honor-panel-title,
.honor-panel-subtitle,
.knight-card-title,
.completion-title,
.completion-subtitle,
.howto-title,
.package-title,
.probe-title,
.probe-modal-title,
.format-subtitle,
.oath-title,
.rights-title,
.footer-section-title,
.footer-title,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif-cn-heading) !important;
}

/* Forge-specific emphasis */
.forge-steps label,
.forge-input-group label {
  font-family: var(--font-serif-cn-heading);
}

/* Archive section titles */
.archive-section-title,
.skills-grid h3 {
  font-family: var(--font-serif-cn-heading);
}

/* Honor List Details - Name and Description */
.honor-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.honor-name {
  font-weight: 600;
  font-size: 11px;
  color: #2c2420;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.honor-desc {
  font-size: var(--font-xs);
  color: var(--warm-ink);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.honor-creator {
  font-size: var(--font-xs);
  color: #a89a8e;
  white-space: nowrap;
  text-align: right;
}

.honor-stars {
  font-size: var(--font-xs);
  color: #d4a574;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION: About & How to Play Modals
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 559px) {
  /* Reduce padding and height for modals on small screens */
  .about-panel,
  .howto-panel {
    padding: 24px;  /* from 40px: 40% reduction */
    max-height: 65vh;  /* from 85vh: reduced for better mobile UX, content remains scrollable */
  }

  /* Tighten rule spacing on mobile */
  .howto-rule {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .howto-rule p {
    font-size: 14px;
    line-height: 1.8;
  }

  /* Restore bottom border for last rule if needed for visual separation */
  .howto-rule:last-child {
    border-bottom: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ADDITIVE POLISH LAYER  (beta, 2026-07)
   ───────────────────────────────────────────────────────────────────
   Earlier revisions of this block force-unified every corner radius to
   one token value. That was a mistake — it flattened intentional,
   characterful shapes (the forge's rounded 24px CTAs) into a generic 8px
   and drained the design's soul. Reverted. The varied radii are the
   author's deliberate craft and are left alone.

   What stays here is ONLY additive polish that removes nothing:
   a real keyboard-focus state (there was none — an accessibility gap),
   plus the toast styling below. The design tokens in :root remain as a
   vocabulary for future *deliberate* choices, not a forced uniformity.
   ═══════════════════════════════════════════════════════════════════ */

/* Visible keyboard focus on interactive elements — additive a11y, does not
   alter any element's resting appearance (only shows on keyboard focus).
   input/textarea/select are deliberately not in this list: unlike buttons
   and links (which had zero focus feedback before this rule existed),
   every text field in this codebase already has its own bespoke :focus
   treatment (border/background color shifts throughout this file), and
   several — like .chat-bubble-input — sit inside a wrapper with its own
   :focus-within glow. Adding this coral ring on top of an already-designed
   focus state doesn't fill a gap, it just draws a second, clashing box
   over the first one. */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* — Toast glyph: plain Unicode icon (no Material Icons font dependency).
     Sits in Notyf's icon slot; kept simple and legible on the warm toasts. */
.notyf__toast .notyf-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: #fff !important; /* white glyph on the coloured toast — Notyf otherwise tints it to the bg colour, making it invisible */
}

/* ═══════════════════════════════════════════════════════════════════
   CUSTOM CONFIRM DIALOG — replaces native confirm() at 3 real decision
   points (draft recovery, publish-retry-or-basic, duplicate-skill warning).
   A native browser confirm() is an unstyled system dialog that breaks the
   editorial aesthetic completely — the single most jarring "looks like a
   prototype" moment a user can hit. Matches the existing About/HowTo
   overlay family (sharp corners, paper-card surface, rule border) rather
   than inventing a new visual language.
   ═══════════════════════════════════════════════════════════════════ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(4px);
  padding: 20px;
}
.confirm-overlay.active { opacity: 1; pointer-events: all; }

.confirm-panel {
  width: 100%;
  max-width: 420px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  padding: 28px 28px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.16);
  transform: translateY(8px);
  transition: transform 0.25s ease;
}
.confirm-overlay.active .confirm-panel { transform: translateY(0); }

.confirm-message {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-line; /* preserves \n\n paragraph breaks in the message */
  margin-bottom: 22px;
}

.confirm-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.confirm-btn {
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  border: 1px solid transparent;
}
.confirm-btn-cancel {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink-muted);
}
.confirm-btn-cancel:hover { border-color: var(--ink-muted); color: var(--ink); }
.confirm-btn-ok {
  background: var(--ink);
  color: var(--paper);
}
.confirm-btn-ok:hover { opacity: 0.85; }