/* Component layer: hero, cards, buttons, tags, progress, canvas chrome.
   Loaded after app.css so it wins on equal specificity. No !important anywhere. */

/* --- Hero --- */
.hero {
  background: var(--wb-gradient-hero);
  border: 1px solid #faf2e7;
  box-shadow: var(--wb-shadow-hero);
  min-height: 104px;
  padding: 18px 26px;
  border-radius: 18px;
}

.hero h1 {
  color: var(--wb-ink-hero);
  font-size: 28px;
  letter-spacing: -.03em;
  margin-bottom: 5px;
}

.hero p {
  font-size: 13px;
}

.hero-art {
  width: 152px;
  height: 86px;
}

/* --- Cards --- */
.card,
.stat-card,
.search-result {
  background: var(--wb-surface-card);
  border-color: var(--wb-line-soft);
  box-shadow: var(--wb-shadow-card);
}

.card:hover,
.plan-card:hover,
.search-result:hover {
  border-color: var(--wb-line-hover);
  box-shadow: var(--wb-shadow-hover);
}

.section-card {
  background: rgba(255, 255, 255, .72);
}

.plan-card {
  background: rgba(255, 255, 255, .7);
  border-color: var(--wb-line-soft);
}

/* --- AI card --- */
.ai-card {
  background: var(--wb-gradient-ai);
  border: 1px solid #f8eede;
}

.ai-symbol {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.section-heading-icon,
.hero-divider-mark,
.plan-percent,
.tasks-more {
  color: var(--wb-accent-strong);
}

/* --- Buttons --- */
.button {
  border-color: #eae4db;
  background: var(--wb-surface-raised);
}

.button:hover {
  border-color: #e3b36e;
  background: #fffaf1;
  color: var(--wb-accent-strong);
}

.button.primary,
.icon-button.primary-round,
.mobile-add {
  background: var(--wb-gradient-primary);
}

.icon-button:hover {
  background: var(--wb-orange-soft);
  color: var(--wb-accent-strong);
}

.identity-hero-icon,
.identity-mini-icon,
.plan-icon {
  background: var(--wb-orange-soft);
  color: var(--wb-accent-strong);
}
/* Preset identity colours keep their own pairs; only the default (violet)
   falls back to the brand orange above. */
.identity-mini-icon.blue, .identity-hero-icon.blue, .plan-icon.blue { background: #edf6ff; color: #4384c7; }
.identity-mini-icon.green, .identity-hero-icon.green, .plan-icon.green { background: #edf8f3; color: #38896c; }
.identity-mini-icon.amber, .identity-hero-icon.amber, .plan-icon.amber { background: #fff6e6; color: #a87920; }
.identity-mini-icon.rose, .identity-hero-icon.rose, .plan-icon.rose { background: #fff0f1; color: #bd6c76; }
html[data-wb-theme="night"] .identity-mini-icon.blue, html[data-wb-theme="night"] .identity-hero-icon.blue, html[data-wb-theme="night"] .plan-icon.blue { background: rgb(67 132 199 / 20%); color: #8fbcec; }
html[data-wb-theme="night"] .identity-mini-icon.green, html[data-wb-theme="night"] .identity-hero-icon.green, html[data-wb-theme="night"] .plan-icon.green { background: rgb(56 137 108 / 20%); color: #86c9ae; }
html[data-wb-theme="night"] .identity-mini-icon.amber, html[data-wb-theme="night"] .identity-hero-icon.amber, html[data-wb-theme="night"] .plan-icon.amber { background: rgb(168 121 32 / 22%); color: #e0b878; }
html[data-wb-theme="night"] .identity-mini-icon.rose, html[data-wb-theme="night"] .identity-hero-icon.rose, html[data-wb-theme="night"] .plan-icon.rose { background: rgb(189 108 118 / 20%); color: #e3a3ab; }

/* --- Tags & pills --- */
.identity-tag {
  background: var(--wb-orange-soft);
  color: var(--wb-accent-strong);
}
.identity-tag.blue { background: #eef6ff; color: #3e7dc1; }
.identity-tag.green { background: #edf8f3; color: #388a6c; }
.identity-tag.amber { background: #fff6e6; color: #a87920; }
.identity-tag.rose { background: #fff0f1; color: #bd6c76; }
html[data-wb-theme="night"] .identity-tag.blue { background: rgb(67 132 199 / 20%); color: #8fbcec; }
html[data-wb-theme="night"] .identity-tag.green { background: rgb(56 137 108 / 20%); color: #86c9ae; }
html[data-wb-theme="night"] .identity-tag.amber { background: rgb(168 121 32 / 22%); color: #e0b878; }
html[data-wb-theme="night"] .identity-tag.rose { background: rgb(189 108 118 / 20%); color: #e3a3ab; }

.filter-pill.active,
.language-option:hover,
.language-option.selected {
  background: var(--wb-orange-soft);
  color: var(--wb-accent-strong);
}

.nav-dot,
.notification-action i {
  background: var(--wb-orange-2);
  box-shadow: 0 0 0 3px var(--wb-orange-soft);
}

/* --- Progress --- */
.progress-fill,
.native-progress::-webkit-progress-value,
.native-progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--wb-orange-1), var(--wb-orange-3));
}

.native-progress,
.progress-line {
  accent-color: var(--wb-accent);
}

/* --- Inputs --- */
.text-input,
.select-input,
.textarea-input {
  background: var(--wb-input-bg);
  border-color: var(--wb-line);
}

/* --- Links / accents --- */
.openlist-card-action,
.openlist-nav-item,
.ai-pilot-status,
.ai-agent-tools {
  color: var(--wb-accent-strong);
}

/* --- Canvas chrome --- */
.canvas-toolbar {
  padding: 8px 12px;
  border: 1px solid #f3ece1;
  border-radius: var(--wb-radius-sm);
  background: rgba(255, 255, 255, .58);
}

.canvas-tile {
  --module-bg: var(--wb-surface-card);
}

.canvas-editing .canvas-tile {
  box-shadow: 0 0 0 2px rgba(225, 179, 109, .12), 0 10px 26px rgba(150, 115, 63, .10);
}

.canvas-controls {
  background: #fff1dc;
}

.canvas-grid.canvas-drop-target {
  outline-color: var(--wb-orange-2);
  background: #fffaf1;
}

.canvas-resize {
  background: var(--wb-gradient-primary);
}

.workbench-widget-drag,
.workbench-widget-resize {
  color: var(--wb-accent-strong);
  border-color: #e3b36e;
}

/* --- Theme switcher --- */
.theme-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.theme-switcher .locale-choice {
  width: 100%;
}

/* ============================================================
   Night theme — only the cases tokens cannot express.
   ============================================================ */
[data-wb-theme="night"] .hero {
  border-color: #524b40;
}

[data-wb-theme="night"] .ai-card {
  border-color: #514533;
}

[data-wb-theme="night"] .section-card,
[data-wb-theme="night"] .plan-card {
  background: #262220;
  border-color: #443a30;
}

[data-wb-theme="night"] .plan-metric span,
[data-wb-theme="night"] .plan-desc {
  color: #b6ada2;
}

[data-wb-theme="night"] .plan-metric strong {
  color: #ede4d6;
}

[data-wb-theme="night"] .progress-line {
  background: #443a30;
}

[data-wb-theme="night"] .nav-item {
  color: #c5bfb5;
}

[data-wb-theme="night"] .nav-item:hover,
[data-wb-theme="night"] .language-trigger:hover {
  background: #3a3023;
  color: #f0bd71;
}

[data-wb-theme="night"] .button {
  background: #2c2724;
  color: #fbf8f3;
  border-color: #4e4339;
}

[data-wb-theme="night"] .button:hover {
  background: #3a3023;
  border-color: #c7893b;
  color: #f0bd71;
}

[data-wb-theme="night"] .filter-pill.active,
[data-wb-theme="night"] .language-option:hover,
[data-wb-theme="night"] .language-option.selected {
  background: #4a3420;
  color: #f0bd71;
}

[data-wb-theme="night"] .modal-card {
  background: #262220;
  color: #fbf8f3;
}

[data-wb-theme="night"] .locale-choice {
  background: #2c2724;
  border-color: #4e4339;
  color: #e7e3da;
}

[data-wb-theme="night"] .modal-card .icon-button {
  background: transparent;
  color: #fbf8f3;
}

[data-wb-theme="night"] .locale-choice.selected {
  background: #4a3420;
  border-color: #c7893b;
  color: #f0bd71;
}

[data-wb-theme="night"] .canvas-toolbar {
  background: rgba(36, 39, 53, .82);
  border-color: #4e4339;
}

/* Night readability — app.css pins these to light-surface colors. */
[data-wb-theme="night"] .ai-summary,
[data-wb-theme="night"] .ai-chat-answer,
[data-wb-theme="night"] .openlist-card-copy strong,
[data-wb-theme="night"] .control-card-top strong,
[data-wb-theme="night"] .control-row-main strong,
[data-wb-theme="night"] .task-title,
[data-wb-theme="night"] .plan-name,
[data-wb-theme="night"] .hero h1 {
  color: #f0ece4;
}

[data-wb-theme="night"] .ai-agent-pilot {
  background: #20222f;
}

[data-wb-theme="night"] .canvas-toolbar,
[data-wb-theme="night"] .workbench-layout-toolbar {
  color: #cfc9c0;
}

/* canvas.js renders bare <button> elements — no classes to hook on. */
[data-wb-theme="night"] .canvas-toolbar button,
[data-wb-theme="night"] .canvas-picker button,
[data-wb-theme="night"] .canvas-template-dialog > button,
[data-wb-theme="night"] .workbench-layout-reset {
  background: #2c2724;
  border-color: #4e4339;
  color: #e9ddc9;
}

[data-wb-theme="night"] .canvas-toolbar button:disabled,
[data-wb-theme="night"] .button:disabled,
[data-wb-theme="night"] .button[disabled] {
  background: #23262f;
  border-color: #34374a;
  color: #6f7285;
}

[data-wb-theme="night"] .canvas-controls {
  background: #3a3023;
}

[data-wb-theme="night"] .search-wrap,
[data-wb-theme="night"] .text-input,
[data-wb-theme="night"] .select-input,
[data-wb-theme="night"] .textarea-input {
  color: #fbf8f3;
  border-color: #4a4038;
}

[data-wb-theme="night"] .search-wrap:focus-within {
  border-color: #4a4038;
} 

/* --- Mobile --- */
@media (max-width: 640px) {
  .hero,
  .card,
  .canvas-tile {
    border-radius: 20px;
  }
}
/* --- Brand leaf: slow, barely-there sway --- */
.brand-mark .leaf {
  transform-origin: 60% 92%;
}

.brand-mark .leaf-a { animation: wb-leaf-left 7.5s ease-in-out infinite; }
.brand-mark .leaf-b { animation: wb-leaf-right 7.5s ease-in-out infinite; }

@keyframes wb-leaf-left {
  0%, 86%, 100% { transform: rotate(-36deg); }
  91% { transform: rotate(-30deg); }
  96% { transform: rotate(-39deg); }
}

@keyframes wb-leaf-right {
  0%, 86%, 100% { transform: rotate(38deg); }
  91% { transform: rotate(32deg); }
  96% { transform: rotate(41deg); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark .leaf-a,
  .brand-mark .leaf-b { animation: none; }
}

/* --- Empty states: one quiet shape, one line of text --- */
.empty-state,
.search-empty,
.control-empty,
.focus-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--wb-muted);
  font-size: 13px;
  line-height: 1.75;
}

.empty-state { padding: 34px 16px; }
.search-empty { padding: 46px 16px; }
.control-empty { padding: 22px 10px; font-size: 12px; }
.focus-empty { padding: 18px 14px; font-size: 12px; }

.empty-state::before,
.search-empty::before,
.control-empty::before,
.focus-empty::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    var(--wb-accent) 0 4.5px,
    var(--wb-canvas) 5px 100%);
  opacity: .5;
}

[data-wb-theme="night"] .empty-state::before,
[data-wb-theme="night"] .search-empty::before,
[data-wb-theme="night"] .control-empty::before,
[data-wb-theme="night"] .focus-empty::before {
  background: radial-gradient(circle at 50% 50%,
    #d9a45c 0 4.5px,
    #2c2724 5px 100%);
}

/* --- Night: notification center + small text contrast --- */
[data-wb-theme="night"] .modal-header h2 {
  color: #efe7da;
}

[data-wb-theme="night"] .modal-header p {
  color: #94979f;
}

[data-wb-theme="night"] .modal-card h3 {
  color: #d7cfc2;
}

[data-wb-theme="night"] .notification-push-controls {
  background: #1f1c1a;
  border-color: #443a30;
}

[data-wb-theme="night"] #notificationPushButton {
  background: #2c2724;
  border-color: #4e4339;
  color: #ede4d6;
}

[data-wb-theme="night"] .notification-list,
[data-wb-theme="night"] .notification-row,
[data-wb-theme="night"] .notification-tasks {
  border-color: #443a30;
}

[data-wb-theme="night"] .field-hint {
  color: #8e919e;
}

[data-wb-theme="night"] input::placeholder,
[data-wb-theme="night"] textarea::placeholder {
  color: #7f828f;
}

[data-wb-theme="night"] .hero p {
  color: #b9b3a7;
}

[data-wb-theme="night"] .modal-backdrop {
  background: rgba(6, 7, 10, .62);
}

[data-wb-theme="night"] .hero:after {
  background: rgba(226, 199, 160, .05);
}

[data-wb-theme="night"] .task-check {
  background: #332d26;
  border-color: #6b5d4e;
}

[data-wb-theme="night"] .task-check:hover {
  border-color: #d9a45c;
  box-shadow: 0 0 0 3px rgba(217, 164, 92, .12);
}

[data-wb-theme="night"] .task-check.done {
  background: #3f9d7c;
  border-color: #3f9d7c;
  box-shadow: 0 0 0 4px rgba(63, 157, 124, .16);
}

[data-wb-theme="night"] .filter-pill {
  background: #2c2724;
  border-color: #3a3e50;
  color: #c9c3b8;
}

[data-wb-theme="night"] .filter-pill:hover {
  border-color: #565b70;
  color: #efe7da;
}

/* --- Boot skeleton: shown until /api/data lands --- */
.boot-skeleton {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  gap: 24px;
  padding: 22px 24px;
  background: var(--wb-canvas);
  transition: opacity .22s ease;
}

.boot-skeleton.is-done {
  opacity: 0;
  pointer-events: none;
}

.boot-rail {
  width: 216px;
  flex: 0 0 216px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}

.boot-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.boot-block {
  border-radius: 10px;
  background: linear-gradient(90deg, #f0eade 0%, #f7f3ec 50%, #f0eade 100%);
  background-size: 220% 100%;
  animation: boot-shimmer 1.5s ease-in-out infinite;
}

.boot-brand {
  width: 132px;
  height: 22px;
  border-radius: 8px;
}

.boot-line {
  height: 12px;
  border-radius: 6px;
}

.boot-search {
  height: 40px;
  width: 56%;
  border-radius: 12px;
  margin-bottom: 4px;
}

.boot-hero {
  height: 122px;
  border-radius: 18px;
}

.boot-cards {
  display: flex;
  gap: 18px;
  flex: 1;
  min-height: 0;
}

.boot-card {
  flex: 7;
  border-radius: 17px;
}

.boot-card-narrow {
  flex: 5;
}

@keyframes boot-shimmer {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

[data-wb-theme="night"] .boot-skeleton {
  background: var(--wb-canvas);
}

[data-wb-theme="night"] .boot-block {
  background: linear-gradient(90deg, #211e1b 0%, #2c2726 50%, #211e1b 100%);
  background-size: 220% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .boot-block { animation: none; }
  .boot-skeleton { transition: none; }
}

@media (max-width: 640px) {
  .boot-rail { display: none; }
  .boot-skeleton { padding: 16px; }
  .boot-card { min-height: 240px; }
}

/* --- Command palette --- */
.cmdk-key {
  border: 1px solid #eae3d6;
  background: #fdfbf7;
  color: #a89a86;
  font-size: 10.5px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 auto;
  margin-left: 6px;
  font-family: inherit;
  transition: border-color .15s, color .15s;
}

.cmdk-key:hover {
  border-color: #e6d6bd;
  color: #c89550;
}

[data-wb-theme="night"] .cmdk-key {
  border-color: #3a332c;
  background: #2a2623;
  color: #7a7e8d;
}

[data-wb-theme="night"] .cmdk-key:hover {
  border-color: #4a4433;
  color: #c9a468;
}

@media (max-width: 640px) {
  .cmdk-key { display: none; }
}

.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 13vh;
  background: rgba(30, 26, 20, .26);
}

.cmdk-panel {
  width: min(620px, 92vw);
  background: var(--wb-surface, #fff);
  border: 1px solid var(--wb-line, #f1e9dc);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(60, 48, 32, .22);
  overflow: hidden;
}

.cmdk-input:focus-visible {
  outline: none;
}

.cmdk-input {
  width: 100%;
  border: 0;
  outline: none;
  padding: 16px 18px;
  font-size: 15px;
  font-family: inherit;
  background: transparent;
  color: var(--wb-ink, #2b2620);
  border-bottom: 1px solid #efe9df;
}

.cmdk-list {
  max-height: 60vh;
  overflow: auto;
  padding: 6px;
}

.cmdk-group {
  padding: 7px 12px 3px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--wb-muted, #a89a86);
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--wb-ink-2, #3a342c);
}

.cmdk-item[data-active="true"] {
  background: var(--wb-accent-soft, #fdf6ec);
}

.cmdk-badge {
  margin-left: auto;
  font-size: 10.5px;
  color: #b9ab96;
  border: 1px solid #f0e8db;
  border-radius: 5px;
  padding: 2px 5px;
}

[data-wb-theme="night"] .cmdk-badge {
  color: #6f7382;
  border-color: #3a332c;
}

.cmdk-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--wb-muted, #a89a86);
}

.cmdk-empty {
  padding: 26px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--wb-muted, #a89a86);
}

.cmdk-foot {
  display: flex;
  gap: 16px;
  padding: 9px 16px;
  border-top: 1px solid #f2ece3;
  font-size: 11px;
  color: var(--wb-muted, #a89a86);
}

[data-wb-theme="night"] .cmdk-key {
  border: 1px solid #eae3d6;
  background: #fdfbf7;
  color: #a89a86;
  font-size: 10.5px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 auto;
  margin-left: 6px;
  font-family: inherit;
  transition: border-color .15s, color .15s;
}

.cmdk-key:hover {
  border-color: #e6d6bd;
  color: #c89550;
}

[data-wb-theme="night"] .cmdk-key {
  border-color: #3a332c;
  background: #2a2623;
  color: #7a7e8d;
}

[data-wb-theme="night"] .cmdk-key:hover {
  border-color: #4a4433;
  color: #c9a468;
}

@media (max-width: 640px) {
  .cmdk-key { display: none; }
}

.cmdk-overlay {
  background: rgba(6, 7, 10, .58);
}

[data-wb-theme="night"] .cmdk-panel {
  background: #1b1e26;
  border-color: #2f3342;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .62);
}

[data-wb-theme="night"] .cmdk-input {
  color: #efe7da;
  border-bottom-color: rgba(255, 255, 255, .08);
}

[data-wb-theme="night"] .cmdk-input::placeholder {
  color: #7f828f;
}

[data-wb-theme="night"] .cmdk-item {
  color: #d7d0c4;
}

[data-wb-theme="night"] .cmdk-item[data-active="true"] {
  background: #2c2724;
}

[data-wb-theme="night"] .cmdk-foot {
  border-top-color: rgba(255, 255, 255, .08);
}

/* --- Shortcut help --- */
.shortcut-list {
  padding: 4px 22px 20px;
}

.shortcut-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--wb-muted, #a89a86);
}

.shortcut-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--wb-ink-2, #3a342c);
  border-bottom: 1px solid #f5efe6;
}

.shortcut-row:last-child {
  border-bottom: 0;
}

.shortcut-key {
  flex: 0 0 auto;
  min-width: 108px;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: #8a7d6a;
  background: #faf6ef;
  border: 1px solid #efe7d9;
  border-radius: 6px;
  padding: 3px 7px;
  text-align: center;
}

[data-wb-theme="night"] .shortcut-row {
  color: #d7d0c4;
  border-bottom-color: #2c2f3b;
}

[data-wb-theme="night"] .shortcut-key {
  color: #a29b8d;
  background: #262a35;
  border-color: #3a332c;
}

/* Night: the close button shipped with a near-white plate that glowed. */
[data-wb-theme="night"] .modal-close {
  background: #2c2724;
  color: #9a9daa;
}

[data-wb-theme="night"] .modal-close:hover {
  background: #343a49;
  color: #d9ae6b;
}

/* ============================================================
   Task row quick actions + inline row menu + undo toast
   ============================================================ */
.mini-icon-button.neutral:hover,
.mini-icon-button.neutral:focus-visible {
  background: #f7f1e8;
  color: #c08c3c;
}

.row-menu {
  position: fixed;
  z-index: 70;
  min-width: 176px;
  max-width: min(90vw, 280px);
  padding: 6px;
  background: #fff;
  border: 1px solid #f2efe9;
  border-radius: 13px;
  box-shadow: 0 16px 44px rgba(58, 45, 27, .16), 0 2px 6px rgba(58, 45, 27, .05);
  animation: rowMenuIn .13s ease;
}

.row-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #4b4f60;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.row-menu-item:hover,
.row-menu-item:focus-visible {
  background: #fdf7ef;
  color: #c08c3c;
  outline: none;
}

.row-menu-icon {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: #b9a68c;
  flex: 0 0 auto;
}

.row-menu-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

.row-menu-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-menu-meta {
  margin-left: auto;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #a9abb6;
  font-size: 11px;
}

@keyframes rowMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.toast { display: flex; align-items: center; gap: 6px; }
/* .toast-root is pointer-events:none so it never blocks the page; the toast
   itself must opt back in or an undo button inside it is unclickable. */
.toast { pointer-events: auto; }
.toast-text { min-width: 0; }
.toast-link { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.toast-link:hover { color: #fff; }

@media (max-width: 640px) {
  .row-menu { min-width: 160px; }
  .row-menu-item { padding: 10px; font-size: 13px; }
}

/* --- Night: row menu + neutral row buttons --- */
[data-wb-theme="night"] .row-menu {
  background: #2c2724;
  border-color: #4e4339;
  box-shadow: 0 16px 44px rgba(4, 5, 10, .5);
}

[data-wb-theme="night"] .row-menu-item { color: #e9ddc9; }
[data-wb-theme="night"] .row-menu-item:hover,
[data-wb-theme="night"] .row-menu-item:focus-visible { background: #4a3420; color: #f0bd71; }
[data-wb-theme="night"] .row-menu-meta { color: #9a9488; }
[data-wb-theme="night"] .mini-icon-button { color: #9c97a8; }
[data-wb-theme="night"] .mini-icon-button.neutral:hover,
[data-wb-theme="night"] .mini-icon-button.neutral:focus-visible { background: #3a3023; color: #f0bd71; }

/* --- Natural-language quick add --- */
.quick-add-panel { display: grid; gap: 12px; }
.quick-add-input { font-size: 15px; padding: 12px 14px; }
.quick-add-preview { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fdf7ef;
  color: #8a7452;
  font-size: 11.5px;
  line-height: 1.4;
  white-space: nowrap;
}
.quick-chip svg { width: 13px; height: 13px; }
.quick-chip.muted { background: #f6f4f0; color: #a9abb6; }
.quick-add-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

[data-wb-theme="night"] .quick-chip { background: #3a3023; color: #e9ddc9; }
[data-wb-theme="night"] .quick-chip.muted { background: #332d26; color: #8f8b9c; }

/* --- Layout drag: drop preview + occupied-slot hint --- */
.workbench-layout-grid { position: relative; }
.layout-drop-ghost {
  position: absolute;
  z-index: 3;
  border-radius: 16px;
  border: 1.5px dashed rgba(191, 150, 94, .6);
  background: rgba(248, 243, 235, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, border-color .12s ease, background .12s ease;
}
.layout-drop-ghost.is-active { opacity: 1; }
.layout-drop-ghost.is-displaced {
  border-style: solid;
  border-color: rgba(206, 138, 74, .9);
  background: rgba(248, 214, 176, .26);
}
.layout-drop-ghost-note {
  position: absolute;
  right: 8px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(255, 252, 247, .9);
  color: #a4763c;
  font-size: 10.5px;
  line-height: 1.5;
  white-space: nowrap;
}
.layout-drop-ghost:not(.is-displaced) .layout-drop-ghost-note { display: none; }

[data-wb-theme="night"] .layout-drop-ghost {
  border-color: rgba(240, 189, 113, .45);
  background: rgba(240, 189, 113, .08);
}
[data-wb-theme="night"] .layout-drop-ghost.is-displaced {
  border-color: rgba(240, 189, 113, .85);
  background: rgba(240, 189, 113, .16);
}
[data-wb-theme="night"] .layout-drop-ghost-note { background: rgba(30, 32, 44, .85); color: #f0bd71; }

[data-wb-theme="night"] .workbench-layout-profile,
[data-wb-theme="night"] .workbench-layout-status { color: var(--wb-muted); }

/* Cards that only ever existed in the light palette (app.css .card, and the
   stat/search/modal/auth variants) — the night theme read white-on-white. */
[data-wb-theme="night"] .card,
[data-wb-theme="night"] .stat-card,
[data-wb-theme="night"] .identity-side-card,
[data-wb-theme="night"] .identity-tasks-card,
[data-wb-theme="night"] .search-result,
[data-wb-theme="night"] .modal-card,
[data-wb-theme="night"] .auth-card,
[data-wb-theme="night"] .locale-choice,
[data-wb-theme="night"] .text-input,
[data-wb-theme="night"] .select-input,
[data-wb-theme="night"] .textarea-input {
  background: var(--wb-surface);
  border-color: var(--wb-line);
  color: var(--wb-ink);
}
[data-wb-theme="night"] .modal-close,
[data-wb-theme="night"] .language-menu { background: #2c2724; border-color: var(--wb-line); }
[data-wb-theme="night"] .search-wrap { background: #2a2623; }
[data-wb-theme="night"] .search-wrap:focus-within { background: #2c2724; }
[data-wb-theme="night"] .loading-skeleton { background: linear-gradient(90deg,#2a2623 25%,#332d26 50%,#2a2623 75%); background-size: 200% 100%; }
[data-wb-theme="night"] .focus-empty { border-color: var(--wb-line); }
[data-wb-theme="night"] .keyboard-hint { border-color: var(--wb-line); }
[data-wb-theme="night"] .nav-divider { background: var(--wb-line-soft); }
[data-wb-theme="night"] .hero:after { background: rgba(240,189,113,.05); }

/* Learner module keeps its own light palette in modules/learner/module.css. */
html[data-wb-theme="night"] #mainContent .learner-module .learner-arrangements-card,
html[data-wb-theme="night"] #mainContent .learner-module .learner-materials-preview { background: var(--wb-surface); border-color: var(--wb-line); }
html[data-wb-theme="night"] #mainContent .learner-module .learner-materials-location,
html[data-wb-theme="night"] #mainContent .learner-module .learner-material-preview-heading,
html[data-wb-theme="night"] #mainContent .learner-module .learner-milestone-target,
html[data-wb-theme="night"] #mainContent .learner-module .learner-material-viewer { background: #2a2623; border-color: var(--wb-line); }
html[data-wb-theme="night"] #mainContent .learner-module .learner-shortcuts-icon,
html[data-wb-theme="night"] #mainContent .learner-module .learner-milestones-icon,
html[data-wb-theme="night"] #mainContent .learner-module .learner-materials-icon { background: #3a3023; color: var(--wb-accent-strong); }

/* Per-module CSS ships #mainContent-prefixed light rules,
   so beating it needs one more specificity step: html + attribute + #mainContent. */
html[data-wb-theme="night"] #mainContent .card,
html[data-wb-theme="night"] #mainContent .stat-card,
html[data-wb-theme="night"] #mainContent .search-result,
html[data-wb-theme="night"] #mainContent .section-card {
  background: var(--module-bg, var(--wb-surface)) !important;
  border-color: var(--wb-line);
}
/* The module style sheets paint their own gradient on these cards; nothing
   short of !important reaches across that file boundary. */
html[data-wb-theme="night"] #mainContent .learner-shortcuts,
html[data-wb-theme="night"] #mainContent .learner-materials,
html[data-wb-theme="night"] #mainContent .worker-shortcuts { background: var(--wb-surface) !important; }

/* Module headings/body text are hard-coded dark (#353748 / #85899a) and go
   unreadable once the card itself turns dark. One specificity step above the
   module sheets (html + [data-wb-theme] + #mainContent + .x-module + element). */
html[data-wb-theme="night"] #mainContent .learner-module h2,
html[data-wb-theme="night"] #mainContent .learner-module h3,
html[data-wb-theme="night"] #mainContent .worker-module h2,
html[data-wb-theme="night"] #mainContent .worker-module h3,
html[data-wb-theme="night"] #mainContent .identity-module h2,
html[data-wb-theme="night"] #mainContent .identity-module h3 { color: var(--wb-ink-strong); }
html[data-wb-theme="night"] #mainContent .learner-module p,
html[data-wb-theme="night"] #mainContent .learner-module small,
html[data-wb-theme="night"] #mainContent .worker-module p,
html[data-wb-theme="night"] #mainContent .worker-module small,
html[data-wb-theme="night"] #mainContent .identity-module p,
html[data-wb-theme="night"] #mainContent .identity-module small { color: var(--wb-muted); }

/* Settings/modal section rules are near-white hairlines (#f4f2ef) that glow
   against the night surface. */
[data-wb-theme="night"] .settings-section { border-top-color: var(--wb-line-soft); }
[data-wb-theme="night"] .modal-footer,
[data-wb-theme="night"] .field-label { color: var(--wb-muted); }

/* --- Identity colour picker ------------------------------------------- */
.identity-color-picker { display: flex; flex-direction: column; gap: 8px; }
.identity-swatches { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.identity-swatch {
  width: 28px; height: 28px; padding: 0; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--wb-line); background: #fff; display: inline-grid; place-items: center;
  transition: border-color .15s, box-shadow .15s;
}
.identity-swatch::after { content: ""; width: 16px; height: 16px; border-radius: 5px; }
.identity-swatch-violet::after { background: #e1b36d; }
.identity-swatch-blue::after { background: #5799db; }
.identity-swatch-green::after { background: #4ca483; }
.identity-swatch-amber::after { background: #d3a64d; }
.identity-swatch-rose::after { background: #d1848d; }
.identity-swatch-custom { position: relative; overflow: hidden; }
.identity-swatch-custom::after { background: conic-gradient(#e1b36d,#8fb8e8,#8fcfae,#e6c065,#e6a1a8,#e1b36d); }
.identity-swatch-custom input[type="color"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0; background: none; cursor: pointer; opacity: 0;
}
.identity-swatch.selected { border-color: var(--wb-accent); box-shadow: 0 0 0 3px rgb(225 179 109 / 22%); }

/* User-picked accents paint via --identity-accent; the five preset names keep
   their hand-tuned pairs and never use these rules. */
.identity-tag.custom {
  background: color-mix(in srgb, var(--identity-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--identity-accent) 38%, transparent);
  color: var(--identity-accent);
}
.plan-icon.custom,
.identity-mini-icon.custom,
.identity-hero-icon.custom {
  background: color-mix(in srgb, var(--identity-accent) 20%, transparent);
  color: var(--identity-accent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--identity-accent) 46%, transparent);
}
.identity-color-dot.custom { background: var(--identity-accent); }

html[data-wb-theme="night"] .identity-tag.custom,
html[data-wb-theme="night"] .plan-icon.custom,
html[data-wb-theme="night"] .identity-mini-icon.custom,
html[data-wb-theme="night"] .identity-hero-icon.custom {
  background: color-mix(in srgb, var(--identity-accent) 24%, #262220);
  color: color-mix(in srgb, var(--identity-accent) 78%, #ffffff);
}
html[data-wb-theme="night"] .identity-swatch { background: #221f1c; }

/* Module surfaces that still carried light-theme or blue-grey paint. */
/* module.css scopes these to #mainContent .learner-module, which outranks a
   plain [data-wb-theme] prefix, so mirror the scope here. */
html[data-wb-theme="night"] #mainContent .learner-module .learner-plan-metric {
  background: #262220;
  border-color: var(--wb-line);
  color: var(--wb-ink);
}
html[data-wb-theme="night"] #mainContent .learner-module .learner-plan-metric small { color: var(--wb-muted); }
html[data-wb-theme="night"] .canvas-toolbar {
  background: rgb(38 34 32 / 82%);
  border-color: var(--wb-line);
}
html[data-wb-theme="night"] #mainContent .learner-module .learner-plan-metric strong,
html[data-wb-theme="night"] #mainContent .learner-module .learner-plan-metric b { color: var(--wb-ink-strong); }

/* Skeleton rhythm used to ride on inline widths, which CSP drops; key it off
   the rail's child order instead. */
.boot-rail .boot-line:nth-child(2) { width: 72%; }
.boot-rail .boot-line:nth-child(3) { width: 54%; }
.boot-rail .boot-line:nth-child(4) { width: 63%; }
.boot-rail .boot-line:nth-child(5) { width: 48%; }
.boot-rail .boot-line:nth-child(6) { width: 58%; }

/* ============================================================
   Unified layout bar — overview / identity / toolbox share one look.
   ============================================================ */
.wb-layout-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:46px;margin:0 0 14px;padding:7px 10px;border:1px solid #f3ece1;border-radius:14px;background:rgba(255,255,255,.62);color:#8a8071;font-size:12px}
.wb-layout-scope{color:#9a9184;font-size:12px;padding:0 4px}
.wb-layout-btn{min-height:32px;padding:0 13px;border:1px solid #eee7db;border-radius:10px;background:#fff;color:#8d7045;font-size:12px;font-weight:560;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:border-color .16s,color .16s,background .16s;white-space:nowrap}
.wb-layout-btn:hover{border-color:#f0dfc2;background:#fffdf9;color:#c08b3c}
.wb-layout-btn.is-primary{background:linear-gradient(135deg,#e6bd80,#dca95c);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(223,172,96,.22)}
.wb-layout-btn.is-primary:hover{background:linear-gradient(135deg,#e1b36d,#c9974b);color:#fff}
.wb-layout-btn.is-primary[aria-pressed="true"]{background:#46392a;border-color:transparent;color:#f6e7cd;box-shadow:none}
.wb-layout-btn.is-ghost{background:transparent;border-color:transparent;color:#c08b3c}
.wb-layout-btn.is-ghost:hover{background:#fdf8f0;border-color:#f0dfc2}
.wb-layout-btn:disabled,.wb-layout-btn:disabled:hover{opacity:.45;cursor:not-allowed;background:#fff;border-color:#eee7db;color:#a99f8d;box-shadow:none}
.wb-layout-btn.is-primary:disabled,.wb-layout-btn.is-primary:disabled:hover{background:linear-gradient(135deg,#e6bd80,#dca95c);color:#fff}
.wb-layout-status{margin-left:auto;font-size:11px;color:#9a9184;text-align:right}
.wb-layout-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#8a8071;cursor:pointer;user-select:none}
.wb-layout-check input{accent-color:#dcaa60}
.wb-layout-more{position:relative}
.wb-layout-more>summary{list-style:none;min-height:32px;width:32px;border:1px solid #eee7db;border-radius:10px;background:#fff;color:#8d7045;display:grid;place-items:center;cursor:pointer;font-size:14px}
.wb-layout-more>summary::-webkit-details-marker{display:none}
.wb-layout-more[open]>summary{border-color:#f0dfc2;color:#c08b3c}
.wb-layout-more-menu{position:absolute;right:0;top:36px;min-width:176px;background:#fff;border:1px solid #f0e8da;border-radius:12px;box-shadow:0 14px 34px rgba(70,55,32,.12);padding:6px;z-index:30;display:flex;flex-direction:column;gap:2px}
.wb-layout-more-menu button{border:0;background:transparent;border-radius:8px;padding:8px 10px;text-align:left;font-size:12px;color:#5d5647;cursor:pointer}
.wb-layout-more-menu>span{padding:6px 10px 2px;font-size:11px;color:#9a9184}
.wb-layout-more-menu button:hover{background:#fcf7ee;color:#c08b3c}
.wb-layout-more-menu .is-danger{color:#bd5d66}
.wb-layout-more-menu .is-danger:hover{background:#fdf1f1;color:#b04852}

/* --- Module config dialog (shared by canvas.js + layout.js) --- */
.wb-config-dialog{border:0;border-radius:20px;padding:0;width:min(100%,460px);max-height:88vh;overflow:hidden;box-shadow:0 24px 80px rgba(47,36,20,.25);background:#fff;color:#171a29}
.wb-config-dialog::backdrop{background:rgba(46,39,28,.34);backdrop-filter:blur(3px)}
.wb-config-head{display:flex;align-items:center;gap:10px;padding:18px 20px 0}
.wb-config-head h2{margin:0;font-size:17px;letter-spacing:-.02em}
.wb-config-head button{margin-left:auto;width:30px;height:30px;border:0;border-radius:9px;background:#f7f6f4;color:#858895;font-size:18px;cursor:pointer}
.wb-config-body{padding:14px 20px 4px;overflow-y:auto;max-height:calc(88vh - 132px)}
.wb-config-group{margin:0 0 16px}
.wb-config-group>h3{margin:0 0 9px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a09a8c;font-weight:700}
.wb-config-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.wb-config-row>label{flex:0 0 62px;font-size:12px;color:#575b6c;font-weight:600}
.wb-config-row .text-input{min-height:36px;padding:8px 10px;font-size:12px}
.wb-config-variants{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:1}
.wb-config-variants button{min-height:34px;border:1px solid #f1efeb;border-radius:9px;background:#fff;font-size:11px;color:#5c6070;cursor:pointer}
.wb-config-variants button.selected{background:#fcf8f3;border-color:#faf2e6;color:#cc9a50;font-weight:650}
.wb-config-swatches{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap}
.wb-config-swatches input[type=color]{width:38px;height:30px;padding:2px;border:1px solid #eee7db;border-radius:8px;background:#fff;cursor:pointer}
.wb-config-swatches input[type=number]{width:64px;min-height:30px;border:1px solid #eee7db;border-radius:8px;padding:0 8px;font-size:12px}
.wb-config-swatches input[type=range]{flex:1;min-width:90px;accent-color:#dcaa60}
.wb-config-value{min-width:40px;text-align:right;font-size:11px;color:#999ca9}
.wb-config-checks{display:flex;gap:16px;flex-wrap:wrap}
.wb-config-checks label{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#575b6c;cursor:pointer}
.wb-config-checks input{accent-color:#dcaa60;width:15px;height:15px}
.wb-config-note{margin:2px 0 12px;font-size:11px;color:#999ca9;line-height:1.6}
.wb-config-foot{display:flex;align-items:center;gap:8px;padding:12px 20px 16px;border-top:1px solid #f4f2ef}
.wb-config-foot .spacer{flex:1}

/* --- Settings page (replaces the old modal) --- */
.settings-page{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:start}
.settings-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:3px}
.settings-nav button{border:0;background:transparent;border-radius:10px;padding:10px 13px;text-align:left;font-size:13px;color:#5d5647;cursor:pointer;display:flex;align-items:center;gap:10px}
.settings-nav button:hover{background:#fdfbf8;color:#bb8c46}
.settings-nav button.active{background:#fcf7f0;color:#d19d50;font-weight:640}
.settings-nav svg{width:17px;height:17px;flex:0 0 auto}
.settings-pane{min-width:0;display:flex;flex-direction:column;gap:16px}
.settings-card{background:#fff;border:1px solid #f3f1ed;border-radius:17px;padding:20px 22px}
.settings-card>h2{margin:0 0 4px;font-size:16px}
.settings-card>p.settings-card-sub{margin:0 0 14px;font-size:12px;color:#8f93a0;line-height:1.6}
.settings-status-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;font-size:11px;background:#f8f7f5;color:#9496a1}
.settings-status-pill.ok{background:#eff8f4;color:#3b9476}
.settings-status-pill.warn{background:#fff6e6;color:#a87920}
.settings-status-pill.bad{background:#fdf1f1;color:#bd5d66}
.settings-kv{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 14px;font-size:12px;color:#6b6f7e;margin:0}
.settings-kv dt{color:#999ca9}
.settings-kv dd{margin:0;overflow-wrap:anywhere}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #f4f2ef}
.settings-row.is-first{border-top:0}
.settings-row:first-of-type{border-top:0}
.settings-row-copy strong{display:block;font-size:13px;color:#3c4050;margin-bottom:3px}
.settings-row-copy small{font-size:11px;color:#999ca9;line-height:1.55}
@media(max-width:760px){.settings-page{grid-template-columns:1fr;gap:14px}.settings-nav{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}.settings-nav button{white-space:nowrap;padding:8px 12px}.settings-card{padding:16px 15px}}

/* --- AI pane tabs (conversation / approvals) --- */
.hermes-tabs{display:flex;align-items:center;gap:4px;padding:6px clamp(22px,3.3vw,52px) 0;background:rgba(255,255,255,.76);border-bottom:1px solid #f3f1ee;flex:0 0 auto}
.hermes-tab{min-height:36px;padding:0 14px;border:0;border-bottom:2px solid transparent;background:transparent;font-size:13px;color:#7c8090;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.hermes-tab:hover{color:#c08b3c}
.hermes-tab.active{color:#c08b3c;border-bottom-color:#dcaa60;font-weight:640}
.hermes-tab .tab-dot{width:7px;height:7px;border-radius:50%;background:#e9c691}
.hermes-tab-external{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;color:#8b8f9c;cursor:pointer;text-decoration:none;transition:background .15s ease,color .15s ease}
.hermes-tab-external:hover{background:#f7f2e9;color:#c08b3c}
.hermes-tab-external:focus-visible{outline:2px solid #dcaa60;outline-offset:1px}
.hermes-tab-external svg{width:16px;height:16px}
.hermes-tab-external[hidden]{display:none}
.hermes-tabview{flex:1 1 auto;min-height:0;overflow:auto;padding:20px clamp(22px,3.3vw,52px) 40px}

/* --- Night theme for the new chrome --- */
[data-wb-theme="night"] .wb-layout-bar{background:rgba(36,39,53,.82);border-color:#4e4339;color:#cfc9c0}
[data-wb-theme="night"] .wb-layout-scope,[data-wb-theme="night"] .wb-layout-status{color:#8f8a80}
[data-wb-theme="night"] .wb-layout-btn{background:#2c2724;border-color:#4e4339;color:#e9ddc9}
[data-wb-theme="night"] .wb-layout-btn:hover{border-color:#c7893b;color:#f0bd71;background:#33291d}
[data-wb-theme="night"] .wb-layout-btn.is-primary,[data-wb-theme="night"] .wb-layout-btn.is-primary:hover{background:linear-gradient(135deg,#c7893b,#a86f2c);color:#fff}
[data-wb-theme="night"] .wb-layout-btn.is-primary[aria-pressed="true"]{background:#f0bd71;color:#241a0e}
[data-wb-theme="night"] .wb-layout-btn:disabled,[data-wb-theme="night"] .wb-layout-btn:disabled:hover{background:#23262f;border-color:#34374a;color:#6f7285;opacity:.6}
[data-wb-theme="night"] .wb-layout-more>summary{background:#2c2724;border-color:#4e4339;color:#e9ddc9}
[data-wb-theme="night"] .wb-layout-more-menu{background:#262220;border-color:#4e4339;box-shadow:0 14px 34px rgba(0,0,0,.4)}
[data-wb-theme="night"] .wb-layout-more-menu button{color:#d8d2c6}
[data-wb-theme="night"] .wb-layout-more-menu button:hover{background:#3a3023;color:#f0bd71}
[data-wb-theme="night"] .wb-config-dialog{background:#262220;color:#fbf8f3}
[data-wb-theme="night"] .wb-config-head button{background:#332e29;color:#cfc9c0}
[data-wb-theme="night"] .wb-config-group>h3{color:#8f8a80}
[data-wb-theme="night"] .wb-config-row>label,[data-wb-theme="night"] .wb-config-checks label{color:#d8d2c6}
[data-wb-theme="night"] .wb-config-variants button{background:#2c2724;border-color:#4e4339;color:#e7e3da}
[data-wb-theme="night"] .wb-config-variants button.selected{background:#4a3420;border-color:#c7893b;color:#f0bd71}
[data-wb-theme="night"] .wb-config-swatches input[type=color]{background:#2c2724;border-color:#4e4339}
[data-wb-theme="night"] .wb-config-swatches input[type=number]{background:#2c2724;border-color:#4e4339;color:#e7e3da}
[data-wb-theme="night"] .wb-config-foot{border-top-color:#443a30}
[data-wb-theme="night"] .settings-card{background:#262220;border-color:#443a30}
[data-wb-theme="night"] .settings-card>h2{color:#f0ece4}
[data-wb-theme="night"] .settings-row{border-top-color:#443a30}
[data-wb-theme="night"] .settings-row-copy strong{color:#ede4d6}
[data-wb-theme="night"] .settings-nav button{color:#c5bfb5}
[data-wb-theme="night"] .settings-nav button:hover{background:#3a3023;color:#f0bd71}
[data-wb-theme="night"] .settings-nav button.active{background:#4a3420;color:#f0bd71}
[data-wb-theme="night"] .hermes-tabs{background:rgba(30,32,44,.92);border-bottom-color:#34374a}
[data-wb-theme="night"] .hermes-tab{color:#9aa0b4}
[data-wb-theme="night"] .hermes-tab:hover{color:#f0bd71}
[data-wb-theme="night"] .hermes-tab.active{color:#f0bd71;border-bottom-color:#c7893b}
[data-wb-theme="night"] .hermes-tab-external{color:#9aa0b4}
[data-wb-theme="night"] .hermes-tab-external:hover{background:#2b2e3c;color:#f0bd71}

/* Settings page stacked (top-bottom) mode. */
.settings-page-stacked{display:block;max-width:860px;margin:0 auto}
.settings-page-stacked .settings-pane{gap:14px}