diff --git a/PlotLine/wwwroot/css/plotline-theme.css b/PlotLine/wwwroot/css/plotline-theme.css
index 3125535..8f76190 100644
--- a/PlotLine/wwwroot/css/plotline-theme.css
+++ b/PlotLine/wwwroot/css/plotline-theme.css
@@ -25,6 +25,17 @@
   --plotline-panel: var(--plotline-surface);
   --plotline-line: var(--plotline-border-soft);
   --plotline-soft: var(--plotline-accent-soft);
+  --app-bg: var(--plotline-bg);
+  --app-surface: var(--plotline-surface);
+  --app-surface-alt: var(--plotline-surface-elevated);
+  --app-text: var(--plotline-text);
+  --app-text-muted: var(--plotline-text-muted);
+  --app-border: var(--plotline-border-soft);
+  --app-link: var(--plotline-accent-dark);
+  --app-input-bg: rgba(255, 253, 248, 0.9);
+  --app-input-text: var(--plotline-text);
+  --app-card-bg: var(--plotline-surface);
+  --app-timeline-bg: var(--plotline-timeline-bg);
 }
 
 [data-theme="dark"] {
@@ -53,6 +64,34 @@
   --plotline-panel: var(--plotline-surface);
   --plotline-line: var(--plotline-border-soft);
   --plotline-soft: var(--plotline-accent-soft);
+  --app-bg: #14110f;
+  --app-surface: rgba(35, 29, 25, 0.96);
+  --app-surface-alt: #2a231e;
+  --app-text: #f4eadc;
+  --app-text-muted: #cdbba7;
+  --app-border: rgba(231, 214, 190, 0.2);
+  --app-link: #f1c38f;
+  --app-input-bg: #211b17;
+  --app-input-text: #f4eadc;
+  --app-card-bg: rgba(35, 29, 25, 0.96);
+  --app-timeline-bg: #211b17;
+  --bs-body-bg: var(--app-bg);
+  --bs-body-color: var(--app-text);
+  --bs-secondary-color: var(--app-text-muted);
+  --bs-tertiary-color: #a99886;
+  --bs-border-color: var(--app-border);
+  --bs-link-color: var(--app-link);
+  --bs-link-hover-color: #ffd5a6;
+  --bs-card-bg: var(--app-card-bg);
+  --bs-card-color: var(--app-text);
+  --bs-modal-bg: var(--app-surface-alt);
+  --bs-modal-color: var(--app-text);
+  --bs-dropdown-bg: var(--app-surface-alt);
+  --bs-dropdown-color: var(--app-text);
+  --bs-list-group-bg: var(--app-surface);
+  --bs-list-group-color: var(--app-text);
+  --bs-table-color: var(--app-text);
+  --bs-table-bg: transparent;
 }
 
 body {
@@ -952,21 +991,59 @@ a:focus-visible {
 }
 
 [data-theme="dark"] body {
+  color: var(--app-text);
   background:
     radial-gradient(circle at top left, rgba(212, 154, 98, 0.12), transparent 34rem),
     linear-gradient(135deg, var(--plotline-bg-warm), var(--plotline-bg) 52%, #0f0d0c);
 }
 
+[data-theme="dark"] a:not(.btn) {
+  color: var(--app-link);
+  text-decoration-color: rgba(241, 195, 143, 0.36);
+}
+
+[data-theme="dark"] a:not(.btn):hover,
+[data-theme="dark"] a:not(.btn):focus {
+  color: var(--bs-link-hover-color);
+}
+
+[data-theme="dark"] .text-muted,
+[data-theme="dark"] .form-text,
+[data-theme="dark"] .lead-text,
+[data-theme="dark"] .scene-summary,
+[data-theme="dark"] .timeline-chapter-title span,
+[data-theme="dark"] .timeline-book-title span,
+[data-theme="dark"] .plotline-nav .nav-link,
+[data-theme="dark"] .plotline-nav .navbar-text,
+[data-theme="dark"] .plain-card p,
+[data-theme="dark"] .inspector-empty,
+[data-theme="dark"] .plotline-confirm-modal .modal-body,
+[data-theme="dark"] .timeline-setting-card small {
+  color: var(--app-text-muted) !important;
+}
+
 [data-theme="dark"] .plotline-nav {
   background: rgba(29, 23, 20, 0.92) !important;
   border-bottom-color: var(--plotline-border-soft) !important;
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
 }
 
+[data-theme="dark"] .plotline-nav .nav-link:hover,
+[data-theme="dark"] .plotline-nav .nav-link:focus,
+[data-theme="dark"] .plotline-nav .nav-link.active {
+  color: var(--app-link) !important;
+}
+
 [data-theme="dark"] .navbar-toggler {
   border-color: var(--plotline-border-soft);
 }
 
+[data-theme="dark"] h1,
+[data-theme="dark"] h2,
+[data-theme="dark"] h3,
+[data-theme="dark"] h4,
+[data-theme="dark"] h5,
+[data-theme="dark"] h6,
 [data-theme="dark"] .page-heading h1,
 [data-theme="dark"] .workspace-heading h1,
 [data-theme="dark"] .timeline-scene-card strong,
@@ -976,16 +1053,24 @@ a:focus-visible {
 [data-theme="dark"] .plain-card h3,
 [data-theme="dark"] .context-title strong,
 [data-theme="dark"] .asset-card h2,
-[data-theme="dark"] .character-card h2 {
-  color: var(--plotline-text);
+[data-theme="dark"] .character-card h2,
+[data-theme="dark"] .inspector-header h2,
+[data-theme="dark"] .inspector-empty h2,
+[data-theme="dark"] .inspector-section h3,
+[data-theme="dark"] .story-bible-card h3,
+[data-theme="dark"] .timeline-setting-card strong {
+  color: var(--app-text);
 }
 
 [data-theme="dark"] .plain-card,
+[data-theme="dark"] .card,
 [data-theme="dark"] .empty-panel,
 [data-theme="dark"] .edit-panel,
 [data-theme="dark"] .list-section,
+[data-theme="dark"] .list-group-item,
 [data-theme="dark"] .story-bible-section,
 [data-theme="dark"] .story-bible-card,
+[data-theme="dark"] .story-bible-nav,
 [data-theme="dark"] .archive-item-card,
 [data-theme="dark"] .warning-card,
 [data-theme="dark"] .warning-mini-card,
@@ -1005,11 +1090,22 @@ a:focus-visible {
 [data-theme="dark"] .timeline-preset-panel,
 [data-theme="dark"] .attachment-card,
 [data-theme="dark"] .attachment-preview-row,
+[data-theme="dark"] .attachment-thumb,
 [data-theme="dark"] .asset-mini-item,
-[data-theme="dark"] .archive-empty {
-  color: var(--plotline-text);
-  background: var(--plotline-surface);
-  border-color: var(--plotline-border-soft);
+[data-theme="dark"] .archive-empty,
+[data-theme="dark"] .writer-dashboard-panel,
+[data-theme="dark"] .writer-dashboard-panel:first-child,
+[data-theme="dark"] .writer-queue-card,
+[data-theme="dark"] .writer-mini-card,
+[data-theme="dark"] .timeline-setting-card,
+[data-theme="dark"] .timeline-setting-card:has(input:checked),
+[data-theme="dark"] .scene-overview-card,
+[data-theme="dark"] .inspector-section,
+[data-theme="dark"] .inspector-quick-nav,
+[data-theme="dark"] .inspector-accordion-toggle {
+  color: var(--app-text);
+  background: var(--app-surface);
+  border-color: var(--app-border);
   box-shadow: var(--plotline-shadow-subtle);
 }
 
@@ -1017,20 +1113,23 @@ a:focus-visible {
 [data-theme="dark"] .timeline-shell {
   background:
     linear-gradient(180deg, rgba(42, 35, 30, 0.96), rgba(29, 24, 21, 0.96)),
-    var(--plotline-timeline-bg);
-  border-color: var(--plotline-border-soft);
+    var(--app-timeline-bg);
+  border-color: var(--app-border);
 }
 
 [data-theme="dark"] .timeline-section-header,
+[data-theme="dark"] .metric-lane-label,
+[data-theme="dark"] .metric-shape-controls,
+[data-theme="dark"] .metric-chart-frame,
 [data-theme="dark"] .lane-board-heading,
 [data-theme="dark"] .plot-lane-board-heading,
 [data-theme="dark"] .pacing-heading,
 [data-theme="dark"] .lane-group-heading,
 [data-theme="dark"] .timeline-chapter-title,
 [data-theme="dark"] .timeline-book-title {
-  color: var(--plotline-accent-dark);
+  color: var(--app-link);
   background: rgba(37, 31, 27, 0.96);
-  border-color: var(--plotline-border-soft);
+  border-color: var(--app-border);
 }
 
 [data-theme="dark"] .timeline-project-title {
@@ -1050,9 +1149,9 @@ a:focus-visible {
 [data-theme="dark"] .timeline-placeholder-cell,
 [data-theme="dark"] .metric-graph-points,
 [data-theme="dark"] .timeline-minimap {
-  color: var(--plotline-text);
+  color: var(--app-text);
   background: rgba(42, 35, 30, 0.9);
-  border-color: var(--plotline-border-soft);
+  border-color: var(--app-border);
 }
 
 [data-theme="dark"] .timeline-scene-card,
@@ -1087,28 +1186,46 @@ a:focus-visible {
 [data-theme="dark"] .location-pill,
 [data-theme="dark"] .archive-pill,
 [data-theme="dark"] .badge,
+[data-theme="dark"] .badge.text-bg-light,
 [data-theme="dark"] .status-pill,
 [data-theme="dark"] .scenario-tag,
-[data-theme="dark"] .plain-preview {
-  color: var(--plotline-text);
+[data-theme="dark"] .plain-preview,
+[data-theme="dark"] .soft-count,
+[data-theme="dark"] .attachment-kind,
+[data-theme="dark"] .preset-chip,
+[data-theme="dark"] .story-bible-meta span {
+  color: var(--app-text);
   background: rgba(212, 154, 98, 0.14);
   border-color: rgba(212, 154, 98, 0.24);
 }
 
+[data-theme="dark"] .badge.text-bg-warning,
+[data-theme="dark"] .warning-placeholder.active {
+  color: #ffe4b8 !important;
+  background: rgba(224, 173, 101, 0.22) !important;
+  border-color: rgba(224, 173, 101, 0.36);
+}
+
+[data-theme="dark"] .badge.text-bg-success {
+  color: #c8f0ce !important;
+  background: rgba(145, 201, 154, 0.16) !important;
+}
+
 [data-theme="dark"] .form-control,
 [data-theme="dark"] .form-select,
 [data-theme="dark"] textarea,
 [data-theme="dark"] input,
 [data-theme="dark"] select {
-  color: var(--plotline-text);
-  background-color: #211b17;
-  border-color: var(--plotline-border-soft);
+  color: var(--app-input-text);
+  background-color: var(--app-input-bg);
+  border-color: var(--app-border);
 }
 
 [data-theme="dark"] .form-control::placeholder,
 [data-theme="dark"] textarea::placeholder,
 [data-theme="dark"] input::placeholder {
-  color: #8f8172;
+  color: #a99886;
+  opacity: 1;
 }
 
 [data-theme="dark"] .form-control:focus,
@@ -1118,26 +1235,37 @@ a:focus-visible {
   box-shadow: 0 0 0 0.2rem rgba(212, 154, 98, 0.2);
 }
 
+[data-theme="dark"] .form-control:disabled,
+[data-theme="dark"] .form-select:disabled,
+[data-theme="dark"] input:disabled,
+[data-theme="dark"] select:disabled,
+[data-theme="dark"] textarea:disabled {
+  color: #a99886;
+  background-color: #1b1613;
+  border-color: rgba(231, 214, 190, 0.12);
+  opacity: 1;
+}
+
 [data-theme="dark"] .table {
-  --bs-table-color: var(--plotline-text);
+  --bs-table-color: var(--app-text);
   --bs-table-bg: transparent;
-  --bs-table-border-color: var(--plotline-border-soft);
-  --bs-table-striped-color: var(--plotline-text);
+  --bs-table-border-color: var(--app-border);
+  --bs-table-striped-color: var(--app-text);
   --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
-  --bs-table-hover-color: var(--plotline-text);
+  --bs-table-hover-color: var(--app-text);
   --bs-table-hover-bg: rgba(212, 154, 98, 0.1);
 }
 
 [data-theme="dark"] .modal-content,
 [data-theme="dark"] .plotline-confirm-modal {
-  color: var(--plotline-text);
-  background: var(--plotline-surface-elevated);
-  border-color: var(--plotline-border-soft);
+  color: var(--app-text);
+  background: var(--app-surface-alt);
+  border-color: var(--app-border);
 }
 
 [data-theme="dark"] .modal-header,
 [data-theme="dark"] .modal-footer {
-  border-color: var(--plotline-border-soft);
+  border-color: var(--app-border);
 }
 
 [data-theme="dark"] .btn-close {
@@ -1145,12 +1273,46 @@ a:focus-visible {
 }
 
 [data-theme="dark"] .dropdown-menu {
-  --bs-dropdown-color: var(--plotline-text);
-  --bs-dropdown-bg: var(--plotline-surface-elevated);
-  --bs-dropdown-border-color: var(--plotline-border-soft);
-  --bs-dropdown-link-color: var(--plotline-text);
-  --bs-dropdown-link-hover-color: var(--plotline-accent-dark);
+  --bs-dropdown-color: var(--app-text);
+  --bs-dropdown-bg: var(--app-surface-alt);
+  --bs-dropdown-border-color: var(--app-border);
+  --bs-dropdown-link-color: var(--app-text);
+  --bs-dropdown-link-hover-color: var(--app-link);
   --bs-dropdown-link-hover-bg: rgba(212, 154, 98, 0.12);
+  --bs-dropdown-link-active-color: #1c120d;
+  --bs-dropdown-link-active-bg: var(--plotline-accent-dark);
+  --bs-dropdown-link-disabled-color: #8f8172;
+}
+
+[data-theme="dark"] .btn-outline-primary,
+[data-theme="dark"] .btn-outline-secondary,
+[data-theme="dark"] .btn-outline-info {
+  --bs-btn-color: var(--app-link);
+  --bs-btn-border-color: rgba(241, 195, 143, 0.46);
+  --bs-btn-hover-color: #1c120d;
+  --bs-btn-hover-bg: var(--app-link);
+  --bs-btn-hover-border-color: var(--app-link);
+  --bs-btn-active-color: #1c120d;
+  --bs-btn-active-bg: var(--app-link);
+  --bs-btn-active-border-color: var(--app-link);
+  --bs-btn-disabled-color: #9c8d7d;
+  --bs-btn-disabled-border-color: rgba(231, 214, 190, 0.18);
+}
+
+[data-theme="dark"] .btn-outline-danger {
+  --bs-btn-color: #ffb2aa;
+  --bs-btn-border-color: rgba(238, 142, 131, 0.5);
+  --bs-btn-hover-color: #2a1210;
+  --bs-btn-hover-bg: #ffb2aa;
+  --bs-btn-hover-border-color: #ffb2aa;
+}
+
+[data-theme="dark"] .nav-tabs {
+  --bs-nav-tabs-border-color: var(--app-border);
+  --bs-nav-tabs-link-hover-border-color: rgba(241, 195, 143, 0.28);
+  --bs-nav-tabs-link-active-color: var(--app-text);
+  --bs-nav-tabs-link-active-bg: var(--app-surface);
+  --bs-nav-tabs-link-active-border-color: var(--app-border);
 }
 
 [data-theme="dark"] .alert-info {
diff --git a/PlotLine/wwwroot/css/site.css b/PlotLine/wwwroot/css/site.css
index bc9c032..fce5d33 100644
--- a/PlotLine/wwwroot/css/site.css
+++ b/PlotLine/wwwroot/css/site.css
@@ -605,6 +605,7 @@ body.timeline-inspector-resizing {
   flex: 0 0 auto;
   width: calc((var(--chapter-scene-count) * var(--timeline-scene-width)) + ((var(--chapter-scene-count) - 1) * var(--timeline-grid-gap)));
   min-width: var(--timeline-scene-width);
+  box-sizing: border-box;
   border-radius: 8px;
   background: rgba(238, 245, 242, 0.7);
   outline: 1px solid #d4ded8;
@@ -629,8 +630,10 @@ body.timeline-inspector-resizing {
 
 .timeline-scenes {
   display: grid;
-  grid-template-columns: repeat(var(--chapter-scene-count), var(--timeline-scene-width));
+  grid-template-columns: repeat(var(--chapter-scene-count), minmax(0, 1fr));
   gap: var(--timeline-grid-gap);
+  width: 100%;
+  box-sizing: border-box;
   min-height: 190px;
   padding: 0;
 }
@@ -640,8 +643,9 @@ body.timeline-inspector-resizing {
   display: flex;
   flex-direction: column;
   gap: 6px;
-  width: var(--timeline-scene-width);
-  min-width: var(--timeline-scene-width);
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   border: 1px solid var(--plotline-line);
   border-radius: 8px;
   padding: 12px;