/* ==========================================================================
   Inkt. — Distraction-Free Literary & Screenwriting Editor
   Design Philosophy: iA Writer + Beat + Ulysses + Highland 2 + Scriptularity
   Clean Paper Sheet, Progressive Disclosure, Authentic Typewriter Typography
   ========================================================================== */

:root,
[data-theme="clay-chrome"] {
  --bg-canvas: #141312;
  --bg-desk: #171614;
  --bg-surface-1: #1c1a18;
  --bg-surface-2: #24211e;
  --bg-surface-3: #2d2924;
  --bg-paper: #181715;
  --bg-glass: rgba(28, 26, 24, 0.94);

  --text-primary: #ede7df;
  --text-secondary: #aba193;
  --text-muted: #787064;

  --accent-primary: #e57829;
  --accent-primary-hover: #ff933b;
  --accent-soft: rgba(229, 120, 41, 0.16);
  --accent-secondary: #eb8a47;
  --accent-secondary-soft: rgba(229, 120, 41, 0.14);

  --semantic-success: #52b788;
  --semantic-warning: #eb8a47;
  --semantic-error: #e76f51;

  --border-subtle: #302b24;
  --border-strong: #443c32;
  --paper-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);

  /* Light falls around the control; its face stays matte and even. */
  --button-primary-bg: #e5ad68;
  --button-primary-hover-bg: #edbc7e;
  --button-primary-active-bg: #d69c59;
  --button-primary-text: #281b0e;
  --button-primary-border: #e5ad68;
  --button-primary-shadow: 0 0 18px rgba(229, 173, 104, 0.13), 0 4px 30px rgba(205, 131, 56, 0.06);
  --button-primary-hover-shadow: 0 0 22px rgba(229, 173, 104, 0.2), 0 4px 34px rgba(205, 131, 56, 0.09);
  --button-primary-radius: 7px;
  --control-focus: #e5ad68;

  /* Diogenes Club Pulse Theme Tokens (Indigo / Василёк) */
  --club-pulse-bg: rgba(99, 102, 241, 0.08);
  --club-pulse-border: rgba(99, 102, 241, 0.24);
  --club-pulse-text: #c7d2fe;
  --club-pulse-dot: #6366f1;
  --club-pulse-glow: rgba(99, 102, 241, 0.50);
}

[data-theme="warm-paper"] {
  --bg-canvas: #dfd5c2;
  --bg-desk: #d7ccb6;
  --bg-surface-1: #eee5d3;
  --bg-surface-2: #e4d9c4;
  --bg-surface-3: #d6c9b0;
  --bg-paper: #f1e7d2;
  --bg-glass: rgba(238, 229, 211, 0.94);

  --text-primary: #221f1b;
  --text-secondary: #575046;
  --text-muted: #827768;

  --accent-primary: #b84a2c;
  --accent-primary-hover: #99391f;
  --accent-soft: rgba(184, 74, 44, 0.11);
  --accent-secondary: #2a6f82;
  --accent-secondary-soft: rgba(42, 111, 130, 0.12);

  --semantic-success: #2b7a52;
  --semantic-warning: #a87012;
  --semantic-error: #b83227;

  --border-subtle: #d1c4ab;
  --border-strong: #bca98c;
  --paper-shadow: 0 14px 38px rgba(45, 33, 16, 0.13), 0 2px 6px rgba(45, 33, 16, 0.08);
  --button-primary-bg: #93432e;
  --button-primary-hover-bg: #7c3624;
  --button-primary-active-bg: #69301f;
  --button-primary-text: #fff8ec;
  --button-primary-border: #7c3624;
  --button-primary-shadow: none;
  --button-primary-hover-shadow: none;
  --button-primary-radius: 7px;
  --control-focus: #93432e;

  /* Diogenes Club Pulse: Calm Indigo & Cornflower (Non-red, calm focus) */
  --club-pulse-bg: rgba(79, 70, 229, 0.07);
  --club-pulse-border: rgba(79, 70, 229, 0.22);
  --club-pulse-text: #3730a3;
  --club-pulse-dot: #4f46e5;
  --club-pulse-glow: rgba(79, 70, 229, 0.40);
}

/* ==========================================================================
   Inkt. — Authentic Typewriter Fonts (Cyrillic + Latin)
   - Font3382 (Scriptularity Cyrillic Typewriter)
   - TrixieCyr (Scriptularity Vintage Ribbon Cyrillic Typewriter)
   - JMH Typewriter (Jorge Morón, Personal Mode)
   - Courier Prime Cyrillic (Dimka Novikov, SIL OFL 1.1)
   ========================================================================== */

@font-face {
  font-family: 'Font3382';
  src: url('/fonts/scriptularity/3382-font-fixed.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TrixieCyr';
  src: url('/fonts/scriptularity/trixiecyr-plain.woff2') format('woff2'),
       url('/fonts/scriptularity/trixiecyr-plain.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JMH Typewriter';
  src: url('/fonts/jmh-typewriter/JMH-Typewriter.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JMH Typewriter';
  src: url('/fonts/jmh-typewriter/JMH-Typewriter-Bold.ttf') format('truetype');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JMH Typewriter';
  src: url('/fonts/jmh-typewriter/JMH-Typewriter-Thin.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JMH Typewriter';
  src: url('/fonts/jmh-typewriter/JMH-Typewriter-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime Cyrillic';
  src: url('/fonts/courier-prime/Courier-Prime.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime Cyrillic';
  src: url('/fonts/courier-prime/Courier-Prime-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime Cyrillic';
  src: url('/fonts/courier-prime/Courier-Prime-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime Cyrillic';
  src: url('/fonts/courier-prime/Courier-Prime-Bold-Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-ui: var(--font-script);
  --font-script: 'JMH Typewriter', 'Font3382', 'Courier Prime Cyrillic', 'TrixieCyr', 'Cousine', 'Courier New', monospace;
  --font-prose: var(--font-script);
  --font-sans: var(--font-script);
  --font-mono: var(--font-script);
  --font-serif: var(--font-script);
  --bg-surface: var(--bg-surface-1);
  --bg-elevated: var(--bg-surface-2);
  --bg-primary: var(--bg-canvas);
  --danger: var(--semantic-error);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

/* Typewriter Font Profiles — All include full Cyrillic typewriter glyphs */
:root[data-font="jmh"],
:root[data-font-profile="personal"] {
  --font-script: 'JMH Typewriter', 'Font3382', 'Courier Prime Cyrillic', 'TrixieCyr', 'Cousine', 'Courier New', monospace;
  --font-prose: var(--font-script);
}

:root[data-font="font3382"] {
  --font-script: 'Font3382', 'Courier Prime Cyrillic', 'JMH Typewriter', 'Cousine', 'Courier New', monospace;
  --font-prose: var(--font-script);
}

:root[data-font="trixie"] {
  --font-script: 'TrixieCyr', 'Font3382', 'Courier Prime Cyrillic', 'Cousine', 'Courier New', monospace;
  --font-prose: var(--font-script);
}

:root[data-font="courier-prime"] {
  --font-script: 'Courier Prime Cyrillic', 'Font3382', 'Cousine', 'Courier New', monospace;
  --font-prose: var(--font-script);
}

:root[data-font="cousine"] {
  --font-script: 'Cousine', 'Courier Prime Cyrillic', 'Font3382', 'Courier New', monospace;
  --font-prose: var(--font-script);
}

:root[data-font="system"] {
  --font-script: ui-monospace, 'Courier New', monospace;
  --font-prose: var(--font-script);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong, rgba(120, 95, 70, 0.35)) transparent;
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-strong, rgba(120, 95, 70, 0.35));
  border-radius: 3px;
}


html[data-scrollable-page="true"] {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html[data-scrollable-page="true"] body {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

html,
body {
  height: 100%;
  width: 100%;
  max-width: 100vw;
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button,
input,
select,
textarea,
code,
kbd,
pre,
samp {
  font-family: var(--font-ui) !important;
  color: inherit;
}

[hidden] {
  display: none !important;
}

/* ==========================================================================
   APP SHELL & TOP NAVIGATION BAR (Strict Viewport Fit, Zero Horizontal Overflow)
   ========================================================================== */

.brand-logo {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  color: #e6edf3;
  text-decoration: none;
  padding: 4px 0;
}

[data-theme="warm-paper"] .brand-logo {
  color: #16191e;
}

.brand-mark {
  font-family: var(--font-ui);
  font-size: 28px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.055em;
}

.brand-dot {
  color: #f08a6c;
}

.brand-logo:focus-visible {
  outline: 2px solid var(--accent-secondary);
  outline-offset: 5px;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 44px minmax(0, 1fr) 28px;
  height: 100vh;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: var(--bg-surface-1);
  border-bottom: 1px solid var(--border-subtle);
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  z-index: 80;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
}

.btn-lobby-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 140ms ease;
}

.btn-lobby-switch:hover {
  border-color: var(--accent-primary);
  background: var(--accent-soft);
}

.project-Context-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  background: transparent;
  min-width: 0;
}

.active-project-name {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 165px;
}

.format-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Center Mode Tabs (5 Clean Stages) */
.mode-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-canvas);
  padding: 3px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  min-width: 0;
  flex: 0 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.mode-tabs::-webkit-scrollbar {
  display: none;
}

.mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 130ms ease;
  white-space: nowrap;
  position: relative;
}

.mode-tab:hover {
  color: var(--text-primary);
  background: var(--bg-surface-2);
}

.mode-tab[aria-selected="true"] {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mode-tab-count {
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--bg-surface-3);
  color: var(--text-secondary);
}

.mode-tab[aria-selected="true"] .mode-tab-count {
  background: var(--accent-soft);
  color: var(--accent-primary);
}

/* Right Controls (Quiet & Compact) */
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 0 auto;
}

.quiet-select {
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px 7px;
  font-size: 11.5px;
  max-width: 165px;
  text-overflow: ellipsis;
  cursor: pointer;
}

.quiet-select:hover,
.quiet-select:focus {
  color: var(--text-primary);
  border-color: var(--border-strong);
  outline: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 11px;
  min-height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 220ms ease;
  white-space: nowrap;
}

.btn:hover {
  background: var(--bg-surface-3);
  border-color: var(--border-strong);
}

.btn-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border-color: var(--button-primary-border);
  border-radius: var(--button-primary-radius);
  box-shadow: var(--button-primary-shadow);
  text-shadow: none;
  font-weight: 700;
}

.btn-primary:hover:not(:disabled) {
  background: var(--button-primary-hover-bg);
  border-color: var(--button-primary-border);
  box-shadow: var(--button-primary-hover-shadow);
}

.btn-primary:active:not(:disabled) {
  background: var(--button-primary-active-bg);
  box-shadow: none;
}

.btn-primary:focus-visible {
  outline-color: var(--control-focus);
}

.btn-primary:disabled {
  box-shadow: none;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

.btn-sm {
  padding: 4px 8px;
  font-size: 11.5px;
}

/* ==========================================================================
   MAIN STAGE CONTAINER
   ========================================================================== */

.stage-container {
  position: relative;
  height: 100%;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-desk);
}

.stage-view {
  display: none;
  height: 100%;
  width: 100%;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

@keyframes stageViewHaloIn {
  from {
    opacity: 0;
    transform: scale(0.995);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.stage-view[data-active="true"] {
  display: block;
  animation: stageViewHaloIn 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   STAGE 0: PROJECT LOBBY (Start Screen — Choose Format or Open Project)
   ========================================================================== */

.lobby-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.lobby-hero {
  margin-bottom: 24px;
}

.lobby-hero h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.lobby-hero p {
  color: var(--text-secondary);
  font-size: 14px;
}

.lobby-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* 5 Format Cards in Lobby */
.lobby-formats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

@media (max-width: 960px) {
  .lobby-formats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.format-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 15px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface-1);
  cursor: pointer;
  text-align: left;
  transition: all 150ms ease;
}

.format-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.format-card[data-selected="true"] {
  border-color: var(--accent-primary);
  background: var(--accent-soft);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.format-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  margin-bottom: 10px;
  transition: all 150ms ease;
}

.format-card:hover .format-card-icon,
.format-card[data-selected="true"] .format-card-icon {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: transparent;
}

.format-card-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.format-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.42;
}

/* Quick Launch Strip right below the 5 format cards */
.quick-create-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.quick-create-bar input {
  flex: 1;
  min-width: 200px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  font-size: 14px;
  font-family: var(--font-ui);
  color: var(--text-primary);
}

.quick-create-bar input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

/* Existing Projects Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.project-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 140ms ease;
}

.project-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

.project-card[data-current="true"] {
  border-color: var(--accent-primary);
  box-shadow: inset 3px 0 0 var(--accent-primary);
}

.project-card-title {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  margin: 8px 0 6px;
}

.project-card-logline {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  gap: 8px;
}

/* ==========================================================================
   STAGE 2: MANUSCRIPT EDITOR (Left Scene List + Clean Paper Sheet)
   ========================================================================== */

.manuscript-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  height: 100%;
  width: 100%;
  min-width: 0;
  position: relative;
}

.manuscript-layout[data-outline="false"] {
  grid-template-columns: minmax(0, 1fr);
}

.manuscript-layout[data-outline="false"] .scene-outline-sidebar {
  display: none;
}

/* Edge restore tab visible when outline sidebar is collapsed */
.outline-edge-restore-btn {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 24px;
  height: 56px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-strong);
  border-left: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  transition: all 140ms ease;
}

.outline-edge-restore-btn:hover {
  background: var(--accent-primary);
  color: #fff;
  width: 28px;
}

.manuscript-layout[data-outline="false"] .outline-edge-restore-btn {
  display: flex;
}

#btnToggleOutline[aria-expanded="false"] {
  border: 1px solid var(--accent-primary) !important;
  background: var(--accent-soft) !important;
  color: var(--accent-primary) !important;
}

/* Left Scene / Chapter Outline */
.scene-outline-sidebar {
  background: var(--bg-surface-1);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.outline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 8px;
}

.outline-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

#btnToggleOutline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 140ms ease;
}

#btnToggleOutline[aria-expanded="false"] {
  background: var(--bg-surface-2);
  color: var(--accent-primary);
  border-color: var(--border-subtle);
}

#btnToggleOutline[aria-expanded="false"]:hover {
  background: var(--accent-soft);
  color: var(--accent-primary-hover);
  border-color: var(--accent-primary);
}

.outline-header-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.outline-search-wrap {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.outline-search-input {
  width: 100%;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font-ui);
}

.outline-search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.outline-list,
#sceneTreeList {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 8px;
}

.outline-list::-webkit-scrollbar,
#sceneTreeList::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.outline-act-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 10px 8px 4px;
}

.outline-act-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
  padding: 0;
  transition: all 120ms ease;
}

.outline-act-add-btn:hover {
  border-color: var(--border-subtle);
  background: var(--bg-surface-2);
  color: var(--accent-primary);
}

.outline-episode-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  margin: 4px 0 3px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 120ms ease;
}

.outline-episode-toggle:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.outline-episode-toggle[data-expanded="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.outline-comic-pages-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 6px;
}

.outline-comic-pages-grid .outline-scene-item {
  padding: 5px 7px;
  font-size: 11.5px;
  margin-bottom: 0;
  border: 1px solid transparent;
  background: var(--bg-canvas);
}

.outline-comic-pages-grid .outline-scene-item:hover {
  border-color: var(--border-strong);
}

.outline-comic-pages-grid .outline-scene-meta {
  font-size: 10px;
}

.outline-scene-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  transition: background 120ms ease;
}

.outline-scene-row:hover {
  background: var(--bg-surface-2);
}

.outline-scene-row.is-current {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent-primary);
}

.outline-scene-item {
  flex: 1;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 8px 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  margin-bottom: 0;
  transition: background 120ms ease, color 120ms ease;
}

.outline-scene-item:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

.outline-scene-item[aria-current="true"],
.outline-scene-item[aria-selected="true"],
.outline-scene-item.active {
  background: var(--accent-soft);
  color: var(--text-primary);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent-primary);
}

.outline-scene-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-right: 4px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}

.outline-scene-row:hover .outline-scene-delete-btn,
.outline-scene-delete-btn:focus-visible {
  opacity: 0.9;
}

.outline-scene-delete-btn:hover {
  opacity: 1;
  color: var(--danger, #c94a4a);
  background: rgba(201, 74, 74, 0.12);
}

.outline-scene-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.outline-scene-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Center Writing Desk */
.writing-desk {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-desk);
  position: relative;
}

/* Subtle Single-Row Format Bar above the sheet */
.format-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: var(--bg-surface-1);
  border-bottom: 1px solid var(--border-subtle);
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
  flex-wrap: wrap;
  position: relative;
  z-index: 45;
}

.format-ribbon-left,
.format-ribbon-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.format-pills-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.format-btn {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms ease;
}

.format-btn:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

.format-btn[data-active="true"] {
  background: var(--accent-soft);
  color: var(--accent-primary);
  border-color: rgba(232, 131, 100, 0.35);
  font-weight: 700;
}

.ribbon-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

@media (max-width: 1280px) {
  .ribbon-hint {
    display: none;
  }
}

/* Scrollable Desk Viewport & Real Paper Sheet */
.paper-scroll-viewport {
  container-type: inline-size;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 24px 35vh;
  scroll-behavior: smooth;
}

.paper-sheet {
  --paper-left: 100px;
  --paper-right: 76px;
  width: min(100%, 780px);
  min-height: calc(min(100cqw, 780px) * 297 / 210);
  height: auto;
  margin: 0 auto;
  background: var(--bg-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  box-shadow: var(--paper-shadow);
  padding: 48px 76px 96px 100px;
  position: relative;
  font-family: var(--font-script);
}

[data-theme="warm-paper"] .paper-sheet {
  background-color: #f1e7d2;
  background-image:
    radial-gradient(ellipse 90% 85% at 50% 38%, rgba(250, 243, 228, 0.78) 0%, rgba(241, 231, 210, 0.45) 68%, rgba(226, 211, 183, 0.72) 100%),
    linear-gradient(180deg, rgba(255, 250, 238, 0.35) 0%, rgba(232, 218, 192, 0.25) 100%);
  border-color: #cbbda2;
  box-shadow:
    var(--paper-shadow),
    inset 0 0 42px rgba(138, 104, 56, 0.09),
    inset 0 0 0 1px rgba(168, 140, 96, 0.22);
}

[data-theme="warm-paper"] .paper-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url('/css/newsprint-texture.svg');
  opacity: 0.055;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

@media (max-width: 900px) {
  .paper-sheet {
    --paper-left: 32px;
    --paper-right: 24px;
    padding: 32px 24px 64px 32px;
  }
}

/* Scene / Chapter Header directly on top of the paper sheet */
.sheet-scene-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1px dashed var(--border-strong);
}

.sheet-scene-title-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 2px 0;
}

.sheet-scene-title-input:focus {
  outline: none;
  border-bottom: 1px solid var(--accent-primary);
}

.sheet-scene-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sheet-mini-select {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 2px 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}

.sheet-mini-select:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* ==========================================================================
   TRUE CONTINUOUS SCRIPT & BOOK TYPOGRAPHY (100% Typewriter Font)
   ========================================================================== */

.blocks-container {
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: var(--font-ui);
}

/* Focus Mode dimming */
.blocks-container[data-focus-mode="paragraph"] .script-line:not([data-focused="true"]) {
  opacity: 0.25;
  transition: opacity 150ms ease;
}

.script-line {
  position: relative;
  width: 100%;
  transition: opacity 140ms ease;
}

/* Subtle left-margin element hint — ONLY visible on the currently focused/hovered line */
.line-margin-tag {
  position: absolute;
  left: -88px;
  top: 4px;
  width: 78px;
  text-align: right;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 120ms ease, color 120ms ease;
}

.script-line[data-focused="true"] .line-margin-tag,
.script-line:hover .line-margin-tag {
  opacity: 0.85;
  pointer-events: auto;
  cursor: pointer;
}

.script-line[data-focused="true"] .line-margin-tag {
  color: var(--accent-primary);
  opacity: 1;
}

/* Seamless Auto-Resizing Textarea inside each line */
.block-editor-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-script) !important;
  font-size: 16px;
  line-height: 1.58;
  padding: 2px 0;
  display: block;
}

.block-editor-input::placeholder {
  color: transparent;
}

.block-editor-input[contenteditable] {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 26px;
  height: auto;
  cursor: text;
}

#blocksContainer { user-select: none; outline: none; }
#blocksContainer .block-editor-input { user-select: text; }
#blocksContainer .script-line > :not(.block-editor-input)::selection,
#blocksContainer .script-line > :not(.block-editor-input) ::selection,
#blocksContainer .starc-page-break ::selection { background: transparent; color: inherit; }

.block-editor-input[data-empty="true"]::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
}

.block-editor-input strong { font-weight: 700; }
.block-editor-input em { font-style: italic; }
.block-editor-input u { text-decoration: underline; text-underline-offset: 3px; }
.block-editor-input s { text-decoration: line-through; }

.selection-toolbar,
.paragraph-menu {
  position: fixed;
  z-index: 600;
  max-width: calc(100vw - 16px);
  padding: 5px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--bg-surface-1);
  box-shadow: var(--paper-shadow);
  font-family: var(--font-ui);
}

.selection-toolbar[hidden], .paragraph-menu[hidden], .format-overflow[hidden] { display: none !important; }
.selection-toolbar-main { display: flex; align-items: center; gap: 3px; }
.selection-toolbar .style-icon-btn { min-width: 38px; min-height: 38px; }
.selection-toolbar svg { width: 16px; height: 16px; }
.selection-toolbar [aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-primary); }
.selection-toolbar button:focus-visible, .paragraph-menu button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.format-overflow { display: flex; gap: 4px; padding-top: 5px; margin-top: 5px; border-top: 1px solid var(--border-subtle); }
.paragraph-menu { width: 260px; display: flex; flex-wrap: wrap; gap: 4px; }
.paragraph-menu .style-icon-btn { min-width: 42px; min-height: 38px; }
.paragraph-menu .style-pill-btn, .paragraph-menu > .btn { flex: 1 0 100%; justify-content: flex-start; padding: 8px; }
.format-menu-caption { width: 100%; padding: 5px 8px; color: var(--text-muted); font-size: 11px; }
.paragraph-menu-trigger { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 16px; padding: 0 3px; opacity: 0; }
.script-line:hover .paragraph-menu-trigger, .script-line[data-focused="true"] .paragraph-menu-trigger, .paragraph-menu-trigger:focus-visible { opacity: 1; }

.vault-folder-bar {
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--bg-surface-elevated, rgba(255,255,255,0.03));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  flex-wrap: wrap;
}
.vault-folder-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 320px;
  min-width: 0;
}
.vault-folder-bar-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  margin: 0;
  flex-shrink: 0;
}
.vault-folder-bar .field-select,
.vault-folder-bar .ui-dropdown,
.vault-folder-bar .ui-dropdown[data-variant="field"] {
  width: 280px;
  max-width: 100%;
  flex: 0 1 280px;
  margin: 0;
}
.vault-folder-bar .ui-dropdown[data-variant="field"] .ui-dropdown-trigger,
.vault-folder-bar .field-select {
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-sm, 6px);
  box-sizing: border-box;
}
.vault-folder-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.vault-folder-bar-stats {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.vault-folder-bar .vault-open-project-btn,
#btnOpenSelectedFolderAsProject {
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-sm, 6px);
  box-sizing: border-box;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.format-shortcut-help { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
#btnMobileFormat { display: none; }

@media (max-width: 760px) {
  #btnMobileFormat { display: block; position: fixed; right: 12px; bottom: 38px; z-index: 50; background: var(--bg-surface-1); border: 1px solid var(--border-strong); box-shadow: var(--paper-shadow); min-height: 42px; }
  .selection-toolbar .style-icon-btn { min-width: 38px; min-height: 44px; }
  .selection-toolbar .style-pill-btn span { font-size: 11px; }
  .paragraph-menu-trigger { opacity: 1; }
}

.script-line[data-focused="true"] .block-editor-input::placeholder {
  color: var(--text-muted);
  opacity: 0.45;
}

/* --- Format 1, 4, 5: SCREENPLAY / AUDIOPLAY / STAGEPLAY INDENTATION --- */
.paper-sheet[data-doc-format="screenplay"] .block-editor-input,
.paper-sheet[data-doc-format="audioplay"] .block-editor-input,
.paper-sheet[data-doc-format="stageplay"] .block-editor-input {
  font-family: var(--font-script) !important;
  font-size: 16px;
  line-height: 1.54;
}

.script-line[data-block-type="scene_heading"] {
  margin-top: 18px;
  margin-bottom: 8px;
}

.script-line[data-block-type="scene_heading"]:first-child {
  margin-top: 2px;
}

.script-line[data-block-type="scene_heading"] .block-editor-input {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg-surface-2);
  padding: 6px 10px;
  border-radius: 4px;
}

.script-line[data-block-type="action"] {
  margin-top: 6px;
  margin-bottom: 6px;
}

.script-line[data-block-type="character"] {
  margin-top: 14px;
  margin-bottom: 0;
}

.script-line[data-block-type="character"] .block-editor-input {
  padding-left: 32%;
  padding-right: 12%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-primary);
}

.script-line[data-block-type="parenthetical"] {
  margin-top: 0;
  margin-bottom: 0;
}

.script-line[data-block-type="parenthetical"] .block-editor-input {
  padding-left: 25%;
  padding-right: 20%;
  font-style: italic;
  color: var(--text-secondary);
}

.script-line[data-block-type="dialogue"] {
  margin-top: 2px;
  margin-bottom: 8px;
}

.script-line[data-block-type="dialogue"] .block-editor-input {
  padding-left: 16%;
  padding-right: 16%;
}

.script-line[data-block-type="transition"] {
  margin-top: 12px;
  margin-bottom: 12px;
}

.script-line[data-block-type="transition"] .block-editor-input {
  text-align: right;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* --- Format 2: NOVEL / PROSE MANUSCRIPT TYPOGRAPHY (Book Publishing Style) --- */
.paper-sheet[data-doc-format="novel"] .sheet-scene-header {
  border-bottom: 2px double var(--border-strong);
  padding-bottom: 16px;
  margin-bottom: 26px;
}

.paper-sheet[data-doc-format="novel"] .sheet-scene-title-input {
  font-family: var(--font-script) !important;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

/* Prevent duplicate chapter heading when blocks[0] repeats the header chapter title */
.paper-sheet[data-doc-format="novel"] .blocks-container > .script-line[data-block-type="chapter"][data-duplicate-chapter="true"] {
  display: none;
}

.paper-sheet[data-doc-format="novel"] .block-editor-input {
  font-family: var(--font-script) !important;
  font-size: 16.5px;
  line-height: 1.68;
}

/* Chapter Headings: generous breathing room above and below, centered, no paragraph indent */
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="chapter"] {
  margin-top: 36px !important;
  margin-bottom: 20px !important;
}

.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="chapter"] .block-editor-input {
  font-family: var(--font-script) !important;
  font-size: 20px;
  font-weight: 700;
  text-align: center !important;
  text-indent: 0 !important;
  letter-spacing: 0.03em;
  border-bottom: 1px dashed var(--border-subtle);
  padding-bottom: 8px;
}

/* Continuous Book Prose: no huge vertical gaps between paragraphs */
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="action"],
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="dialogue"],
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="thought"] {
  margin-top: 0 !important;
  margin-bottom: 2px !important;
}

.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="terminal"] {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

/* First-line paragraph indent (Красная строка / Абзацный отступ ~1.5em) & Justified text alignment */
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="action"] .block-editor-input,
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="dialogue"] .block-editor-input,
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="thought"] .block-editor-input {
  text-indent: 1.5em !important;
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-left: none !important;
}

/* Thought mode: elegant italics, same default typewriter font */
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="thought"] .block-editor-input {
  font-style: italic !important;
}

/* Terminal / System Log mode: same typewriter font and standard manuscript color, 0 indent */
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="terminal"] .block-editor-input {
  font-family: var(--font-script) !important;
  text-indent: 0 !important;
  text-align: left !important;
}

/* Scene breaks / section dividers in novel mode */
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="scene_heading"] {
  margin-top: 24px !important;
  margin-bottom: 16px !important;
}

.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="scene_heading"] .block-editor-input {
  text-align: center !important;
  text-indent: 0 !important;
  background: transparent !important;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Note: unified note styling defined below in Diogenes Indigo palette */

/* --- Format 3: COMIC BOOK TYPOGRAPHY --- */
.paper-sheet[data-doc-format="comic_book"] {
  aspect-ratio: auto;
}

.paper-sheet[data-doc-format="comic_book"] [data-for-select="sceneActSelect"] {
  display: none;
}

.paper-sheet[data-doc-format="comic_book"] .script-line[data-block-type="page_heading"] {
  margin: 12px 0 24px;
  border-bottom: 2px solid var(--border-strong);
  padding-bottom: 10px;
}

.paper-sheet[data-doc-format="comic_book"] .script-line[data-block-type="page_heading"] .block-editor-input {
  width: calc(100% - 90px);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.paper-sheet[data-doc-format="comic_book"] .script-line[data-block-type="panel_heading"] {
  margin: 24px 0 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.paper-sheet[data-doc-format="comic_book"] .script-line[data-block-type="panel_heading"] .block-editor-input {
  font-weight: 700;
  color: var(--accent-primary);
}

.paper-sheet[data-doc-format="comic_book"] .script-line:is([data-block-type="page_heading"], [data-block-type="panel_heading"]) .line-margin-tag {
  display: none;
}

.comic-panel-count {
  position: absolute;
  right: 12px;
  top: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

.comic-page-divider {
  height: 36px;
  margin: 48px calc(-1 * var(--paper-right) - 1px) 40px calc(-1 * var(--paper-left) - 1px);
  background: var(--bg-desk);
  border-block: 1px solid var(--border-strong);
  box-shadow: inset 0 5px 10px -8px var(--border-strong);
}

@media (max-width: 900px) {
  .comic-page-divider { margin-top: 36px; margin-bottom: 28px; }
}

.paper-sheet[data-doc-format="comic_book"] .script-line[data-block-type="chapter"] .block-editor-input {
  font-family: var(--font-script) !important;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.paper-sheet[data-doc-format="comic_book"] .script-line[data-block-type="scene_heading"] .block-editor-input {
  background: var(--accent-soft);
  color: var(--accent-primary);
  border-left: 3px solid var(--accent-primary);
  padding: 6px 12px;
  font-weight: 700;
}

.paper-sheet[data-doc-format="comic_book"] .script-line[data-block-type="character"] .block-editor-input {
  padding-left: 0;
  font-weight: 700;
  color: var(--accent-secondary);
}

.paper-sheet[data-doc-format="comic_book"] .script-line[data-block-type="dialogue"] .block-editor-input {
  padding-left: 18px;
  padding-right: 8%;
  border-left: 2px solid var(--border-strong);
}

/* Inline Wiki-link pills under a line when [[Character]] is mentioned */
.line-entity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
  margin-bottom: 4px;
}

.entity-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 11px;
  background: var(--accent-secondary-soft);
  color: var(--accent-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
}

.entity-chip-btn .ui-icon {
  flex-shrink: 0;
}

.entity-chip-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-chip-btn:hover {
  border-color: var(--accent-secondary);
}

.entity-chip-more-btn {
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: 1px dashed var(--border-strong);
  font-weight: 600;
}

.entity-chip-more-btn:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

/* ==========================================================================
   INLINE AUTOCOMPLETE POPUP (Characters, Locations, INT./EXT.)
   ========================================================================== */

.autocomplete-popup {
  position: fixed;
  z-index: 120;
  min-width: 240px;
  max-width: 340px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  padding: 5px;
  display: none;
}

.autocomplete-popup[data-open="true"] {
  display: block;
}

.autocomplete-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 4px 8px;
}

.autocomplete-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.autocomplete-item:hover,
.autocomplete-item[data-active="true"] {
  background: var(--accent-soft);
  color: var(--accent-primary);
}

.autocomplete-item-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* ==========================================================================
   SLIDE-OVER ASSISTANT DRAWER (Hidden by default — Zero Clutter!)
   ========================================================================== */

/* Backdrop behind the drawer: clicking dismisses it */
.assistant-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 38;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.assistant-drawer-backdrop[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 901px) {
  .assistant-drawer-backdrop {
    display: none !important;
  }
}

.assistant-edge-collapse-btn {
  position: absolute;
  top: 50%;
  right: 340px;
  transform: translateY(-50%);
  width: 24px;
  height: 52px;
  border-radius: 8px 0 0 8px;
  border: 1px solid var(--border-strong);
  border-right: none;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 46;
  box-shadow: -4px 0 14px rgba(0, 0, 0, 0.35);
  transition: background 140ms ease, color 140ms ease, width 140ms ease;
}

.assistant-edge-collapse-btn[data-open="true"] {
  display: flex;
}

.assistant-edge-collapse-btn:hover {
  background: var(--accent-soft);
  color: var(--accent-primary);
  width: 28px;
}

.assistant-drawer {
  position: absolute;
  top: 40px;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 90vw;
  background: var(--bg-surface-1);
  border-left: 1px solid var(--border-strong);
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.4);
  z-index: 40;
  padding: 0 18px 24px;
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  transform: translateX(100%);
  transition: transform 180ms ease;
}

/* Sticky Header: ALWAYS visible regardless of scroll position */
.assistant-drawer-header {
  position: sticky;
  top: 0;
  margin: 0 -18px 14px;
  padding: 14px 18px;
  background: var(--bg-surface-1);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Edge Collapse Button inside Sticky Header */
.assistant-drawer-edge-collapse {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 4px;
  border: none;
  background: transparent;
  transition: background 120ms ease, color 120ms ease;
}

.assistant-drawer-edge-collapse:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

.assistant-drawer .clean-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.assistant-drawer[data-open="true"] {
  transform: translateX(0);
}

/* ==========================================================================
   STAGE 1 (CONCEPT & PASSPORT), STAGE 3 (CORKBOARD), STAGE 4 (WORLD), STAGE 5 (EXPORT)
   ========================================================================== */

.clean-page-wrap {
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.clean-card {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 20px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
}

.form-grid-2 > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

@media (max-width: 720px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.field-input,
.field-textarea,
.field-select {
  width: 100%;
  max-width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary);
}

.field-textarea {
  resize: vertical;
  scrollbar-width: none;
}

.field-textarea::-webkit-scrollbar {
  display: none;
}

#sceneNotesTextarea {
  resize: none !important;
  overflow: hidden !important;
  width: 100% !important;
  min-height: 76px;
  line-height: 1.5;
}

.field-input:focus,
.field-textarea:focus,
.field-select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

/* Corkboard: Panoramic Flow Grid, Structural Columns & Tactile Index Cards */
.corkboard-wrap {
  --card-min-w: 220px;
  --card-max-w: 260px;
  --card-min-h: 140px;
  --corkboard-zoom: 1;
  max-width: 1640px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 20px 54px;
  position: relative;
}

.corkboard-wrap[data-card-density="compact"] {
  --card-min-w: 145px;
  --card-max-w: 168px;
  --card-min-h: 88px;
}

.corkboard-wrap[data-card-density="standard"] {
  --card-min-w: 220px;
  --card-max-w: 260px;
  --card-min-h: 140px;
}

.corkboard-wrap[data-card-density="detailed"] {
  --card-min-w: 285px;
  --card-max-w: 360px;
  --card-min-h: 200px;
}

.corkboard-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

.corkboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}

.corkboard-control-group {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}

.corkboard-mode-btn,
.corkboard-density-btn {
  border-color: transparent;
  background: transparent;
  font-size: 12px;
  padding: 5px 10px;
}

.corkboard-mode-btn[aria-pressed="true"],
.corkboard-density-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--text-primary);
  border-color: var(--accent-primary);
  font-weight: 600;
}

.corkboard-zoom-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
}

.corkboard-zoom-control input[type="range"] {
  width: 84px;
  cursor: pointer;
  accent-color: var(--accent-primary);
}

.corkboard-zoom-value {
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
}

.corkboard-threads-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#btnAddCorkboardAct[hidden],
#btnCorkboardAlignColumn[hidden],
#btnAddMatrixPlotline[hidden] {
  display: none !important;
}

.corkboard-threads-btn[aria-pressed="true"] {
  border-color: #b71c1c;
  background: rgba(183, 28, 28, 0.14);
}

.corkboard-thread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c62828;
  box-shadow: 0 0 6px rgba(198, 40, 40, 0.75);
  transition: opacity 140ms ease, transform 140ms ease;
}

.corkboard-threads-btn[aria-pressed="false"] .corkboard-thread-dot {
  opacity: 0.35;
  box-shadow: none;
}

.corkboard-board-stage {
  position: relative;
  min-height: 560px;
  background-color: var(--bg-surface-2);
  background-image:
    radial-gradient(var(--border-strong, rgba(0, 0, 0, 0.12)) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  background-position: 0 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 20px;
}

.corkboard-thread-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}

.corkboard-wrap[data-corkboard-mode="columns"] .corkboard-thread-overlay,
.corkboard-wrap[data-corkboard-mode="flow"] .corkboard-thread-overlay,
.corkboard-wrap[data-corkboard-mode="matrix"] .corkboard-thread-overlay,
.corkboard-wrap[data-threads-active="false"] .corkboard-thread-overlay {
  display: none !important;
}

.corkboard-thread-shadow {
  fill: none;
  stroke: rgba(0, 0, 0, 0.4);
  stroke-width: 2.4px;
  stroke-linecap: round;
}

.corkboard-thread-line {
  fill: none;
  stroke: #ff3d00;
  stroke-width: 2px;
  stroke-opacity: 0.95;
  stroke-linecap: round;
  transition: stroke 120ms ease, stroke-width 120ms ease;
}

.corkboard-thread-overlay.has-active-thread .corkboard-thread-line:not(.is-highlighted) {
  stroke-opacity: 0.15;
}

.corkboard-thread-overlay.has-active-thread .corkboard-thread-shadow:not(.is-highlighted) {
  stroke-opacity: 0.1;
}

.corkboard-thread-line.is-highlighted {
  stroke: #ff5722;
  stroke-width: 3.2px;
  stroke-opacity: 1;
}

.corkboard-thread-knot {
  fill: #ff3d00;
  stroke: #2a1510;
  stroke-width: 1px;
}

/* Mode 1: Classical 3 Acts Layout */
.corkboard-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  position: relative;
  align-items: start;
  padding-top: 4px;
}

.corkboard-wrap[data-card-density="compact"] .corkboard-columns {
  gap: 10px;
}

@media (max-width: 860px) {
  .corkboard-columns {
    grid-template-columns: 1fr;
  }
}

.corkboard-act-col {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 6px);
  padding: 12px;
  min-height: 480px;
  max-height: calc(100vh - 210px);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.corkboard-wrap[data-card-density="compact"] .corkboard-act-col {
  padding: 8px;
  min-height: 360px;
  max-height: calc(100vh - 210px);
}

.corkboard-act-col-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-right: 4px;
}

.corkboard-columns .index-card {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* Mode 2: Panoramic Flow Grid (Аналог Scrivener / Story Architect Corkboard Grid) */
.corkboard-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min-w, 240px), 1fr));
  gap: 20px 18px;
  position: relative;
  align-items: stretch;
  padding: 8px 4px 48px;
}

.corkboard-wrap[data-card-density="compact"] .corkboard-flow-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min-w, 150px), 1fr));
  gap: 14px 12px;
  padding: 6px 2px 32px;
}

.corkboard-wrap[data-card-density="detailed"] .corkboard-flow-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min-w, 290px), 1fr));
  gap: 24px 20px;
  padding: 10px 4px 54px;
}

/* Mode 3: Branching Story DAG (Дерево ветвления сюжета) */
.corkboard-branching {
  display: flex;
  gap: 36px;
  overflow-x: auto;
  padding: 16px 20px 48px;
  position: relative;
  align-items: flex-start;
  min-height: 520px;
}

.corkboard-branch-level {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: var(--card-min-w, 220px);
  max-width: var(--card-max-w, 260px);
  position: relative;
  flex-shrink: 0;
}

.corkboard-branch-level-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-subtle);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}

/* Mode 4: Freeform Mind Canvas (Свободный 2D холст Obsidian Canvas) */
.corkboard-wrap[data-corkboard-mode="canvas"] .corkboard-board-stage {
  overflow: auto;
  cursor: grab;
}

.corkboard-wrap[data-corkboard-mode="canvas"] .corkboard-board-stage:active {
  cursor: grabbing;
}

.corkboard-canvas {
  position: relative;
  min-height: 850px;
  width: 100%;
  min-width: 1800px;
  overflow: visible;
}

.corkboard-canvas .index-card {
  position: absolute;
  margin: 0;
  width: var(--card-w, 250px);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: box-shadow 120ms ease;
}

.corkboard-canvas .index-card.is-dragging {
  cursor: grabbing !important;
  z-index: 100 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28) !important;
  opacity: 0.96;
}

.corkboard-canvas .index-card-synopsis,
.corkboard-canvas .index-card button,
.corkboard-canvas .index-card a {
  cursor: auto;
  user-select: text;
}

/* Obsidian Canvas 4-side Connection Ports */
.canvas-port {
  display: none;
}

.corkboard-canvas .index-card .canvas-port {
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-surface-1);
  border: 2px solid #ff3d00;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: crosshair;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease;
  z-index: 12;
  touch-action: none;
}

.corkboard-canvas .index-card:hover .canvas-port,
.corkboard-canvas .index-card.is-linking-source .canvas-port,
.corkboard-canvas .index-card.is-linking-target-candidate .canvas-port {
  opacity: 0.92;
}

.corkboard-canvas .index-card .canvas-port:hover {
  opacity: 1;
  background: #ff3d00;
  transform: scale(1.28);
}

.corkboard-canvas .index-card .canvas-port-top {
  top: -7px;
  left: calc(50% - 6px);
}

.corkboard-canvas .index-card .canvas-port-bottom {
  bottom: -7px;
  left: calc(50% - 6px);
}

.corkboard-canvas .index-card .canvas-port-left {
  left: -7px;
  top: calc(50% - 6px);
}

.corkboard-canvas .index-card .canvas-port-right {
  right: -7px;
  top: calc(50% - 6px);
}

.corkboard-thread-line.is-draft-link {
  stroke: #ff5722;
  stroke-width: 2.4px;
  stroke-dasharray: 6 4;
  stroke-opacity: 0.95;
}

/* Mode 5: Story Matrix (Матрица сюжета — пересечение сюжетных линий и глав) */
.corkboard-matrix {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 210px);
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.corkboard-matrix-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

.corkboard-matrix-table th,
.corkboard-matrix-table td {
  border-right: 1px solid var(--border-subtle, rgba(128, 128, 128, 0.18));
  border-bottom: 1px solid var(--border-subtle, rgba(128, 128, 128, 0.18));
  vertical-align: top;
  padding: 10px 12px;
}

.corkboard-matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-weight: 700;
  text-align: left;
}

.corkboard-matrix-corner {
  position: sticky !important;
  left: 0;
  z-index: 6 !important;
  min-width: 220px;
  max-width: 250px;
  background: var(--bg-surface-2) !important;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.06);
}

.matrix-col-header {
  min-width: calc(var(--card-min-w, 210px) * 0.92);
  max-width: calc(var(--card-max-w, 250px) * 0.95);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.matrix-col-header:hover {
  background: var(--accent-soft, rgba(240, 138, 108, 0.14));
}

.matrix-col-num {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.matrix-col-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matrix-track-cell {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 220px;
  max-width: 250px;
  background: var(--bg-surface-1);
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
}

.matrix-track-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  border-left: 4px solid var(--plotline-color, #e53935);
  padding-left: 8px;
}

.matrix-track-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.3;
}

.matrix-track-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

.matrix-track-delete-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.15;
  padding: 2px 4px;
  border-radius: 3px;
}

.matrix-track-delete-btn:hover {
  color: var(--semantic-error, #d32f2f);
  background: rgba(211, 47, 47, 0.1);
}

.matrix-cell {
  min-width: calc(var(--card-min-w, 210px) * 0.92);
  max-width: calc(var(--card-max-w, 250px) * 0.95);
  background: var(--bg-surface-1);
  transition: background-color 120ms ease;
}

.matrix-beat-card {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--plotline-color, #e53935);
  border-radius: 5px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.matrix-beat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.matrix-beat-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.12);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matrix-beat-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.matrix-beat-open-btn,
.matrix-beat-remove-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.15;
}

.matrix-beat-open-btn:hover {
  color: var(--accent-primary);
  background: var(--accent-soft);
}

.matrix-beat-remove-btn:hover {
  color: var(--semantic-error, #d32f2f);
  background: rgba(211, 47, 47, 0.12);
}

.matrix-beat-synopsis {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-primary);
  min-height: 32px;
  outline: none;
  border-radius: 3px;
  padding: 2px 3px;
  word-break: break-word;
}

.matrix-beat-synopsis:focus {
  background: var(--bg-surface-1);
  box-shadow: 0 0 0 1px var(--accent-primary);
}

.matrix-beat-synopsis:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  opacity: 0.7;
  font-style: italic;
}

.matrix-empty-slot {
  height: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matrix-assign-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px dashed var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  opacity: 0.35;
  transition: all 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.matrix-cell:hover .matrix-assign-btn,
.matrix-assign-btn:focus {
  opacity: 1;
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--accent-soft);
}

/* Branch & Link interactive elements */
.index-card-branches-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #ff5722;
  background: rgba(255, 87, 34, 0.12);
  border: 1px solid rgba(255, 87, 34, 0.3);
  border-radius: 3px;
  padding: 1px 5px;
  cursor: pointer;
  white-space: nowrap;
}

.index-card-branches-badge:hover {
  background: rgba(255, 87, 34, 0.22);
}

.index-card-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border-subtle);
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 120ms ease;
}

.index-card-connect-btn:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background: var(--accent-soft);
}

/* Linking mode card highlight */
.index-card.is-linking-source {
  outline: 2px solid #ff3d00;
  box-shadow: 0 0 16px rgba(255, 61, 0, 0.45);
}

.index-card.is-linking-target-candidate {
  cursor: crosshair;
  border-color: #ff9800;
}

.index-card.is-linking-target-candidate:hover {
  outline: 2px dashed #ff9800;
}

/* Link Modal Backdrop */
.corkboard-link-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.corkboard-link-dialog-backdrop[hidden] {
  display: none !important;
}

.corkboard-link-dialog {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  width: 90%;
  max-width: 440px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.corkboard-link-dialog-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}

#corkboardLinkSourceSelect,
#corkboardLinkTargetSelect {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 4px);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

#corkboardLinkSourceSelect option,
#corkboardLinkTargetSelect option {
  background: var(--bg-surface-1);
  color: var(--text-primary);
  padding: 8px 10px;
}

.corkboard-rel-chip {
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.corkboard-rel-chip:hover,
.corkboard-rel-chip.btn-primary {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}

/* Specific theme styling for Warm Paper ("Бумага") */
[data-theme="warm-paper"] .corkboard-wrap {
  background: var(--bg-canvas, #dfd5c2);
}

[data-theme="warm-paper"] .corkboard-board-stage {
  background-color: #d7ccb6;
  background-image: radial-gradient(rgba(92, 72, 48, 0.18) 1.2px, transparent 1.2px);
  border: 1px solid #c5b69c;
  box-shadow: inset 0 2px 6px rgba(45, 33, 16, 0.1);
}

[data-theme="warm-paper"] .corkboard-act-col {
  background-color: #e5dbc6;
  border-color: #cbbda2;
  box-shadow: 0 2px 6px rgba(45, 33, 16, 0.07);
}

[data-theme="warm-paper"] .index-card,
[data-theme="warm-paper"] .corkboard-columns .index-card,
[data-theme="warm-paper"] .corkboard-flow-grid .index-card,
[data-theme="warm-paper"] .corkboard-canvas .index-card,
[data-theme="warm-paper"] .matrix-beat-card {
  background-color: #f1e7d2;
  background-image:
    radial-gradient(ellipse 90% 85% at 50% 38%, rgba(250, 243, 228, 0.78) 0%, rgba(241, 231, 210, 0.45) 68%, rgba(226, 211, 183, 0.72) 100%),
    linear-gradient(180deg, rgba(255, 250, 238, 0.35) 0%, rgba(232, 218, 192, 0.25) 100%);
  border-color: #cbbda2;
  color: #221f1b;
  box-shadow:
    0 4px 12px rgba(45, 33, 16, 0.1),
    inset 0 0 24px rgba(138, 104, 56, 0.08),
    inset 0 0 0 1px rgba(168, 140, 96, 0.2);
}

[data-theme="warm-paper"] .corkboard-matrix {
  background-color: #e5dbc6;
  border-color: #c5b69c;
}

[data-theme="warm-paper"] .corkboard-matrix-table thead th,
[data-theme="warm-paper"] .corkboard-matrix-corner {
  background-color: #dcd0b8 !important;
  border-color: #c5b69c;
}

[data-theme="warm-paper"] .matrix-track-cell,
[data-theme="warm-paper"] .matrix-cell {
  background-color: #e8dfd0;
  border-color: #cfc2a8;
}

[data-theme="warm-paper"] .corkboard-link-dialog {
  background-color: var(--bg-surface-1);
  border-color: #c5b9a5;
  box-shadow: 0 16px 40px rgba(45, 35, 20, 0.18);
}

[data-theme="warm-paper"] #corkboardLinkSourceSelect,
[data-theme="warm-paper"] #corkboardLinkTargetSelect {
  background-color: #f4efe4;
  color: #221f1b;
  border-color: #c5b9a5;
}

[data-theme="warm-paper"] #corkboardLinkSourceSelect option,
[data-theme="warm-paper"] #corkboardLinkTargetSelect option {
  background-color: #fbf8f1;
  color: #221f1b;
}

[data-theme="warm-paper"] .corkboard-rel-chip {
  background: #eae3d4;
  color: #575046;
  border-color: #dcd3c2;
}

[data-theme="warm-paper"] .corkboard-rel-chip:hover,
[data-theme="warm-paper"] .corkboard-rel-chip.btn-primary {
  background: var(--accent-primary);
  color: #fff8ec;
  border-color: var(--accent-primary);
}

.corkboard-act-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 8px;
}

.corkboard-act-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.corkboard-act-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-surface-2);
  font-size: 11px;
  color: var(--text-secondary);
}

.corkboard-act-add-btn {
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.15;
}

/* Index Card & Pushpin */
.index-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--card-min-h, 140px);
  background: var(--bg-paper);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px 12px 12px;
  cursor: grab;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, opacity 140ms ease;
  z-index: 2;
}

.index-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  z-index: 6;
}

.index-card.is-dragging {
  opacity: 0.45;
  transform: rotate(3deg) scale(0.98) !important;
  cursor: grabbing;
  z-index: 10;
}

.index-card-pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e65100, #b71c1c 70%, #4a0000 100%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}

.index-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.index-card-meta-num {
  font-size: calc(11px * var(--corkboard-zoom, 1));
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.index-card-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent-primary);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.index-card-title {
  font-family: var(--font-ui);
  font-size: calc(13.5px * var(--corkboard-zoom, 1));
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.index-card-slug {
  font-family: var(--font-ui);
  font-size: calc(11.5px * var(--corkboard-zoom, 1));
  color: var(--text-muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.index-card-slug:empty {
  display: none;
}

.index-card-synopsis {
  font-size: calc(12px * var(--corkboard-zoom, 1));
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 2px 0 10px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px dashed transparent;
  cursor: text;
  min-height: 38px;
  flex: 1 1 auto;
  word-break: break-word;
  white-space: pre-wrap;
}

.index-card-synopsis:hover {
  border-color: var(--border-subtle);
  background: rgba(0, 0, 0, 0.04);
}

.index-card-synopsis:focus {
  outline: none;
  border-style: solid;
  border-color: var(--accent-primary);
  background: rgba(255, 255, 255, 0.14);
}

.index-card-synopsis:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-style: italic;
}

.index-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.index-card-tags:empty {
  display: none;
}

.index-card-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.index-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.index-card-open-btn {
  width: 100%;
  justify-content: center;
}

/* Density Variations */
.corkboard-wrap[data-card-density="compact"] .index-card {
  padding: 10px 8px 6px;
  min-height: var(--card-min-h, 78px);
  max-height: calc(96px * var(--corkboard-zoom, 1));
  border-radius: 3px;
  justify-content: flex-start;
  gap: 2px;
}

.corkboard-wrap[data-card-density="compact"] .index-card-pin {
  width: 11px;
  height: 11px;
  top: -5px;
}

.corkboard-wrap[data-card-density="compact"] .index-card-top {
  margin-bottom: 2px;
  gap: 4px;
}

.corkboard-wrap[data-card-density="compact"] .index-card-meta-num {
  font-size: calc(10px * var(--corkboard-zoom, 1));
}

.corkboard-wrap[data-card-density="compact"] .index-card-status {
  font-size: calc(9px * var(--corkboard-zoom, 1));
  padding: 0 4px;
  line-height: 1.2;
}

.corkboard-wrap[data-card-density="compact"] .index-card-title {
  font-size: calc(11.5px * var(--corkboard-zoom, 1));
  line-height: 1.25;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.corkboard-wrap[data-card-density="compact"] .index-card-synopsis,
.corkboard-wrap[data-card-density="compact"] .index-card-slug,
.corkboard-wrap[data-card-density="compact"] .index-card-tags,
.corkboard-wrap[data-card-density="compact"] .index-card-footer {
  display: none !important;
}

.corkboard-wrap[data-card-density="standard"] .index-card-synopsis:not(:focus) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.corkboard-wrap[data-card-density="detailed"] .index-card-synopsis {
  min-height: 64px;
}

/* Drop Indicator Line */
.drop-indicator-line {
  position: absolute;
  background: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-primary), 0 0 4px rgba(229, 57, 53, 0.8);
  border-radius: 999px;
  pointer-events: none;
  z-index: 12;
}

/* Characters & Locations Grid */
.bible-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.bible-card {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ==========================================================================
   STATUS FOOTER & ZEN MODE
   ========================================================================== */

.status-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: var(--bg-surface-1);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-muted);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  contain: paint layout;
  isolation: isolate;
}

/* Tabular figures for all numeric displays */
.status-footer,
.sprint-timer-display,
.block-counter-badge,
[id*="WordCount"],
[id*="PageCount"],
[id*="Chronometer"],
[id*="Timer"] {
  font-variant-numeric: tabular-nums;
}

.status-footer-left,
.status-footer-right {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  white-space: nowrap;
}

.status-footer-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
}

.status-club-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--club-pulse-text, #3730a3);
  background: var(--club-pulse-bg, rgba(79, 70, 229, 0.07));
  border: 1px solid var(--club-pulse-border, rgba(79, 70, 229, 0.22));
  padding: 2px 10px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.status-club-pulse-badge:hover,
.status-club-pulse-badge:focus-visible,
a.status-club-pulse-badge:hover {
  border-color: var(--club-pulse-dot, #4f46e5);
  color: var(--text-primary);
  background: var(--club-pulse-bg, rgba(79, 70, 229, 0.14));
  box-shadow: 0 0 10px var(--club-pulse-glow, rgba(79, 70, 229, 0.25));
  outline: none;
}

.status-club-pulse-badge::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--club-pulse-dot, #4f46e5);
  box-shadow: 0 0 2px 0 var(--club-pulse-glow, rgba(79, 70, 229, 0.25));
  animation: club-pulse-glow 2.4s infinite ease-in-out;
  flex-shrink: 0;
  will-change: transform, opacity, box-shadow;
  transform: translateZ(0);
}

@keyframes club-pulse-glow {
  0%, 100% {
    opacity: 0.55;
    transform: scale(0.85) translateZ(0);
    box-shadow: 0 0 2px 0 var(--club-pulse-glow, rgba(79, 70, 229, 0.25));
  }
  50% {
    opacity: 1;
    transform: scale(1.28) translateZ(0);
    box-shadow: 0 0 10px 3px var(--club-pulse-glow, rgba(79, 70, 229, 0.65));
  }
}

#statusAudioTelemetry {
  color: var(--accent-primary);
  font-weight: 700;
}

/* Top Bar Club Hall Entrance Button */
.btn-club-hall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232, 131, 100, 0.08);
  border: 1px solid rgba(232, 131, 100, 0.32);
  color: var(--accent-primary);
  font-weight: 600;
  text-decoration: none;
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 11.5px;
  transition: all var(--transition-fast);
}

.btn-club-hall:hover {
  background: rgba(232, 131, 100, 0.18);
  border-color: var(--accent-primary);
  color: var(--text-primary);
  box-shadow: 0 0 14px rgba(232, 131, 100, 0.3);
  transform: translateY(-0.5px);
}

/* Grand Welcome Hall Showcase in Project Lobby */
.lobby-club-hall-card {
  margin: 16px 0 24px;
  background: radial-gradient(circle at 18% 25%, rgba(232, 131, 100, 0.12) 0%, rgba(20, 22, 27, 0.95) 75%);
  border: 1px solid var(--border-strong, rgba(232, 131, 100, 0.25));
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.lobby-club-hall-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(232, 131, 100, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.lobby-hall-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.lobby-hall-seal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-primary);
  padding: 3px 10px;
  background: rgba(232, 131, 100, 0.12);
  border: 1px solid rgba(232, 131, 100, 0.3);
  border-radius: 9999px;
}

.lobby-hall-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--club-pulse-dot, #4f46e5);
  box-shadow: 0 0 2px 0 var(--club-pulse-glow, rgba(79, 70, 229, 0.25));
  animation: club-pulse-glow 2.4s infinite ease-in-out;
  display: inline-block;
  will-change: transform, opacity, box-shadow;
  transform: translateZ(0);
}

.lobby-hall-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
}

.lobby-hall-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  max-width: 680px;
}

.lobby-hall-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ZEN MODE (F11) — Pure Paper Sheet */
.app-shell[data-zen="true"] {
  grid-template-rows: 1fr;
}

.app-shell[data-zen="true"] .top-bar,
.app-shell[data-zen="true"] .status-footer,
.app-shell[data-zen="true"] .scene-outline-sidebar,
.app-shell[data-zen="true"] .format-ribbon {
  display: none !important;
}

.app-shell[data-zen="true"] .manuscript-layout {
  grid-template-columns: 1fr !important;
}

.zen-exit-pill {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 90;
  display: none;
}

.app-shell[data-zen="true"] .zen-exit-pill {
  display: inline-flex;
}

/* ==========================================================================
   MODAL DIALOGS & TOAST
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 150;
  padding: 20px;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal-backdrop[data-open="true"],
.modal-backdrop.modal-overlay[data-open="true"] {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.modal-backdrop[data-open="false"],
.modal-backdrop:not([data-open="true"])[hidden],
.modal-backdrop:not([data-open="true"])[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
}

html[lang="en"] #supportSbpRow {
  display: none !important;
}

.modal-dialog {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.invite-code-card { background: rgba(232, 131, 100, 0.08); }

.toast-banner {
  position: fixed;
  bottom: 36px;
  right: 24px;
  background: #181614;
  color: #f7f4ed;
  border: 1px solid #d4a373;
  border-radius: var(--radius-md, 8px);
  padding: 11px 20px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 0 12px rgba(212, 163, 115, 0.28);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 10500 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast-banner[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   BESPOKE EDITORIAL SVG ICONS & DESIGNER-GRADE CUSTOM DROPDOWNS
   ========================================================================== */

.ui-icon {
  display: inline-block;
  vertical-align: -0.18em;
  flex-shrink: 0;
  color: currentColor;
  stroke: currentColor;
}

.sr-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

.ui-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.ui-dropdown[data-variant="field"] {
  display: flex;
  width: 100%;
}

.ui-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  font-family: var(--font-ui);
  color: var(--text-primary);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease, box-shadow 130ms ease;
  white-space: nowrap;
  max-width: 175px;
  min-width: 0;
}

.ui-dropdown[data-variant="field"] .ui-dropdown-trigger {
  width: 100%;
  max-width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  background: var(--bg-canvas);
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 600;
}

.ui-dropdown[data-variant="mini"] .ui-dropdown-trigger {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--text-secondary);
  max-width: 130px;
}

.ui-dropdown-trigger:hover,
.ui-dropdown[data-open="true"] .ui-dropdown-trigger {
  border-color: var(--accent-primary);
  background: var(--bg-surface-3);
  color: var(--text-primary);
}

.ui-dropdown[data-open="true"] .ui-dropdown-trigger {
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.ui-dropdown-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.ui-dropdown-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: left;
}

.ui-dropdown-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 150ms ease, color 150ms ease;
}

.ui-dropdown[data-open="true"] .ui-dropdown-chevron {
  transform: rotate(180deg);
  color: var(--accent-primary);
}

/* Floating Custom Dropdown Menu Portal */
.ui-dropdown-portal {
  position: fixed;
  z-index: 10100;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.14);
  padding: 5px;
  display: none;
  flex-direction: column;
  gap: 2px;
  max-height: 310px;
  overflow-y: auto;
  backdrop-filter: blur(10px);
}

.ui-dropdown-portal[data-open="true"] {
  display: flex;
  animation: uiDropdownFadeIn 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes uiDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ui-dropdown-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}

.ui-dropdown-option:hover,
.ui-dropdown-option[data-focused="true"] {
  background: var(--bg-surface-2);
}

.ui-dropdown-option[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent-primary);
  font-weight: 700;
}

.ui-dropdown-option-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.ui-dropdown-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.ui-dropdown-option[aria-selected="true"] .ui-dropdown-option-icon {
  color: var(--accent-primary);
}

.ui-dropdown-option-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-dropdown-option-check {
  display: inline-flex;
  align-items: center;
  color: var(--accent-primary);
  flex-shrink: 0;
}

/* Custom File Picker Control (Replaces 1990s <input type="file"> browser chrome) */
.ui-file-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  background: var(--bg-canvas);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.ui-file-picker:hover {
  border-color: var(--accent-primary);
  background: var(--accent-soft);
}

.ui-file-picker input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* ==========================================================================
   TEXT FORMATTING TOOLBAR, PAGINATION & MARGINAL COMMENTS
   ========================================================================== */

.text-style-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
}

.style-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 26px;
  height: 25px;
  padding: 0 6px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.style-icon-btn:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

.style-icon-btn[data-active="true"] {
  background: var(--accent-soft);
  color: var(--accent-primary);
}

.style-pill-btn {
  padding: 0 8px;
}

.style-group-sep {
  width: 1px;
  height: 14px;
  background: var(--border-strong);
  margin: 0 3px;
}

/* Formatted Paragraph Attributes (Bold, Italic, Underline, Strikethrough, Alignment, Indent, Line Spacing) */
.script-line[data-bold="true"] .block-editor-input {
  font-weight: 700 !important;
}

.script-line[data-italic="true"] .block-editor-input {
  font-style: italic !important;
}

.script-line[data-underline="true"] .block-editor-input {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.script-line[data-strike="true"] .block-editor-input {
  text-decoration: line-through;
  opacity: 0.78;
}

.script-line[data-underline="true"][data-strike="true"] .block-editor-input {
  text-decoration: underline line-through;
}

/* Default justify alignment for Novel prose paragraphs, overridable by explicit data-align */
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="action"] .block-editor-input,
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="dialogue"] .block-editor-input {
  text-align: justify;
}

.script-line[data-align="left"] .block-editor-input {
  text-align: left !important;
}

.script-line[data-align="center"] .block-editor-input {
  text-align: center !important;
  text-indent: 0 !important;
}

.script-line[data-align="right"] .block-editor-input {
  text-align: right !important;
  text-indent: 0 !important;
}

.script-line[data-align="justify"] .block-editor-input {
  text-align: justify !important;
}

/* First-line paragraph indent (Красная строка) */
.script-line[data-indent="true"] .block-editor-input {
  text-indent: 1.5em !important;
}

.script-line[data-indent="false"] .block-editor-input,
.script-line[data-indent="none"] .block-editor-input {
  text-indent: 0 !important;
}

/* Manuscript Sheet Line Spacing */
.paper-sheet[data-line-spacing="1"] .block-editor-input {
  line-height: 1.25 !important;
}

.paper-sheet[data-line-spacing="1.25"] .block-editor-input {
  line-height: 1.42 !important;
}

.paper-sheet[data-line-spacing="1.5"] .block-editor-input {
  line-height: 1.62 !important;
}

.paper-sheet[data-line-spacing="1.8"] .block-editor-input {
  line-height: 1.9 !important;
}

/* ==========================================================================
   UNIFIED NOTE (Чернильный Индиго / Diogenes Indigo Palette)
   Single unified note block across all formats.
   Compact 28px height, matching editorial comment chips.
   ========================================================================== */
.script-line[data-block-type="note"],
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="note"],
.paper-sheet[data-doc-format="screenplay"] .script-line[data-block-type="note"],
.paper-sheet[data-doc-format="comic_book"] .script-line[data-block-type="note"],
.paper-sheet[data-doc-format="audioplay"] .script-line[data-block-type="note"],
.paper-sheet[data-doc-format="stageplay"] .script-line[data-block-type="note"],
.paper-sheet[data-doc-format="tabletop_game"] .script-line[data-block-type="note"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  min-height: 28px !important;
  height: auto !important;
  margin: 4px 0 6px !important;
  padding: 4px 10px !important;
  background: rgba(99, 102, 241, 0.12) !important;
  border-left: 3px solid #818cf8 !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  transition: all 120ms ease;
}

[data-theme="warm-paper"] .script-line[data-block-type="note"],
[data-theme="warm-paper"] .paper-sheet[data-doc-format="novel"] .script-line[data-block-type="note"] {
  background: rgba(79, 70, 229, 0.08) !important;
  border-left: 3px solid #4f46e5 !important;
}

.script-line[data-block-type="note"] .block-editor-input,
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="note"] .block-editor-input {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-style: italic !important;
  line-height: 1.4 !important;
  min-height: 20px !important;
  color: #c7d2fe !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;
  text-align: left !important;
  flex: 1 !important;
  width: 100% !important;
}

[data-theme="warm-paper"] .script-line[data-block-type="note"] .block-editor-input,
[data-theme="warm-paper"] .paper-sheet[data-doc-format="novel"] .script-line[data-block-type="note"] .block-editor-input {
  color: #312e81 !important;
}

.script-line[data-block-type="note"] .block-editor-input::placeholder,
.script-line[data-block-type="note"] .block-editor-input:empty::before {
  color: rgba(129, 140, 248, 0.6) !important;
  font-style: italic !important;
}

[data-theme="warm-paper"] .script-line[data-block-type="note"] .block-editor-input::placeholder,
[data-theme="warm-paper"] .script-line[data-block-type="note"] .block-editor-input:empty::before {
  color: rgba(79, 70, 229, 0.5) !important;
}

.script-line[data-block-type="note"] .line-margin-tag {
  color: #818cf8 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
}

[data-theme="warm-paper"] .script-line[data-block-type="note"] .line-margin-tag {
  color: #4f46e5 !important;
}

.line-note-delete-btn {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.line-note-delete-btn:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Режим «Мысли героя» (thought): чистый элегантный курсив с книжным отступом */
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="thought"] .block-editor-input,
.script-line[data-block-type="thought"] .block-editor-input {
  font-style: italic !important;
  text-indent: 1.5em !important;
  text-align: justify !important;
}

/* Режим «Терминал / Системный лог» (terminal): стандартный машинописный шрифт и цвет рукописи */
.paper-sheet[data-doc-format="novel"] .script-line[data-block-type="terminal"] .block-editor-input,
.script-line[data-block-type="terminal"] .block-editor-input {
  font-family: var(--font-script) !important;
  text-indent: 0 !important;
}

/* Multi-Page Pagination Header, Physical Sheet Break & Footer */
.starc-page-top-margin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -22px;
  margin-bottom: 14px;
  padding-bottom: 6px;
  font-family: var(--font-script);
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  user-select: none;
}

.starc-page-running-head {
  text-transform: uppercase;
  opacity: 0.75;
}

.starc-page-number-badge {
  font-weight: 700;
  color: var(--text-secondary);
}

.starc-page-footer-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Physical Page Break cutting across the paper sheet into separate sheets */
.starc-page-break {
  margin: 28px -77px 24px -101px;
  user-select: none;
  font-family: var(--font-script);
}

@media (max-width: 900px) {
  .starc-page-break {
    margin: 22px -25px 22px -33px;
  }
}

.starc-page-break-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 77px 12px 101px;
  font-size: 10.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}

.starc-page-break-gap {
  height: 22px;
  background: var(--bg-desk);
  box-shadow:
    inset 0 5px 9px rgba(0, 0, 0, 0.08),
    inset 0 -5px 9px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.starc-page-break-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 1px 10px;
}

.starc-page-next-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 77px 8px 101px;
  font-size: 11.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
}

.starc-page-remove-break-btn {
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  padding: 1px 8px;
  font-family: var(--font-script);
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
}

.starc-page-remove-break-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Marginal Comments on Right Gutter of the Paper Sheet */
.line-right-gutter {
  position: absolute;
  right: -46px;
  top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 960px) {
  .line-right-gutter {
    right: -18px;
  }
}

.line-comment-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

.script-line:hover .line-comment-trigger,
.script-line[data-focused="true"] .line-comment-trigger,
body[data-editor-mode="true"] .line-comment-trigger {
  opacity: 0.85;
}

.line-comment-trigger:hover {
  opacity: 1 !important;
  background: var(--bg-surface-2);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.line-comment-trigger[data-has-comments="true"] {
  opacity: 1;
  background: rgba(249, 115, 22, 0.15);
  border-color: #f97316;
  color: #f97316;
}
[data-theme="warm-paper"] .line-comment-trigger[data-has-comments="true"] {
  background: rgba(234, 88, 12, 0.12);
  border-color: #ea580c;
  color: #ea580c;
}

/* Inline Editorial Remark Callout below a commented paragraph — Wide Multi-line Card on Sheet */
.line-comments-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 10px;
  padding: 0;
  border-radius: 6px;
  width: 100%;
}

.line-comment-chip {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  height: auto;
  line-height: 1.48;
  padding: 8px 12px;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: 12.5px;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-left: 3.5px solid #f97316;
  color: #fed7aa;
  transition: all 120ms ease;
  width: 100%;
}

[data-theme="warm-paper"] .line-comment-chip {
  background: rgba(234, 88, 12, 0.08);
  border: 1px solid rgba(234, 88, 12, 0.24);
  border-left: 3.5px solid #ea580c;
  color: #7c2d12;
}

.line-comment-chip-text {
  flex: 1;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: pointer;
  display: block;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.48;
  color: inherit;
}

.line-comment-chip-text b {
  font-weight: 700;
  color: inherit;
  margin-right: 6px;
}

.line-comment-chip-del {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 120ms ease, color 120ms ease;
}

/* Wide On-Sheet Editorial Review Card & Inline Paragraph Comment Composer */
.sheet-editorial-review-card {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.32);
  border-left: 4px solid #f97316;
  font-family: var(--font-ui);
}

[data-theme="warm-paper"] .sheet-editorial-review-card {
  background: rgba(234, 88, 12, 0.06);
  border-color: rgba(234, 88, 12, 0.28);
  border-left-color: #ea580c;
}

.inline-sheet-comment-composer {
  margin: 8px 0 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.38);
  border-left: 4px solid #f97316;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-ui);
  width: 100%;
}

[data-theme="warm-paper"] .inline-sheet-comment-composer {
  background: rgba(234, 88, 12, 0.07);
  border-color: rgba(234, 88, 12, 0.34);
  border-left-color: #ea580c;
}

.inline-sheet-comment-textarea {
  width: 100%;
  min-height: 76px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: var(--font-ui) !important;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.line-comment-chip-del:hover {
  opacity: 1;
  color: var(--semantic-error, #ef4444);
}

.comment-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #6366f1;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

/* Bounded scroll container for scene notes / stickies list (no infinite sheet!) */
.scene-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 2px;
}

.scene-comments-list::-webkit-scrollbar {
  width: 4px;
}

.scene-comments-list::-webkit-scrollbar-thumb {
  background: var(--border-strong, rgba(255, 255, 255, 0.2));
  border-radius: 4px;
}

.comment-card {
  padding: 8px 10px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid #818cf8;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 120ms ease;
}

[data-theme="warm-paper"] .comment-card {
  border-left: 3px solid #4f46e5;
}

.comment-card:hover {
  border-color: #818cf8;
}

[data-theme="warm-paper"] .comment-card:hover {
  border-color: #4f46e5;
}

.comment-card-quote {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact Character/Location Strip & Scene Mentions Pill Grid in Assistant Drawer */
.drawer-entities-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  scrollbar-width: none;
  margin-bottom: 10px;
}

.drawer-entities-strip::-webkit-scrollbar {
  display: none;
}

.entity-chip-btn[data-active="true"] {
  background: var(--accent-soft);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  font-weight: 700;
}

.entity-mentions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.entity-mentions-compact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  overflow: visible;
  scrollbar-width: none;
}

.entity-mentions-compact-grid::-webkit-scrollbar {
  display: none;
}

.assistant-drawer,
.assistant-drawer *,
.stage-view,
.paper-scroll-viewport,
.outline-list,
.custom-select-menu,
#vaultFileList,
textarea {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.assistant-drawer::-webkit-scrollbar,
.assistant-drawer *::-webkit-scrollbar,
.stage-view::-webkit-scrollbar,
.paper-scroll-viewport::-webkit-scrollbar,
.outline-list::-webkit-scrollbar,
.custom-select-menu::-webkit-scrollbar,
#vaultFileList::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.entity-mention-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 11px;
  cursor: pointer;
  transition: all 120ms ease;
}

.entity-mention-pill:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
  background: var(--bg-surface-2);
}

.entity-mention-pill[data-current="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  font-weight: 700;
}

.entity-mention-pill-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 175px;
}

.entity-mention-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bg-surface-2);
  color: var(--accent-secondary);
  font-size: 10px;
  font-weight: 700;
}



/* Editor preferences and quieter navigation. */
body { font-family: var(--font-ui); }
.top-bar { gap: 20px; padding-inline: 20px; }
.top-bar-right { flex: 0 0 auto; }
.mode-tabs { margin-inline: auto; }
.btn:focus-visible, .mode-tab:focus-visible, .format-card:focus-visible, summary:focus-visible {
  outline: 2px solid var(--control-focus); outline-offset: 3px;
}
.btn:disabled { opacity: .55; cursor: wait; }
.lobby-wrap { max-width: 1140px; padding-top: 48px; }
.lobby-hero h1 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.035em; font-weight: 650; }
.lobby-hero p { max-width: 600px; margin-top: 10px; line-height: 1.65; }
.format-card { box-shadow: none; transition: border-color 150ms, background 150ms; }
.format-card[data-selected="true"] { box-shadow: 0 2px 12px rgb(45 35 20 / .06); }
.format-card-desc { line-height: 1.55; }
.settings-wrap { max-width: 1120px; padding-block: 32px 48px; }
.settings-heading, .settings-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.settings-heading { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border-subtle); }
.settings-heading-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.settings-heading h1 { font-size: 28px; letter-spacing: -.025em; line-height: 1.25; margin-block: 2px 6px; }
.settings-heading p, .settings-card-heading p { color: var(--text-secondary); }
.settings-wrap h2 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.settings-card-heading { margin-bottom: 18px; }
.settings-card-heading p { max-width: 590px; line-height: 1.55; font-size: 12.5px; margin: 0; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-primary); font-weight: 700; }
.settings-wrap .clean-card { padding: 24px 26px; margin-bottom: 0; scroll-margin-top: 24px; }
.connection-badge { flex-shrink: 0; border-radius: 999px; background: var(--accent-secondary-soft); color: var(--accent-secondary); padding: 5px 10px; font-size: 11px; font-weight: 600; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.field-hint { color: var(--text-secondary); font-size: 12px; line-height: 1.55; margin-block: 6px 14px; }
.settings-status { font-size: 13px; margin-top: 14px; overflow-wrap: anywhere; }
.settings-status[data-state="error"], #statusSave[data-state="error"] { color: var(--semantic-error); }
.settings-status[data-state="success"], #statusSave[data-state="saved"] { color: var(--semantic-success); }
.storage-note { border-top: 1px solid var(--border-subtle); margin-top: 20px; padding-top: 14px; font-size: 12px; color: var(--text-secondary); line-height: 1.65; }

/* Two-Column Obsidian / macOS Settings Workspace */
.settings-workspace-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.settings-nav-rail {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 10px);
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.settings-nav-item:hover {
  background: var(--bg-canvas);
  color: var(--text-primary);
}
.settings-nav-item.active {
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-canvas));
  color: var(--accent-primary);
  border-color: color-mix(in srgb, var(--accent-primary) 28%, transparent);
}
.settings-content-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.fellow-vault-details {
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface);
  overflow: hidden;
}

.fellow-vault-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 140ms ease;
}

.fellow-vault-summary::-webkit-details-marker {
  display: none;
}

.fellow-vault-summary:hover {
  background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-surface));
}

.fellow-vault-summary-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.fellow-vault-summary-left > .ui-icon {
  color: var(--accent-primary);
  margin-top: 2px;
  flex-shrink: 0;
}

.fellow-vault-summary-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fellow-vault-chevron {
  color: var(--text-muted);
  transition: transform 160ms ease, color 160ms ease;
}

.fellow-vault-details[open] .fellow-vault-chevron {
  transform: rotate(180deg);
  color: var(--accent-primary);
}

.fellow-vault-scroll-window {
  max-height: 260px;
  overflow-y: auto;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-primary) 45%, var(--bg-surface));
}

/* Standardized Horizontal Setting Rows ([Title + Desc on Left | Control on Right]) */
.settings-rows-list,
.settings-preferences {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.setting-row-info {
  flex: 1 1 56%;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.setting-row-info .field-label {
  margin-bottom: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}
.setting-row-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}
.setting-row-control {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 210px;
  max-width: 320px;
}
.setting-row-control .field-select,
.setting-row-control .custom-select,
.setting-row-control .ui-dropdown,
.setting-row-control .field-input {
  width: 290px;
  max-width: 100%;
}
.setting-row-control.setting-row-control-inline {
  max-width: 360px;
  flex-wrap: wrap;
}
.setting-row-control.setting-row-control-inline .ui-dropdown,
.setting-row-control.setting-row-control-inline .field-select {
  width: 200px;
}
.setting-row.setting-row-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.setting-row.setting-row-stacked .setting-row-info {
  width: 100%;
}
.setting-row.setting-row-stacked .setting-row-control {
  max-width: 100%;
  min-width: 0;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}


.vault-folder-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--bg-surface-elevated, rgba(255,255,255,0.03));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  flex-wrap: wrap;
}
.vault-folder-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 320px;
  min-width: 0;
}
.vault-folder-bar-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  margin: 0;
  flex-shrink: 0;
}
.vault-folder-bar .field-select,
.vault-folder-bar .ui-dropdown,
.vault-folder-bar .ui-dropdown[data-variant="field"] {
  width: 280px;
  max-width: 100%;
  flex: 0 1 280px;
  margin: 0;
}
.vault-folder-bar .ui-dropdown[data-variant="field"] .ui-dropdown-trigger,
.vault-folder-bar .field-select {
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-sm, 6px);
  box-sizing: border-box;
}
.vault-folder-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.vault-folder-bar-stats {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.vault-folder-bar .vault-open-project-btn,
#btnOpenSelectedFolderAsProject {
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-sm, 6px);
  box-sizing: border-box;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.format-shortcut-help {
  margin-top: 14px;
  margin-bottom: 0;
  padding: 10px 12px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Diogenes Quiet Atmosphere Mixer Grid (31 Channels in Compact 3-Column Console) */
.lofi-master-volume-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  flex-shrink: 0;
}
.lofi-master-volume-box label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.lofi-master-volume-box input[type="range"] {
  width: 120px;
}
.lofi-master-volume-box output {
  font-size: 11.5px;
  font-family: var(--font-mono);
  font-weight: 600;
  min-width: 36px;
  text-align: right;
}
.lofi-master-volume-box small {
  flex-basis: 100%;
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: right;
}
.lofi-preset-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.lofi-preset-strip > .btn[aria-pressed="true"] {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}
.custom-lofi-preset-tag {
  display: inline-flex;
  align-items: stretch;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  padding: 0;
  overflow: hidden;
  transition: all 140ms ease;
  min-height: 28px;
}
.custom-lofi-preset-tag:hover {
  border-color: var(--border-medium);
}
.custom-lofi-preset-tag .custom-lofi-btn {
  border: none;
  background: transparent;
  padding: 4px 9px;
  font-size: 11.5px;
  border-radius: 0;
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.custom-lofi-preset-tag .custom-lofi-btn[aria-pressed="true"] {
  background: var(--accent-primary);
  color: #fff;
}
.custom-lofi-preset-tag .custom-lofi-rename-btn {
  border: none;
  background: transparent;
  padding: 0 8px;
  font-size: 12px;
  color: var(--text-muted);
  border-left: 1px solid var(--border-subtle);
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms ease, background 120ms ease;
}
.custom-lofi-preset-tag .custom-lofi-rename-btn:hover {
  color: var(--accent-primary);
  background: rgba(232, 131, 100, 0.12);
}
.custom-lofi-preset-tag .custom-lofi-del-btn {
  border: none;
  background: transparent;
  padding: 0 8px;
  font-size: 14px;
  color: var(--text-muted);
  border-left: 1px solid var(--border-subtle);
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms ease, background 120ms ease;
}
.custom-lofi-preset-tag .custom-lofi-del-btn:hover {
  color: var(--danger, #e53935);
  background: rgba(229, 57, 53, 0.16);
}
.custom-lofi-inline-input {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-sm, 4px);
  padding: 2px 8px;
  font-size: 12px;
  font-family: var(--font-ui);
  outline: none;
  min-width: 110px;
  max-width: 170px;
}
.custom-lofi-confirm-rename-btn {
  border: none;
  background: transparent;
  padding: 0 7px;
  font-size: 12px;
  color: var(--accent-primary);
  cursor: pointer;
}
.custom-lofi-confirm-rename-btn:hover {
  background: rgba(232, 131, 100, 0.15);
}
.custom-lofi-cancel-rename-btn {
  border: none;
  background: transparent;
  padding: 0 7px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.custom-lofi-cancel-rename-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}
.lofi-preset-status {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 14px 0;
  padding: 8px 12px;
  background: var(--bg-canvas);
  border-left: 3px solid var(--accent-primary);
  border-radius: 4px;
}
.lofi-fader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
}
.lofi-channel-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  transition: border-color 140ms ease;
}
.lofi-channel-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 35%, var(--border-subtle));
}
.lofi-channel-card input[type="range"] {
  width: 100%;
  margin: 2px 0;
}
.lofi-channel-card small {
  font-size: 11px;
  line-height: 1.35;
}
.lofi-channel-preview-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--accent-primary);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 9px;
  cursor: pointer;
  transition: all 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lofi-channel-preview-btn:hover {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
  transform: scale(1.06);
}
.lofi-category-filter-strip button.btn-xs {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 140ms ease;
}
.lofi-category-filter-strip button.btn-xs:hover {
  color: var(--text-primary);
  border-color: var(--border-strong, var(--accent-primary));
}
.lofi-category-filter-strip button.btn-xs.active {
  background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-surface));
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  font-weight: 600;
}

/* Interactive Bottom Status Bar Statistics Trigger & Floating Popover */
.status-stats-trigger {
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 140ms ease, color 140ms ease;
}
.status-stats-trigger:hover,
.status-stats-trigger:focus-visible {
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  color: var(--text-primary);
}
.status-stats-popover {
  position: fixed;
  right: 14px;
  bottom: 36px;
  width: 340px;
  max-width: calc(100vw - 28px);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong, var(--border-subtle));
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
  padding: 14px 16px;
  z-index: 150;
}
.status-stats-popover[hidden] {
  display: none !important;
}
.status-stats-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.status-stats-popover-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}
.status-stats-section {
  margin-bottom: 12px;
}
.status-stats-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.status-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.status-stats-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 4px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  text-align: center;
}
.status-stats-val {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
}
.status-stats-lbl {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.status-stats-popover-footer {
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}

.vault-advanced { margin-top: 20px; }
.vault-advanced summary { cursor: pointer; color: var(--text-secondary); margin-bottom: 16px; font-weight: 600; font-size: 13px; }
#statusSave {
  display: inline-flex;
  align-items: center;
  gap: 6.5px;
  min-width: 140px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 180ms ease;
  user-select: none;
}
#statusSave::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.95;
  flex-shrink: 0;
  box-shadow: 0 0 3px currentColor;
  transition: all 220ms ease;
}
#statusSave[data-state="saved"] {
  color: var(--semantic-success, #2e7d32);
}
#statusSave[data-state="saved"]::before {
  background: #2e7d32;
  box-shadow: 0 0 4px rgba(46, 125, 50, 0.6);
  animation: pulseInkSavedDot 3.6s infinite ease-in-out;
  will-change: transform, opacity;
  transform: translateZ(0);
}
@keyframes pulseInkSavedDot {
  0%, 100% {
    transform: scale(0.85) translateZ(0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.25) translateZ(0);
    opacity: 1;
  }
}
#statusSave[data-state="saving"] {
  color: #c89d5c;
}
#statusSave[data-state="saving"]::before {
  animation: pulseSaveDot 0.85s infinite alternate ease-in-out;
}
#statusSave[data-state="pending"] {
  color: #d97706;
}
#statusSave[data-state="error"] {
  color: var(--semantic-error, #c62828);
}
[data-theme="dark"] #statusSave[data-state="saved"] {
  color: #4ade80;
}
[data-theme="dark"] #statusSave[data-state="saved"]::before {
  background: #4ade80;
  box-shadow: 0 0 5px rgba(74, 222, 128, 0.7);
}
@keyframes pulseSaveDot {
  0% { transform: scale(0.75); opacity: 0.4; }
  100% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 5px currentColor; }
}
#statusVaultPath { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
#statusAudioTelemetry { max-width: 180px; overflow: hidden; }
@media (max-width: 1100px) {
  .top-bar { gap: 10px; padding-inline: 12px; }
  .active-project-name { max-width: 130px; }
  .project-Context-pill .format-pill-badge { display: none; }
}
@media (max-width: 760px) {
  .app-shell { grid-template-rows: 96px minmax(0, 1fr) 30px; }
  .top-bar { flex-wrap: wrap; align-content: center; gap: 6px 12px; }
  .top-bar-left { flex: 1; }
  .top-bar .project-Context-pill { display: none; }
  .top-bar .brand-mark { font-size: 26px; }
  .mode-tabs { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .top-bar-right { margin-left: auto; }
  .manuscript-layout { grid-template-columns: minmax(0, 1fr); }
  .scene-outline-sidebar { position: absolute; width: min(280px, 85vw); top: 48px; bottom: 0; left: 0; height: auto; z-index: 25; box-shadow: 12px 0 24px rgb(0 0 0 / .12); }
  .manuscript-layout[data-outline="false"] { grid-template-columns: minmax(0, 1fr); }
  .paper-scroll-viewport { padding: 20px 10px 35vh; }
  .paper-sheet { --paper-left: 24px; --paper-right: 24px; padding: 28px 24px 64px; }
  .lobby-wrap { padding: 28px 18px; }
  .settings-wrap { padding: 24px 16px; }
  .settings-heading, .settings-card-heading { flex-wrap: wrap; gap: 12px; }
  .settings-wrap .clean-card { padding: 20px; }
  .settings-preferences { grid-template-columns: 1fr; gap: 16px; }
  .quick-create-bar { flex-wrap: wrap; }
  .quick-create-bar input { flex-basis: 100%; max-width: none !important; }
  .status-footer { font-size: 10px; gap: 8px; }
  #statusAudioTelemetry, #statusChronometer { display: none !important; }
  #statusVaultPath { max-width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .status-club-pulse-badge::before,
  #statusSave::before,
  .pulse-dot {
    animation: none !important;
  }
  .status-club-beacon,
  .status-club-beacon .beacon-chime-icon {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   PHASE 6: PATRON EXCLUSIVE THEMES ("Chesterfield Leather" & "Billiard Green")
   ========================================================================== */

[data-theme="chesterfield-leather"] {
  --bg-canvas: #18110e;
  --bg-desk: #1e1512;
  --bg-surface-1: #251a16;
  --bg-surface-2: #30221d;
  --bg-surface-3: #3c2b24;
  --bg-paper: #231915;
  --bg-glass: rgba(37, 26, 22, 0.94);

  --text-primary: #f2e8dc;
  --text-secondary: #c4b29f;
  --text-muted: #8c7865;

  --accent-primary: #d98a54;
  --accent-primary-hover: #eba06b;
  --accent-soft: rgba(217, 138, 84, 0.16);
  --accent-secondary: #c59b52;
  --accent-secondary-soft: rgba(197, 155, 82, 0.16);

  --border-subtle: #382822;
  --border-strong: #4e3830;
  --paper-shadow: 0 22px 60px rgba(8, 4, 2, 0.65);
  --button-primary-bg: #d8a877;
  --button-primary-hover-bg: #e4b98d;
  --button-primary-active-bg: #c99768;
  --button-primary-text: #271b13;
  --button-primary-border: #d8a877;
  --button-primary-shadow: none;
  --button-primary-hover-shadow: none;
  --control-focus: #d8a877;
  --club-pulse-bg: rgba(212, 160, 75, 0.09);
  --club-pulse-border: rgba(212, 160, 75, 0.24);
  --club-pulse-text: #e5c38c;
  --club-pulse-dot: #dfa348;
  --club-pulse-glow: rgba(223, 163, 72, 0.55);
}

[data-theme="billiard-green"] {
  --bg-canvas: #0f1914;
  --bg-desk: #13201a;
  --bg-surface-1: #172720;
  --bg-surface-2: #1f332a;
  --bg-surface-3: #284136;
  --bg-paper: #16251e;
  --bg-glass: rgba(23, 39, 32, 0.94);

  --text-primary: #ebf0ec;
  --text-secondary: #aec0b5;
  --text-muted: #72887b;

  --accent-primary: #d6a85a;
  --accent-primary-hover: #e5bb72;
  --accent-soft: rgba(214, 168, 90, 0.15);
  --accent-secondary: #68b096;
  --accent-secondary-soft: rgba(104, 176, 150, 0.15);

  --border-subtle: #243b30;
  --border-strong: #325243;
  --paper-shadow: 0 20px 56px rgba(4, 10, 7, 0.6);
  --button-primary-bg: #4a9e7d;
  --button-primary-hover-bg: #57b38e;
  --button-primary-active-bg: #3f876a;
  --button-primary-text: #0a1711;
  --button-primary-border: #4a9e7d;
  --button-primary-shadow: none;
  --button-primary-hover-shadow: none;
  --control-focus: #4a9e7d;
  --club-pulse-bg: rgba(82, 183, 136, 0.08);
  --club-pulse-border: rgba(82, 183, 136, 0.24);
  --club-pulse-text: #c8dfbe;
  --club-pulse-dot: #52b788;
  --club-pulse-glow: rgba(82, 183, 136, 0.55);
}

/* Studio: a quiet pool of lamplight, scoped to this theme only. */
:root:not([data-theme]) .paper-scroll-viewport,
[data-theme="clay-chrome"] .paper-scroll-viewport {
  background-image: radial-gradient(ellipse 75% 60% at 50% 0%, rgba(229, 173, 104, 0.065), transparent 80%);
}

:root:not([data-theme]) .paper-sheet,
[data-theme="clay-chrome"] .paper-sheet {
  box-shadow: var(--paper-shadow), 0 0 36px rgba(229, 173, 104, 0.035);
}

.block-editor-input {
  caret-color: var(--accent-primary);
}

.block-editor-input::selection {
  background: var(--accent-soft);
  color: var(--text-primary);
}

/* Each material keeps a quiet, flat selection and a visible keyboard focus. */
[data-theme="warm-paper"] .btn,
[data-theme="warm-paper"] .mode-tab { border-radius: 7px; }
.mode-tab[aria-selected="true"] { color: var(--text-primary); background: var(--accent-soft); }
.field-input:focus-visible,
.field-textarea:focus-visible,
.field-select:focus-visible { outline: 2px solid var(--control-focus); outline-offset: 2px; }

/* Noir theme cork-card & vintage crime tabloid newsprint texture references */
[data-theme="noir"] .cork-card {
  background: #181a1f;
  border-color: #2e3342;
}
[data-theme="noir"] .paper-sheet {
  --noir-newsprint-texture: url('/css/newsprint-texture.svg');
  --noir-backdrop-sample: url('/img/noir/evening-news-1913.jpg');
}

/* ==========================================================================
   DIOGENES CLUB SANCTUARY HALL («ЗАЛ МОЛЧАНИЯ» — FULL-VIEWPORT PIXEL-ART HALL)
   ========================================================================== */

html:not([data-sanctuary-open="true"]) #sanctuaryStage {
  display: none !important;
}

html[data-sanctuary-open="true"],
html[data-sanctuary-open="true"] body,
.sanctuary-standalone-body {
  width: 100vw !important;
  height: 100vh !important;
  height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #0a0d10 !important;
}

html[data-sanctuary-open="true"] .top-bar,
html[data-sanctuary-open="true"] #btnExitZen,
html[data-sanctuary-open="true"] #lobbyDeskWorkspace,
html[data-sanctuary-open="true"] .status-footer {
  display: none !important;
}

html[data-sanctuary-open="true"] .app-shell,
html[data-sanctuary-open="true"] .stage-host,
html[data-sanctuary-open="true"] #stageLobby {
  width: 100vw !important;
  height: 100vh !important;
  height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #0a0d10 !important;
}

.sanctuary-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: #0a0d10;
  z-index: 9999;
  transition: opacity 240ms ease;
}

.sanctuary-leaving .sanctuary-stage {
  opacity: 0;
}

.sanctuary-top-nav,
.sanctuary-ambient-bar,
.sanctuary-header-bar,
.sanctuary-hotspots-layer,
.sanctuary-console-bar,
.sanctuary-traces-hint {
  display: none !important;
}

.sanctuary-canvas-frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: #0a0d10;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#sanctuaryPixelCanvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.sanctuary-single-enter-btn {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5.5vh, 52px);
  transform: translateX(-50%);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 32px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f7eed6;
  background: rgba(16, 12, 10, 0.88);
  border: 1.5px solid #c89646;
  border-radius: 6px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(232, 154, 68, 0.24),
    inset 0 1px 0 rgba(255, 236, 184, 0.24);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.sanctuary-single-enter-btn:hover,
.sanctuary-single-enter-btn:focus-visible {
  background: rgba(34, 24, 18, 0.96);
  border-color: #f5cb78;
  color: #fffaf0;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.92),
    0 0 32px rgba(245, 190, 92, 0.45),
    inset 0 1px 0 rgba(255, 244, 206, 0.38);
  outline: 2px solid #f5cb78;
  outline-offset: 2px;
}

/* ==========================================================================
   SEAMLESS WIKILINKS & AUTO-DETECTED ENTITY MENTIONS (ZERO-BRACKET UX)
   ========================================================================== */

.block-editor-input .wikilink-inline {
  display: inline;
  border-radius: 3px;
  cursor: pointer;
}

.block-editor-input .wikilink-syntax {
  font-size: 0;
  opacity: 0;
  letter-spacing: 0;
  pointer-events: none;
  user-select: none;
}

.block-editor-input .wikilink-label,
.block-editor-input .entity-mention-inline {
  border-bottom: 1px dashed color-mix(in srgb, var(--accent-primary) 46%, transparent);
  border-radius: 2px;
  padding: 0 1px;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.block-editor-input .wikilink-inline:hover .wikilink-label,
.block-editor-input .entity-mention-inline:hover {
  background-color: color-mix(in srgb, var(--accent-primary) 13%, transparent);
  border-bottom-color: var(--accent-primary);
}

/* ==========================================================================
   THE DIOGENES PALIMPSEST: BOOK S TWO-PAGE SPREAD, FIVE INKS & INCOGNITO SHELF
   ========================================================================== */

#statusClubPulse {
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

#statusClubPulse:hover,
#statusClubPulse:focus-visible {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.status-club-beacon[hidden] {
  display: none !important;
}

.status-club-beacon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 8px;
  padding: 2.5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #4a2800;
  background: rgba(212, 158, 62, 0.22);
  border: 1px solid rgba(168, 110, 20, 0.55);
  box-shadow: 0 1px 3px rgba(168, 110, 20, 0.12);
  opacity: 1;
  animation: palimpsestBeaconFade 4.5s ease forwards;
}

.status-club-beacon .beacon-chime-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transform-origin: top center;
}

.status-club-beacon .beacon-chime-icon svg {
  display: block;
}

.status-club-beacon .beacon-text {
  display: inline;
  line-height: 1.35;
}

.status-club-beacon[data-milestone="book_completed"] {
  color: #2b1400;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(240, 190, 85, 0.38) 0%, rgba(218, 162, 58, 0.26) 100%);
  border: 1px solid rgba(175, 115, 20, 0.85);
  box-shadow: 0 0 18px rgba(218, 165, 65, 0.55), 0 1px 4px rgba(140, 86, 12, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: fogBellBeaconResonance 11.8s ease forwards;
}

.status-club-beacon[data-milestone="book_completed"] .beacon-chime-icon {
  color: #b3740e;
  filter: drop-shadow(0 0 3px rgba(218, 165, 65, 0.6));
  animation: bellTollResonance 2.8s ease-in-out infinite;
}

html:not([data-theme="warm-paper"]) .status-club-beacon {
  color: #fff1cc;
  background: rgba(58, 38, 12, 0.92);
  border: 1px solid rgba(224, 172, 78, 0.65);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

html:not([data-theme="warm-paper"]) .status-club-beacon[data-milestone="book_completed"] {
  color: #fffaf0;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(88, 58, 18, 0.96) 0%, rgba(62, 40, 12, 0.94) 100%);
  border: 1px solid rgba(245, 198, 98, 0.92);
  box-shadow: 0 0 22px rgba(245, 198, 98, 0.6), 0 0 8px rgba(218, 165, 65, 0.42), inset 0 1px 1px rgba(255, 245, 200, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

html:not([data-theme="warm-paper"]) .status-club-beacon[data-milestone="book_completed"] .beacon-chime-icon {
  color: #f7ca68;
  filter: drop-shadow(0 0 6px rgba(247, 202, 104, 0.85));
  animation: bellTollResonance 2.8s ease-in-out infinite;
}

@keyframes bellTollResonance {
  0%, 100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-9deg);
  }
  20% {
    transform: rotate(7deg);
  }
  30% {
    transform: rotate(-4deg);
  }
  40% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(0deg);
  }
}

@keyframes palimpsestBeaconFade {
  0% { opacity: 0; transform: translateY(2px); }
  12% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fogBellBeaconResonance {
  0% {
    opacity: 0;
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 0 4px rgba(218, 165, 65, 0.2);
  }
  5% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    box-shadow: 0 0 24px rgba(235, 185, 80, 0.78), 0 0 10px rgba(218, 165, 65, 0.5);
  }
  12% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 18px rgba(218, 165, 65, 0.55);
  }
  30% {
    box-shadow: 0 0 22px rgba(235, 185, 80, 0.72), 0 0 10px rgba(218, 165, 65, 0.45);
  }
  40% {
    box-shadow: 0 0 16px rgba(218, 165, 65, 0.5);
  }
  58% {
    box-shadow: 0 0 22px rgba(235, 185, 80, 0.68), 0 0 8px rgba(218, 165, 65, 0.42);
  }
  75% {
    opacity: 1;
    box-shadow: 0 0 18px rgba(218, 165, 65, 0.52);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 0 16px rgba(218, 165, 65, 0.48);
  }
}

body[data-fog-bell-glow="true"] #sanctuaryStage {
  box-shadow: inset 0 0 90px rgba(218, 165, 65, 0.22);
  transition: box-shadow 1.2s ease;
}

body[data-fog-bell-glow="true"] .status-footer,
.status-footer:has(.status-club-beacon[data-milestone="book_completed"]:not([hidden])) {
  border-top-color: rgba(235, 185, 80, 0.85) !important;
  box-shadow: 0 -2px 18px rgba(218, 165, 65, 0.32), 0 -1px 4px rgba(218, 165, 65, 0.2) !important;
  transition: none !important;
}

.palimpsest-modal-dialog {
  max-width: min(1240px, 95vw);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  overflow: hidden;
}

.palimpsest-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.palimpsest-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.palimpsest-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.palimpsest-shelf-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 3px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.palimpsest-shelf-tab {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.palimpsest-shelf-tab.active {
  background: var(--accent-primary);
  color: #fffaf0;
}

.palimpsest-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.palimpsest-quota-pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
  color: var(--text-primary);
}

.palimpsest-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.palimpsest-tab-panel[hidden] {
  display: none !important;
}

.palimpsest-folio-toolbar,
.palimpsest-shelf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.palimpsest-chapter-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.palimpsest-chapter-picker .ui-dropdown {
  max-width: min(560px, 78vw);
}

.palimpsest-chapter-picker .ui-dropdown-trigger {
  min-width: 260px;
  max-width: min(560px, 78vw);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
}

/* Book S Two-Page Spread (Jan Tschichold Classical Proportions) */
.book-spread-container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 56%) minmax(260px, 44%);
  gap: 28px;
  padding: 24px 28px;
  background: #f6f3eb;
  color: #1c1917;
  border: 1px solid #d6cbb5;
  border-radius: 8px;
  min-height: 320px;
  max-height: 52vh;
  overflow-y: auto;
}

.book-spread-gutter {
  box-shadow:
    inset 18px 0 30px -12px rgba(18, 14, 10, 0.4),
    inset -18px 0 30px -12px rgba(18, 14, 10, 0.4);
}

.palimpsest-svg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.book-spread-body-col {
  position: relative;
  z-index: 3;
  padding-right: 18px;
  border-right: 1px solid rgba(92, 64, 51, 0.22);
  font-family: var(--font-ui);
  font-size: 16.5px;
  line-height: 1.64;
  color: #1c1917;
}

.palimpsest-chapter-heading {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #1c1917;
}

.palimpsest-revealed-book-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(92, 64, 51, 0.1);
  border: 1px solid rgba(92, 64, 51, 0.24);
  font-size: 13px;
  color: #4a3525;
}

.palimpsest-chapter-epigraph {
  font-style: italic;
  font-size: 13.5px;
  color: #5c4033;
  margin: 0 0 14px;
}

.palimpsest-paragraph {
  position: relative;
  margin: 0 0 12px;
  padding: 6px 8px;
  border-radius: 4px;
  text-align: justify;
  text-indent: 1.4em;
  cursor: text;
  transition: background-color 140ms ease;
}

.palimpsest-paragraph:hover,
.palimpsest-paragraph.is-selected {
  background: rgba(180, 142, 78, 0.14);
}

.palimpsest-quote-mark {
  background: rgba(184, 134, 45, 0.22);
  border-bottom: 1px dashed #8b1e2d;
  padding: 0 2px;
  border-radius: 2px;
}

.book-spread-margin-col {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.palimpsest-margin-note {
  position: relative;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(255, 252, 244, 0.88);
  border-left: 3px solid #5a5958;
  box-shadow: 0 2px 8px rgba(28, 25, 23, 0.08);
  transition: opacity 220ms ease, transform 160ms ease;
}

.palimpsest-margin-note.is-faded {
  opacity: 0.05;
  filter: blur(0.4px);
}

/* The Five Club Inks */
.palimpsest-margin-note.ink-graphite {
  color: #5a5958;
  border-left-color: #5a5958;
  font-family: var(--font-ui);
}

.palimpsest-margin-note.ink-sepia {
  color: #5c4033;
  border-left-color: #5c4033;
  font-family: var(--font-ui);
  font-style: italic;
}

.palimpsest-margin-note.ink-oxford {
  color: #1a365d;
  border-left-color: #1a365d;
  font-family: var(--font-ui);
}

.palimpsest-margin-note.ink-carmine {
  color: #8b1e2d;
  border-left-color: #8b1e2d;
  font-family: var(--font-ui);
}

.palimpsest-margin-note.ink-emerald {
  color: #1e4d38;
  border-left-color: #1e4d38;
  font-family: var(--font-ui);
}

.palimpsest-note-quote {
  font-size: 11.5px;
  opacity: 0.78;
  margin-bottom: 4px;
  font-style: italic;
}

.palimpsest-note-body {
  font-size: 14.5px;
  line-height: 1.42;
  margin-bottom: 6px;
}

.palimpsest-note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-style: normal;
  font-family: var(--font-ui);
  color: #57534e;
}

.palimpsest-eraser-btn {
  border: none;
  background: transparent;
  color: #78716c;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
}

.palimpsest-eraser-btn:hover {
  color: #8b1e2d;
  background: rgba(139, 30, 45, 0.08);
}

/* 5-Ink Composer Bar */
.palimpsest-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.palimpsest-composer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.palimpsest-quote-preview {
  font-size: 12px;
  color: var(--text-secondary);
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palimpsest-inkwell-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.inkwell-nib-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.inkwell-nib-btn.active {
  border-color: var(--accent-primary);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--accent-primary);
}

.ink-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.ink-dot-graphite { background: #5a5958; }
.ink-dot-sepia { background: #5c4033; }
.ink-dot-oxford { background: #1a365d; }
.ink-dot-carmine { background: #8b1e2d; }
.ink-dot-emerald { background: #1e4d38; }

.palimpsest-composer-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: flex-end;
}

.palimpsest-note-textarea {
  width: 100%;
  min-height: 76px;
  max-height: 150px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  border-radius: 8px;
}

.palimpsest-submit-btn {
  height: 44px;
  padding: 0 18px;
  white-space: nowrap;
}

.book-spread-container .book-spread-body-col,
.book-spread-container .palimpsest-paragraph {
  user-select: text !important;
  -webkit-user-select: text !important;
}

.book-spread-container .book-spread-body-col::selection,
.book-spread-container .book-spread-body-col *::selection,
.book-spread-container .palimpsest-paragraph::selection,
.book-spread-container .palimpsest-paragraph *::selection {
  background: rgba(181, 141, 74, 0.35);
  color: #1a120b;
}

/* Incognito Shelf & Priority IP Receipt */
.palimpsest-ip-receipt-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(30, 77, 56, 0.14);
  border: 1px solid rgba(30, 77, 56, 0.45);
}

.palimpsest-receipt-hash {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent-primary);
  word-break: break-all;
}

/* Sovereign IP Receipt In-Browser Certificate */
.modal-dialog-receipt {
  max-width: 640px;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(200, 164, 92, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.receipt-cert-header {
  background: linear-gradient(135deg, rgba(30, 77, 56, 0.98), rgba(16, 44, 32, 1));
  color: #fff;
  padding: 20px 24px;
  border-bottom: 2px solid #c8a45c;
  position: relative;
}

.receipt-cert-body {
  padding: 22px 24px;
  background: var(--bg-surface);
  color: var(--text-primary);
  max-height: 68vh;
  overflow-y: auto;
}

.receipt-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.receipt-cell {
  padding: 10px 12px;
  background: var(--bg-surface-raised, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.receipt-download-explainer {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  border-left: 3px solid var(--accent-primary);
}

@media print {
  body * {
    visibility: hidden !important;
  }
  #modalViewIpReceipt,
  #modalViewIpReceipt * {
    visibility: visible !important;
  }
  #modalViewIpReceipt {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
    display: block !important;
    opacity: 1 !important;
  }
  #modalViewIpReceipt .modal-dialog-receipt {
    max-width: 100% !important;
    box-shadow: none !important;
    border: 2px solid #333 !important;
  }
  .receipt-cert-footer,
  #modalViewIpReceipt [data-close-modal] {
    display: none !important;
  }
}

.palimpsest-shelf-split {
  display: grid;
  grid-template-columns: minmax(250px, 36%) 1fr;
  gap: 14px;
  min-height: 300px;
  max-height: 56vh;
  overflow: hidden;
}

.palimpsest-shelf-catalog {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}

.palimpsest-shelf-item-card {
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.palimpsest-shelf-item-card:hover,
.palimpsest-shelf-item-card.active {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-surface));
}

.incognito-zero-copy-reader {
  padding: 18px 22px;
  border-radius: 8px;
  background: #f6f3eb;
  color: #1c1917;
  border: 1px solid #d6cbb5;
  overflow-y: auto;
  user-select: none;
  -webkit-user-select: none;
}

.palimpsest-spread-wrapper {
  display: flex;
  gap: 12px;
  position: relative;
  width: 100%;
  align-items: stretch;
  min-height: 480px;
  max-height: calc(88vh - 180px);
  overflow: hidden;
}

.palimpsest-shelf-rack {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #f2ece1;
  border: 1px solid #dcd1be;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(60, 45, 30, 0.08);
  animation: shelfRackSlideIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes shelfRackSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

.palimpsest-shelf-rack[hidden] {
  display: none !important;
}

.shelf-rack-header {
  padding: 8px 10px;
  background: #eae2d2;
  border-bottom: 1px solid #dcd1be;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shelf-rack-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4a3d31;
  font-family: var(--font-ui);
}

.shelf-rack-filter-bar {
  display: flex;
  gap: 3px;
}

.shelf-filter-chip {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
  font-family: var(--font-ui);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #c2b19b;
  color: #3e3023;
  cursor: pointer;
  transition: all 120ms ease;
}

.shelf-filter-chip:hover {
  background: #ffffff;
  color: #1a140f;
  border-color: #8c6520;
}

.shelf-filter-chip.active {
  background: #443024;
  color: #fffaf0;
  font-weight: 700;
  border-color: #443024;
  box-shadow: 0 1px 3px rgba(68, 48, 36, 0.2);
}

.shelf-rack-cards-container {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Compact Catalogue List Item */
.shelf-rack-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
  border-bottom: 1px solid rgba(180, 160, 135, 0.35);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: all 120ms ease;
  color: #241a12;
  font-family: var(--font-ui);
  position: relative;
}

.shelf-rack-card:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(181, 141, 74, 0.45);
}

.shelf-rack-card.active {
  background: #ffffff;
  border-color: #9c7330;
  border-left: 3px solid #9c7330;
  box-shadow: 0 1px 4px rgba(60, 45, 30, 0.1);
}

.shelf-card-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.shelf-card-title {
  font-size: 12.5px;
  font-weight: 750;
  color: #140e0a;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shelf-card-time {
  font-size: 10.5px;
  font-weight: 600;
  color: #48392c;
  white-space: nowrap;
  flex-shrink: 0;
}

.shelf-card-row-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.shelf-card-author-group {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.shelf-card-author {
  font-size: 11px;
  font-weight: 650;
  color: #2e2218;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shelf-card-meta-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.shelf-notes-pill {
  font-size: 10px;
  font-weight: 800;
  color: #724c08;
  background: rgba(181, 141, 74, 0.22);
  border: 1px solid rgba(181, 141, 74, 0.35);
  padding: 0 4px;
  border-radius: 3px;
}

.shelf-words-pill {
  font-size: 10.5px;
  font-weight: 600;
  color: #48392c;
}

.shelf-my-badge {
  background: rgba(30, 99, 56, 0.15);
  color: #144e2a;
  border: 1px solid rgba(30, 99, 56, 0.4);
  border-radius: 999px;
  padding: 0 5px;
  font-size: 9.5px;
  font-weight: 750;
  white-space: nowrap;
}

.shelf-pill-count {
  background: rgba(92, 64, 51, 0.12);
  border: 1px solid rgba(92, 64, 51, 0.28);
  color: #422d23;
  font-size: 10.5px;
  font-weight: 750;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
}

.shelf-index-pill {
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid #dcd1be;
  color: #5c4033;
}

/* Authentic Diogenes Sovereign Trust Seal (No raw SHA dump) */
.palimpsest-shelf-trust-seal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  margin-bottom: 14px;
  border-radius: 6px;
  background: #fbf7ee;
  border: 1px solid #dcd3be;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  font-family: var(--font-ui);
}

.trust-seal-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust-seal-shield {
  font-size: 20px;
  line-height: 1.15;
}

.trust-seal-primary {
  font-size: 12.5px;
  color: #2b221a;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.trust-seal-verified {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #1e6338;
  background: rgba(30, 99, 56, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
}

.trust-seal-sub {
  font-size: 11px;
  color: #382b20;
  font-weight: 550;
  margin-top: 2px;
}

.shelf-my-scene-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #7a460e;
  background: rgba(220, 140, 40, 0.2);
  border: 1px solid rgba(220, 140, 40, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
}

.trust-seal-lock-note {
  font-size: 11px;
  font-weight: 650;
  color: #2b1f16;
  background: rgba(90, 70, 50, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(90, 70, 50, 0.28);
}

@media (max-width: 900px) {
  .palimpsest-spread-wrapper {
    flex-direction: column;
  }
  .palimpsest-shelf-rack {
    width: 100%;
    max-height: 220px;
  }
}

@media (max-width: 820px) {
  .book-spread-container,
  .palimpsest-shelf-split,
  .palimpsest-composer-bottom {
    grid-template-columns: 1fr;
  }
  .palimpsest-quote-preview {
    max-width: 100%;
  }
}


/* ==========================================================================
   NARRATIVE CANVAS (.CANVAS 1.0 INFINITE STORY-FRAME WORKSPACE — OBSIDIAN GPU ENGINE)
   ========================================================================== */

.canvas-board-toolbar[hidden] {
  display: none !important;
}

.canvas-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 7px 12px;
  margin-bottom: 10px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  overflow-x: auto;
  scrollbar-width: none;
}

.canvas-board-toolbar::-webkit-scrollbar {
  display: none;
}

.canvas-board-toolbar-left,
.canvas-board-toolbar-center,
.canvas-board-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex-shrink: 0;
}

.canvas-board-toolbar .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.canvas-board-select-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.canvas-board-select {
  width: 260px !important;
  min-width: 180px;
  max-width: 300px;
  flex: 0 1 260px;
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border-strong, rgba(120, 90, 60, 0.28));
  background: var(--bg-canvas, #faf6ee);
  color: var(--text-primary);
}

.canvas-board-stats {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface-2, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border-subtle);
  padding: 3px 9px;
  border-radius: 999px;
}

/* Pure GPU Camera Stage — ZERO native scrollbars, ZERO flicker on zoom! */
#corkboardWrap[data-corkboard-mode="canvas"] #corkboardBoardStage {
  position: relative;
  overflow: hidden !important;
  height: calc(100vh - 265px);
  min-height: 500px;
  padding: 0 !important;
  margin: 0 !important;
  cursor: grab;
  user-select: none;
  touch-action: none;
  background-color: var(--bg-canvas, #f4efe4);
  background-image:
    radial-gradient(rgba(110, 88, 65, 0.22) 1.25px, transparent 1.25px),
    radial-gradient(rgba(110, 88, 65, 0.08) 1px, transparent 1px);
  background-size: 24px 24px, 120px 120px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

#corkboardWrap[data-corkboard-mode="canvas"] #corkboardBoardStage.is-canvas-panning {
  cursor: grabbing !important;
}

html[data-theme="noir"] #corkboardWrap[data-corkboard-mode="canvas"] #corkboardBoardStage,
html[data-theme="clay-chrome"] #corkboardWrap[data-corkboard-mode="canvas"] #corkboardBoardStage {
  background-color: #121418;
  background-image:
    radial-gradient(rgba(232, 131, 100, 0.18) 1.25px, transparent 1.25px),
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* Infinite World Plane transformed via translate3d(camX, camY, 0) scale(zoomScale) */
.narrative-canvas-plane,
.obsidian-canvas-world {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  transform-origin: 0 0 !important;
  will-change: transform;
  user-select: none;
}

.obsidian-canvas-edges-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible !important;
  pointer-events: none;
  z-index: 3;
}

.obsidian-canvas-nodes-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: visible !important;
  z-index: 4;
}

/* Freeform Event Node Card (`type: "text"`) — Clean Obsidian/KeepSimple UX Core surface */
.canvas-event-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--node-bg, var(--bg-surface-1));
  border: 1.5px solid var(--node-border, rgba(115, 92, 68, 0.30));
  border-top: 3.5px solid var(--node-accent, #c86d44);
  border-radius: 8px;
  padding: 10px 13px;
  box-shadow: 0 4px 14px rgba(28, 20, 12, 0.07);
  color: var(--text-primary);
  z-index: 4;
  cursor: grab;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
  box-sizing: border-box;
  overflow: visible;
}

html[data-theme="noir"] .canvas-event-card,
html[data-theme="clay-chrome"] .canvas-event-card,
html[data-theme="chesterfield-leather"] .canvas-event-card,
html[data-theme="billiard-green"] .canvas-event-card {
  background: var(--node-bg, var(--bg-surface-1));
  border-color: var(--node-border, rgba(232, 131, 100, 0.32));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.canvas-event-card:hover {
  box-shadow: 0 8px 22px rgba(28, 20, 12, 0.13);
  border-color: var(--node-accent, rgba(200, 109, 68, 0.65));
}

.canvas-event-card.is-selected {
  outline: 2px solid var(--node-accent, #d96b38);
  outline-offset: 1px;
  z-index: 20;
  box-shadow: 0 12px 28px rgba(28, 20, 12, 0.18);
}

.canvas-event-card.is-dragging {
  cursor: grabbing !important;
  opacity: 0.96;
  z-index: 30;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.25);
  transition: none !important;
}

.canvas-event-card.is-connect-target {
  outline: 2px dashed var(--accent-primary);
  outline-offset: 2px;
}

/* 4-Side Connection Ports on `.canvas-event-card` */
.canvas-event-card > .canvas-port {
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-surface-1);
  border: 2px solid var(--node-accent, #d96b38);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: auto;
  cursor: crosshair;
  z-index: 25;
  transition: opacity 0.12s ease, transform 0.12s ease, background-color 0.12s ease;
}

.canvas-event-card:hover > .canvas-port,
.canvas-event-card.is-selected > .canvas-port,
.is-connecting-any .canvas-event-card > .canvas-port {
  opacity: 0.95;
}

.canvas-event-card > .canvas-port:hover,
.canvas-event-card > .canvas-port.is-port-snap-target {
  opacity: 1 !important;
  background: var(--node-accent, #d96b38) !important;
  transform: scale(1.45);
  box-shadow: 0 0 0 4px rgba(217, 107, 56, 0.30);
}

.canvas-event-card > .canvas-port-top {
  top: -7px;
  left: calc(50% - 6px);
}

.canvas-event-card > .canvas-port-bottom {
  bottom: -7px;
  left: calc(50% - 6px);
}

.canvas-event-card > .canvas-port-left {
  left: -7px;
  top: calc(50% - 6px);
}

.canvas-event-card > .canvas-port-right {
  right: -7px;
  top: calc(50% - 6px);
}

/* Floating Contextual Action Bar — ONLY shown above the currently selected card/group/edge */
.canvas-node-floating-bar[hidden],
.obsidian-canvas-controls-dock[hidden] {
  display: none !important;
}

.canvas-node-floating-bar {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong, rgba(120, 95, 70, 0.35));
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  z-index: 60;
  white-space: nowrap;
  pointer-events: auto;
}

html[data-theme="noir"] .canvas-node-floating-bar,
html[data-theme="clay-chrome"] .canvas-node-floating-bar,
html[data-theme="chesterfield-leather"] .canvas-node-floating-bar,
html[data-theme="billiard-green"] .canvas-node-floating-bar {
  background: var(--bg-surface-1);
  border-color: rgba(232, 131, 100, 0.42);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.60);
}

.canvas-floating-sep {
  width: 1px;
  height: 16px;
  background: var(--border-subtle, rgba(120, 95, 70, 0.22));
  margin: 0 2px;
}

.canvas-floating-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.canvas-floating-btn:hover {
  background: rgba(120, 95, 70, 0.14);
}

.canvas-floating-btn.is-danger:hover {
  color: #d93838;
  background: rgba(217, 56, 56, 0.12);
}

.canvas-color-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.canvas-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--dot-color, transparent);
  border: 1.5px solid rgba(0, 0, 0, 0.28);
  padding: 0;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.canvas-color-dot:hover,
.canvas-color-dot.is-active,
.canvas-color-dot[data-active="true"] {
  transform: scale(1.22);
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px rgba(200, 109, 68, 0.25);
}

.canvas-color-dot-clear {
  background-color: var(--bg-surface-2, rgba(120, 95, 70, 0.10)) !important;
  font-size: 10px;
  line-height: 1.15;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.canvas-node-scene-badge {
  position: absolute;
  right: 12px;
  bottom: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-primary);
  background: var(--bg-surface-1);
  border: 1px solid rgba(200, 90, 40, 0.35);
  border-radius: 5px;
  padding: 1px 6px;
  cursor: pointer;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 6;
}

.canvas-node-scene-badge:hover {
  background: rgba(200, 90, 40, 0.15);
}

.canvas-node-icon-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.15;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
}

.canvas-node-icon-btn:hover {
  color: var(--text-primary);
  background: rgba(120, 95, 70, 0.12);
}

.canvas-node-body {
  flex: 1;
  width: 100%;
  height: 100%;
  font-size: 12.5px;
  line-height: 1.44;
  color: var(--text-primary);
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-word;
  padding-right: 2px;
  cursor: grab;
  scrollbar-width: thin;
}

.canvas-event-card.is-selected .canvas-node-body {
  cursor: text;
}

.canvas-node-line {
  margin-bottom: 3px;
}

.canvas-node-bullet {
  padding-left: 6px;
  margin-bottom: 2px;
}

.canvas-node-bullet[data-indent="1"] {
  padding-left: 18px;
}

.canvas-node-bullet[data-indent="2"] {
  padding-left: 30px;
}

.canvas-node-spacer {
  height: 5px;
}

.canvas-node-placeholder {
  color: var(--text-muted);
  font-style: italic;
  font-size: 12px;
}

/* Author Doubt / Question Callouts (```...``` and `...`) */
.canvas-author-doubt-block {
  margin: 5px 0;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(217, 155, 38, 0.14);
  border-left: 3px solid #d99b26;
  font-size: 11.5px;
}

.canvas-author-doubt-header {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b57c14;
  margin-bottom: 2px;
}

html[data-theme="noir"] .canvas-author-doubt-header,
html[data-theme="clay-chrome"] .canvas-author-doubt-header,
html[data-theme="chesterfield-leather"] .canvas-author-doubt-header,
html[data-theme="billiard-green"] .canvas-author-doubt-header {
  color: #f0b849;
}

.canvas-author-doubt-body {
  color: var(--text-primary);
  font-style: italic;
}

.canvas-author-doubt-inline {
  display: inline;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(217, 155, 38, 0.18);
  border: 1px dashed rgba(217, 155, 38, 0.55);
  font-size: 11.5px;
  font-style: italic;
}

.canvas-node-editor {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 36px;
  resize: none;
  border: 1px solid var(--accent-primary);
  border-radius: 5px;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.42;
  background: var(--bg-surface-1);
  color: var(--text-primary);
  box-sizing: border-box;
}

/* Group / Faction Zone Frame (`type: "group"`) */
.canvas-group-frame {
  position: absolute;
  border: 2px dashed var(--group-border, rgba(120, 95, 70, 0.42));
  background: var(--group-bg, rgba(120, 95, 70, 0.04));
  border-radius: 14px;
  z-index: 1;
  box-sizing: border-box;
  pointer-events: auto;
}

.canvas-group-frame.is-selected {
  border-style: solid;
}

.canvas-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.04);
  border-bottom: 1px dashed rgba(120, 95, 70, 0.25);
  border-radius: 12px 12px 0 0;
  cursor: grab;
}

.canvas-group-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--group-accent, var(--text-primary));
}

/* Obsidian-style Edge & Corner Resize Handles */
.canvas-node-resizer {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 55%, rgba(120, 95, 70, 0.45) 55%);
  border-radius: 0 0 6px 0;
  opacity: 0;
  z-index: 18;
  transition: opacity 0.12s ease;
}

.canvas-resize-edge {
  position: absolute;
  z-index: 16;
}

.canvas-resize-edge.canvas-resize-e {
  top: 8px;
  right: -3px;
  bottom: 14px;
  width: 6px;
  cursor: ew-resize;
}

.canvas-resize-edge.canvas-resize-s {
  left: 8px;
  right: 14px;
  bottom: -3px;
  height: 6px;
  cursor: ns-resize;
}

.canvas-event-card:hover .canvas-node-resizer,
.canvas-event-card.is-selected .canvas-node-resizer,
.canvas-group-frame:hover .canvas-node-resizer,
.canvas-group-frame.is-selected .canvas-node-resizer {
  opacity: 0.85;
}

/* SVG Edges, Draggable Endpoints & Interactive Labels — NEVER fill curved paths with black! */
#corkboardWrap[data-corkboard-mode="canvas"] #corkboardThreadOverlay {
  display: none !important;
}

.canvas-edge-group {
  pointer-events: auto;
}

.canvas-edge-hit {
  fill: none !important;
  stroke: transparent;
  stroke-width: 16px;
  pointer-events: stroke;
  cursor: pointer;
}

.canvas-edge-line {
  fill: none !important;
  stroke-width: 2.3px;
  pointer-events: stroke;
  cursor: pointer;
  transition: stroke-width 0.12s ease, filter 0.12s ease;
}

.canvas-edge-group:hover .canvas-edge-line,
.canvas-edge-group.is-selected .canvas-edge-line,
.canvas-edge-line.is-selected {
  stroke-width: 3.6px;
  filter: drop-shadow(0 0 4px rgba(217, 107, 56, 0.45));
}

/* Draggable Edge Endpoints (`from` and `to`) — Drag to move/reconnect any arrow! */
.canvas-edge-endpoint {
  opacity: 0;
  cursor: grab;
  pointer-events: all;
  transition: opacity 0.12s ease, r 0.12s ease, transform 0.12s ease;
}

.canvas-edge-group:hover .canvas-edge-endpoint,
.canvas-edge-group.is-selected .canvas-edge-endpoint {
  opacity: 1;
}

.canvas-edge-endpoint:hover {
  opacity: 1 !important;
  r: 8px;
  cursor: grabbing;
}

/* Obsidian Bottom-Right Floating Zoom & Fit Controls Dock */
.obsidian-canvas-controls-dock {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong, rgba(120, 95, 70, 0.30));
  border-radius: 9px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  z-index: 50;
}

html[data-theme="noir"] .obsidian-canvas-controls-dock,
html[data-theme="clay-chrome"] .obsidian-canvas-controls-dock,
html[data-theme="chesterfield-leather"] .obsidian-canvas-controls-dock,
html[data-theme="billiard-green"] .obsidian-canvas-controls-dock {
  background: var(--bg-surface-1);
  border-color: rgba(232, 131, 100, 0.34);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.obsidian-dock-btn {
  min-width: 28px;
  height: 26px;
  padding: 0 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s ease;
}

.obsidian-dock-btn:hover {
  background: rgba(120, 95, 70, 0.14);
}

.obsidian-dock-zoom-readout {
  min-width: 46px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* Edge Popover & Chapter Picker Popover */
.canvas-edge-popover {
  position: fixed;
  z-index: 1200;
  width: 290px;
  padding: 12px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong, rgba(120, 95, 70, 0.35));
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.canvas-edge-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.canvas-edge-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.canvas-edge-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-subtle);
}

.canvas-empty-welcome {
  position: absolute;
  width: 480px;
  padding: 24px 28px;
  text-align: center;
  background: var(--bg-surface-1);
  border: 1.5px dashed var(--border-strong, rgba(120, 95, 70, 0.35));
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.canvas-empty-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.canvas-empty-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

/* ==========================================================================
   TYPEWRITER SOUND TOGGLE MICRO-ICON (#btnToggleSoundMute)
   ========================================================================== */

#btnToggleSoundMute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: all 130ms ease;
  flex-shrink: 0;
  border: none;
  background: transparent;
}

#btnToggleSoundMute:hover {
  color: var(--text-primary);
  background: var(--bg-surface-2);
}

#btnToggleSoundMute[aria-pressed="true"] {
  color: var(--accent-primary);
}

#btnToggleSoundMute[aria-pressed="true"] .icon-sound-on {
  display: inline-block;
}

#btnToggleSoundMute[aria-pressed="true"] .icon-sound-off {
  display: none !important;
}

#btnToggleSoundMute[aria-pressed="false"] {
  color: var(--text-muted);
  opacity: 0.6;
}

#btnToggleSoundMute[aria-pressed="false"] .icon-sound-on {
  display: none !important;
}

#btnToggleSoundMute[aria-pressed="false"] .icon-sound-off {
  display: inline-block;
}

.typewriter-volume-slider {
  accent-color: var(--accent-primary, #d4a373);
  cursor: pointer;
}

@media (max-width: 640px) {
  .topbar-sound-slider-wrap {
    display: none;
  }
  .topbar-sound-cluster {
    padding: 0;
    border: none;
    background: transparent;
  }
}

/* ==========================================================================
   BOOK NOTES & STICKY BOOKMARKS NAVIGATOR (Global Teleportation & Discovery)
   ========================================================================== */

/* Assistant Drawer Mode Tabs */
.assistant-drawer-tabs {
  display: flex;
  gap: 6px;
  margin: -4px 0 14px;
  padding: 3px;
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
}

.assistant-tab-pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: all 140ms ease;
}

.assistant-tab-pill:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.assistant-tab-pill.is-active,
.assistant-tab-pill[aria-selected="true"] {
  color: var(--text-primary);
  background: var(--bg-surface-1, var(--bg-canvas));
  border-color: var(--border-subtle);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.assistant-notes-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent-primary) 22%, transparent);
  color: var(--accent-primary);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
}

/* Book Notes Filter Pills */
.book-notes-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.book-notes-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  cursor: pointer;
  transition: all 120ms ease;
}

.book-notes-filter-pill:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.book-notes-filter-pill.is-active {
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  font-weight: 700;
}

.book-notes-filter-pill .pill-count {
  font-size: 10px;
  opacity: 0.85;
}

/* Book Notes List & Tactile Sticky Cards */
.book-notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 24px;
}

.book-note-card {
  position: relative;
  padding: 10px 12px;
  background: var(--bg-surface-1, var(--bg-canvas));
  border: 1px solid var(--border-subtle);
  border-left: 3.5px solid var(--accent-primary);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.book-note-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent-primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.book-note-card.is-active {
  border-color: var(--accent-primary);
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.05));
  box-shadow: 0 0 0 1px var(--accent-primary), 0 4px 14px rgba(0, 0, 0, 0.16);
}

.book-note-card[data-type="inline_note"] {
  border-left-color: #818cf8;
}

[data-theme="warm-paper"] .book-note-card[data-type="inline_note"] {
  border-left-color: #4f46e5;
}

.book-note-card[data-type="scene_note"] {
  border-left-color: #52b788;
}

.book-note-card[data-type="comment"] {
  border-left-color: #f97316;
}

[data-theme="warm-paper"] .book-note-card[data-type="comment"] {
  border-left-color: #ea580c;
}

.remark-target-line-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: #fb923c;
}

[data-theme="warm-paper"] .remark-target-line-pill {
  background: rgba(234, 88, 12, 0.1);
  border-color: rgba(234, 88, 12, 0.35);
  color: #9a3412;
}

.book-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.book-note-location {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-note-del-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  opacity: 0.6;
  cursor: pointer;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: opacity 120ms ease, color 120ms ease, background-color 120ms ease;
}

.book-note-del-btn:hover {
  opacity: 1;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

.book-note-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 4px;
}

.book-note-type-pill.type-inline_note {
  background: rgba(99, 102, 241, 0.15);
  color: #c7d2fe;
  border: 1px solid rgba(99, 102, 241, 0.35);
}

[data-theme="warm-paper"] .book-note-type-pill.type-inline_note {
  background: rgba(79, 70, 229, 0.1);
  color: #4338ca;
  border: 1px solid rgba(79, 70, 229, 0.3);
}

.book-note-type-pill.type-scene_note {
  background: rgba(82, 183, 136, 0.15);
  color: #52b788;
  border: 1px solid rgba(82, 183, 136, 0.3);
}

.book-note-type-pill.type-comment {
  background: rgba(249, 115, 22, 0.15);
  color: #fdba74;
  border: 1px solid rgba(249, 115, 22, 0.35);
}

[data-theme="warm-paper"] .book-note-type-pill.type-comment {
  background: rgba(234, 88, 12, 0.12);
  color: #9a3412;
  border: 1px solid rgba(234, 88, 12, 0.35);
}


.book-note-quote {
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--border-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.book-note-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.book-note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed var(--border-subtle);
  font-size: 10.5px;
  color: var(--text-muted);
}

.book-note-teleport-hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent-primary);
  font-weight: 600;
  opacity: 0.85;
}

.book-note-card:hover .book-note-teleport-hint {
  opacity: 1;
  text-decoration: underline;
}

/* Quick Scene Stickies Strip in Card 2 */
.scene-inline-stickies-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.scene-sticky-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(229, 173, 104, 0.1);
  border: 1px solid rgba(229, 173, 104, 0.28);
  border-radius: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 120ms ease;
  max-width: 100%;
}

.scene-sticky-chip:hover {
  background: rgba(229, 173, 104, 0.2);
  border-color: #e5ad68;
  transform: translateY(-0.5px);
}

.scene-sticky-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

/* Outline Sidebar Tabs & Scene Badges */
.outline-tabs {
  display: flex;
  gap: 4px;
  padding: 4px 10px 8px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 6px;
}

.outline-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: all 120ms ease;
}

.outline-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.outline-tab-btn.is-active,
.outline-tab-btn[aria-selected="true"] {
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.06));
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.outline-tab-counter {
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.outline-scene-meta-badges {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 4px;
}

.outline-badge-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1.15;
  padding: 2px 4px;
  border-radius: 3px;
}

.outline-badge-chip.chip-synopsis {
  background: rgba(82, 183, 136, 0.15);
  color: #52b788;
}

.outline-badge-chip.chip-stickies {
  background: rgba(99, 102, 241, 0.16);
  color: #818cf8;
}

[data-theme="warm-paper"] .outline-badge-chip.chip-stickies {
  background: rgba(79, 70, 229, 0.12);
  color: #4f46e5;
}

.outline-badge-chip.chip-comments {
  background: rgba(249, 115, 22, 0.16);
  color: #f97316;
}

[data-theme="warm-paper"] .outline-badge-chip.chip-comments {
  background: rgba(234, 88, 12, 0.12);
  color: #ea580c;
}

/* Teleportation Jump Flash Pulse Animations */
@keyframes line-jump-pulse {
  0% {
    background-color: color-mix(in srgb, var(--accent-primary) 38%, transparent);
    box-shadow: 0 0 0 2px var(--accent-primary);
  }
  40% {
    background-color: color-mix(in srgb, var(--accent-primary) 22%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 50%, transparent);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

.script-line-jump-highlight {
  animation: line-jump-pulse 1.8s ease-out forwards;
  border-radius: var(--radius-sm, 4px);
}

@keyframes textarea-jump-pulse {
  0% {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 45%, transparent) !important;
  }
  100% {
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
  }
}

.note-jump-highlight {
  animation: textarea-jump-pulse 1.8s ease-out forwards;
}

@keyframes comment-card-pulse {
  0% {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 45%, transparent) !important;
  }
  100% {
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
  }
}

.comment-card-highlight {
  animation: comment-card-pulse 1.8s ease-out forwards;
}

/* ==========================================================================
   PHASE 13: THE DIOGENES ORACLE — OBLIQUE WRITING STRATEGIES DECK
   ========================================================================== */

.oracle-ribbon-btn {
  border-color: color-mix(in srgb, var(--accent-primary) 38%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-surface));
  color: var(--text-primary);
  font-weight: 600;
}

.oracle-ribbon-btn:hover,
.oracle-ribbon-btn:focus-visible {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-surface));
}

.oracle-modal-dialog {
  max-width: 620px;
  width: min(94vw, 620px);
  padding: 20px 22px 18px;
}

.oracle-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.oracle-modal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.oracle-wax-emblem {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #c85c42, #8a2c1b 82%);
  color: #f9efe1;
  border: 1.5px solid rgba(238, 184, 152, 0.55);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.oracle-modal-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.oracle-modal-subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
}

.oracle-category-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.oracle-category-pill {
  appearance: none;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 140ms ease;
}

.oracle-category-pill:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.oracle-category-pill.is-active {
  background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-surface));
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.oracle-deck-stage {
  position: relative;
  padding: 6px 8px 14px;
  perspective: 1100px;
}

.oracle-deck-shadow-card {
  position: absolute;
  inset: 6px 8px 14px;
  border-radius: 10px;
  background: #dfd3ba;
  border: 1px solid #bfae8e;
  pointer-events: none;
}

.oracle-deck-shadow-1 {
  transform: translate(5px, 5px) rotate(1.1deg);
  opacity: 0.72;
}

.oracle-deck-shadow-2 {
  transform: translate(-5px, 8px) rotate(-1.3deg);
  opacity: 0.45;
}

.oracle-manila-card {
  position: relative;
  z-index: 2;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 252, 242, 0.55), transparent 58%),
    linear-gradient(165deg, #efe6d3 0%, #eae0cb 54%, #e1d4ba 100%);
  color: #241d15;
  border-radius: 10px;
  border: 1.5px solid #bfa984;
  padding: 10px;
  box-shadow:
    0 14px 34px rgba(14, 11, 8, 0.28),
    inset 0 1px 0 rgba(255, 252, 244, 0.75);
  transform-origin: center center;
}

.oracle-manila-card.is-drawing {
  animation: oracleManilaCardDraw 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes oracleManilaCardDraw {
  0% {
    opacity: 0.35;
    transform: translateY(10px) rotateX(14deg) rotateZ(-1.4deg) scale(0.97);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) rotateX(-2deg) rotateZ(0.3deg) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0) rotateZ(0) scale(1);
  }
}

.oracle-card-inner-frame {
  border: 1px double rgba(116, 90, 54, 0.48);
  border-radius: 6px;
  padding: 18px 22px 16px;
  min-height: 235px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.oracle-card-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.oracle-card-roman {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b5335;
}

.oracle-card-category-badge {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7c3321;
  background: rgba(148, 58, 36, 0.1);
  border: 1px solid rgba(148, 58, 36, 0.28);
  padding: 2px 9px;
  border-radius: 999px;
}

.oracle-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.oracle-card-title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b5335;
}

.oracle-card-prompt {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  line-height: 1.42;
  color: #1d160f;
}

.oracle-card-divider {
  width: 48px;
  height: 1px;
  background: rgba(116, 90, 54, 0.42);
  margin: 2px 0;
}

.oracle-card-hint {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: #4d3d29;
  font-style: italic;
}

.oracle-card-bottom-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed rgba(116, 90, 54, 0.28);
  font-size: 11px;
  color: #6b5335;
}

.oracle-card-stamp {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.82;
}

.oracle-deck-counter {
  font-family: var(--font-mono);
}

.oracle-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.oracle-footer-left,
.oracle-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   PHASE 12 & PHASE 14: FELLOW SANCTUARY, QUIET CLAIM & COMMENT-ONLY EDITOR
   ========================================================================== */
.quiet-claim-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed color-mix(in srgb, var(--accent-primary) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
  color: var(--accent-primary);
  font-size: 11.5px;
  padding: 4px 10px;
}

.quiet-claim-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 6px var(--accent-primary);
}

.quiet-claim-badge.is-claimed,
.quiet-claim-badge[data-claimed="true"] {
  border: 1px solid color-mix(in srgb, #2e9e68 55%, var(--border-subtle));
  background: color-mix(in srgb, #2e9e68 14%, transparent);
  color: #2e9e68;
}

.quiet-claim-badge.is-claimed .quiet-claim-dot,
.quiet-claim-badge[data-claimed="true"] .quiet-claim-dot {
  background: #2e9e68;
  box-shadow: 0 0 7px rgba(46, 158, 104, 0.75);
}

/* Unified lobby-workspace-tabs buttons */

.editor-readonly-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-subtle));
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.4;
}

.nda-watermark-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.08;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-24deg);
  user-select: none;
  text-align: center;
  padding: 24px;
}

/* ==========================================================================
   Full-Page Patron Admin Console (#stagePatronAdmin · Кабинет Патрона)
   ========================================================================== */

#stagePatronAdmin {
  overflow-y: auto;
  padding: 28px 32px 72px;
}

.patron-admin-shell {
  max-width: 1240px;
  margin: 0 auto;
}

.settings-nav-item-patron {
  margin-top: 8px;
  border-top: 1px dashed var(--border-subtle);
  padding-top: 12px;
  color: var(--accent-primary);
  font-weight: 600;
}

.patron-nav-counter {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.patron-nav-counter-alert {
  background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-subtle));
  color: var(--accent-primary);
}

.patron-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.patron-kpi-card {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.patron-kpi-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.patron-kpi-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.patron-kpi-value-accent {
  color: var(--accent-primary);
}

.patron-kpi-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
}

.patron-formats-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle);
  font-size: 12px;
  color: var(--text-secondary);
}

.patron-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.patron-search-input {
  flex: 1 1 260px;
  max-width: 420px;
  height: 34px;
  font-size: 12.5px;
}

.patron-filter-select {
  width: 240px;
  height: 34px;
  font-size: 12.5px;
}

.patron-pill-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.patron-pill-tabs .btn.is-active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

.patron-table-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 380px;
  max-width: 100%;
  min-width: 0;
  background: var(--bg-surface);
}

.patron-admin-shell .settings-main,
.patron-admin-shell .settings-section,
.patron-admin-shell .settings-card {
  min-width: 0;
  max-width: 100%;
}

.patron-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}

.patron-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: 9px 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-primary) 65%, var(--bg-surface));
  white-space: nowrap;
}

.patron-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  color: var(--text-primary);
}

.patron-member-actions-group {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
}

.patron-member-actions-group .btn {
  width: auto;
  justify-content: center;
  padding: 3px 7px;
  font-size: 10.5px;
  height: 24px;
  white-space: nowrap;
}

.patron-table tbody tr:last-child td {
  border-bottom: none;
}

.patron-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-primary) 4%, transparent);
}

.patron-empty-cell {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.patron-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.patron-role-badge[data-role="admin"] {
  background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
  color: var(--accent-primary);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-subtle));
}

.patron-role-badge[data-role="patron"] {
  background: color-mix(in srgb, #d4a038 18%, transparent);
  color: #c99227;
  border: 1px solid color-mix(in srgb, #d4a038 45%, var(--border-subtle));
}

.patron-role-badge[data-role="fellow"] {
  background: color-mix(in srgb, #2e9e68 15%, transparent);
  color: #2e9e68;
  border: 1px solid color-mix(in srgb, #2e9e68 40%, var(--border-subtle));
}

.patron-role-badge[data-role="guest"] {
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.patron-inbox-master-detail {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-height: 520px;
}

@media (max-width: 960px) {
  .patron-inbox-master-detail {
    grid-template-columns: 1fr;
  }
}

.patron-dispatches-master-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 4px;
}

.patron-dispatch-item-card {
  text-align: left;
  width: 100%;
  padding: 12px 14px;
  border-radius: 9px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.patron-dispatch-item-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 50%, var(--border-subtle));
}

.patron-dispatch-item-card.is-selected {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

.patron-dispatch-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.patron-dispatch-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
  display: inline-block;
  flex-shrink: 0;
}

.patron-dispatch-item-subject {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}

.patron-dispatch-item-preview {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.patron-dispatch-detail-pane {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-surface);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.patron-dispatch-empty-state {
  margin: auto;
  max-width: 360px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.patron-dispatch-reader-header {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.patron-detail-subject {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.patron-detail-sender {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.patron-detail-message-body {
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 130px;
  margin-bottom: 14px;
}

.patron-detail-diagnostics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-primary);
  border: 1px dashed var(--border-subtle);
  font-size: 11.5px;
  color: var(--text-secondary);
}

.patron-reply-composer {
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.patron-mint-box {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.patron-minted-output {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent-primary);
  word-break: break-all;
}

.patron-shelf-moderation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Custom Dropdowns & Quota Stepper inside Patron Admin Console */
.patron-filter-toolbar .ui-dropdown,
.patron-filter-toolbar .ui-dropdown[data-variant="field"] {
  width: 245px;
  min-width: 220px;
  max-width: 270px;
  flex: 0 0 auto;
}

.patron-filter-toolbar .ui-dropdown[data-variant="field"] .ui-dropdown-trigger {
  height: 34px;
  padding: 5px 11px;
  font-size: 12.5px;
  background: var(--bg-surface);
}

.patron-member-role-cell {
  min-width: 155px;
  max-width: 190px;
}

.patron-member-role-cell .ui-dropdown,
.patron-member-role-cell .ui-dropdown[data-variant="field"] {
  width: 100%;
}

.patron-member-role-cell .ui-dropdown[data-variant="field"] .ui-dropdown-trigger {
  height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
}

.patron-member-role-cell .ui-dropdown[data-selected-value="admin"] .ui-dropdown-trigger {
  background: color-mix(in srgb, var(--accent-primary) 13%, var(--bg-primary));
  border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-subtle));
  color: var(--accent-primary);
}

.patron-member-role-cell .ui-dropdown[data-selected-value="patron"] .ui-dropdown-trigger {
  background: color-mix(in srgb, #d4a038 14%, var(--bg-primary));
  border-color: color-mix(in srgb, #d4a038 42%, var(--border-subtle));
  color: #c99227;
}

.patron-member-role-cell .ui-dropdown[data-selected-value="patron"] .ui-dropdown-icon {
  color: #c99227;
}

.patron-member-role-cell .ui-dropdown[data-selected-value="fellow"] .ui-dropdown-trigger {
  background: color-mix(in srgb, #2e9e68 12%, var(--bg-primary));
  border-color: color-mix(in srgb, #2e9e68 38%, var(--border-subtle));
}

.patron-member-role-cell .ui-dropdown[data-selected-value="fellow"] .ui-dropdown-icon {
  color: #2e9e68;
}

.patron-quota-stepper {
  display: inline-flex;
  align-items: center;
  height: 32px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-primary);
  overflow: hidden;
}

.patron-quota-step-btn {
  width: 26px;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}

.patron-quota-step-btn:hover {
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  color: var(--text-primary);
}

.patron-quota-input.field-input {
  width: 44px;
  height: 100%;
  border: none !important;
  border-left: 1px solid var(--border-subtle) !important;
  border-right: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center;
  padding: 0 4px !important;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: none !important;
  -moz-appearance: textfield;
}

.patron-quota-input::-webkit-outer-spin-button,
.patron-quota-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* =========================================================================
   Phase 12: Patron Dispatch Modal Enhancements (Spacious Bureau & Letterhead)
   ========================================================================= */
.dispatch-segmented-control {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 2px;
  gap: 3px;
}

.dispatch-tab-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.dispatch-tab-btn:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.dispatch-tab-btn.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* =========================================================================
   Phase 12: Patron Dispatch Bureau (Master-Detail Postal Bureau Dialog)
   ========================================================================= */
.dispatch-bureau-dialog {
  max-width: 980px !important;
  width: min(96vw, 980px) !important;
  height: min(88vh, 720px) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: var(--radius-lg, 12px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.dispatch-bureau-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-elevated, var(--bg-surface));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 12px;
}

.dispatch-bureau-split {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

.dispatch-bureau-ledger {
  width: 320px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  min-height: 0;
}

.dispatch-bureau-item-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  text-align: left;
  cursor: pointer;
  transition: all 140ms ease;
  position: relative;
  user-select: none;
}

.dispatch-bureau-item-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 35%, var(--border-subtle));
  background: var(--bg-surface-hover, var(--bg-surface));
}

.dispatch-bureau-item-card.is-selected {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-surface));
  box-shadow: 0 0 0 1px var(--accent-primary);
}

.dispatch-bureau-item-card.has-reply::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3.5px;
  background: var(--accent-primary);
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.dispatch-bureau-item-subject {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dispatch-bureau-item-preview {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dispatch-bureau-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--bg-primary);
  min-height: 0;
}

.dispatch-bureau-mobile-back {
  display: none;
}

#dispatchBureauReaderView[hidden],
#dispatchBureauComposeView[hidden],
#dispatchBureauEmptyView[hidden] {
  display: none !important;
}

/* Mobile responsive drawer-switch */
@media (max-width: 768px) {
  .dispatch-bureau-mobile-back {
    display: inline-flex !important;
  }
  .dispatch-bureau-ledger {
    width: 100%;
    border-right: none;
  }
  .dispatch-bureau-main {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: var(--bg-primary);
    transform: translateX(100%);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dispatch-bureau-main.is-mobile-viewing {
    transform: translateX(0);
  }
}

.dispatch-thread-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease;
}

.dispatch-thread-card.has-reply {
  border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-subtle));
}

.dispatch-author-msg {
  font-size: 13.5px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  line-height: 1.6;
}

.dispatch-patron-letter {
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
  border-left: 4px solid var(--accent-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.dispatch-patron-letter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.dispatch-patron-letter-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-primary);
}

.dispatch-patron-letter-body {
  font-size: 13.5px;
  color: var(--text-primary);
  white-space: pre-wrap;
  line-height: 1.68;
}

.dispatch-patron-letter-signature {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--accent-primary) 20%, transparent);
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

/* =========================================================================
   4-Tier Heraldry System, Mega-Status Titled Signet Cartouche & 5 Surfaces
   ========================================================================= */

.topbar-signet-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 35;
}

.topbar-signet-wrap[hidden],
.topbar-heraldry-badge[hidden],
#btnFellowProfile[hidden],
#btnPromptRegister[hidden],
#statusClaimedAccessBadge[hidden],
#conceptExLibrisBookplate[hidden],
#sheetExLibrisEmboss[hidden],
#sheetColophonSeal[hidden] {
  display: none !important;
}

.topbar-heraldry-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 38px;
  min-width: 38px;
  padding: 0 3px;
  border-radius: 50%;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  --heraldry-fill: #e5ca85;
  --heraldry-cut: #14110c;
  color: #e5ca85;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}

.topbar-heraldry-badge::after {
  display: none !important;
}

.topbar-heraldry-badge:hover {
  transform: translateY(-1px) scale(1.04);
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  --heraldry-fill: #f5dfb0;
}

/* Tier I–IV Single-Tone Heraldic Tints (Frameless Emblem) */
.topbar-heraldry-badge[data-tier="1"],
.topbar-heraldry-badge[data-tier="2"],
.topbar-heraldry-badge[data-tier="3"],
.topbar-heraldry-badge.is-patron-gold,
.topbar-heraldry-badge[data-tier="4"],
.topbar-heraldry-badge.is-patron-gold:hover,
.topbar-heraldry-badge[data-tier="4"]:hover {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  --heraldry-fill: #e8cd86;
  --heraldry-cut: #14110c;
  color: #e8cd86;
}

html[data-theme="warm-paper"] .topbar-heraldry-badge,
html[data-theme="warm-paper"] .topbar-heraldry-badge.is-patron-gold,
html[data-theme="warm-paper"] .topbar-heraldry-badge[data-tier="4"] {
  --heraldry-fill: #8c6728;
  --heraldry-cut: var(--bg-topbar, #efe8d8);
  color: #8c6728;
}

#btnOpenSupportModal.is-patron-gold {
  border-color: color-mix(in srgb, #d4a038 55%, var(--border-subtle));
  background: color-mix(in srgb, #d4a038 14%, var(--bg-surface));
  color: #c8962e;
}

/* Frameless 40x40px Single-Tone Royal Cypher & Laurel Wreath Emblem */
.topbar-signet-medallion,
.topbar-heraldry-crest-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.topbar-heraldry-badge:hover .topbar-signet-medallion {
  transform: scale(1.05);
}

/* Hide rectangular text cartouche in topbar (Вариант А: pure heraldic emblem) */
.topbar-signet-cartouche {
  display: none !important;
}

.topbar-signet-rank-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-ui);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #ebd089;
  opacity: 0.92;
  white-space: nowrap;
}

.topbar-signet-star {
  font-size: 6.5px;
  color: #f3d27a;
}

.topbar-signet-identity-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.topbar-heraldry-monogram {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.09em;
  background: linear-gradient(180deg, #fff9e2 0%, #f2d27e 55%, #c99738 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #fbe5ad;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.topbar-signet-roman {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 4.5px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(245, 208, 118, 0.18);
  border: 1px solid rgba(245, 208, 118, 0.52);
  color: #ffe9a6;
}

.topbar-signet-dispatch-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
  flex-shrink: 0;
}

.topbar-heraldry-motto {
  display: none !important;
}

/* =========================================================================
   Surface 5: Interactive Topbar Ex Libris Certificate Popover
   ========================================================================= */
.exlibris-certificate-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  min-width: 392px;
  max-width: min(470px, 94vw);
  z-index: 260;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.98);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), visibility 180ms ease;
}

.topbar-signet-wrap:not(.is-popover-dismissed):hover .exlibris-certificate-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Bridge hover gap between badge and popover */
.exlibris-certificate-popover::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.exlibris-popover-card {
  padding: 14px 15px;
  border-radius: 12px;
  border: 1.5px solid rgba(222, 179, 93, 0.65);
  background:
    radial-gradient(circle at 18% 15%, rgba(232, 186, 94, 0.14), transparent 60%),
    linear-gradient(155deg, #1d1711 0%, #14100c 100%);
  color: #f7eedc;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(255, 232, 176, 0.2);
}

.exlibris-popover-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.exlibris-popover-seal {
  flex-shrink: 0;
  --heraldry-fill: #e8cd86;
  --heraldry-cut: #16120d;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

.exlibris-popover-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.exlibris-popover-rank-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: rgba(226, 180, 88, 0.18);
  border: 1px solid rgba(226, 180, 88, 0.52);
  color: #f9dc94;
}

.exlibris-popover-author {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: #fff6e0;
  line-height: 1.25;
  white-space: nowrap;
}

.exlibris-popover-crest-name {
  font-family: var(--font-ui);
  font-size: 11px;
  color: #d6c5a5;
  white-space: nowrap;
}

.exlibris-popover-motto {
  padding: 6px 12px;
  margin-bottom: 9px;
  border-radius: 6px;
  background: rgba(255, 244, 214, 0.05);
  border: 1px dashed rgba(222, 179, 93, 0.35);
  font-family: var(--font-ui);
  font-size: 11px;
  font-style: normal;
  color: #f3d999;
  text-align: center;
  white-space: nowrap;
}

.exlibris-popover-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #8ce0b3;
  margin-bottom: 10px;
}

.exlibris-popover-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.exlibris-popover-actions .btn {
  flex: 1;
  justify-content: center;
  font-size: 11px;
}

/* =========================================================================
   Surface 3: Title Page Archival Ex Libris Bookplate (#conceptExLibrisBookplate)
   ========================================================================= */
.concept-exlibris-bookplate {
  margin-bottom: 18px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1.5px double color-mix(in srgb, #c89d48 58%, var(--border-subtle));
  background:
    radial-gradient(circle at 12% 50%, rgba(208, 162, 74, 0.12), transparent 55%),
    color-mix(in srgb, var(--bg-surface-2, var(--bg-canvas)) 92%, #c89d48 8%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 10px rgba(0, 0, 0, 0.06);
}

.concept-exlibris-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.concept-exlibris-seal {
  flex-shrink: 0;
  --heraldry-fill: #7a5c2e;
  --heraldry-cut: var(--bg-surface-2);
}

html:not([data-theme="warm-paper"]) .concept-exlibris-seal {
  --heraldry-fill: #dbb970;
  --heraldry-cut: #181410;
}

.concept-exlibris-body {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.concept-exlibris-overline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.concept-exlibris-rank-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(200, 157, 72, 0.16);
  border: 1px solid rgba(200, 157, 72, 0.48);
  color: #b8862d;
}

html:not([data-theme="warm-paper"]) .concept-exlibris-rank-badge {
  color: #f3cf7a;
}

.concept-exlibris-crest-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.concept-exlibris-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-primary);
}

.concept-exlibris-mono {
  color: #c49133;
  font-weight: 800;
}

.concept-exlibris-motto {
  font-family: var(--font-ui);
  font-size: 12px;
  font-style: normal;
  color: var(--text-secondary);
}

/* =========================================================================
   Surface 2A & 2B: Book Paper Sheet Ex Libris Emboss & Bottom Wax Colophon
   ========================================================================= */
.starc-page-top-margin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.sheet-exlibris-emboss {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 10px 2px 4px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #c89d48 42%, var(--border-subtle));
  background: color-mix(in srgb, #c89d48 8%, transparent);
  cursor: pointer;
  user-select: none;
  margin-right: auto;
  opacity: 0.9;
  transition: opacity 220ms ease, transform 150ms ease, border-color 150ms ease;
}

.paper-sheet:focus-within .sheet-exlibris-emboss {
  opacity: 0.55;
}

.sheet-exlibris-emboss:hover {
  opacity: 1 !important;
  transform: translateY(-0.5px);
  border-color: #c89d48;
}

.sheet-emboss-seal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  --heraldry-fill: #7a5c2e;
  --heraldry-cut: var(--bg-paper);
}

html:not([data-theme="warm-paper"]) .sheet-emboss-seal-icon {
  --heraldry-fill: #dbb970;
  --heraldry-cut: var(--bg-paper);
}

.sheet-emboss-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui) !important;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.sheet-emboss-title {
  font-family: var(--font-ui) !important;
  font-weight: 700;
  color: var(--text-primary);
}

.sheet-emboss-sub {
  font-family: var(--font-ui) !important;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-secondary);
}

/* Bottom Colophon Royal Cypher Stamp on #paperSheet (Образец 1 — Single-Tone Frameless Book Colophon) */
.sheet-colophon-seal {
  margin-top: 32px;
  padding: 16px 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: transform 180ms ease;
}

.sheet-colophon-seal:hover {
  transform: translateY(-1px);
}

.sheet-colophon-rule {
  display: none;
}

.colophon-wing {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #c89d48 65%, var(--border-strong)), transparent);
}

.colophon-star {
  font-size: 11px;
  color: #c89d48;
}

.sheet-colophon-stamp-wrap,
.sheet-colophon-stamp-wrap.is-single-tone-colophon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(760px, 98%);
  padding: 14px 8px 4px;
  border-radius: 0;
  border: none;
  border-top: 1px solid color-mix(in srgb, #7a5c2e 26%, var(--border-subtle));
  background: transparent;
  --heraldry-fill: #7a5c2e;
  --heraldry-cut: var(--bg-paper);
}

html:not([data-theme="warm-paper"]) .sheet-colophon-stamp-wrap,
html:not([data-theme="warm-paper"]) .sheet-colophon-stamp-wrap.is-single-tone-colophon {
  --heraldry-fill: #dbb970;
  --heraldry-cut: var(--bg-paper);
  border-top-color: rgba(219, 185, 112, 0.24);
}

.sheet-colophon-side-wing {
  flex: 1 0 auto;
  font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  font-size: 9.8px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--heraldry-fill, #7a5c2e) 88%, var(--text-secondary));
  text-shadow: 0 1px 0 rgba(255, 252, 242, 0.72), 0 -0.5px 0 rgba(60, 42, 18, 0.22);
  line-height: 1.35;
}

html:not([data-theme="warm-paper"]) .sheet-colophon-side-wing {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.78), 0 -0.5px 0 rgba(255, 232, 176, 0.18);
}

.sheet-colophon-side-wing.is-left {
  text-align: right;
}

.sheet-colophon-side-wing.is-right {
  text-align: left;
}

.sheet-colophon-wax-medallion {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: none;
  transition: transform 200ms ease;
}

.sheet-colophon-seal:hover .sheet-colophon-wax-medallion {
  transform: scale(1.05);
}

.sheet-colophon-plaque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5px;
  text-align: left;
}

.sheet-colophon-primary {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--text-primary);
}

.sheet-colophon-mono {
  color: #c89d48;
}

.sheet-colophon-motto {
  font-family: var(--font-ui);
  font-size: 11px;
  font-style: normal;
  color: var(--text-secondary);
}

.sheet-colophon-rank {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b8862d;
}

html:not([data-theme="warm-paper"]) .sheet-colophon-rank {
  color: #ebd089;
}

/* =========================================================================
   Surface 4: Palimpsest Angled Wax Stamp & Gold Deckle Edge
   ========================================================================= */
.palimpsest-wax-stamp {
  position: absolute;
  top: -8px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-7deg);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
  pointer-events: none;
  z-index: 4;
}

.palimpsest-margin-note.is-patron-note {
  border-left: 3.5px solid #c8962e !important;
  background:
    radial-gradient(circle at 95% 10%, rgba(212, 168, 79, 0.14), transparent 55%),
    rgba(255, 251, 240, 0.94);
  box-shadow: 0 3px 10px rgba(140, 98, 20, 0.14);
}

/* =========================================================================
   Bottom Status Bar Claimed Access Capsule (#statusClaimedAccessBadge)
   ========================================================================= */
.status-stats-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.status-claimed-access-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #2e9e68 50%, var(--border-subtle));
  background: color-mix(in srgb, #2e9e68 12%, transparent);
  color: #2e9e68;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease, transform 120ms ease;
}

.status-claimed-access-pill:hover {
  background: color-mix(in srgb, #2e9e68 20%, transparent);
  border-color: #2e9e68;
  transform: translateY(-0.5px);
}

.status-claimed-access-pill .quiet-claim-dot {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  background: #2e9e68;
  box-shadow: 0 0 6px rgba(46, 158, 104, 0.8);
}

.heraldry-crest-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 720px) {
  .heraldry-crest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.heraldry-crest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  text-align: center;
  --heraldry-fill: #9b7326;
  --heraldry-cut: var(--bg-primary, #f6f1e6);
  transition: border-color 140ms ease, background 140ms ease, transform 120ms ease;
}

[data-theme="midnight-slate"] .heraldry-crest-card,
[data-theme="billiard-green"] .heraldry-crest-card,
[data-theme="chesterfield-leather"] .heraldry-crest-card,
[data-theme="obsidian"] .heraldry-crest-card {
  --heraldry-fill: #e5ca85;
  --heraldry-cut: var(--bg-primary, #14110c);
}

.heraldry-crest-card:hover {
  border-color: color-mix(in srgb, #c8a45c 65%, var(--border-subtle));
}

.heraldry-crest-card.is-selected {
  border-color: #c8a45c;
  background: color-mix(in srgb, #c8a45c 14%, var(--bg-primary));
  box-shadow: 0 0 0 1px color-mix(in srgb, #c8a45c 45%, transparent);
}

.heraldry-crest-card.is-locked {
  opacity: 0.72;
  border-style: dashed;
}

.heraldry-crest-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 0;
  background: transparent;
  color: var(--heraldry-fill, #c8a45c);
}

.heraldry-crest-card-icon svg {
  width: 52px;
  height: 52px;
  overflow: visible;
}

.exlibris-inline-order-crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -2px;
  margin-right: 4px;
  --heraldry-fill: #d8b568;
  --heraldry-cut: #14110c;
}

.heraldry-cypher-privilege-panel {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, #c8a45c 38%, var(--border-subtle));
  background: color-mix(in srgb, #c8a45c 6%, var(--bg-primary));
  --heraldry-fill: #9b7326;
  --heraldry-cut: var(--bg-primary, #f6f1e6);
}

[data-theme="midnight-slate"] .heraldry-cypher-privilege-panel,
[data-theme="billiard-green"] .heraldry-cypher-privilege-panel,
[data-theme="chesterfield-leather"] .heraldry-cypher-privilege-panel,
[data-theme="obsidian"] .heraldry-cypher-privilege-panel {
  --heraldry-fill: #e5ca85;
  --heraldry-cut: var(--bg-primary, #14110c);
}

.heraldry-cypher-privilege-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.heraldry-cypher-privilege-meta {
  flex: 1 1 320px;
  min-width: 0;
}

.heraldry-cypher-privilege-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.heraldry-cypher-privilege-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.heraldry-cypher-status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.heraldry-cypher-status-pill.is-unlocked {
  color: #c8962e;
  border-color: color-mix(in srgb, #c8a45c 55%, var(--border-subtle));
  background: color-mix(in srgb, #c8a45c 14%, transparent);
}

.heraldry-cypher-privilege-sub {
  font-size: 11.2px;
  line-height: 1.42;
  color: var(--text-secondary);
}

.heraldry-cypher-dual-preview {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.heraldry-dual-preview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.heraldry-dual-preview-svg {
  display: inline-flex;
  width: 46px;
  height: 46px;
}

.heraldry-dual-preview-lbl {
  font-size: 9.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

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

@media (max-width: 720px) {
  .heraldry-display-mode-grid {
    grid-template-columns: 1fr;
  }
}

.heraldry-display-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.heraldry-display-mode-card:hover {
  border-color: color-mix(in srgb, #c8a45c 60%, var(--border-subtle));
}

.heraldry-display-mode-card.is-selected {
  border-color: #c8a45c;
  background: color-mix(in srgb, #c8a45c 13%, var(--bg-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, #c8a45c 40%, transparent);
}

.heraldry-display-mode-card.is-locked-mode {
  opacity: 0.55;
  border-style: dashed;
}

.heraldry-mode-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.heraldry-mode-radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--text-muted);
  flex-shrink: 0;
}

.heraldry-display-mode-card.is-selected .heraldry-mode-radio-dot {
  border-color: #c8962e;
  background: #c8962e;
}

.heraldry-mode-card-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.heraldry-mode-card-desc {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.heraldry-crest-card-title {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.heraldry-crest-pill {
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.heraldry-crest-pill.is-gold {
  color: #c8962e;
  border-color: color-mix(in srgb, #c8a45c 45%, var(--border-subtle));
  background: color-mix(in srgb, #c8a45c 12%, transparent);
}

.patronage-tier-card {
  --heraldry-fill: #9b7326;
  --heraldry-cut: var(--bg-surface, #f6f1e6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

[data-theme="dark"] .patronage-tier-card,
[data-theme="midnight"] .patronage-tier-card,
[data-theme="forest"] .patronage-tier-card,
.theme-dark .patronage-tier-card {
  --heraldry-fill: #e5ca85;
  --heraldry-cut: var(--bg-surface, #171512);
}

.patronage-tier-card:hover {
  border-color: color-mix(in srgb, #c8a45c 60%, var(--border-subtle));
}

.patronage-tier-card.is-selected {
  --heraldry-fill: #8c6419;
  border-color: #c8a45c;
  background: color-mix(in srgb, #c8a45c 14%, var(--bg-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, #c8a45c 40%, transparent);
}

[data-theme="dark"] .patronage-tier-card.is-selected,
[data-theme="midnight"] .patronage-tier-card.is-selected,
[data-theme="forest"] .patronage-tier-card.is-selected,
.theme-dark .patronage-tier-card.is-selected {
  --heraldry-fill: #ecd79b;
}

.patronage-tier-card-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.patronage-tier-crest-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  color: var(--heraldry-fill, #9b7326);
  border: none;
  flex-shrink: 0;
}

.patronage-tier-crest-icon svg {
  width: 40px;
  height: 40px;
}

.patronage-tier-roman {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c8a45c;
}

.patronage-tier-name {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-serif);
}

.patronage-tier-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

.palimpsest-heraldry-seal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.palimpsest-heraldry-seal.is-patron-gold svg {
  color: #b5852b;
}

.palimpsest-heraldry-mono {
  font-family: var(--font-serif);
  font-size: 10.5px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(200, 164, 92, 0.15);
  color: #7c5816;
}

.palimpsest-patron-pill {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(200, 164, 92, 0.2);
  border: 1px solid rgba(200, 164, 92, 0.55);
  color: #8a6116;
}

.palimpsest-note-motto {
  margin-top: 3px;
  font-size: 10.5px;
  font-style: italic;
  color: #78716c;
  font-family: var(--font-serif);
}

/* ==========================================================================
   FAST ON-SHEET EDITORIAL COMMENTING UX (SELECTION PILL & MARGIN LOCK)
   ========================================================================== */
.editor-floating-comment-pill {
  position: fixed;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(234, 88, 12, 0.55);
  background: linear-gradient(180deg, #1f1916 0%, #14100e 100%);
  color: #fde8d7;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(234, 88, 12, 0.2);
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.editor-floating-comment-pill[hidden] {
  display: none !important;
}

.editor-floating-comment-pill:hover {
  transform: translateY(-1px);
  border-color: #ea580c;
  box-shadow: 0 12px 28px rgba(234, 88, 12, 0.28), 0 0 0 1px rgba(234, 88, 12, 0.45);
}

.editor-floating-comment-pill svg {
  color: #fb923c;
  flex-shrink: 0;
}

.editor-floating-comment-pill kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(234, 88, 12, 0.22);
  border: 1px solid rgba(251, 146, 60, 0.4);
  color: #fdba74;
}

.line-margin-tag[data-editor-locked="true"] {
  cursor: pointer;
}

.line-margin-tag[data-editor-locked="true"]:hover {
  color: #ea580c;
  border-color: rgba(234, 88, 12, 0.4);
  background: rgba(234, 88, 12, 0.08);
}

.line-comment-trigger.is-editor-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #ea580c;
  border: 1px solid rgba(234, 88, 12, 0.35);
  background: rgba(234, 88, 12, 0.07);
}

.script-line[data-focused="true"] .line-comment-trigger.is-editor-mode,
.script-line:hover .line-comment-trigger.is-editor-mode {
  opacity: 1;
  visibility: visible;
}

.line-comment-chip-quote {
  font-style: italic;
  color: #c2410c;
  font-weight: 600;
}

/* ==========================================================================
   Skeleton Loading States (Doherty Threshold compliance)
   ========================================================================== */

@keyframes skeletonShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-surface-2) 25%,
    var(--bg-surface-3) 50%,
    var(--bg-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm, 6px);
  pointer-events: none;
}

.skeleton-line {
  height: 14px;
  margin-bottom: 10px;
  width: 100%;
}
.skeleton-line:nth-child(odd) { width: 85%; }
.skeleton-line:last-child     { width: 60%; }

.skeleton-block {
  height: 80px;
  margin-bottom: 12px;
}

.skeleton-card {
  height: 120px;
  border-radius: var(--radius-md, 10px);
  margin-bottom: 16px;
}

/* Theme overrides for skeleton */
[data-theme="warm-paper"] .skeleton {
  background: linear-gradient(90deg, var(--bg-surface-1) 25%, var(--bg-surface-2) 50%, var(--bg-surface-1) 75%);
  background-size: 200% 100%;
}
[data-theme="noir"] .skeleton {
  background: linear-gradient(90deg, var(--bg-surface-1) 25%, var(--bg-surface-2) 50%, var(--bg-surface-1) 75%);
  background-size: 200% 100%;
}

/* ==========================================================================
   Phase 17.1: Tactile Typewritten Tooltip Engine
   Styled as embossed library index cards / vulcanite tags
   ========================================================================== */

.inkt-tooltip {
  position: fixed;
  z-index: 99999;
  max-width: 320px;
  padding: 7px 12px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0ms linear 120ms;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
  line-height: 1.35;
  white-space: normal;
  /* Default (clay-chrome) theme tokens */
  background: var(--bg-surface-3);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
}
.inkt-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0ms;
}
.inkt-tooltip.is-flipped {
  transform: translateY(-4px);
}
.inkt-tooltip.is-flipped.is-visible {
  transform: translateY(0);
}

.inkt-tooltip-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  flex: 1 1 auto;
}
.inkt-tooltip-shortcut {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono, 'SF Mono', 'Fira Code', 'Consolas', monospace);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: rgba(229, 120, 41, 0.13);
  border: 1px solid rgba(229, 120, 41, 0.3);
  color: var(--accent-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.inkt-tooltip-shortcut[hidden] { display: none; }

.inkt-tooltip-sub {
  display: block;
  width: 100%;
  font-size: 11px;
  font-style: italic;
  color: var(--text-secondary);
  margin-top: 1px;
}
.inkt-tooltip-sub[hidden] { display: none; }

/* ---------- Warm Paper theme ---------- */
[data-theme="warm-paper"] .inkt-tooltip {
  background: #fcf9f2;
  color: #2c2520;
  border-color: #ded6c5;
  box-shadow: 0 4px 14px rgba(60, 45, 30, 0.15), 0 1px 3px rgba(60, 45, 30, 0.08);
}
[data-theme="warm-paper"] .inkt-tooltip-shortcut {
  background: #ede4d3;
  border-color: #cfc2ab;
  color: #8c3b23;
}
[data-theme="warm-paper"] .inkt-tooltip-sub {
  color: #6e645a;
}

/* ---------- Noir theme ---------- */
[data-theme="noir"] .inkt-tooltip {
  background: #141414;
  color: #e0ded9;
  border-color: #333;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
[data-theme="noir"] .inkt-tooltip-shortcut {
  background: #222;
  border-color: #444;
  color: #e0ded9;
}
[data-theme="noir"] .inkt-tooltip-sub {
  color: #8a8882;
}

/* ==========================================================================
   Phase 17.2: Club Vademecum / Handbook Modal (? / F1)
   Vintage reading room pamphlet with bookmarks ribbon tabs
   ========================================================================== */

.handbook-modal-dialog {
  max-width: 780px;
  width: 95vw;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
}

.handbook-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border-medium, rgba(255,255,255,0.08));
  flex-shrink: 0;
}
.handbook-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.handbook-seal {
  font-size: 20px;
  opacity: 0.7;
}
.handbook-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.handbook-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.handbook-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Ribbon bookmark tabs (left nav) */
.handbook-nav {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0 12px 8px;
  overflow-y: auto;
  border-right: 1px solid var(--border-medium, rgba(255,255,255,0.08));
}
.handbook-nav-tab {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: 6px 0 0 6px;
  line-height: 1.35;
  transition: background 150ms, color 150ms;
}
.handbook-nav-tab:hover {
  background: var(--accent-soft, rgba(229,120,41,0.1));
  color: var(--text-primary);
}
.handbook-nav-tab[aria-selected="true"] {
  background: var(--accent-soft, rgba(229,120,41,0.14));
  color: var(--accent-primary);
  font-weight: 600;
  border-right: 2px solid var(--accent-primary);
}
.handbook-nav-icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.15;
  margin-top: 1px;
}
.handbook-nav-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.handbook-nav-numeral {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

/* Chapter content (right pane) */
.handbook-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 28px;
  min-height: 0;
}
.handbook-chapter {
  display: none;
  animation: handbookFadeIn 200ms ease-out;
}
.handbook-chapter.is-active {
  display: block;
}
@keyframes handbookFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.handbook-chapter h3 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.handbook-chapter h4 {
  font-size: 12.5px;
  font-weight: 700;
  margin: 16px 0 6px;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.handbook-chapter p,
.handbook-chapter li {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 8px;
}
.handbook-chapter ul {
  padding-left: 18px;
  margin: 0 0 10px;
}

/* Hotkey matrix table */
.handbook-hotkey-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 8px 0 16px;
}
.handbook-hotkey-table th {
  text-align: left;
  padding: 6px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-medium, rgba(255,255,255,0.1));
}
.handbook-hotkey-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
  color: var(--text-secondary);
}
.handbook-hotkey-table tr:hover td {
  background: var(--accent-soft, rgba(229,120,41,0.06));
}
.handbook-hotkey-table kbd {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono, 'Consolas', monospace);
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(229, 120, 41, 0.12);
  border: 1px solid rgba(229, 120, 41, 0.25);
  color: var(--accent-primary);
}

/* Context filter pills for hotkey chapter */
.handbook-context-filter {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.handbook-context-pill {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-medium, rgba(255,255,255,0.1));
  background: none;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.handbook-context-pill:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}
.handbook-context-pill[aria-pressed="true"] {
  background: var(--accent-soft, rgba(229,120,41,0.14));
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  font-weight: 600;
}

/* Responsive: stack tabs on narrow screens */
@media (max-width: 640px) {
  .handbook-body { flex-direction: column; }
  .handbook-nav {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border-medium, rgba(255,255,255,0.08));
    padding: 6px 8px;
    gap: 4px;
  }
  .handbook-nav-tab {
    border-radius: 6px;
    white-space: nowrap;
    padding: 6px 10px;
  }
  .handbook-nav-tab[aria-selected="true"] {
    border-right: none;
    border-bottom: 2px solid var(--accent-primary);
  }
  .handbook-nav-numeral { display: none; }
}

/* ==========================================================================
   Phase 17.3: «Шёпот Библиотекаря» — Diegetic Empty State Marginalia
   Faded pencil notes from the Club Librarian on blank pages
   ========================================================================== */

.librarian-whisper {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 560px;
  margin: 28px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 32px 44px;
  gap: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-surface-1) 70%, transparent);
  animation: whisperFadeIn 350ms ease-out;
}
@keyframes whisperFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.librarian-whisper-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--accent-secondary);
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 28%, transparent);
  margin-bottom: 4px;
}
.librarian-whisper-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  max-width: 460px;
  line-height: 1.45;
}
.librarian-whisper-hint {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 430px;
  line-height: 1.55;
}
.librarian-whisper-hint code,
.librarian-whisper-hint kbd {
  font-family: var(--font-mono, 'Consolas', monospace);
  font-size: var(--text-xs, 11px);
  font-style: normal;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--accent-soft);
  border: 1px solid rgba(229, 120, 41, 0.2);
  color: var(--accent-primary);
}

.librarian-whisper-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.librarian-whisper-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px dashed var(--text-muted);
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--text-xs, 12px);
  font-style: italic;
  cursor: pointer;
  transition: border-color 150ms, color 150ms, background 150ms;
}
.librarian-whisper-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--accent-soft);
  border-style: solid;
}
.librarian-whisper-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  flex-shrink: 0;
}

/* Warm Paper overrides */
[data-theme="warm-paper"] .librarian-whisper-title { color: var(--text-muted); }
[data-theme="warm-paper"] .librarian-whisper-hint { color: var(--text-muted); }
[data-theme="warm-paper"] .librarian-whisper-btn {
  border-color: var(--border-strong);
  color: var(--text-muted);
}
[data-theme="warm-paper"] .librarian-whisper-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--accent-soft);
}

/* Noir overrides */
[data-theme="noir"] .librarian-whisper-title { color: var(--text-muted); }
[data-theme="noir"] .librarian-whisper-hint { color: var(--text-muted); }
[data-theme="noir"] .librarian-whisper-btn {
  border-color: var(--border-strong);
  color: var(--text-muted);
}
[data-theme="noir"] .librarian-whisper-btn:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: rgba(255,255,255,0.04);
}

/* ==========================================================================
   Phase 17.4: Contextual Modifiers Bar in Status Footer
   ========================================================================== */

.ctx-modifiers-bar {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: opacity 120ms ease-out;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
.ctx-mod-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  line-height: 1.15;
}
.ctx-mod-chip kbd {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-mono, 'Consolas', monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  background: var(--accent-soft);
  border: 1px solid rgba(229, 120, 41, 0.22);
  color: var(--accent-primary);
}
.ctx-mod-label {
  color: var(--text-muted);
  font-size: var(--text-xs, 10px);
}
.ctx-mod-dot {
  color: var(--text-muted);
  opacity: 0.4;
  font-size: var(--text-xs, 10px);
  margin: 0 1px;
}

/* Warm Paper */
[data-theme="warm-paper"] .ctx-mod-chip kbd {
  background: var(--bg-surface-2);
  border-color: var(--border-strong);
  color: var(--accent-primary);
}
[data-theme="warm-paper"] .ctx-mod-label,
[data-theme="warm-paper"] .ctx-mod-dot { color: var(--text-muted); }

/* Noir */
[data-theme="noir"] .ctx-mod-chip kbd {
  background: var(--bg-surface-2);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
[data-theme="noir"] .ctx-mod-label,
[data-theme="noir"] .ctx-mod-dot { color: var(--text-muted); }

/* Hide on very narrow screens */
@media (max-width: 680px) {
  .ctx-modifiers-bar { display: none; }
}

/* ==========================================================================
   Phase 17.5: Command Palette — «Библиотечный Конкорданс» (Ctrl+K)
   ========================================================================== */

.cmd-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(20vh, 140px);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  animation: cmdPaletteFadeIn 100ms ease-out;
}
.cmd-palette-overlay[hidden] { display: none; }
@keyframes cmdPaletteFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cmd-palette-dialog {
  width: 560px;
  max-width: 94vw;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-medium, rgba(255,255,255,0.1));
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.25);
  animation: cmdPaletteSlideIn 150ms ease-out;
}
@keyframes cmdPaletteSlideIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Search bar */
.cmd-palette-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-medium, rgba(255,255,255,0.08));
}
.cmd-palette-search-icon {
  flex-shrink: 0;
  stroke: var(--text-muted);
}
.cmd-palette-input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: var(--text-md, 15px);
  font-family: var(--font-ui, system-ui, sans-serif);
  color: var(--text-primary);
  caret-color: var(--accent-primary);
}
.cmd-palette-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}
.cmd-palette-esc-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono, 'Consolas', monospace);
  font-size: var(--text-xs, 10px);
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  background: var(--bg-surface-3);
}

/* Results list */
.cmd-palette-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  min-height: 0;
}
.cmd-palette-cat {
  padding: 8px 16px 4px;
  font-size: var(--text-xs, 10px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cmd-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 80ms;
  border-radius: 0;
}
.cmd-palette-item:hover,
.cmd-palette-item.is-selected {
  background: var(--accent-soft, rgba(229,120,41,0.1));
}
.cmd-palette-item.is-selected {
  background: var(--accent-soft, rgba(229,120,41,0.16));
}
.cmd-palette-item-icon {
  flex-shrink: 0;
  font-size: var(--text-md, 15px);
  width: 22px;
  text-align: center;
  filter: grayscale(0.3);
}
.cmd-palette-item-label {
  flex: 1;
  font-size: var(--text-sm, 13px);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-palette-key {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono, 'Consolas', monospace);
  font-size: var(--text-xs, 10px);
  font-weight: 600;
  background: var(--accent-soft);
  border: 1px solid rgba(229, 120, 41, 0.22);
  color: var(--accent-primary);
}
.cmd-palette-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: var(--text-sm, 13px);
  font-style: italic;
  color: var(--text-muted);
}

/* Footer hint bar */
.cmd-palette-footer {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  font-size: var(--text-xs, 10px);
  color: var(--text-muted);
}
.cmd-palette-footer kbd {
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-mono, 'Consolas', monospace);
  font-size: 9.5px;
  font-weight: 600;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  color: var(--text-secondary);
}

/* ---------- Warm Paper theme ---------- */
[data-theme="warm-paper"] .cmd-palette-overlay {
  background: rgba(60, 45, 30, 0.35);
}
[data-theme="warm-paper"] .cmd-palette-dialog {
  background: var(--bg-paper);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-pop);
}
[data-theme="warm-paper"] .cmd-palette-input { color: var(--text-primary); }
[data-theme="warm-paper"] .cmd-palette-item-label { color: var(--text-primary); }
[data-theme="warm-paper"] .cmd-palette-item:hover,
[data-theme="warm-paper"] .cmd-palette-item.is-selected {
  background: var(--accent-soft);
}
[data-theme="warm-paper"] .cmd-palette-key {
  background: var(--bg-surface-2);
  border-color: var(--border-strong);
  color: var(--accent-primary);
}

/* ---------- Noir theme ---------- */
[data-theme="noir"] .cmd-palette-overlay {
  background: rgba(0, 0, 0, 0.6);
}
[data-theme="noir"] .cmd-palette-dialog {
  background: var(--bg-surface-1);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-pop);
}
[data-theme="noir"] .cmd-palette-input { color: var(--text-primary); }
[data-theme="noir"] .cmd-palette-item-label { color: var(--text-primary); }
[data-theme="noir"] .cmd-palette-item:hover,
[data-theme="noir"] .cmd-palette-item.is-selected {
  background: rgba(255,255,255,0.06);
}
[data-theme="noir"] .cmd-palette-key {
  background: var(--bg-surface-2);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ==========================================================================
   KeepSimple #79: Inkwell Filled Pulse & Hover Media Guard (A-5)
   ========================================================================== */

@keyframes inkwellPulse {
  0%, 100% { color: inherit; transform: scale(1); }
  50% { color: var(--accent-primary); transform: scale(1.06); }
}

.inkwell-filled-pulse {
  animation: inkwellPulse 600ms ease-in-out 3;
}

@media (hover: hover) {
  .clean-card:hover,
  .project-card:hover,
  .format-card:hover {
    transform: translateY(-1px);
  }
}

/* ==========================================================================
   Layout & Content Width Utility Classes (Inline Style Reduction)
   ========================================================================== */

.layout-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  flex-wrap: wrap;
}

.layout-flex-start {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}

.content-narrow {
  max-width: min(880px, 72ch);
  margin: 0 auto;
}

.content-wide {
  max-width: 1060px;
  margin: 0 auto;
}

.u-mb-0  { margin-bottom: 0; }
.u-mb-6  { margin-bottom: 6px; }
.u-mb-8  { margin-bottom: 8px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mt-8  { margin-top: 8px; }
.u-w-full { width: 100%; }
.u-flex-gap-8 { display: flex; gap: var(--space-2, 8px); }
.u-flex-end-gap-8 { display: flex; justify-content: flex-end; gap: var(--space-2, 8px); }
.u-text-secondary { color: var(--text-secondary); }
.u-heading-md { font-size: var(--text-lg, 18px); font-weight: 700; margin-bottom: 6px; }
.u-label-caps { font-size: var(--text-xs, 11px); font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.u-kicker-caps { font-size: var(--text-xs, 11px); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 4px; }

/* ==========================================================================
   Phase 18: Club Automaton & Editorial Review Chamber
   ========================================================================== */

.editorial-reader-dialog {
  width: min(96vw, 1040px);
  max-width: 1040px;
  height: min(92vh, 900px);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--bg-surface-1, #1e1d1a);
  border: 1px solid var(--accent-primary, #d97706);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 24px rgba(217, 119, 6, 0.15);
  overflow: hidden;
}

.editorial-reader-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--bg-surface-elevated, #23221e);
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  gap: 16px;
  flex-shrink: 0;
}

.editorial-reader-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 36px 48px;
  scrollbar-width: thin;
  background: var(--bg-canvas, #151412);
}

.editorial-reader-content {
  max-width: 820px;
  margin: 0 auto;
  font-family: var(--font-body, Georgia, serif);
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-primary, #e6e2da);
}

.editorial-reader-content h1,
.editorial-reader-content h2,
.editorial-reader-content h3,
.editorial-reader-content h4 {
  font-family: var(--font-display, var(--font-ui, sans-serif));
  color: var(--text-primary, #fff);
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.3;
}

.editorial-reader-content h1 {
  font-size: 24px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  padding-bottom: 8px;
}

.editorial-reader-content h2 {
  font-size: 20px;
  color: var(--accent-primary, #d97706);
}

.editorial-reader-content h3 {
  font-size: 16.5px;
  font-weight: 700;
}

.editorial-reader-content blockquote {
  margin: 16px 0;
  padding: 12px 20px;
  border-left: 3px solid var(--accent-primary, #d97706);
  background: rgba(217, 119, 6, 0.06);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: var(--text-secondary, #b8b3a8);
}

.editorial-reader-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 13.5px;
}

.editorial-reader-content th,
.editorial-reader-content td {
  padding: 10px 14px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  text-align: left;
}

.editorial-reader-content th {
  background: var(--bg-surface-elevated, #23221e);
  color: var(--text-primary, #fff);
  font-weight: 700;
}

.editorial-review-card {
  padding: 18px 20px;
  background: var(--bg-surface-1, #1e1d1a);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 8px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.editorial-review-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary, #d97706);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

@media print {
  body > *:not(#modalEditorialReviewReader) {
    display: none !important;
  }
  #modalEditorialReviewReader {
    display: block !important;
    position: static !important;
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
  }
  #modalEditorialReviewReader .editorial-reader-dialog {
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    background: #fff !important;
    color: #000 !important;
  }
  #modalEditorialReviewReader .editorial-reader-header {
    background: #fff !important;
    border-bottom: 2px solid #000 !important;
    padding: 10px 0 !important;
  }
  #modalEditorialReviewReader .editorial-reader-header button {
    display: none !important;
  }
  #modalEditorialReviewReader .editorial-reader-scroll {
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #modalEditorialReviewReader .editorial-reader-content {
    color: #000 !important;
  }
  #modalEditorialReviewReader .editorial-reader-content h1,
  #modalEditorialReviewReader .editorial-reader-content h2,
  #modalEditorialReviewReader .editorial-reader-content h3 {
    color: #000 !important;
  }
}




/* === DIOGENES CLUB 33-POINT AUDIT CONSOLIDATION === */

/* 1. Lobby Two-Column Layout (Create form on left, Manuscripts on right) */
.lobby-two-col-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.lobby-create-sidebar {
  position: sticky;
  top: 20px;
}
.lobby-create-sidebar .lobby-create-box {
  margin-bottom: 0;
}
.lobby-create-sidebar #lobbyFormatsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.lobby-create-sidebar .format-card {
  padding: 10px;
}
.lobby-create-sidebar .format-card-desc {
  font-size: 11px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lobby-create-sidebar .quick-create-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}
.lobby-create-sidebar .quick-create-bar input[type="text"],
.lobby-create-sidebar .quick-create-bar #newProjAuthorInput,
.lobby-create-sidebar .quick-create-bar #btnConfirmCreateProject {
  width: 100% !important;
  max-width: none !important;
  justify-content: center;
}
@media (max-width: 880px) {
  .lobby-two-col-layout {
    grid-template-columns: 1fr;
  }
  .lobby-create-sidebar {
    position: static;
  }
}

/* 2. Standard UI Buttons in Lobby Workspace Tabs */
#lobbyWorkspaceTabs.lobby-workspace-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-left: auto;
}
#lobbyWorkspaceTabs.lobby-workspace-tabs .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
#lobbyWorkspaceTabs.lobby-workspace-tabs .btn.is-active,
#lobbyWorkspaceTabs.lobby-workspace-tabs .btn[aria-selected="true"] {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border-color: var(--accent-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}

/* 3. Hide floating context modifiers bar */
.ctx-modifiers-bar,
#ctxModifiersBar {
  display: none !important;
}

/* 5. Club Handbook Navigation Single-Line Alignment */
#modalClubHandbook .handbook-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 11. Subtle '+ Scene' button in Chapter Outline */
#outlineTree .outline-add-row {
  padding: 4px 8px 6px;
}
#outlineTree #btnAddScene.outline-add-btn {
  width: 100%;
  height: 27px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px dashed var(--border-subtle);
  border-radius: 6px;
  justify-content: center;
  opacity: 0.82;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#outlineTree #btnAddScene.outline-add-btn:hover {
  opacity: 1;
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-surface-2);
}

/* 12. Single-line Top Margin on Manuscript Sheet */
#sheetPageHeaderEmboss {
  display: none !important;
}
.starc-page-top-margin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 13. Compact Format Ribbon Icon Buttons */
#btnToggleTypewriterScroll.btn-icon-only,
#btnCycleFocusMode.btn-icon-only {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 16, 17, 18, 19. Corkboard Toolbar, Pins Removal & Card Smoothness */
.index-card-pin {
  display: none !important;
}
.corkboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
}
.corkboard-card {
  will-change: transform;
}

/* 23. Support Club Modal Compact No-Scroll Layout */
#modalSupportClub .modal-dialog,
#modalSupportClub .modal-support-club-dialog {
  max-width: 820px !important;
  width: 94vw !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 16px 22px !important;
}
#modalSupportClub .patronage-tier-card {
  padding: 8px 10px;
}

/* 27. Acoustic Mixer Square 22x22 SVG Preview Button */
.lofi-channel-preview-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  border: 1px solid var(--border-subtle) !important;
  background: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.lofi-channel-preview-btn:hover {
  color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  background: var(--bg-surface-1) !important;
}

/* 29 & 30. Ensure all modal-backdrop and modal-card dialogs open reliably */
.modal-backdrop:not([hidden]):not([data-open="false"]):not([aria-hidden="true"]) {
  display: flex;
}
.modal-card {
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg, 12px);
  padding: 20px 24px;
  color: var(--text-primary);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

/* 32. Patron Residents Table Full Height & Clean Actions */
#patronSectionMembers .patron-table-wrap {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: auto;
}
/* replaced by section 34 compact patron table rules */


/* Global .btn-icon & .inkt-tooltip consistency (no white native buttonface or white OS tooltip) */
button.btn-icon,
.btn-icon,
#btnCloseHandbook {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
button.btn-icon:hover,
.btn-icon:hover,
#btnCloseHandbook:hover {
  color: var(--text-primary) !important;
  background: var(--bg-surface-2) !important;
}
.inkt-tooltip,
[data-theme="warm-paper"] .inkt-tooltip,
[data-theme="noir"] .inkt-tooltip {
  background: #1b1815 !important;
  color: #f0eadc !important;
  border: 1px solid rgba(200, 164, 92, 0.38) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="warm-paper"] .inkt-tooltip-sub,
[data-theme="noir"] .inkt-tooltip-sub,
.inkt-tooltip-sub {
  color: #b8afa0 !important;
}
[data-theme="warm-paper"] .inkt-tooltip-shortcut,
[data-theme="noir"] .inkt-tooltip-shortcut,
.inkt-tooltip-shortcut {
  background: rgba(200, 164, 92, 0.15) !important;
  border-color: rgba(200, 164, 92, 0.4) !important;
  color: #e5ca85 !important;
}


/* === PALIMPSEST TOOLBAR & MARGINALIA MEDALLION REFINEMENTS (v159) === */
#palimpsestShelfNavControls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#palimpsestShelfNavControls .ui-dropdown-trigger,
.palimpsest-chapter-picker .ui-dropdown-trigger {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  border: 1px solid var(--border-subtle) !important;
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}
.shelf-pagination-group {
  display: inline-flex !important;
  align-items: center;
  gap: 0 !important;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  overflow: hidden;
  padding: 0 2px;
}
.shelf-pagination-group #btnShelfPrev,
.shelf-pagination-group #btnShelfNext {
  height: 26px !important;
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 999px !important;
  color: var(--text-secondary) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}
.shelf-pagination-group #btnShelfPrev:hover,
.shelf-pagination-group #btnShelfNext:hover {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}
.shelf-pagination-group .shelf-index-pill,
#shelfIndexIndicator.shelf-index-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--border-subtle) !important;
  border-right: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  white-space: nowrap;
  user-select: none;
}
.shelf-rack-filter-bar {
  display: inline-flex !important;
  align-items: center;
  gap: 6px !important;
}
.shelf-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle) !important;
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
  white-space: nowrap;
}
.shelf-filter-chip:hover {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
.shelf-filter-chip.active {
  border-color: var(--accent-primary) !important;
  color: var(--text-primary) !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-elevated)) !important;
  box-shadow: 0 0 0 1px var(--accent-primary) !important;
}
#btnShelfShowReceipt {
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border-subtle) !important;
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Crisp Heraldic Signet Medallion inside Marginalia Signature Block */
.palimpsest-wax-stamp {
  display: none !important;
}
.palimpsest-note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(92, 64, 51, 0.18);
}
.palimpsest-note-sig {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.palimpsest-note-sig-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.palimpsest-note-author-name {
  font-weight: 650;
  color: #2b2118;
  font-size: 12px;
}
.palimpsest-note-motto {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #786652;
  margin-top: 0;
}
.palimpsest-medallion-disc {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #241d15 0%, #14110c 100%);
  border: 1.5px solid rgba(212, 175, 95, 0.68);
  box-shadow: 0 2px 6px rgba(20, 17, 12, 0.25), inset 0 0 0 2px rgba(20, 17, 12, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #e5ca85;
  --heraldry-fill: #e5ca85;
  --heraldry-cut: #14110c;
}
.palimpsest-medallion-disc.is-shelf-disc {
  width: 38px;
  height: 38px;
  min-width: 38px;
}


/* === v160: UNIFORM 28PX SHELF CAPSULES & CLEAN BOOKPLATE COLOPHON === */
#palimpsestShelfNavControls .ui-dropdown-trigger,
.palimpsest-chapter-picker .ui-dropdown-trigger,
.shelf-pagination-group,
.shelf-filter-chip,
#btnShelfShowReceipt,
#btnSpreadShowMyReceipt {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  box-sizing: border-box !important;
}
#btnShelfShowReceipt,
#btnSpreadShowMyReceipt {
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border-subtle) !important;
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  gap: 5px !important;
  box-shadow: none !important;
}
#btnShelfShowReceipt:hover,
#btnSpreadShowMyReceipt:hover {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

.palimpsest-shelf-trust-seal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: 6px;
  background: rgba(245, 239, 226, 0.85);
  border: 1px solid #d5cab4;
  box-shadow: none;
}
.palimpsest-shelf-trust-seal .trust-seal-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.trust-colophon-emblem {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: rgba(92, 64, 51, 0.08);
  border: 1px solid rgba(92, 64, 51, 0.24);
  color: #5c4033;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.palimpsest-medallion-disc.is-shelf-disc {
  width: 44px;
  height: 44px;
  min-width: 44px;
}
.trust-colophon-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.trust-colophon-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #241c15;
  line-height: 1.3;
}
.trust-colophon-author {
  font-weight: 700;
  color: #1a130d;
}
.trust-colophon-motto {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #785a28;
  font-weight: 600;
}
.trust-colophon-mine {
  font-size: 11px;
  font-weight: 600;
  color: #785a28;
}
.trust-colophon-sep {
  color: #9c8f7a;
}
.trust-colophon-row2 {
  font-size: 11.5px;
  color: #6b5e4c;
  line-height: 1.35;
}
.trust-seal-right {
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .deposit-security-card,
  .deposit-fields-grid,
  .deposit-options-preview-grid {
    grid-template-columns: 1fr !important;
  }
}


/* === v161: STRICT SIDE-BY-SIDE ALIGNMENT FOR DEPOSIT MODAL FIELDS === */
#modalDepositShelf .deposit-shelf-modal-dialog {
  max-width: 840px !important;
  width: 94vw !important;
}
#modalDepositShelf .deposit-fields-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}
#modalDepositShelf .deposit-fields-grid > .field-group {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  min-width: 0 !important;
}
#modalDepositShelf .deposit-fields-grid > .field-group > label {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-height: 20px !important;
  margin-bottom: 6px !important;
  white-space: nowrap !important;
}
#modalDepositShelf #depositSceneCustomTitleInput,
#modalDepositShelf #depositSceneLegalNameInput {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* === v162: GUARANTEE RE-OPENING MODALS AFTER CANCEL === */
.modal-backdrop[data-open="true"],
.modal-overlay[data-open="true"] {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.modal-backdrop[data-open="false"],
.modal-overlay[data-open="false"] {
  display: none !important;
  pointer-events: none !important;
}

/* === v167: ICON-ONLY CARRIAGE & FOCUS BUTTONS IN MANUSCRIPT FOOTER === */
#btnToggleTypewriterScroll,
#btnCycleFocusMode {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#btnToggleTypewriterScroll > span,
#btnCycleFocusMode > span {
  display: none !important;
}
#btnToggleTypewriterScroll[aria-pressed="true"],
#btnCycleFocusMode[aria-pressed="true"] {
  color: var(--accent-primary) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent) !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
}


/* === v172: FIX SHELF FILTER CHIP CLIPPING, UNIFY SCENE HEADER BAR & FIX EDITOR COMMENT GUTTER PIN === */
.palimpsest-tab-panel {
  overflow: visible !important;
}
.palimpsest-folio-toolbar,
.palimpsest-shelf-toolbar,
#palimpsestShelfNavControls,
.shelf-rack-filter-bar {
  overflow: visible !important;
}
.palimpsest-folio-toolbar {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
.shelf-rack-filter-bar {
  padding: 2px 1px !important;
}
.shelf-filter-chip.active {
  border: 1.5px solid var(--accent-primary) !important;
  color: var(--text-primary) !important;
  background: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-elevated)) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Uniform 26px Capsule Controls inside .sheet-scene-header / .sheet-scene-controls */
.sheet-scene-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sheet-scene-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0;
}
.sheet-scene-controls .ui-dropdown[data-variant="mini"] .ui-dropdown-trigger,
.sheet-scene-controls #btnOpenOracleModal,
.sheet-scene-controls #btnOpenDepositShelfModal {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  gap: 5px !important;
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.sheet-scene-controls .ui-dropdown[data-variant="mini"] .ui-dropdown-trigger:hover,
.sheet-scene-controls .ui-dropdown[data-open="true"] .ui-dropdown-trigger,
.sheet-scene-controls #btnOpenOracleModal:hover,
.sheet-scene-controls #btnOpenDepositShelfModal:hover {
  border-color: var(--accent-primary) !important;
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-surface-2)) !important;
  color: var(--text-primary) !important;
}
.sheet-scene-controls #btnOpenOracleModal .ui-icon,
.sheet-scene-controls #btnOpenDepositShelfModal .ui-icon {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0;
}
.sheet-scene-controls #btnSaveScene,
.sheet-scene-controls #btnDeleteScene {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  width: 26px !important;
  min-width: 26px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.sheet-scene-controls #btnSaveScene:hover,
.sheet-scene-controls #btnDeleteScene:hover {
  border-color: var(--border-subtle) !important;
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}
.sheet-scene-controls #btnSaveScene .ui-icon,
.sheet-scene-controls #btnDeleteScene .ui-icon {
  width: 13px !important;
  height: 13px !important;
}

/* Fix Right Margin Gutter & Editor Comment Trigger so it NEVER overlaps paragraph text */
.line-right-gutter {
  position: absolute !important;
  left: calc(100% + 10px) !important;
  right: auto !important;
  top: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  z-index: 3;
  pointer-events: auto;
}
@media (max-width: 960px) {
  .line-right-gutter {
    left: calc(100% + 6px) !important;
    right: auto !important;
  }
}
.line-comment-trigger,
.line-comment-trigger.is-editor-mode {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.line-comment-trigger.is-editor-mode {
  color: #ea580c !important;
  border: 1px solid rgba(234, 88, 12, 0.35) !important;
  background: rgba(234, 88, 12, 0.08) !important;
}
.line-comment-trigger.is-editor-mode:hover {
  color: #fffaf0 !important;
  background: #ea580c !important;
  border-color: #ea580c !important;
}


/* === v175: DUAL-CONTOUR EDITORIAL SUMMARY COLOPHON & NAVIGATOR PILLS === */
#editorReadOnlyBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
#editorReadOnlyBanner[hidden] {
  display: none !important;
}
.editor-banner-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(234, 88, 12, 0.35);
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 140ms ease;
}
.editor-banner-jump-btn:hover {
  background: #ea580c;
  color: #fffaf0;
  border-color: #ea580c;
}

.sheet-editorial-colophon {
  margin-top: 32px;
  margin-bottom: 18px;
  border-radius: 8px;
  border: 1px solid rgba(200, 164, 92, 0.42);
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-surface));
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.sheet-editorial-colophon[hidden] {
  display: none !important;
}
.sheet-editorial-colophon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(200, 164, 92, 0.24);
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-surface));
  flex-wrap: wrap;
}
.sheet-editorial-colophon[data-collapsed="true"] .sheet-editorial-colophon-header {
  border-bottom: none;
}
.sheet-editorial-colophon[data-collapsed="true"] .sheet-editorial-colophon-body {
  display: none !important;
}
.sheet-editorial-colophon[data-collapsed="true"] .sheet-editorial-fold-btn svg {
  transform: rotate(-90deg);
}
.sheet-editorial-colophon-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sheet-editorial-colophon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-primary);
}
.sheet-editorial-scope-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}
.sheet-editorial-scope-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms ease;
}
.sheet-editorial-scope-tab:hover {
  color: var(--text-primary);
}
.sheet-editorial-scope-tab.is-active {
  background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-surface-2));
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--accent-primary);
}
.sheet-editorial-scope-tab .scope-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ea580c;
  display: inline-block;
}
.sheet-editorial-Scope-tab .scope-dot[hidden] {
  display: none !important;
}
.sheet-editorial-fold-btn {
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border-radius: 999px !important;
}
.sheet-editorial-colophon-body {
  padding: 12px 14px;
}
.sheet-editorial-textarea {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.55;
  resize: vertical;
  min-height: 76px;
}
.sheet-editorial-colophon-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.sheet-editorial-hint {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-muted);
}
.sheet-editorial-read-text {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.book-note-type-pill.type-summary {
  background: rgba(200, 164, 92, 0.16);
  color: var(--accent-primary);
  border: 1px solid rgba(200, 164, 92, 0.4);
}
.outline-badge-chip.chip-summary {
  background: rgba(200, 164, 92, 0.18);
  color: var(--accent-primary);
  border: 1px solid rgba(200, 164, 92, 0.4);
}


/* === v176: GLOBAL BUTTON & TOOLBAR UNIFICATION (COMPACT HEIGHTS, SMOOTH 7PX CORNERS, LOBBY-STYLE HOVER/ACTIVE) === */

/* 1. Global Desktop Button Proportions (Eliminate 44px mobile touch-target bloat & sharp 3px corners) */
.btn {
  min-height: 32px;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.2;
}

.btn-sm {
  min-height: 28px !important;
  height: 28px;
  padding: 0 10px;
  border-radius: 7px !important;
  font-size: 11.5px;
  line-height: 1;
}

.btn-xs {
  min-height: 24px !important;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px !important;
  font-size: 11px;
  line-height: 1;
}

.btn-icon-only,
button.btn-icon,
.btn-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2. Top Bar (.top-bar) & Format Ribbon (.format-ribbon) Compact Height & Unified Button Styling */
.top-bar {
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
}

.format-ribbon {
  min-height: 36px;
  padding: 4px 12px;
  gap: 6px;
}

.outline-header {
  min-height: 36px;
  padding: 4px 12px;
}

/* Make .btn-lobby-switch (Lobby Switch) and all .top-bar / .format-ribbon buttons share identical 28px geometry & smooth 7px corners */
.btn-lobby-switch,
.top-bar-right .btn:not(.topbar-heraldry-badge),
.format-ribbon .btn {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px;
  border-radius: 7px !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  box-shadow: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

/* Ghost buttons inside bars stay quiet at rest, but highlight like #btnOpenLobby on hover/active */
.top-bar-right .btn.btn-ghost:not(.topbar-heraldry-badge),
.format-ribbon .btn.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

/* Icon-only buttons in .top-bar-right and .format-ribbon keep square 28x28 padding: 0 */
.top-bar-right .btn.btn-icon-only:not(.topbar-heraldry-badge),
.format-ribbon .btn.btn-icon-only {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
}

/* Unified Hover & Active state across Top Bar and Format Ribbon (by analogy with #btnOpenLobby) */
.btn-lobby-switch:hover,
.btn-lobby-switch:active,
.btn-lobby-switch[aria-expanded="true"],
.top-bar-right .btn:not(.topbar-heraldry-badge):hover,
.top-bar-right .btn:not(.topbar-heraldry-badge):active,
.top-bar-right .btn:not(.topbar-heraldry-badge)[aria-pressed="true"],
.top-bar-right .btn:not(.topbar-heraldry-badge)[aria-expanded="true"],
.top-bar-right .btn:not(.topbar-heraldry-badge).is-active,
.format-ribbon .btn:hover,
.format-ribbon .btn:active,
.format-ribbon .btn[aria-pressed="true"],
.format-ribbon .btn[aria-expanded="true"],
.format-ribbon .btn.is-active,
.format-ribbon .btn[data-active="true"] {
  border-color: var(--accent-primary) !important;
  background: var(--accent-soft) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

/* Preserve gold tint on #btnOpenSupportModal.is-patron-gold while respecting 28px / 7px */
#btnOpenSupportModal.is-patron-gold {
  border-color: color-mix(in srgb, #d4a038 55%, var(--border-subtle)) !important;
  background: color-mix(in srgb, #d4a038 14%, var(--bg-surface)) !important;
  color: #c8962e !important;
}
#btnOpenSupportModal.is-patron-gold:hover {
  border-color: #d4a038 !important;
  background: color-mix(in srgb, #d4a038 24%, var(--bg-surface)) !important;
}

/* Center Mode Tabs (.mode-tabs / .mode-tab) aligned to 28px bar height */
.mode-tabs {
  padding: 2px;
  border-radius: 8px;
}
.mode-tab {
  height: 26px;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 6px !important;
  font-size: 12px;
}

/* Format Ribbon Block-Type Pills (.format-btn) aligned to 26px / 7px corners */
.format-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 11.5px;
  border: 1px solid transparent;
}
.format-btn:hover {
  border-color: var(--border-subtle);
  background: var(--bg-surface-2);
  color: var(--text-primary);
}
.format-btn[data-active="true"] {
  border-color: var(--accent-primary);
  background: var(--accent-soft);
  color: var(--accent-primary);
}

/* Outline Header #btnNewScene & Corkboard Toolbar Buttons */
#btnNewScene {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

/* Keep Heraldic Topbar Signet Badge Frameless & Compact within 44px Topbar */
.topbar-heraldry-badge {
  height: 36px !important;
  min-height: 36px !important;
  min-width: 36px !important;
  padding: 0 2px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar-signet-medallion,
.topbar-heraldry-crest-icon {
  width: 36px;
  height: 36px;
}

/* Additional button height & corner radius normalization across Palimpsest, Corkboard, Selection Toolbar & Paragraph Menu */
.palimpsest-submit-btn {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: 7px !important;
}

.selection-toolbar .style-icon-btn,
.paragraph-menu .style-icon-btn {
  min-width: 30px !important;
  min-height: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
}

.matrix-track-delete-btn,
.matrix-beat-open-btn,
.matrix-beat-remove-btn,
.index-card-connect-btn,
.line-note-delete-btn,
.book-note-del-btn,
.palimpsest-eraser-btn,
.canvas-node-icon-btn,
.canvas-floating-btn {
  border-radius: 6px !important;
}


/* === v177: WIDEN CONCEPT PASSPORT CARD SO ALL 4 HEADER ACTION BUTTONS FIT IN ONE ROW === */
#stageConcept .clean-page-wrap {
  max-width: 1040px !important;
  width: 100% !important;
}

#stageConcept .clean-card > div:first-child .layout-flex-start {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

@media (max-width: 820px) {
  #stageConcept .clean-card > div:first-child .layout-flex-start {
    flex-wrap: wrap;
  }
}


/* === v178: HIDE .sheet-scene-controls IN EDITOR / COMMENTER MODE === */
body[data-editor-mode="true"] .sheet-scene-controls,
#paperSheet[data-editor-role="editor_commenter"] .sheet-scene-controls,
.sheet-scene-controls[hidden] {
  display: none !important;
}


/* === v184: REDESIGN CORKBOARD LINK DIALOG TO MATCH CANONICAL MODAL UI === */
.u-mb-10 { margin-bottom: 10px; }
.u-mb-14 { margin-bottom: 14px; }

.corkboard-link-dialog {
  background: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 20px 22px !important;
  width: 92% !important;
  max-width: 480px !important;
  box-shadow: var(--paper-shadow) !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.corkboard-link-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.corkboard-link-dialog-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.corkboard-link-dialog-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0 !important;
}

.corkboard-link-dialog .field-group {
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.corkboard-link-dialog .field-label {
  margin-bottom: 0 !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.corkboard-link-dialog .ui-dropdown[data-variant="field"] .ui-dropdown-trigger,
.corkboard-link-dialog .field-input {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  font-size: 12.5px !important;
  box-sizing: border-box !important;
}

.corkboard-link-dialog .ui-dropdown[data-variant="field"] .ui-dropdown-trigger:hover,
.corkboard-link-dialog .ui-dropdown[data-open="true"] .ui-dropdown-trigger,
.corkboard-link-dialog .field-input:focus {
  border-color: var(--accent-primary) !important;
  background: var(--bg-surface-3) !important;
  outline: none !important;
}

.corkboard-link-dialog .corkboard-rel-chips {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
}

.corkboard-link-dialog .corkboard-rel-chip {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}

.corkboard-link-dialog .corkboard-rel-chip:hover,
.corkboard-link-dialog .corkboard-rel-chip.btn-primary {
  border-color: var(--accent-primary) !important;
  background: var(--accent-soft) !important;
  color: var(--accent-primary) !important;
}

.corkboard-link-dialog-actions {
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 2px;
}

/* Matrix custom plotline inline rename & cell assign clarity (?v=186) */
.matrix-track-title[data-matrix-rename-plotline] {
  cursor: text;
  border-radius: 5px;
  padding: 2px 6px;
  margin-left: -6px;
  border: 1px solid transparent;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.matrix-track-title[data-matrix-rename-plotline]:hover {
  background: var(--bg-surface-2);
  border-color: var(--border-subtle);
}

.matrix-track-title[data-matrix-rename-plotline]:focus {
  outline: none;
  background: var(--bg-surface-2);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(139, 61, 43, 0.14));
}

.matrix-assign-btn {
  border: 1px dashed rgba(139, 61, 43, 0.36) !important;
  color: var(--text-secondary) !important;
  opacity: 0.72;
}

.matrix-assign-btn:hover {
  opacity: 1;
  border-style: solid !important;
  border-color: var(--accent-primary) !important;
  background: var(--accent-soft, rgba(139, 61, 43, 0.12)) !important;
  color: var(--accent-primary) !important;
}

/* Enhanced interactive Group / Branch Frame (?v=193) */
.canvas-group-frame {
  cursor: grab;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.canvas-group-frame:active,
.canvas-group-frame.is-dragging {
  cursor: grabbing;
}

.canvas-group-frame.is-selected {
  border-style: solid;
  box-shadow: 0 0 0 2px var(--group-accent, var(--accent-primary)), 0 10px 28px rgba(28, 20, 12, 0.12);
}

.canvas-group-header {
  padding: 7px 10px 7px 14px;
  background: rgba(0, 0, 0, 0.05);
  user-select: none;
}

.canvas-group-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.canvas-group-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid rgba(120, 95, 70, 0.28);
  background: var(--bg-surface-1);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.canvas-group-action-btn:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border-color: var(--group-accent, var(--accent-primary));
}

.canvas-group-action-btn.is-danger:hover {
  background: rgba(211, 47, 47, 0.12);
  color: #d32f2f;
  border-color: rgba(211, 47, 47, 0.45);
}

.canvas-group-body-hint {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

.canvas-group-frame .canvas-node-resizer {
  width: 16px;
  height: 16px;
  opacity: 0.55;
}

/* 31. Strip spin arrows from .no-spin-input & style Paired 8-Reward Heraldry + Disabled Patron Button */
.no-spin-input,
input[type="number"].no-spin-input,
#patronPledgeAmountInput {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
.no-spin-input::-webkit-outer-spin-button,
.no-spin-input::-webkit-inner-spin-button,
input[type="number"].no-spin-input::-webkit-outer-spin-button,
input[type="number"].no-spin-input::-webkit-inner-spin-button,
#patronPledgeAmountInput::-webkit-outer-spin-button,
#patronPledgeAmountInput::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  margin: 0 !important;
}

.patronage-tier-crest-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.patronage-tier-crest-icon.is-craft-seal {
  width: 35px;
  height: 35px;
  opacity: 0.92;
}

.patronage-tier-crest-icon.is-craft-seal svg {
  width: 35px;
  height: 35px;
}

.patronage-tier-crest-icon.is-order-crest {
  width: 40px;
  height: 40px;
}

.patronage-tier-crest-icon.is-order-crest svg {
  width: 40px;
  height: 40px;
}

#btnConfirmSupportDone:disabled,
#btnConfirmSupportDone[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(0.25);
}

/* === SETTINGS RAIL FOOTER, STORAGE MODE SWITCHER & LEGAL CHARTER MODAL (v193) === */
html[data-locale="en"] #settingsLanguageRow {
  display: none !important;
}

.settings-heading-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.settings-heading-actions .btn {
  height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.fellow-header-actions-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex-shrink: 0;
}

.fellow-header-actions-row .btn {
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.settings-nav-rail-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-rail-save-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
}

.settings-rail-danger-zone {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(184, 74, 57, 0.25);
}

.settings-rail-delete-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 7px 8px;
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
  color: var(--semantic-error, #b84a39) !important;
  border-color: rgba(184, 74, 57, 0.32) !important;
  background: rgba(184, 74, 57, 0.05) !important;
}

.settings-rail-delete-btn:hover {
  background: rgba(184, 74, 57, 0.14) !important;
  border-color: rgba(184, 74, 57, 0.55) !important;
}

/* Compact 2-Card Storage Mode Switcher & Tariffs */
.storage-sovereignty-box {
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 10px);
  background: var(--bg-surface-elevated, var(--bg-surface));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.storage-mode-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 760px) {
  .storage-mode-cards-grid {
    grid-template-columns: 1fr;
  }
}

.storage-mode-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.storage-mode-card.is-active {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 28%, transparent);
}

.storage-mode-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.storage-mode-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.storage-mode-price-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.storage-mode-price-pill.is-accent {
  color: var(--accent-primary);
  border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.storage-mode-card-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
}

.storage-mode-action-btn {
  width: 100%;
  justify-content: center;
  margin-top: 2px;
}

.storage-tariffs-checkout-panel {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--accent-primary) 38%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 4%, var(--bg-surface));
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.storage-tariffs-checkout-panel.is-highlighted {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

.storage-tariffs-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.storage-tariffs-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.storage-tariffs-sub {
  font-size: 11px;
  color: var(--accent-primary);
  margin-top: 2px;
}

.storage-tariff-plans-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 680px) {
  .storage-tariff-plans-row {
    grid-template-columns: 1fr;
  }
}

.storage-tariff-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.storage-tariff-option:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 50%, var(--border-subtle));
}

.storage-tariff-option.is-selected {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-surface));
}

.storage-tariff-option-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.storage-tariff-option-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-primary);
}

.storage-tariff-option-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

.storage-inline-checkout-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.storage-inline-methods {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.storage-inline-methods-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 2px;
}

.storage-compact-folder-form {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.storage-compact-folder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.storage-compact-folder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.storage-compact-folder-row .field-input {
  flex: 1;
  min-width: 180px;
  height: 32px;
}

/* Modal Header & Legal Charter Document Viewer Fixes */
.modal-card .modal-header,
.modal-dialog .modal-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-card .modal-header .btn-icon,
.modal-dialog .modal-header .btn-icon {
  flex-shrink: 0;
  margin-left: auto;
}

.legal-doc-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.legal-doc-scroll-body {
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 6px;
}

.legal-doc-article h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 12px 0 4px;
}

.legal-doc-article h4:first-child {
  margin-top: 0;
}

.legal-doc-article p {
  font-size: 12.5px;
  line-height: 1.58;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

.legal-doc-article ul {
  margin: 4px 0 10px 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.52;
  color: var(--text-secondary);
}



/* Section 5: Club Charter, Palimpsest Manager & Dual Moderation Subcards */
.patron-charter-subcard {
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-surface) 75%, var(--bg-primary) 25%);
  margin-bottom: 12px;
}

.patron-charter-bar {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

@media (max-width: 900px) {
  .patron-charter-bar {
    grid-template-columns: 1fr;
  }
}

.patron-charter-banner-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.patron-charter-banner-row .field-input {
  flex: 1 1 auto;
}

.patron-subcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.patron-subcard-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

.patron-palimpsest-chapters-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.patron-palimpsest-ch-pill.is-active {
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-surface)) !important;
}

.patron-palimpsest-meta-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.1fr 90px 1.4fr;
  gap: 10px;
  margin-bottom: 10px;
}

@media (max-width: 1024px) {
  .patron-palimpsest-meta-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.patron-moderation-dual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

@media (max-width: 1024px) {
  .patron-moderation-dual-grid {
    grid-template-columns: 1fr;
  }
}

.patron-moderation-dual-grid .patron-charter-subcard {
  margin-bottom: 0;
}

.patron-shelf-moderation-list {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ==========================================================================
   35. CORKBOARD & NARRATIVE CANVAS GPU & SEMANTIC ZOOM (LOD) OPTIMIZATIONS
   ========================================================================== */
.index-card,
.canvas-node-card {
  contain: layout style;
}

.corkboard-wrap[data-lod="compact"] .index-card-tags,
.corkboard-wrap[data-lod="compact"] .index-card-footer,
.corkboard-wrap[data-lod="compact"] .canvas-node-footer-bar {
  display: none !important;
}

.corkboard-wrap[data-lod="macro"] .index-card-synopsis,
.corkboard-wrap[data-lod="macro"] .index-card-tags,
.corkboard-wrap[data-lod="macro"] .index-card-footer,
.corkboard-wrap[data-lod="macro"] .index-card-slug,
.corkboard-wrap[data-lod="macro"] .canvas-node-body,
.corkboard-wrap[data-lod="macro"] .canvas-node-footer-bar {
  display: none !important;
}


/* ==========================================================================
   36. DIOGENES CLUB & STUDIO REFINEMENTS (v196)
   - Fixed-width Story Matrix track column (.matrix-track-cell) across zoom levels
   - Airy Patron Admin table rows & standalone full-width Moderation blocks
   - Compact 2x2 Cloud Depository Charter modal with zero vertical scroll
   - Multi-line safe buttons for Storage cards & Account Deletion
   - Settings Left Rail Language Switcher
   ========================================================================== */

/* 1. Story Matrix: lock left track header column width so zoom only scales beat cards */
.corkboard-matrix-table {
  width: max-content !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

.corkboard-matrix-corner,
.matrix-track-cell {
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  box-sizing: border-box !important;
}

.matrix-col-header,
.matrix-cell {
  width: calc(var(--card-min-w, 220px) * 0.95) !important;
  min-width: calc(var(--card-min-w, 220px) * 0.95) !important;
  max-width: calc(var(--card-max-w, 260px) * 0.95) !important;
  box-sizing: border-box !important;
}

/* 2. Settings Left Rail Language Switcher & Multi-line Safe Delete Button */
.settings-rail-language-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-rail-lang-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

.settings-rail-language-box .ui-dropdown,
.settings-rail-language-box .ui-dropdown-trigger {
  width: 100% !important;
  max-width: 100% !important;
}

.settings-rail-delete-btn,
#btnDeleteClubAccount {
  height: auto !important;
  min-height: 36px !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  padding: 8px 10px !important;
  text-align: center !important;
  justify-content: center !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* 3. Storage Mode Action Buttons: prevent text overflow in RU & EN */
.storage-mode-action-btn,
#btnStorageModeZeroCloud,
#btnStorageModeCloudVault {
  height: auto !important;
  min-height: 36px !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  padding: 8px 12px !important;
  text-align: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 4. Cloud Depository Charter Modal (#modalCloudVaultConsent): zero vertical scroll & 2x2 grid */
#modalCloudVaultConsent .cloud-vault-consent-card {
  max-width: 780px !important;
  width: min(780px, 94vw) !important;
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
  padding: 18px 22px !important;
}

.charter-covenants-title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

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

@media (max-width: 680px) {
  .charter-covenants-grid {
    grid-template-columns: 1fr;
  }
}

.charter-covenant-item {
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-surface-2);
  font-size: 11.5px;
  line-height: 1.38;
  color: var(--text-secondary);
}

.charter-covenant-item strong {
  color: var(--text-primary);
}

#modalCloudVaultConsent .cloud-vault-consent-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

#modalCloudVaultConsent .cloud-vault-consent-footer .btn {
  flex: 1 1 0 !important;
  justify-content: center !important;
  text-align: center !important;
  height: auto !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  white-space: nowrap !important;
}

/* Separate Incognito Shelf Moderation and Palimpsest Marginalia Moderation into 2 full-width blocks */
.patron-moderation-dual-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

/* ==========================================================================
   37. PATRON ADMIN CONSOLE — UNIFIED DIRECTORY & SLIDE-OVER INVESTITURE DRAWER
   100% Semantic CSS Tokens · Zero Hardcoded Dark Blots · Warm-Paper & Noir Parity
   ========================================================================== */

#stagePatronAdmin {
  padding: 28px 32px 72px;
}

@media (max-width: 768px) {
  #stagePatronAdmin {
    padding: 18px 16px 56px;
  }
}

.patron-admin-shell {
  max-width: 1360px;
  margin: 0 auto;
}

.patron-heading-badge {
  margin-bottom: 6px;
  display: inline-flex;
}

.patron-workspace-grid {
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 24px;
}

#stagePatronAdmin[data-patron-focus="members"] .patron-admin-shell {
  max-width: 1440px;
}

#stagePatronAdmin[data-patron-focus="members"] .patron-workspace-grid {
  grid-template-columns: minmax(0, 1fr);
}

#stagePatronAdmin[data-patron-focus="members"] .patron-nav-rail {
  display: none;
}

#stagePatronAdmin[data-patron-focus="members"] .patron-members-table-wrap {
  max-height: none;
}

@media (max-width: 1024px) {
  .patron-workspace-grid {
    grid-template-columns: 1fr;
  }
  .patron-nav-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .patron-nav-rail .settings-nav-item {
    width: auto;
    flex: 1 1 auto;
  }
}

/* Section 2 Header & Collapsible VP Methodology Sheet */
.patron-members-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.patron-members-heading-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.patron-members-heading-actions .btn.is-active {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-surface));
}

.patron-methodology-sheet {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-canvas) 65%, var(--bg-surface));
}

.patron-methodology-sheet[hidden] {
  display: none !important;
}

.patron-methodology-formula {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--border-subtle);
}

.patron-methodology-formula-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

.patron-methodology-label {
  font-weight: 700;
  color: var(--text-primary);
}

.patron-methodology-formula-main code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-surface));
  color: var(--text-primary);
}

.patron-methodology-formula-sub {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.patron-ladder-thresholds-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 900px) {
  .patron-ladder-thresholds-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.patron-ladder-step-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.patron-ladder-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-canvas));
  color: var(--accent-primary);
  flex-shrink: 0;
}

.patron-ladder-step-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.patron-ladder-step-kicker {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.patron-ladder-step-title {
  font-size: 11.5px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Unified Segmented Filter Pills & Search Toolbar */
.patron-members-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.patron-filter-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.patron-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.patron-filter-pill:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-subtle));
}

.patron-filter-pill.is-triage-pill.has-alerts:not(.is-active) {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-surface));
  color: var(--accent-primary);
}

.patron-filter-pill.is-active {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
}

.patron-filter-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.patron-filter-pill.is-active .patron-filter-pill-count {
  background: color-mix(in srgb, var(--button-primary-text) 16%, transparent);
  color: var(--button-primary-text);
}

.patron-members-search-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 320px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.patron-members-search-group .patron-search-input {
  flex: 1 1 220px;
  max-width: 300px;
  min-height: 34px;
  height: 34px;
  font-size: 12.5px;
}

.patron-sort-select {
  width: auto;
  min-width: 215px;
  height: 34px;
  font-size: 12.5px;
}

.patron-members-search-group .ui-dropdown,
.patron-members-search-group .ui-dropdown[data-variant="field"] {
  width: auto;
  min-width: 230px;
  max-width: 270px;
  flex: 0 0 auto;
}

.patron-members-search-group .ui-dropdown-trigger,
.patron-members-search-group .ui-dropdown[data-variant="field"] .ui-dropdown-trigger {
  min-height: 34px;
  height: 34px;
  padding: 0 11px;
  font-size: 12.5px;
  background: var(--bg-canvas);
}

/* Scannable 5-Column Directory Table */
.patron-members-table-wrap {
  max-height: 580px;
  overflow-y: auto;
  overflow-x: auto;
}

.patron-members-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: auto;
}

.patron-members-table th {
  padding: 10px 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-canvas) 70%, var(--bg-surface));
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.patron-members-table td {
  padding: 12px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12.5px;
  line-height: 1.38;
}

.patron-members-table th.is-num,
.patron-members-table td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.patron-members-table th.is-right,
.patron-members-table td.is-right {
  text-align: right;
}

.patron-member-row {
  cursor: pointer;
  transition: background-color 120ms ease;
}

.patron-member-row:hover td {
  background: color-mix(in srgb, var(--accent-primary) 5%, transparent);
}

.patron-member-row.is-investiture-ready td {
  background: color-mix(in srgb, var(--accent-primary) 4%, transparent);
}

.patron-member-row.is-investiture-ready td:first-child {
  box-shadow: inset 3px 0 0 var(--accent-primary);
}

.patron-member-row.is-drawer-open td {
  background: color-mix(in srgb, var(--accent-primary) 11%, var(--bg-surface));
}

.patron-row-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.patron-row-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-canvas));
  color: var(--accent-primary);
  flex-shrink: 0;
}

.patron-row-seal.is-neutral {
  border-color: var(--border-subtle);
  background: var(--bg-canvas);
  color: var(--text-muted);
}

.patron-row-person {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.patron-resident-line1 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.patron-resident-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.patron-resident-legal {
  font-size: 11.5px;
  color: var(--text-secondary);
}

.patron-resident-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.patron-row-sub-metric {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.patron-row-sub-metric strong {
  color: var(--text-secondary);
}

.patron-row-vp-score {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Engraved Regalia Stack & Conditional Triage Chip */
.patron-row-regalia-stack {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.patron-crest-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 38%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-canvas));
  color: var(--accent-primary);
}

.patron-crest-overflow {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.patron-regalia-fraction {
  margin-left: 3px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.patron-regalia-empty {
  font-size: 11.5px;
  color: var(--text-muted);
}

.patron-triage-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 48%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 11%, var(--bg-surface));
  color: var(--accent-primary);
  white-space: nowrap;
}

.patron-row-open-btn {
  min-height: 28px;
  padding: 0 10px;
  gap: 5px;
  white-space: nowrap;
}

/* Slide-Over Resident & Investiture Inspector Drawer */
.patron-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1245;
  background: rgba(12, 10, 8, 0.34);
  backdrop-filter: blur(1px);
}

.patron-drawer-backdrop[hidden],
.patron-resident-drawer[hidden] {
  display: none !important;
}

.patron-resident-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(540px, 95vw);
  z-index: 1250;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface-1);
  color: var(--text-primary);
  border-left: 1px solid var(--border-subtle);
  box-shadow: -14px 0 40px rgba(0, 0, 0, 0.2);
}

.patron-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.patron-drawer-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.patron-drawer-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 11%, var(--bg-canvas));
  color: var(--accent-primary);
  flex-shrink: 0;
}

.patron-drawer-seal.is-neutral {
  border-color: var(--border-subtle);
  background: var(--bg-canvas);
  color: var(--text-muted);
}

.patron-drawer-title-group {
  min-width: 0;
}

.patron-drawer-name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.patron-drawer-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.patron-drawer-legal {
  font-size: 12px;
  color: var(--text-secondary);
}

.patron-drawer-meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.patron-drawer-nav-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.patron-drawer-pos {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

.patron-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Conditional Triage Callout inside Drawer */
.patron-drawer-triage-box {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 48%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-canvas));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.patron-drawer-triage-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--accent-primary);
}

.patron-drawer-triage-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--text-primary);
}

.patron-drawer-order-verify {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.drawer-check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
}

.drawer-check-row.is-muted-reject {
  color: var(--text-muted);
  font-size: 11.5px;
}

.patron-drawer-merit-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Drawer Sections */
.patron-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.patron-drawer-section:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.patron-drawer-sec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.patron-drawer-sec-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

.patron-drawer-sec-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.patron-drawer-preset-btns,
.patron-drawer-vp-actions,
.drawer-security-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.drawer-crest-group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-top: 2px;
}

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

@media (max-width: 520px) {
  .drawer-crests-grid {
    grid-template-columns: 1fr;
  }
}

.drawer-crest-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
  transition: border-color 140ms ease, background-color 140ms ease;
}

.drawer-crest-card.is-granted {
  border-color: color-mix(in srgb, var(--accent-primary) 58%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-surface));
}

.drawer-crest-card.is-eligible:not(.is-granted) {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent-primary) 62%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 4%, var(--bg-canvas));
}

.drawer-crest-main {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.drawer-crest-glyph {
  display: inline-flex;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.drawer-crest-card.is-locked:not(.is-granted) .drawer-crest-glyph {
  color: var(--text-muted);
}

.drawer-crest-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.drawer-crest-step {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.drawer-crest-title {
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-crest-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 5px;
  border-top: 1px dashed var(--border-subtle);
}

.drawer-crest-state {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.drawer-crest-state.is-granted,
.drawer-crest-state.is-eligible {
  color: var(--accent-primary);
}

.drawer-seal-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--text-secondary);
  cursor: pointer;
}

.drawer-cypher-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
  cursor: pointer;
}

.drawer-cypher-card.is-granted {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-surface));
}

.drawer-cypher-icon {
  display: inline-flex;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.drawer-cypher-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.drawer-cypher-meta strong {
  font-size: 12px;
  color: var(--text-primary);
}

.drawer-cypher-meta small {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Role, Order & Quota inside Drawer */
.drawer-role-tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.drawer-role-tier-grid > div {
  min-width: 0;
}

.patron-resident-drawer .ui-dropdown,
.patron-resident-drawer .ui-dropdown[data-variant="field"] {
  width: 100%;
  min-width: 0;
}

.patron-resident-drawer .ui-dropdown[data-variant="field"] .ui-dropdown-trigger {
  min-height: 36px;
  height: 36px;
  padding: 0 11px;
  font-size: 12.5px;
  border-radius: 8px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
}

.patron-resident-drawer .ui-dropdown[data-for-select="drawerRoleSelect"][data-selected-value="admin"] .ui-dropdown-trigger {
  background: color-mix(in srgb, var(--accent-primary) 11%, var(--bg-canvas));
  border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-subtle));
}

.patron-resident-drawer .ui-dropdown[data-for-select="drawerRoleSelect"][data-selected-value="patron"] .ui-dropdown-trigger,
.patron-resident-drawer .ui-dropdown[data-for-select="drawerTierSelect"]:not([data-selected-value="0"]) .ui-dropdown-trigger {
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-canvas));
  border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-subtle));
}

@media (max-width: 520px) {
  .drawer-role-tier-grid {
    grid-template-columns: 1fr;
  }
}

.drawer-quota-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
}

.drawer-quota-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.drawer-quota-hint {
  font-size: 11px;
  color: var(--text-muted);
}

/* Theme-Pure VP Trajectory Chart & Formula Ledger */
.drawer-vp-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-canvas));
  color: var(--accent-primary);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.patron-vp-chart-box {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
}

.patron-vp-trajectory-svg {
  width: 100%;
  height: auto;
  display: block;
}

.patron-vp-trajectory-svg .vp-chart-frame {
  fill: var(--bg-surface);
  stroke: var(--border-subtle);
  stroke-width: 1;
}

.patron-vp-trajectory-svg .vp-chart-area {
  fill: color-mix(in srgb, var(--accent-primary) 14%, transparent);
}

.patron-vp-trajectory-svg .vp-chart-line {
  stroke: var(--accent-primary);
}

.patron-vp-trajectory-svg .vp-chart-ref.is-reached {
  color: var(--accent-primary);
}

.patron-vp-trajectory-svg .vp-chart-ref.is-target {
  color: var(--text-muted);
}

.drawer-vp-details {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-canvas);
  padding: 8px 12px;
}

.drawer-vp-details summary {
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.drawer-vp-ledger-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle);
}

.drawer-vp-ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.drawer-vp-ledger-row strong {
  color: var(--text-primary);
}

.drawer-vp-ledger-row.is-subtotal {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.drawer-danger-confirm-btn {
  border-color: var(--semantic-error, #b83b2f) !important;
  color: var(--semantic-error, #b83b2f) !important;
}

/* Sticky Drawer Footer */
.patron-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.patron-drawer-dirty-indicator {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-primary);
}

.patron-drawer-dirty-indicator[hidden] {
  display: none !important;
}

.patron-drawer-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Clean utility replacements for Sections 3–5 inline styles */
.patron-detail-date {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-left: auto;
}

.patron-reply-composer-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

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

.patron-mint-controls-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.patron-mint-col-tier {
  min-width: 225px;
  flex: 0 1 245px;
}

.patron-mint-col-num {
  width: 118px;
}

.patron-mint-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  height: 38px;
}

.patron-charter-banner-row .btn {
  min-height: 38px;
  height: 38px;
  flex-shrink: 0;
}

.canvas-board-toolbar .ui-dropdown {
  width: 240px;
  min-width: 180px;
  max-width: 290px;
  flex: 0 1 240px;
}

.canvas-board-toolbar .ui-dropdown-trigger {
  width: 100%;
  max-width: 100%;
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  background: var(--bg-canvas);
}

.patron-invites-filter-bar {
  margin-top: 14px;
}

.patron-invites-table-wrap {
  max-height: 360px;
  overflow-y: auto;
}

.patron-subcard-hint {
  margin: 2px 0 0;
}

.patron-subcard-title-group,
.patron-subcard-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.patron-subcard-search {
  max-width: 220px;
  height: 30px;
  font-size: 11.5px;
}
/* =========================================================================
   Patron Directory Scaling (1,000+ Residents): Checkboxes, Batch Bar,
   Server-Side Pagination & Empirical VP Calibration Strip
   ========================================================================= */

.patron-members-table th.patron-col-check,
.patron-members-table td.patron-col-check {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding-left: 12px;
  padding-right: 6px;
  text-align: center;
}

.patron-row-select-check {
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent-primary);
  vertical-align: middle;
}

.patron-member-row.is-row-selected td {
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-surface));
}

.patron-batch-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 14px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-surface));
}

.patron-batch-actions-bar[hidden] {
  display: none !important;
}

.patron-batch-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-primary);
}

.patron-batch-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.patron-batch-summary-label {
  font-weight: 600;
}

.patron-batch-clear-btn {
  padding: 2px 6px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.patron-batch-clear-btn:hover {
  color: var(--text-primary);
}

.patron-batch-btns {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.patron-members-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.patron-pagination-summary {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.patron-pagination-summary strong {
  color: var(--text-primary);
  font-weight: 600;
}

.patron-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.patron-page-size-wrap .ui-dropdown,
.patron-page-size-wrap .ui-dropdown[data-variant="field"] {
  width: auto;
  min-width: 156px;
  max-width: 185px;
}

.patron-page-size-wrap .ui-dropdown-trigger,
.patron-page-size-wrap .ui-dropdown[data-variant="field"] .ui-dropdown-trigger {
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  background: var(--bg-canvas);
}

.patron-pagination-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.patron-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.patron-page-btn:hover:not(:disabled):not(.is-active) {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-subtle));
  background: var(--bg-surface);
}

.patron-page-btn.is-active {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
}

.patron-page-btn:disabled {
  opacity: 0.42;
  cursor: default;
}

.patron-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  font-size: 12px;
  color: var(--text-muted);
}

.patron-vp-calibration-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 11px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px dashed var(--border-subtle);
  background: var(--bg-canvas);
  font-size: 11.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.patron-vp-calibration-summary strong {
  color: var(--text-primary);
}

.patron-ladder-step-stats {
  margin-top: 2px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

#patronResidentDrawer input[type="checkbox"],
#patronResidentDrawer input[type="radio"] {
  accent-color: var(--accent-primary);
  cursor: pointer;
}

/* =========================================================================
   Patron Calling Cards (Victorian 85x55mm Diogenes Lodge Invitation Tickets)
   Strictly scoped to Patron Admin Invites Chamber
   ========================================================================= */

.patron-minted-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.patron-minted-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.28);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
  letter-spacing: 0.04em;
  transition: all 0.15s ease;
}

.patron-minted-chip:hover {
  background: rgba(212, 175, 55, 0.14);
  border-color: rgba(212, 175, 55, 0.45);
}

.patron-minted-chip-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.patron-minted-chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--font-sans);
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.patron-minted-chip-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  border-color: rgba(212, 175, 55, 0.35);
}

/* Calling Card Modal Dialog */
.patron-card-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 10, 14, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: patronCardFadeIn 0.18s ease-out;
}

.patron-card-modal-backdrop[hidden] {
  display: none !important;
}

@keyframes patronCardFadeIn {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}

.patron-card-modal-dialog {
  width: 100%;
  max-width: 820px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface, #14171c);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(212, 175, 55, 0.15);
  overflow: hidden;
}

.patron-card-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  background: rgba(18, 20, 25, 0.95);
}

.patron-card-modal-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.patron-card-spec-pill {
  font-size: 10px;
  padding: 2px 7px;
  letter-spacing: 0.05em;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--accent-primary, #d4af37);
  border-radius: 999px;
  font-weight: 600;
}

.patron-card-modal-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.patron-card-modal-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 6px;
}

.patron-card-modal-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  padding: 22px;
  overflow-y: auto;
}

@media (max-width: 720px) {
  .patron-card-modal-body {
    grid-template-columns: 1fr;
  }
}

.patron-card-preview-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 260px;
  background: radial-gradient(circle at center, rgba(32, 28, 24, 0.5) 0%, rgba(12, 14, 18, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
}

.patron-card-svg-container {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 85 / 55;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.65)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transition: transform 0.2s ease;
}

.patron-card-svg-container:hover {
  transform: translateY(-2px);
}

.patron-card-svg-container svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.patron-card-modal-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.patron-card-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.patron-card-code-input {
  font-family: var(--font-mono, monospace);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-primary, #d4af37);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(212, 175, 55, 0.3);
  text-transform: uppercase;
}

.patron-card-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.patron-card-modal-actions .btn {
  justify-content: center;
  gap: 8px;
}

.patron-card-modal-hint {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  padding: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

@media print {
  body * {
    visibility: hidden;
  }
  #patronCallingCardModal,
  #patronCallingCardModal * {
    visibility: visible;
  }
  #patronCallingCardModal {
    position: absolute;
    inset: 0;
    background: transparent;
    padding: 0;
  }
  .patron-card-modal-dialog {
    border: none;
    box-shadow: none;
    background: transparent;
    max-width: none;
  }
  .patron-card-modal-header,
  .patron-card-modal-sidebar {
    display: none !important;
  }
  .patron-card-modal-body,
  .patron-card-preview-area {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .patron-card-svg-container {
    filter: none;
    width: 85mm !important;
    height: 55mm !important;
  }
}

/* Desktop Sanctuary Guard Overlay */
.desktop-guard-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(14, 12, 10, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: gateFadeIn 0.25s ease-out;
}
.desktop-guard-overlay[hidden] {
  display: none !important;
}
.desktop-guard-card {
  width: min(100%, 460px);
  background: var(--bg-surface-1, #1e1b18);
  border: 1px solid var(--border-subtle, rgba(212, 175, 55, 0.2));
  border-radius: 12px;
  padding: clamp(20px, 5vw, 32px);
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.desktop-guard-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.desktop-guard-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 10px;
  color: var(--text-primary);
}
.desktop-guard-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 20px;
}
.desktop-guard-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.desktop-guard-actions .btn {
  justify-content: center;
  min-height: 42px;
  gap: 8px;
}
.desktop-guard-toast {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-primary);
}
.desktop-guard-toast[hidden] {
  display: none !important;
}