:root, :root[data-theme="light"], html:not([data-theme="dark"]).dark-mode {
  color-scheme: light;
  --paper: #FFF3E0; --ink: #110D00;
}
:root[data-theme="dark"], html.dark-mode[data-theme="dark"] {
  color-scheme: dark;
  --paper: #110D00; --ink: #FFF3E0;
}
:root, :root[data-theme], html.dark-mode {
  --bg: var(--paper); --panel: var(--paper); --panel-soft: var(--paper);
  --text: var(--ink); --muted: var(--ink); --line: var(--ink); --soft: var(--paper);
  --cyan: var(--ink); --green: var(--ink); --red: var(--ink); --amber: var(--ink); --blue: var(--ink);
  --accent: var(--ink); --accent-soft: var(--paper); --danger: var(--ink);
  --primary: var(--ink); --primary-text: var(--paper); --text-secondary: var(--ink);
  --surface-hover: var(--paper); --surface-raised: var(--paper); --surface-alt: var(--paper);
  --surface-input: var(--paper); --pill-neutral-bg: var(--paper);
  --green-bg: var(--paper); --red-bg: var(--paper); --amber-bg: var(--paper); --blue-bg: var(--paper);
  --skeleton: var(--paper); --sticky-header: var(--paper); --chart-bg: var(--paper);
  --chart-grid: var(--ink); --chart-grid-subtle: var(--paper); --chart-zero: var(--ink);
  --chart-sample: var(--ink); --chart-sample-text: var(--ink); --chart-band: var(--paper);
  --chart-separator: var(--ink); --heatmap-empty-bg: var(--paper); --heatmap-empty-text: var(--ink);
  --shadow: none;
  font-family: Inter, "Segoe UI", Tahoma, Verdana, sans-serif;
}
html { scroll-behavior: auto; }
body { background: var(--paper) !important; color: var(--ink); font-family: Inter, "Segoe UI", Tahoma, Verdana, sans-serif; }
body *, body *::before, body *::after { letter-spacing: 0 !important; box-shadow: none !important; }
button, input, select, textarea { font-family: inherit; }
.app-page main:not(.library-app) { width: min(1500px, calc(100% - 64px)); max-width: 1500px; margin: 0 auto; padding: 96px 0 48px; }
.app-page h1 { font-family: inherit; font-size: 32px; font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
.app-page h2 { font-family: inherit; font-size: 21px; font-weight: 800; line-height: 1.35; }
.app-page .top, .app-page .topbar { border: 0; background: none; padding: 0 0 28px; }
.app-page .eyebrow { font-size: 12px; text-transform: none; }
.app-page .panel, .app-page .metric, .app-page .limit, .app-page .composer-panel,
.app-page .source-activity-section, .app-page .analysis-controls, .app-page .strategy-controls,
.app-page .reel-creator-card, .app-page .reader-content, .app-page .gallery-card,
.app-page .reel-comments-panel, .app-page .status-document > section {
  background: none !important; border: 0; border-top: 1px solid var(--ink); border-radius: 0 !important;
}
.app-page .panel { padding: 24px 0; }
.app-page .grid { gap: 24px; }
.app-page .metric, .app-page .limit { padding: 16px 0; min-width: 0; }
.app-page .limits { gap: 18px; }
.app-page .panel-header { background: none; padding-inline: 0; }
.app-page .paper, .app-page .pill { background: none; color: var(--ink); border-radius: 0; padding: 4px 0; }
.app-page .paper { border: 0; font-size: 13px; }
.app-page pre { background: none; color: var(--ink); border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 18px 0; }
.app-page input, .app-page select, .app-page textarea { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; max-width: 100%; }
.app-page button, .app-page .btn { background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 6px; font-size: 14px; font-weight: 700; }
.app-page button:hover, .app-page .btn:hover { background: var(--ink); color: var(--paper); }
.app-page button:disabled { opacity: .45; }
.app-page .tab, .app-page .range-btn, .app-page .source-view-button { border: 0; border-radius: 0; border-bottom: 2px solid transparent; }
.app-page .tab.active, .app-page .range-btn.active, .app-page .source-view-button.active { background: none; border-bottom-color: var(--ink); color: var(--ink); }
.app-page .archive-tree summary { background: none; color: var(--ink); border-radius: 0; padding-block: 12px; }
.app-page a { color: var(--ink); text-underline-offset: 4px; }
.app-page :focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.app-page .scroll, .app-page .table-wrap { scrollbar-color: var(--ink) var(--paper); }
.app-page .heatmap-filter-button, .app-page .heatmap-filter-button:hover {
  background: transparent; color: inherit; border: 0; border-radius: 0;
  font-size: 11px; padding: 2px 0; white-space: normal; overflow-wrap: anywhere;
}
.app-page .heatmap-samples { display: block; margin: 3px 0 0; font-size: 9px; line-height: 1.2; }
.app-page .heatmap-cell { height: 44px; }
.app-page .confidence-heatmap th, .app-page .confidence-heatmap td { padding: 4px 3px; }
.app-page .confidence-heatmap th { font-size: 10px; overflow-wrap: anywhere; }
.app-page .heatmap-layout { display: grid; gap: 12px; }
.app-page .heatmap-medium, .app-page .heatmap-narrow { display: none; }
.app-page .confidence-heatmap caption { text-align: left; padding: 6px; font-size: 11px; font-weight: 700; }
.app-page .heatmap-wide caption { display: none; }
@media (max-width: 1100px) {
  .app-page .heatmap-wide { display: none; }
  .app-page .heatmap-medium { display: grid; }
}
@media (max-width: 600px) {
  .app-page .heatmap-medium { display: none; }
  .app-page .heatmap-narrow { display: grid; }
  .app-page .confidence-heatmap th:first-child, .app-page .confidence-heatmap td:first-child { width: 76px; }
  .app-page .confidence-heatmap th:nth-child(2), .app-page .confidence-heatmap td:nth-child(2) { width: 60px; padding-left: 4px; }
}
.app-page .heatmap-cell.clickable:hover, .app-page .heatmap-cell.active-filter { outline: 2px solid currentColor; outline-offset: -3px; }
.app-page .heatmap-empty { background: #e5e7eb; color: #4b5563; }
:root[data-theme="dark"] .app-page .heatmap-empty { background: #303741; color: #d1d5db; }
.app-page .heatmap-scale-correct { background: #16a34a; }
.app-page .heatmap-scale-neutral { background: #facc15; }
.app-page .heatmap-scale-wrong { background: #dc2626; }
.app-page .heatmap-scale-outlier-correct { background: #14532d; }
.app-page .heatmap-scale-outlier-wrong { background: #7f1d1d; }
.app-page details.conditions { padding: 0; }
.app-page details.conditions > summary { cursor: pointer; font-size: 21px; font-weight: 800; line-height: 1.35; margin: 0; padding: 12px 0; }
.app-page details.conditions[open] > .limits { padding: 6px 0 24px; }
.app-page details.conditions:not([open]) + .panel { margin-top: -24px; padding-top: 12px; }
.app-page .limits .condition-copy { font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.app-page .limit span { overflow-wrap: anywhere; }
.app-page .library-app { height: calc(100vh - 80px); margin-top: 80px; }
.app-page .library-sidebar { height: calc(100vh - 80px); background: none; }
.app-page .library-brand h1 { font: 900 26px/1.2 Inter, "Segoe UI", sans-serif; }
.app-page .reader-bar, .app-page .reader-pane, .app-page .file-tree, .app-page .reel-media-panel { background: var(--paper); }
.app-page .reader-content h1 { font-size: 30px; }
.app-page .reader-content *, .app-page .reel-description, .app-page .captured-comment p { font-family: inherit; color: var(--ink); }
.app-page .reader-content h1, .app-page .reader-content h2, .app-page .reel-gallery-card strong { font-family: Inter, "Segoe UI", sans-serif; font-weight: 800; }
.app-page .reel-gallery-card, .app-page .artifact-reel-card, .app-page .youtube-library-card {
  display: flex; flex-direction: column; height: auto; min-height: 0; aspect-ratio: auto;
  background: none !important; border: 0; border-radius: 0; padding: 0; color: var(--ink);
}
.app-page .reel-gallery-card img, .app-page .artifact-reel-card img, .app-page .youtube-library-card img {
  position: relative; inset: auto; width: 100%; height: 280px; object-fit: contain; background: none;
}
.app-page .reel-card-shade { display: none; }
.app-page .reel-card-copy { position: relative; inset: auto; padding: 16px 0 22px; }
.app-page .reel-gallery-card strong { font-size: 19px; line-height: 1.4; }
.app-page .gallery-card-author, .app-page .gallery-card-type, .app-page .gallery-card-date { color: var(--ink); }
.app-page .gallery-header > p:last-child { font-family: inherit; }
.app-page .file-entry { border: 0; border-radius: 0; padding-block: 10px; }
.app-page .file-entry.is-selected { background: var(--ink); color: var(--paper); }
.app-page .file-entry:hover, .app-page .file-tree summary:hover { background: none; color: var(--ink); text-decoration: underline; }
.app-page .tree-toolbar button { border: 0; padding: 8px 0; }
.app-page .library-controls { grid-template-columns: minmax(0,1fr) 40px 62px; }
.app-page .folder-page-card, .app-page .related-resource-card, .app-page .reel-audio-card,
.app-page .justwatch-panel, .app-page .youtube-match { background: none; border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 16px 0; }
.app-page .document-actions a, .app-page .document-actions button { border-radius: 6px; color: var(--ink); background: none; border-color: var(--ink); }
.app-page .library-nav a[href="/backend/instagram.html"], .app-page .library-nav a[href="/backend/second-brain.html"] { display: none; }
.app-page .login-shell { max-width: 520px !important; }
.app-page .login-panel { margin-top: 24px; }
.app-page .login-panel form { display: grid; gap: 12px; }
.app-page .login-panel input { width: 100%; box-sizing: border-box; padding: 12px; }
.app-page .login-panel .composer-status { display: none; }
.app-page .login-panel .login-actions { display: flex; align-items: center; gap: 20px; }
.portfolio-toolbar { position: fixed; z-index: 100; top: 24px; right: 24px; display: flex; align-items: center; gap: 12px; background: var(--paper); }
#portfolio-access-state { font-size: 13px; font-weight: 700; max-width: 120px; }
.portfolio-inline-controls [data-portfolio-toolbar-header] {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px;
  background: var(--paper); color: var(--ink); --ink-strong: var(--ink);
}
.portfolio-inline-controls [data-portfolio-toolbar-header] > :not(.portfolio-toolbar) { min-width: 0; }
.portfolio-inline-controls [data-portfolio-toolbar-header] > h1,
.portfolio-inline-controls [data-portfolio-toolbar-header] > .pageheadertext { flex: 1 1 220px; }
.portfolio-inline-controls [data-portfolio-toolbar-header] > .portfolio-toolbar {
  position: static; flex: 0 0 auto; margin-left: auto; background: none;
}
.portfolio-inline-controls .topbar[data-portfolio-toolbar-header] > .topnav {
  order: 3; flex: 1 1 100%; justify-content: flex-start;
}
.portfolio-inline-controls .notes-topbar[data-portfolio-toolbar-header] { position: static; }
.portfolio-inline-controls .notes-topbar[data-portfolio-toolbar-header] > .topnav {
  order: 0; flex: 1 1 400px;
}
.portfolio-inline-controls .management-topbar[data-portfolio-toolbar-header] > .management-nav {
  order: 3; flex: 1 1 100%; justify-content: flex-start;
}
.portfolio-inline-controls [data-portfolio-toolbar-header] .topnav a,
.portfolio-inline-controls [data-portfolio-toolbar-header] .topnav button,
.portfolio-inline-controls [data-portfolio-toolbar-header] .management-nav a {
  color: var(--ink); background: transparent; border-color: var(--ink);
}
.portfolio-inline-controls [data-portfolio-toolbar-header] .management-nav a[aria-current="page"] {
  color: var(--paper); background: var(--ink);
}
.app-page.portfolio-inline-controls main:not(.library-app) { padding-top: 24px; }
.app-page.portfolio-inline-controls .login-shell { min-height: 0; align-content: start; }
.portfolio-inline-controls .login-shell [data-portfolio-toolbar-header] > h1 { flex-basis: 150px; }
.portfolio-inline-controls .notes-shell { min-height: calc(100vh - 90px); padding-top: 24px; }
.portfolio-inline-controls [data-portfolio-toolbar-header] .portfolio-icon { flex: 0 0 auto; }
.app-page #auth-state { display: none !important; }
[hidden] { display: none !important; }
.portfolio-toolbar .portfolio-icon { width: 48px; height: 48px; box-sizing: border-box; display: inline-grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.portfolio-toolbar .portfolio-icon:hover { color: var(--paper); background: var(--ink); }
.portfolio-icon span { width: 23px; height: 23px; display: block; background: currentColor; mask: var(--icon) center / contain no-repeat; }
.icon-house { --icon: url('/assets/lucide-house.svg'); }
.icon-moon { --icon: url('/assets/lucide-moon.svg'); }
.icon-sun { --icon: url('/assets/lucide-sun.svg'); }
.icon-shield { --icon: url('/assets/lucide-shield.svg'); }
.icon-log-out { --icon: url('/assets/lucide-log-out.svg'); }
.icon-refresh { --icon: url('/assets/lucide-refresh-cw.svg'); }
.icon-settings { --icon: url('/assets/lucide-settings.svg'); }
.portfolio-toolbar .icon-sun, :root[data-theme="dark"] .portfolio-toolbar .icon-moon { display: none; }
:root[data-theme="dark"] .portfolio-toolbar .icon-sun { display: block; }
.theme-toggle, .home-shortcut, #themeToggle, .theme-control, #logoutButton, .tokenbar, #token { display: none !important; }
html:not([data-access="admin"]) [data-admin-control] { display: none !important; }
.icon-command { width: 40px; height: 40px; flex: 0 0 40px; padding: 8px !important; font-size: 0 !important; }
.icon-command::before { content: ''; display: block; width: 22px; height: 22px; background: currentColor; mask: url('/assets/lucide-refresh-cw.svg') center / contain no-repeat; }
.app-page.news-page main.shell { padding-top: 24px; }
.news-page .topbar { flex-wrap: wrap; }
.news-page .topbar > div:first-child { flex: 1 1 320px; min-width: 0; }
.news-page .topbar .actions { align-items: center; gap: 12px; }
.news-page .topbar .portfolio-toolbar { position: static; flex: 0 0 auto; background: none; }
.news-page .portfolio-icon { flex: 0 0 auto; }
.news-page .portfolio-icon[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
@media (max-width: 720px) {
  .news-page .topbar > div:first-child { flex-basis: auto; }
}
@media (max-width: 700px) {
  .app-page main:not(.library-app) { width: calc(100% - 32px); padding-top: 88px; }
  .app-page h1 { font-size: 27px; }
  .app-page .grid { gap: 16px; }
  .app-page details.conditions:not([open]) + .panel { margin-top: -16px; }
  .portfolio-toolbar { top: 14px; right: 16px; gap: 10px; }
  .portfolio-toolbar .portfolio-icon { width: 42px; height: 42px; }
  .app-page .library-app, .app-page .library-sidebar { height: calc(100dvh - 74px); }
  .app-page .library-app { margin-top: 74px; }
}
@media (max-width: 760px) {
  .app-page .library-app { margin-top: 74px; height: calc(100dvh - 74px); }
  .app-page .reader-pane { height: calc(100dvh - 74px); }
  .app-page .library-sidebar { top: 146px; bottom: 0; height: calc(100dvh - 146px); background: var(--paper); }
  .app-page .library-app:not(.nav-collapsed)::after { top: 146px; }
  .app-page .reader-bar { min-height: 72px; box-sizing: border-box; }
  .app-page .library-controls { grid-template-columns: 40px minmax(70px,1fr); }
  .app-page .library-controls label { grid-column: 1 / -1; }
  .app-page .library-controls .status-button { justify-self: end; min-width: 80px; }
}

/* The Reel library owns one header, with the shared account controls inline. */
.app-page.reel-library-page .library-app {
  display: grid;
  height: 100dvh;
  margin-top: 0;
  grid-template-rows: auto minmax(0, 1fr);
}
.reel-library-page .reader-bar { grid-column: 1 / -1; flex-wrap: wrap; gap: 10px; padding: 12px 18px; z-index: 40; }
.reel-library-page .reader-path { flex: 1 1 80px; }
.reel-library-page .reader-status { margin-left: auto; max-width: none; }
.reel-library-page .reader-bar .portfolio-toolbar { position: static; flex: 0 0 auto; margin-left: 10px; gap: 10px; background: transparent; }
.reel-library-page .portfolio-icon { flex: 0 0 auto; position: relative; }
.reel-library-page .portfolio-icon .status-dot { position: absolute; right: 1px; bottom: 1px; width: 8px; height: 8px; mask: none; border: 2px solid var(--paper); box-sizing: content-box; }
.app-page.reel-library-page .library-sidebar { height: 100%; }
.app-page.reel-library-page .reader-pane { height: 100%; grid-template-rows: minmax(0, 1fr); }
.app-page.reel-library-page .library-controls { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  .app-page.reel-library-page .library-app { grid-template-columns: minmax(0, 1fr); }
  .reel-library-page .reader-bar { padding: 9px 12px; gap: 8px; }
  .reel-library-page .reader-bar .portfolio-toolbar { margin-left: auto; gap: 6px; }
  .reel-library-page .portfolio-toolbar .portfolio-icon { width: 38px; height: 38px; }
  .reel-library-page .reader-path { flex-basis: 0; }
  .reel-library-page .reader-status { order: 2; flex-basis: 100%; white-space: normal; }
  .app-page.reel-library-page .library-sidebar { position: relative; inset: auto; grid-row: 2; grid-column: 1; width: min(88vw, 360px); min-height: 0; height: 100%; }
  .app-page.reel-library-page .reader-pane { grid-row: 2; grid-column: 1; width: 100%; }
  .app-page.reel-library-page .library-app:not(.nav-collapsed)::after { position: relative; inset: auto; grid-row: 2; grid-column: 1; }
}