/* HUB shell in dark mode. The theme comes from the shared switch (static/scrap_theme.js), which writes data-scrap-theme on from the same preference the apps use, so the shell and the app frames are never out of step. Light mode is untouched. */ html[data-scrap-theme="dark"] { --bg-primary: #172e38; --bg-secondary: #10232e; --border-color: #304a57; --text-primary: #e0edf3; --text-secondary: #a3bcc8; --accent: #85bddf; --sample-btn-hover: #1c3b45; } html[data-scrap-theme="dark"], html[data-scrap-theme="dark"] body { background: linear-gradient(120deg, #0d1f2a, #102333 62%, #10302c); color: var(--text-primary); } html[data-scrap-theme="dark"] header { background: rgba(16, 35, 51, 0.94); border-color: var(--border-color); } html[data-scrap-theme="dark"] .hub-word, html[data-scrap-theme="dark"] .label, html[data-scrap-theme="dark"] .card p, html[data-scrap-theme="dark"] .database-selector-status { color: var(--text-secondary); } html[data-scrap-theme="dark"] .hub-word { border-left-color: var(--border-color); } html[data-scrap-theme="dark"] .switcher { background: #14303c; border-color: var(--border-color); } html[data-scrap-theme="dark"] .switcher button { color: var(--text-primary); } html[data-scrap-theme="dark"] .switcher button:hover { background: #1c3b45; } html[data-scrap-theme="dark"] .workspace, html[data-scrap-theme="dark"] .shell { background: #0d1f2a; } html[data-scrap-theme="dark"] .card, html[data-scrap-theme="dark"] .database-selector, html[data-scrap-theme="dark"] .database-expanded-panel { background: var(--bg-primary); border-color: var(--border-color); box-shadow: 0 4px 18px rgba(4, 12, 18, 0.35); } html[data-scrap-theme="dark"] .card h2, html[data-scrap-theme="dark"] h1, html[data-scrap-theme="dark"] .database-selector-intro, html[data-scrap-theme="dark"] .database-choice-title { color: var(--text-primary); } html[data-scrap-theme="dark"] .database-choice-btn { background: linear-gradient(120deg, #143040, #123a34); border-color: var(--border-color); color: var(--text-primary); } html[data-scrap-theme="dark"] .database-choice-btn:hover, html[data-scrap-theme="dark"] .database-choice-btn.is-active { border-color: #85bddf; } html[data-scrap-theme="dark"] .database-choice-subtitle, html[data-scrap-theme="dark"] .database-choice-description { color: var(--text-secondary); } html[data-scrap-theme="dark"] .database-change-btn, html[data-scrap-theme="dark"] .dataset-chip { background: #1c3b45; color: #cfe6f2; } html[data-scrap-theme="dark"] .status-strip, html[data-scrap-theme="dark"] .hub-intro p { color: var(--text-secondary); } html[data-scrap-theme="dark"] .frame { background: #0d1f2a; }