/* ═══════════════════════════════════════════════════════
   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));
}

/* 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) */
.chat-bubble-input {
  font-family: var(--font-serif) !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-status-bar {
  display: none; /* Hidden for cleaner UI */
  justify-content: space-between;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 2px;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.status-item { color: var(--ink-muted); }
.status-item.right { text-align: right; }

.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;
}

.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;
}

.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; }

.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: #8a7a6e;
  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: #8a7a6e;
  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.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;
}

.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: #8a7a6e;
  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: 18px;
  color: var(--ink);
  margin-bottom: 12px;
}

.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: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-light);
}

.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: 11px;
  color: var(--ink-light);
  line-height: 1.6;
  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;
}

/* ═══ KNIGHT CARD (Forge Step 4 Download) ═══ */
.knight-card-section {
  margin-top: 20px;
  padding: 20px;
  border: 2px solid var(--ink);
  background: var(--paper);
  text-align: center;
  display: none;
}

.knight-card-section.visible { display: block; }

.knight-card-title {
  font-family: var(--font-head);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 8px;
}

.knight-card-desc {
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 12px;
}

.btn-download-card {
  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, opacity 0.25s, transform 0.25s;
  text-transform: uppercase;
}

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

/* ═══ SKILL PACKAGE DOWNLOAD ═══ */
.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: #8a7a6e;
  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: #8a7a6e;
  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: #8a7a6e;
  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: #8a7a6e;
  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: #8a7a6e;
}

.generation-note {
  padding: 12px 24px;
  background: #f2ece2;
  border-top: 1px solid #e8e0d4;
  font-size: 11px;
  color: #8a7a6e;
  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: #8a7a6e; }
.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: #8a7a6e;
  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: #8a7a6e;
  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: #8a7a6e;
  color: #8a7a6e;
}

@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; }
  .header-buttons { flex-wrap: wrap; }
  .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, 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-status-bar {
    font-size: var(--font-xs);
    letter-spacing: 1.5px;
  }
  .header-actions {
    justify-content: center !important;
  }
  .header-buttons {
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .btn-arena, .btn-agent-view, .btn-lang {
    font-size: var(--font-xs);
    padding: 6px 10px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 110px;
    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;
  }
  .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 {
    font-family: var(--font-sans-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;
  }

  /* Header buttons wrap cleanly */
  .header-buttons {
    justify-content: center;
    flex-wrap: wrap;
    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;
  }
}

/* ═══════════════════════════════════════════════════════
   AGENT ARCHIVE — Celestial Map & Honor Hub (from agent-view)
   ═══════════════════════════════════════════════════════ */

.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: #8a7a6e;
  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: #8a7a6e; 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: #8a7a6e; }

/* 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; }

/* 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;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #f5f5f5;
}

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

.skill-item .skill-stars {
  color: #d4726a;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* Playground win-rate badge — filled async from /playground/stats-batch */
.skill-item .skill-winrate {
  color: #6a8d52;
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
}
.skill-item .skill-winrate:empty { display: none; }

/* ═══ 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);
}

/* 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: #8a7a6e;
  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: #8a7a6e;
  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: #8a7a6e;
  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; }
.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: #8a7a6e;
  letter-spacing: 1px;
}

.av-readable-rule {
  height: 2px;
  background: linear-gradient(90deg, var(--ink), #d4c8bc);
  margin-bottom: 28px;
}

/* 2-column domain grid */
.domain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #d4c8bc;
  border: 1px solid #d4c8bc;
}

.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: #8a7a6e;
  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: #8a7a6e;
  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: #8a7a6e;
  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 {
    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 90px;
  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;
}

.layer-name {
  font-size: var(--font-sm);
  font-weight: 600;
  color: #333;
}

.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: #8a7a6e;
  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: #8a7a6e;
  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: #8a7a6e;
  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: #8a7a6e;
  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: #8a7a6e;
  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: #8a7a6e;
}

/* 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: 24px;
  text-align: center;
  color: #666;
  letter-spacing: 1.4px;
  line-height: 1.4;
  text-transform: uppercase;
  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: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.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: #8a7a5e;
  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: #8a7a5e;
  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: #8a7a6e;
  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: #8a7a6e;
  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: #8a7a6e;
  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, #8a7c6e);
  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:        #8a7c6e;   /* 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;
}
.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 {
  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 64px !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: 9px !important;
  letter-spacing: 0.4px !important;
  color: var(--wc-charcoal) !important;
}
.layer-progress {
  height: 3px !important;
  background: rgba(60,48,40,0.1) !important;
  border-radius: 2px !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;
  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: 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;
  aspect-ratio: 4 / 5;   /* portrait — reads as a collectible card, not a coaster */
  margin: 0 auto 18px !important;
  padding: 9px;
  box-sizing: border-box;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--card-accent, #c9b458) 14%, transparent) 0%, transparent 55%),
    linear-gradient(150deg, #fbf6ee 0%, #f4ead8 55%, #f0e2ce 100%);
  border: 1px solid color-mix(in srgb, var(--card-accent, #8a7c6e) 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, #8a7c6e) 38%, transparent);
  outline: 1px solid color-mix(in srgb, var(--card-accent, #8a7c6e) 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); }

/* ── One-line attribution: "Forged by xiaojia · Jun 10, 2026" ── */
.sq-meta-line {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 7px;
  width: 100%;
  white-space: nowrap;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.6px;
  color: var(--wc-muted, #8a7c6e);
}
.sq-meta-line .sq-dot { color: color-mix(in srgb, var(--card-accent, #c9b458) 70%, #8a7c6e); }

/* ── 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, #8a7c6e);
  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, #8a7c6e);
  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, #8a7c6e);
}

/* ── 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, #8a7c6e);
}
.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, #8a7c6e);
  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: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-top: 24px;
  margin-bottom: 12px;
}

.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: #8a7a6e;
  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: 12px;   /* from 20px: 40% reduction */
    padding-bottom: 8px;   /* from 16px: 50% reduction */
    border-bottom: none;   /* hide dividers on mobile to reduce visual clutter */
  }

  /* Improve readability with tighter line-height */
  .howto-rule p {
    font-size: 11px;        /* from 12px: save space */
    line-height: 1.6;       /* from 1.8: tighter leading */
  }

  /* Restore bottom border for last rule if needed for visual separation */
  .howto-rule:last-child {
    border-bottom: none;
  }
}