/* Application-wide professional appearance layer.
 * Character remains the unchanged fallback; only neutral appearance consumes
 * these tokens and overrides. This file must load after panel styles. */

:root {
  --app-font-caption: 0.625rem;
  --app-font-small: 0.6875rem;
  --app-font-body: 0.8125rem;
  --app-font-control: 0.875rem;
  --app-font-title: 0.9375rem;
  --app-font-display: 1.125rem;
  --app-font-hero: 1.5rem;
  --app-line-body: 1.45;
  --app-page-bg: #eeeeee;
  --app-panel-bg: #ffffff;
  --app-canvas-bg: #f5f6f7;
  --app-surface: #ffffff;
  --app-surface-muted: #f2f4f5;
  --app-surface-raised: #ffffff;
  --app-header-bg: var(--header-color, #ec4899);
  --app-header-fg: #ffffff;
  --app-text: #20252b;
  --app-text-muted: #66707a;
  --app-text-subtle: #87919a;
  --app-border: #d6dce1;
  --app-border-strong: #b8c1c9;
  --app-primary: #286f9f;
  --app-primary-hover: #205f89;
  --app-primary-soft: #e7f1f7;
  --app-secondary: #147d73;
  --app-secondary-hover: #0f695f;
  --app-secondary-soft: #e4f3f0;
  --app-accent: #a56b19;
  --app-accent-soft: #fff4df;
  --app-danger: #b42318;
  --app-danger-hover: #941d14;
  --app-danger-soft: #fff0ee;
  --app-success: #287a4b;
  --app-success-soft: #e9f5ed;
  --app-action-primary: #5d6973;
  --app-action-primary-hover: #4c5862;
  --app-neutral-action: #5d6973;
  --app-neutral-action-hover: #4c5862;
  --app-input-bg: #ffffff;
  --app-input-disabled: #edf0f2;
  --app-overlay: rgba(14, 19, 23, 0.46);
  --app-shadow-sm: 0 2px 8px rgba(28, 37, 44, 0.08);
  --app-shadow-md: 0 12px 28px rgba(28, 37, 44, 0.14);
  --app-focus: rgba(40, 111, 159, 0.25);
}

html[data-app-font-scale="small"] { font-size: 100%; }
html[data-app-font-scale="medium"] { font-size: 112.5%; }
html[data-app-font-scale="large"] { font-size: 125%; }

html[data-app-appearance="neutral"][data-app-color-mode="light"] {
  color-scheme: light;
  --app-page-bg: #e8ecef;
  --app-panel-bg: #f8f9fa;
  --app-canvas-bg: #f1f3f5;
  --app-surface: #ffffff;
  --app-surface-muted: #f0f2f4;
  --app-surface-raised: #ffffff;
  --app-header-bg: #f8f9fa;
  --app-header-fg: #20252b;
  --app-text: #20252b;
  --app-text-muted: #5f6972;
  --app-text-subtle: #7c8790;
  --app-border: #d5dbe0;
  --app-border-strong: #b5bec6;
  --app-input-bg: #ffffff;
  --app-input-disabled: #edf0f2;
  --app-overlay: rgba(14, 19, 23, 0.42);
  --app-shadow-sm: 0 2px 8px rgba(28, 37, 44, 0.08);
  --app-shadow-md: 0 14px 32px rgba(28, 37, 44, 0.15);

  --header-color: var(--app-header-bg);
  --dg-pink: var(--app-primary);
  --dg-pink-soft: var(--app-primary-soft);
  --dg-pink-gradient: linear-gradient(145deg, #367eaa, #245f88);
  --dg-text-dark: var(--app-text);
  --dg-text-body: var(--app-text-muted);
  --dg-text-muted: var(--app-text-muted);
  --dg-text-accent: var(--app-primary);
  --dg-text-error: var(--app-danger);
  --dg-text-on-dark: #ffffff;
  --dg-surface: var(--app-surface);
  --dg-surface-tint: var(--app-surface-muted);
  --dg-card-bg: var(--app-surface);
  --dg-card-border: var(--app-border);
  --dg-card-dark: #34434d;
  --dg-card-dark-deep: #20272c;
  --dg-shadow: rgba(28, 37, 44, 0.14);
  --dg-border-muted: var(--app-border);
  --dg-media-placeholder: linear-gradient(145deg, #edf1f3, #dfe9ee);
}

html[data-app-appearance="neutral"][data-app-color-mode="dark"] {
  color-scheme: dark;
  --app-page-bg: #090b0d;
  --app-panel-bg: #16191c;
  --app-canvas-bg: #181b1e;
  --app-surface: #20252a;
  --app-surface-muted: #272d32;
  --app-surface-raised: #2b3137;
  --app-header-bg: #202225;
  --app-header-fg: #f4f6f7;
  --app-text: #f1f3f4;
  --app-text-muted: #b2bbc2;
  --app-text-subtle: #8e989f;
  --app-border: #394148;
  --app-border-strong: #535e67;
  --app-primary: #55a6d4;
  --app-primary-hover: #70b7dc;
  --app-primary-soft: #203b4a;
  --app-secondary: #3cb5a6;
  --app-secondary-hover: #55c6b8;
  --app-secondary-soft: #1d3d39;
  --app-accent: #d2a34e;
  --app-accent-soft: #443821;
  --app-danger: #e56b62;
  --app-danger-hover: #ef8179;
  --app-danger-soft: #4a2826;
  --app-success: #65b781;
  --app-success-soft: #263f30;
  --app-action-primary: #65727c;
  --app-action-primary-hover: #74818b;
  --app-neutral-action: #525d66;
  --app-neutral-action-hover: #65717a;
  --app-input-bg: #1d2125;
  --app-input-disabled: #282d32;
  --app-overlay: rgba(0, 0, 0, 0.62);
  --app-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.26);
  --app-shadow-md: 0 16px 36px rgba(0, 0, 0, 0.42);
  --app-focus: rgba(85, 166, 212, 0.32);

  --header-color: var(--app-header-bg);
  --dg-pink: var(--app-primary);
  --dg-pink-soft: var(--app-primary-soft);
  --dg-pink-gradient: linear-gradient(145deg, #397fa8, #285f7e);
  --dg-text-dark: var(--app-text);
  --dg-text-body: var(--app-text-muted);
  --dg-text-muted: var(--app-text-muted);
  --dg-text-accent: var(--app-primary);
  --dg-text-error: var(--app-danger);
  --dg-text-on-dark: #ffffff;
  --dg-surface: var(--app-surface);
  --dg-surface-tint: var(--app-surface-muted);
  --dg-card-bg: var(--app-surface);
  --dg-card-border: var(--app-border);
  --dg-card-dark: #30383e;
  --dg-card-dark-deep: #171b1e;
  --dg-shadow: rgba(0, 0, 0, 0.34);
  --dg-border-muted: var(--app-border);
  --dg-media-placeholder: linear-gradient(145deg, #2c3338, #22323a);
}

/* Shells */
html[data-app-appearance="neutral"] body {
  background: var(--app-page-bg);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #boot {
  background: var(--app-panel-bg);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app .main {
  background: var(--app-panel-bg);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app .main:not(#chat-panel) > .main-bg {
  background-color: var(--app-canvas-bg) !important;
  background-image: none !important;
  opacity: 1 !important;
}

html[data-app-appearance="neutral"] #app .panel-wrapper {
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app .panel-header:not(.panel-header-chat) {
  background: var(--app-header-bg);
  color: var(--app-header-fg);
  border-bottom: 1px solid var(--app-border);
  box-shadow: none;
}

html[data-app-appearance="neutral"] #app .panel-header .btn-panel-header {
  color: var(--app-header-fg);
}

html[data-app-appearance="neutral"] #app .panel-header .btn-panel-header:hover,
html[data-app-appearance="neutral"] #app .panel-header .btn-panel-header:focus-visible {
  background: color-mix(in srgb, var(--app-header-fg) 10%, transparent);
  color: var(--app-header-fg);
  outline: none;
}

html[data-app-appearance="neutral"][data-app-color-mode="light"] #app .panel-header:not(.panel-header-chat) .btn-panel-header-icon {
  filter: brightness(0) saturate(100%) opacity(0.84);
}

html[data-app-appearance="neutral"][data-app-color-mode="dark"] #app .panel-header .btn-panel-header-icon {
  filter: brightness(0) invert(1) opacity(0.9);
}

html[data-app-appearance="neutral"] #app .panel-footer {
  background: var(--app-surface);
  border-top-color: var(--app-border);
  color: var(--app-text);
}

/* Forms and basic typography */
html[data-app-appearance="neutral"] #app .form-container,
html[data-app-appearance="neutral"] #app .emailpending-card,
html[data-app-appearance="neutral"] #app .deleteaccount-card {
  background: var(--app-surface);
  color: var(--app-text);
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-sm);
  border-radius: 8px;
}

html[data-app-appearance="neutral"] #app :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  background-color: var(--app-input-bg);
  color: var(--app-text);
  border-color: var(--app-border-strong);
}

html[data-app-appearance="neutral"] #app :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px var(--app-focus);
  outline: none;
}

html[data-app-appearance="neutral"] #app :is(input, select, textarea):disabled,
html[data-app-appearance="neutral"] #app :is(input, select, textarea)[readonly] {
  background-color: var(--app-input-disabled);
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app ::placeholder {
  color: var(--app-text-subtle);
  opacity: 1;
}

html[data-app-appearance="neutral"] #app :is(.label-sm, label, .form-title) {
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app a {
  color: var(--app-primary);
}

html[data-app-appearance="neutral"] #app :is(.login-legal-note, .createuser-legal-note, .emailpending-copy, .emailpending-small, .deleteaccount-copy) {
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app :is(.emailpending-title, .deleteaccount-email) {
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app .createuser-photo-box {
  background: var(--app-surface-muted);
  border-color: var(--app-border);
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app .createuser-photo-text {
  color: var(--app-text-muted);
}

/* Standard buttons */
html[data-app-appearance="neutral"] #app button.btn-blue,
html[data-app-appearance="neutral"] #app .btn-blue {
  background: var(--app-action-primary) !important;
  color: #ffffff;
  border-color: transparent;
}

html[data-app-appearance="neutral"] #app button.btn-blue:hover,
html[data-app-appearance="neutral"] #app .btn-blue:hover {
  background: var(--app-action-primary-hover) !important;
}

html[data-app-appearance="neutral"] #app button.btn-green,
html[data-app-appearance="neutral"] #app .btn-green {
  background: var(--app-secondary) !important;
  color: #ffffff;
  border-color: transparent;
}

html[data-app-appearance="neutral"] #app button.btn-green:hover,
html[data-app-appearance="neutral"] #app .btn-green:hover {
  background: var(--app-secondary-hover) !important;
}

html[data-app-appearance="neutral"] #app button.btn-red,
html[data-app-appearance="neutral"] #app .btn-red {
  background: var(--app-neutral-action) !important;
  color: #ffffff;
  border-color: transparent;
}

html[data-app-appearance="neutral"] #app button.btn-red:hover,
html[data-app-appearance="neutral"] #app .btn-red:hover {
  background: var(--app-neutral-action-hover) !important;
}

html[data-app-appearance="neutral"] #app :is(#edituser-delete-account-btn, #sessions-detail-archive-btn, #deleteaccount-confirm-code-btn, .session-header-exit-btn, .story-header-exit-btn) {
  background: var(--app-danger) !important;
  color: #ffffff;
}

html[data-app-appearance="neutral"] #app :is(#edituser-delete-account-btn, #sessions-detail-archive-btn, #deleteaccount-confirm-code-btn, .session-header-exit-btn, .story-header-exit-btn):hover {
  background: var(--app-danger-hover) !important;
}

html[data-app-appearance="neutral"] #app button.panel-media-button {
  --professional-button-bg: var(--app-action-primary);
  --professional-button-hover: var(--app-action-primary-hover);
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--professional-button-bg) 72%, var(--app-border));
  border-radius: 8px;
  background: var(--professional-button-bg) !important;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--professional-button-bg) 24%, transparent);
}

html[data-app-appearance="neutral"] #app button.panel-media-button:hover {
  background: var(--professional-button-hover) !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--professional-button-bg) 28%, transparent);
}

html[data-app-appearance="neutral"] #app button.panel-media-button:active {
  box-shadow: 0 1px 4px color-mix(in srgb, var(--professional-button-bg) 26%, transparent);
}

html[data-app-appearance="neutral"] #app button.panel-media-button::before,
html[data-app-appearance="neutral"] #app .panel-media-button__shine {
  display: none;
}

html[data-app-appearance="neutral"] #app button.panel-media-button:is(.panel-media-button--pink, .panel-media-button--blue) {
  --professional-button-bg: var(--app-action-primary);
  --professional-button-hover: var(--app-action-primary-hover);
}

html[data-app-appearance="neutral"] #app button.panel-media-button.panel-media-button--green {
  --professional-button-bg: var(--app-secondary);
  --professional-button-hover: var(--app-secondary-hover);
}

html[data-app-appearance="neutral"] #app button.panel-media-button.panel-media-button--red {
  --professional-button-bg: var(--app-neutral-action);
  --professional-button-hover: var(--app-neutral-action-hover);
}

html[data-app-appearance="neutral"] #app button.panel-media-button.panel-media-button--danger {
  --professional-button-bg: var(--app-danger);
  --professional-button-hover: var(--app-danger-hover);
}

html[data-app-appearance="neutral"] #app .panel-media-button__media-wrap {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

html[data-app-appearance="neutral"] #app .panel-media-button__label {
  color: #ffffff;
  text-shadow: none;
  letter-spacing: 0;
}

html[data-app-appearance="neutral"] #app .panel-action-button--danger {
  --pab-bg: color-mix(in srgb, var(--app-danger) 86%, transparent);
  --pab-hover-bg: var(--app-danger);
  --pab-active-bg: var(--app-danger-hover);
  --pab-shadow: color-mix(in srgb, var(--app-danger) 22%, transparent);
}

html[data-app-appearance="neutral"] #app .panel-action-button--primary {
  --pab-bg: var(--app-action-primary);
  --pab-hover-bg: var(--app-action-primary-hover);
  --pab-active-bg: var(--app-neutral-action);
}

html[data-app-appearance="neutral"] #app .panel-action-button--selected {
  --pab-bg: color-mix(in srgb, var(--app-secondary) 88%, transparent);
  --pab-hover-bg: var(--app-secondary);
  --pab-active-bg: var(--app-secondary-hover);
}

/* Shared enhanced form rows */
html[data-app-appearance="neutral"] {
  --pfc-body-border-radius: 8px;
  --pfc-body-label-color: var(--app-text-muted);
  --pfc-body-surface: var(--app-surface);
  --pfc-body-border: var(--app-border);
  --pfc-body-shadow: var(--app-shadow-sm);
  --pfc-select-arrow-color: var(--app-primary);
  --pfc-select-surface: var(--app-input-bg);
  --pfc-select-border: var(--app-border-strong);
  --pfc-select-shadow: none;
  --pfc-checkbox-border: var(--app-border-strong);
  --pfc-checkbox-surface: var(--app-input-bg);
  --pfc-checkbox-checked-start: var(--app-secondary);
  --pfc-checkbox-checked-end: var(--app-secondary-hover);
  --pfc-checkbox-checked-border: var(--app-secondary);
}

html[data-app-appearance="neutral"] #app :is(.panel-form-select, .panel-form-select-row, .panel-form-checkbox-row) {
  border-radius: 8px;
}

html[data-app-appearance="neutral"] #app .panel-form-select,
html[data-app-appearance="neutral"] #app .panel-form-checkbox-row__label,
html[data-app-appearance="neutral"] #app .panel-form-checkbox-row__input:checked ~ .panel-form-checkbox-row__label {
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app .panel-form-select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px var(--app-focus);
}

/* Dialogs and transient messages */
html[data-app-appearance="neutral"] #app :is(.confirm-dialog-overlay, #message-overlay, .guest-nickname-dialog__overlay) {
  background: var(--app-overlay);
}

html[data-app-appearance="neutral"] #app :is(.confirm-dialog-window, #message-window, .guest-nickname-dialog__window) {
  background: var(--app-surface-raised);
  color: var(--app-text);
  border-color: var(--app-border);
  box-shadow: var(--app-shadow-md);
  border-radius: 8px;
}

html[data-app-appearance="neutral"] #app .confirm-dialog-window.negative,
html[data-app-appearance="neutral"] #app #message-window.negative {
  background: var(--app-danger-soft);
  border-color: var(--app-danger);
}

html[data-app-appearance="neutral"] #app .confirm-dialog-window.positive,
html[data-app-appearance="neutral"] #app #message-window.positive {
  background: var(--app-success-soft);
  border-color: var(--app-success);
}

html[data-app-appearance="neutral"] #app :is(#confirm-dialog-text, .guest-nickname-dialog__title, #message-window, #message-timer) {
  color: var(--app-text);
}

/* Account settings */
html[data-app-appearance="neutral"] #app :is(.edituser-check-row, .edituser-setting-copy, .edit-character-bg-settings, .voice-settings-description, .voice-settings-note) {
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app :is(.edituser-setting-card, #edit_character_voice_settings-panel .voice-settings-row, #edit_character_voice_settings-panel .voice-settings-field) {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.edituser-setting-title, .voice-settings-section-title, #edit_character_voice_settings-panel .voice-settings-row strong, #edit_character_voice_settings-panel .voice-settings-field span) {
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.edituser-danger-zone, .sessions-detail-danger-zone) {
  background: var(--app-danger-soft);
  border-color: color-mix(in srgb, var(--app-danger) 46%, var(--app-border));
}

html[data-app-appearance="neutral"] #app :is(.edituser-danger-title, .edituser-danger-copy, .deleteaccount-title, .sessions-detail-danger-label, .sessions-detail-danger-copy) {
  color: var(--app-danger);
}

html[data-app-appearance="neutral"] #app .edituser-toggle-track {
  background: var(--app-border-strong);
}

html[data-app-appearance="neutral"] #app #edituser-form .edituser-toggle-switch input:checked + .edituser-toggle-track {
  background: var(--app-secondary);
}

html[data-app-appearance="neutral"] #app :is(.character-reference-preview, .edit-character-voice-media-preview-btn) {
  background: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: var(--app-shadow-sm);
}

html[data-app-appearance="neutral"] #app :is(.edit-character-voice-media-preview-caption, .edit-character-voice-media-preview-empty, #edit_character_background-status, #edit_character_voice_settings-status, #edit_character_voice_media-status) {
  color: var(--app-text-muted);
}

/* Conversation, character, and friend collections */
html[data-app-appearance="neutral"] #app :is(.conversation-item, .character-item, .friend-item, #add_character-list > li) {
  background: transparent;
  border-bottom-color: var(--app-border);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.conversation-item, .character-item, .friend-item, #add_character-list > li):hover {
  background: var(--app-surface-muted);
}

html[data-app-appearance="neutral"] #app :is(.conversation-name, .character-name, .friend-name, .convs-empty-text) {
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.conversation-preview, .character-preview, .friend-tagline, .conv-model) {
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app :is(.conversation-avatar, .character-avatar, .friend-avatar) {
  background: var(--app-surface-muted);
}

html[data-app-appearance="neutral"] #app :is(.conversation-actions-menu, .character-actions-menu) {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: var(--app-shadow-md);
}

html[data-app-appearance="neutral"] #app :is(.conversation-more-btn, .character-more-btn, .character-menu-item) {
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app :is(.conversation-more-btn, .character-more-btn, .character-menu-item):hover,
html[data-app-appearance="neutral"] #app :is(.conversation-more-btn, .character-more-btn, .character-menu-item):focus-visible {
  background: var(--app-surface-muted);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.conversation-menu-delete, .character-menu-delete) {
  color: var(--app-danger);
}

html[data-app-appearance="neutral"] #app :is(.conversation-menu-delete, .character-menu-delete):hover,
html[data-app-appearance="neutral"] #app :is(.conversation-menu-delete, .character-menu-delete):focus-visible {
  background: var(--app-danger-soft);
}

html[data-app-appearance="neutral"] #app .conversation-story-badge {
  color: var(--app-secondary);
  background: var(--app-secondary-soft);
  border-color: color-mix(in srgb, var(--app-secondary) 38%, var(--app-border));
}

html[data-app-appearance="neutral"] #app .add-btn {
  background: var(--app-action-primary);
}

/* Sessions, memories, and reminders */
html[data-app-appearance="neutral"] #app :is(.sessions-wrapper, .session-card-main, .sessions-detail-checkpoint-title) {
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.sessions-status, .session-card-meta, .sessions-detail-status, .sessions-detail-goal, .session-milestone-criteria, .sessions-detail-checkpoint-summary) {
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app :is(.sessions-empty, .session-card, .session-milestone, .sessions-detail-checkpoint) {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
  box-shadow: var(--app-shadow-sm);
}

html[data-app-appearance="neutral"] #app .session-card-menu {
  background: var(--app-surface-muted);
  border-left-color: var(--app-border);
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app .session-card-menu:hover {
  background: var(--app-surface-raised);
}

html[data-app-appearance="neutral"] #app :is(.session-card.is-active, .session-milestone.is-active) {
  border-color: var(--app-secondary);
  background: var(--app-secondary-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-secondary) 20%, transparent);
}

html[data-app-appearance="neutral"] #app :is(#edit_character_memories-list .memory-bubble, #edit_character_reminders-list .memory-bubble) {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
  box-shadow: var(--app-shadow-sm);
}

html[data-app-appearance="neutral"] #app :is(#edit_character_memories-list .memory-meta, #edit_character_reminders-list .memory-meta, #edit_character_memories-list .mem-text, #edit_character_reminders-list .mem-text, #edit_memory-triggers-help, #edit_reminder-time-help) {
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app :is(#edit_character_memories-compose, #edit_character_reminders-compose) {
  background: var(--app-surface);
  border-top-color: var(--app-border);
}

/* Media selector and unified media panels */
html[data-app-appearance="neutral"] #app :is(.ms-card, .ms-preview-card, .ms-preview-sheet) {
  background: var(--app-surface-raised);
  color: var(--app-text);
  border-color: var(--app-border);
  box-shadow: var(--app-shadow-md);
  border-radius: 8px;
}

html[data-app-appearance="neutral"] #app :is(.ms-head, .ms-preview-head) {
  background: var(--app-surface);
  color: var(--app-text);
  border-bottom-color: var(--app-border);
}

html[data-app-appearance="neutral"] #app :is(.ms-body, .ms-preview-body, .ms-meta) {
  background: var(--app-panel-bg);
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app :is(.ms-backdrop, .ms-preview-backdrop, .character-media-full-preview) {
  background: var(--app-overlay);
}

html[data-app-appearance="neutral"] #app .ms-item {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app .ms-item:hover {
  border-color: var(--app-border-strong);
  box-shadow: var(--app-shadow-sm);
}

html[data-app-appearance="neutral"] #app .ms-item.is-selected {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 2px var(--app-focus);
}

html[data-app-appearance="neutral"] #app :is(.ms-thumb, .ms-upload .ms-thumb, .ms-action-tile .ms-thumb) {
  background: var(--app-surface-muted);
}

html[data-app-appearance="neutral"] #app :is(.ms-title, .ms-section-title, .ms-name, .ms-preview-title) {
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.ms-status, .ms-section-empty, .ms-preview-meta) {
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app :is(.character-media-detail, .character-media-generate, .character-media-trigger-box, .character-media-properties) {
  background: var(--app-panel-bg);
  color: var(--app-text);
  border-color: var(--app-border);
}

html[data-app-appearance="neutral"] #app .character-media-grid-panel {
  background: transparent;
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app .character-media-tabs {
  background: var(--app-surface);
  border-bottom-color: var(--app-border);
}

html[data-app-appearance="neutral"] #app .character-media-tab {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app .character-media-tab.active {
  background: var(--app-primary-soft);
  color: var(--app-primary);
  border-color: var(--app-primary);
  border-bottom-color: var(--app-primary);
}

html[data-app-appearance="neutral"] #app :is(.character-media-generating-light, .character-media-tile-active) {
  background: var(--app-primary);
}

html[data-app-appearance="neutral"] #app .character-media-generation-notice {
  background: var(--app-primary-soft);
  border-left-color: var(--app-primary);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app .character-media-tile {
  background: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: var(--app-shadow-sm);
}

html[data-app-appearance="neutral"] #app .character-media-tile.selected {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 2px var(--app-focus);
}

html[data-app-appearance="neutral"] #app .character-media-badge {
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app .character-media-badge.active {
  background: var(--app-primary-soft);
  color: var(--app-primary);
}

html[data-app-appearance="neutral"] #app .character-media-action-card {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
  box-shadow: var(--app-shadow-sm);
}

html[data-app-appearance="neutral"] #app .character-media-action-card:hover:not(:disabled) {
  background: var(--app-surface-raised);
  border-color: var(--app-primary);
}

html[data-app-appearance="neutral"] #app :is(.character-media-action-title, .character-media-properties-title, .character-media-section-title) {
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.character-media-action-subtitle, .character-media-status, .character-media-tile-source) {
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app .character-media-action-card--delete,
html[data-app-appearance="neutral"] #app .character-media-action-card--delete .character-media-action-title {
  color: var(--app-danger);
}

/* Story navigation keeps authored media but adopts application chrome. */
html[data-app-appearance="neutral"] #app :is(#story-library-panel .panel-wrapper, #story_chapters-panel .panel-wrapper, #story_quests-panel .panel-wrapper, #story_notifications-panel .panel-wrapper, #story_rewards-panel .panel-wrapper) {
  background: var(--app-panel-bg);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.story-book, .story-card, .quest-card, .story-note-item) {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
  box-shadow: var(--app-shadow-sm);
}

html[data-app-appearance="neutral"] #app :is(.story-book.active, .story-card.selected, .quest-card.active, .story-note-item.unread) {
  border-color: var(--app-secondary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-secondary) 20%, transparent);
}

html[data-app-appearance="neutral"] #app .story-book-active-label {
  color: var(--app-secondary);
}

html[data-app-appearance="neutral"] #app .story-book-category {
  color: var(--app-primary);
}

html[data-app-appearance="neutral"] #app :is(.story-book-title, .story-card-title, .quest-card-title, .story-note-head, .story-rewards-profile-name) {
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.story-book-category, .story-book-description, .story-book-progress, .story-card-meta, .story-card-sub, .quest-card-milestone, .quest-card-meta, .story-note-msg, .story-note-time, .story-library-message) {
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app :is(#story_chapters-summary, #story_quests-chapter-info, #story_notifications-summary, #story_rewards-summary, #story_rewards-profile) {
  background: var(--app-surface);
  color: var(--app-text-muted);
  border-color: var(--app-border);
}

html[data-app-appearance="neutral"] #app .story-rewards-profile-card {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app .story-reward-card--tone-rose {
  --reward-accent: var(--app-primary);
  --reward-accent-soft: color-mix(in srgb, var(--app-primary) 24%, transparent);
}

html[data-app-appearance="neutral"] #app :is(.story-reward-overlay, #story-reward-dialog-v2-backdrop) {
  background: var(--app-overlay);
}

html[data-app-appearance="neutral"] #app :is(.story-reward-preview, #story-reward-dialog-v2-panel, #story-event-dialog-window) {
  background: var(--app-surface-raised);
  color: var(--app-text);
  border-color: var(--app-border);
  box-shadow: var(--app-shadow-md);
}

html[data-app-appearance="neutral"] #app #story-reward-dialog-v2-continue-btn {
  background: var(--app-action-primary);
  border-color: var(--app-action-primary);
}

html[data-app-appearance="neutral"] #app :is(#story-reward-dialog-v2-eyebrow, #story-reward-dialog-v2-subtitle, #story-reward-dialog-v2-meta) {
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app :is(#story-reward-dialog-v2-title, #story-reward-dialog-v2-quote, #story-reward-dialog-v2-signature, #story-event-dialog-title, #story-event-dialog-subtitle) {
  color: var(--app-text);
  text-shadow: none;
}

/* Character social */
html[data-app-appearance="neutral"] #app :is(.character-social-panel-shell, .character-social-post-viewer-shell) {
  background: var(--app-panel-bg);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.character-social-panel-header, .character-social-post-viewer-header) {
  background: var(--app-header-bg);
  color: var(--app-header-fg);
  border-bottom: 1px solid var(--app-border);
}

html[data-app-appearance="neutral"] #app :is(.character-social-panel-body, .character-social-post-viewer-body) {
  background: var(--app-panel-bg);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.character-social-profile-card, .character-social-card, .character-social-card--text, .character-social-card--audio, .character-social-card-note-shell, .character-social-post-viewer-note-card, .character-social-post-comment) {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
  box-shadow: var(--app-shadow-sm);
  border-radius: 8px;
}

html[data-app-appearance="neutral"] #app :is(.character-social-display-name, .character-social-feed-heading, .character-social-card-author-name, .character-social-post-viewer-note-author-name, .character-social-post-viewer-comments-title) {
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.character-social-about-me, .character-social-feed-status, .character-social-card-time, .character-social-card-preview--text, .character-social-post-viewer-caption, .character-social-post-viewer-status, .character-social-post-comment-body) {
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app :is(.character-social-profile-avatar-wrap, .character-social-card-author-fallback, .character-social-post-viewer-note-avatar-fallback) {
  background: var(--app-primary-soft);
  border-color: var(--app-primary);
  color: var(--app-primary);
}

html[data-app-appearance="neutral"] #app .character-social-profile-avatar-wrap {
  background: var(--app-surface-muted);
  box-shadow: var(--app-shadow-sm);
}

html[data-app-appearance="neutral"] #app .character-social-profile-avatar-fallback {
  background: linear-gradient(145deg, var(--app-primary-soft), var(--app-secondary-soft));
}

html[data-app-appearance="neutral"] #app :is(.character-social-panel-header-title, .character-social-post-viewer-title) {
  font-size: 16px;
  letter-spacing: 0;
}

html[data-app-appearance="neutral"] #app .character-social-card:focus-visible {
  outline-color: var(--app-primary);
}

html[data-app-appearance="neutral"] #app :is(.character-social-card-type-badge, .character-social-card-type-badge--note) {
  background: color-mix(in srgb, var(--app-primary) 78%, transparent);
  border-color: color-mix(in srgb, var(--app-primary) 36%, var(--app-border));
}

html[data-app-appearance="neutral"] #app .character-social-card-note-mark {
  color: color-mix(in srgb, var(--app-primary) 36%, transparent);
}

html[data-app-appearance="neutral"] #app .character-social-card-audio-strip {
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--app-primary) 62%, transparent) 0 6px,
    transparent 6px 14px
  );
}

html[data-app-appearance="neutral"] #app .character-social-post-action-btn {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app .character-social-post-action-btn.is-liked {
  background: var(--app-danger-soft);
  border-color: var(--app-danger);
  color: var(--app-danger);
}

html[data-app-appearance="neutral"] #app :is(.character-social-post-action-btn:not(.is-liked), .character-social-post-comment-send-btn) {
  background: var(--app-action-primary);
  color: #ffffff;
}

/* Professional Voice Mode replaces character media with a neutral audio field. */
html[data-app-appearance="neutral"] #app #voice_mode-panel {
  background: #090b0d;
}

html[data-app-appearance="neutral"] #app :is(.voice-mode-stage, .voice-mode-media-wrap, .voice-professional-visual) {
  background: #111518;
}

html[data-app-appearance="neutral"] #app .voice-professional-visual {
  --voice-field-primary: #4eb5a8;
  --voice-field-secondary: #67a1c2;
  --voice-field-shade: rgba(78, 181, 168, 0.14);
  --voice-field-guide: rgba(205, 216, 223, 0.12);
}

html[data-app-appearance="neutral"] #app .voice-professional-visual__guides line {
  stroke: var(--voice-field-guide);
}

html[data-app-appearance="neutral"] #app .voice-professional-visual__shade {
  fill: var(--voice-field-shade);
}

html[data-app-appearance="neutral"] #app .voice-professional-visual__wave--primary {
  stroke: var(--voice-field-primary);
}

html[data-app-appearance="neutral"] #app .voice-professional-visual__wave--secondary {
  stroke: var(--voice-field-secondary);
}

html[data-app-appearance="neutral"] #app .voice-mode-media-wrap--professional .voice-mode-media-item {
  display: none !important;
}

html[data-app-appearance="neutral"] #app .voice-mode-shell {
  border: 1px solid color-mix(in srgb, var(--app-secondary) 58%, transparent);
  animation-name: professionalVoiceModePulse;
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--app-secondary) 13%, transparent);
}

html[data-app-appearance="neutral"] #app .voice-mode-shell.voice-hot {
  box-shadow:
    inset 0 0 calc(14px + (18px * var(--voice-level))) color-mix(in srgb, var(--app-secondary) 30%, transparent),
    inset 0 0 calc(24px + (26px * var(--voice-level))) color-mix(in srgb, var(--app-secondary) 16%, transparent);
}

@keyframes professionalVoiceModePulse {
  0%, 100% { border-color: color-mix(in srgb, var(--app-secondary) 38%, transparent); }
  50% { border-color: color-mix(in srgb, var(--app-secondary) 72%, transparent); }
}

html[data-app-appearance="neutral"] #app #voice_mode-panel .voice-mode-topbar {
  background: #202225;
  color: #f4f6f7;
  border-bottom: 1px solid #394148;
}

html[data-app-appearance="neutral"] #app #voice_mode-panel .voice-mode-title {
  color: #f4f6f7;
}

html[data-app-appearance="neutral"] #app #voice_mode-panel .voice-top-btn {
  background: #3e464d;
  color: #ffffff;
}

html[data-app-appearance="neutral"] #app #voice_mode-panel .voice-top-btn:hover {
  background: #4b555d;
}

html[data-app-appearance="neutral"] #app #voice_mode-panel .voice-top-btn.danger {
  background: #783735;
}

html[data-app-appearance="neutral"] #app #voice_mode-panel .voice-top-btn.danger:hover {
  background: #91433f;
}

html[data-app-appearance="neutral"] #app #voice_mode-panel .voice-mode-profile-pill {
  background: #2b3137;
  color: #c5cdd3;
  border-color: #46515a;
}

html[data-app-appearance="neutral"] #app #voice_mode-panel .voice-mode-topbar .btn-panel-header-icon {
  filter: brightness(0) invert(1) opacity(0.92);
}

html[data-app-appearance="neutral"] #app :is(.voice-settings-overlay, .voice-camera-preview) {
  border-color: var(--app-border);
}

html[data-app-appearance="neutral"] #app .voice-settings-dialog {
  background: var(--app-surface-raised);
  color: var(--app-text);
  border-color: var(--app-border);
  box-shadow: var(--app-shadow-md);
  border-radius: 8px;
}

html[data-app-appearance="neutral"] #app .voice-settings-header {
  background: var(--app-header-bg);
  color: var(--app-header-fg);
  border-bottom-color: var(--app-border);
}

html[data-app-appearance="neutral"] #app :is(.voice-settings-body, .voice-settings-footer, .voice-settings-section, .voice-settings-row, .voice-settings-field) {
  background: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}

html[data-app-appearance="neutral"] #app :is(.voice-settings-section-title, .voice-settings-field span) {
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.voice-settings-note, .voice-settings-row small) {
  color: var(--app-text-muted);
}

/* Informational and bug report panels */
html[data-app-appearance="neutral"] #app .about-card {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

html[data-app-appearance="neutral"] #app :is(.story-reward-preview, #story-reward-dialog-v2-shell, #story-reward-dialog-v2-panel, #story-event-dialog-window) {
  border-radius: 8px;
}

html[data-app-appearance="neutral"] #app :is(.about-kv-list dt, .about-status, .bugreport-status) {
  color: var(--app-text-muted);
}

html[data-app-appearance="neutral"] #app .bugreport-remove-image {
  background: var(--app-surface-muted);
  color: var(--app-text);
  border: 1px solid var(--app-border);
}

html[data-app-appearance="neutral"] #app .bugreport-status.positive {
  color: var(--app-success);
}

@media (hover: hover) and (min-width: 700px) {
  html[data-app-appearance="neutral"] body {
    background: var(--app-page-bg);
  }

  html[data-app-appearance="neutral"] #app .main {
    box-shadow: 0 16px 40px color-mix(in srgb, var(--app-page-bg) 64%, #000000);
  }
}