:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101512;
  --paper: #17201a;
  --paper-deep: #202b23;
  --ink: #eef3ed;
  --ink-soft: #bcc8bd;
  --muted: #8f9e93;
  --line: #2f3d33;
  --line-strong: #46574a;
  --olive: #8fb097;
  --olive-dark: #dce9dc;
  --gold: #d6ae72;
  --error: #ee9b92;
  --button-primary: #668d72;
  --button-primary-hover: #7ba688;
  --button-soft: #27372c;
  --button-soft-hover: #314638;
  --button-accent: #b58a50;
  --button-danger-soft: #432b2a;
  --button-danger: #ee9b92;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .login-view,
:root[data-theme="dark"] .chat-view,
:root[data-theme="dark"] .settings-view { background: var(--canvas); }

:root[data-theme="dark"] .login-view { background: radial-gradient(circle at 50% 34%, rgba(80, 111, 87, .16), transparent 43%); }
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .settings-shell,
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .chat-panel,
:root[data-theme="dark"] .skeleton-surface { background: var(--paper); box-shadow: 0 22px 55px rgba(0, 0, 0, .2); }
:root[data-theme="dark"] .settings-card { background: #1d2921; }
:root[data-theme="dark"] .workspace-tabs { background: var(--paper-deep); }
:root[data-theme="dark"] .workspace-tab-indicator { background: #2b3a30; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
:root[data-theme="dark"] .workspace-tab.active { color: #e6f0e5; }
:root[data-theme="dark"] .conversation-item { background: #19241d; }
:root[data-theme="dark"] .conversation-item:hover { background: var(--button-soft); }
:root[data-theme="dark"] .conversation-item.active { border-color: #4d6b55; background: #27392c; }
:root[data-theme="dark"] .role-badge { border-color: #49634f; }
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .back-button,
:root[data-theme="dark"] .sidebar-footer.about-link { border-color: #405345; background: var(--button-soft); color: #b9cfbb; }
:root[data-theme="dark"] .icon-button:hover,
:root[data-theme="dark"] .back-button:hover,
:root[data-theme="dark"] .sidebar-footer.about-link:hover { border-color: #608068; background: var(--button-soft-hover); color: #edf5ec; }
:root[data-theme="dark"] .contact-search-row input,
:root[data-theme="dark"] .contact-search-row button,
:root[data-theme="dark"] .friend-request-actions button,
:root[data-theme="dark"] .contact-result-action,
:root[data-theme="dark"] .avatar-change-button { border-color: var(--line-strong); background: var(--paper); color: var(--ink-soft); }
:root[data-theme="dark"] .contact-search-row button,
:root[data-theme="dark"] .contact-result-action { border-color: var(--button-primary); background: var(--button-primary); color: #f6fbf5; }
:root[data-theme="dark"] .friend-request-actions button:first-child { color: #c9e1cb; }
:root[data-theme="dark"] .friend-request-actions button:last-child { border-color: #69413e; background: var(--button-danger-soft); color: var(--button-danger); }
:root[data-theme="dark"] .avatar-change-button { border-color: #94724b; background: #3a3023; color: #e5c38c; }
:root[data-theme="dark"] .avatar-change-button:hover { border-color: var(--gold); background: #4a3a28; color: #f2d4a0; }
:root[data-theme="dark"] .chat-banner { background: var(--paper-deep); }
:root[data-theme="dark"] .message-link { color: #8fc7f0; }
:root[data-theme="dark"] .message-link:hover { color: #c5e7ff; }
:root[data-theme="dark"] .message-bubble { box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
:root[data-theme="dark"] .mine .message-bubble { background: #304b38; color: #f0f7ef; }
:root[data-theme="dark"] .message-actions { background: rgba(23, 32, 26, .98); box-shadow: 0 18px 45px rgba(0, 0, 0, .36); }
:root[data-theme="dark"] .composer-preview,
:root[data-theme="dark"] .composer { background: var(--paper); }
:root[data-theme="dark"] .composer textarea::placeholder { color: #76877b; }
:root[data-theme="dark"] .settings-toggle { color: var(--ink); }
:root[data-theme="dark"] .skeleton-circle,
:root[data-theme="dark"] .skeleton-icon,
:root[data-theme="dark"] .skeleton-line,
:root[data-theme="dark"] .skeleton-conversation,
:root[data-theme="dark"] .skeleton-chip,
:root[data-theme="dark"] .skeleton-bubble,
:root[data-theme="dark"] .skeleton-button { background: linear-gradient(90deg, #263329 0%, #334238 28%, #415148 50%, #334238 72%, #263329 100%); background-size: 240% 100%; }

.theme-setting { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding-top: 25px; border-top: 1px solid var(--line); }
.theme-setting-copy { min-width: 0; }
.theme-kicker { margin: 0 0 7px; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.theme-setting-copy h2 { margin: 0; color: var(--ink); font-family: Calibri, "Segoe UI", Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.theme-setting-copy p:last-child { max-width: 300px; margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.theme-toggle { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 9px; padding: 5px 9px 5px 5px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink-soft); cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.theme-toggle:hover { border-color: var(--gold); background: var(--paper-deep); color: var(--ink); }
.theme-toggle:focus-visible { outline: 3px solid rgba(192, 138, 69, .34); outline-offset: 3px; }
.theme-toggle-track { position: relative; display: flex; align-items: center; justify-content: space-between; width: 64px; height: 31px; padding: 0 8px; border-radius: 999px; background: var(--paper-deep); }
.theme-toggle-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 17px; height: 17px; color: var(--muted); transition: color .24s ease; }
.theme-toggle-icon svg { width: 16px; height: 16px; }
.theme-toggle-thumb { position: absolute; z-index: 0; top: 3px; left: 3px; width: 25px; height: 25px; border-radius: 50%; background: var(--paper); box-shadow: 0 2px 7px rgba(24, 35, 27, .2); transition: transform .28s cubic-bezier(.2, .8, .2, 1), background .2s ease; }
.theme-toggle[aria-pressed="false"] .theme-toggle-sun { color: var(--gold); }
.theme-toggle[aria-pressed="true"] .theme-toggle-moon { color: var(--gold); }
.theme-toggle[aria-pressed="true"] .theme-toggle-thumb { transform: translateX(33px); }
.theme-mode-label { min-width: 57px; color: var(--ink-soft); font-size: 10px; font-weight: 800; text-align: left; }

@media (max-width: 540px) {
  .theme-setting { align-items: flex-start; flex-direction: column; gap: 16px; }
  .theme-toggle { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle-icon, .theme-toggle-thumb { transition: none; }
}