.theme-switch {
  position: relative;
  width: 64px;
  height: 34px;
  flex: 0 0 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-interactive);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.22);
  transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.theme-switch:hover { border-color: var(--border-glow); }
.theme-switch:focus-visible { outline: 3px solid var(--against-blue-light); outline-offset: 3px; }
.theme-switch-icon { position: relative; z-index: 2; width: 15px; height: 15px; pointer-events: none; transition: color var(--motion-fast), opacity var(--motion-fast); }
.theme-switch-icon.moon { justify-self: start; color: #d8ddf3; }
.theme-switch-icon.sun { justify-self: end; color: #aab2cc; opacity: .64; }
.theme-switch-thumb { position: absolute; z-index: 1; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #25314f; box-shadow: 0 3px 9px rgba(0,0,0,.3); transform: translateX(0); transition: transform 200ms cubic-bezier(.2,.7,.2,1), background var(--motion-fast), box-shadow var(--motion-fast); }
html[data-theme="light"] .theme-switch-thumb { transform: translateX(30px); background: #fff; box-shadow: 0 3px 9px rgba(24,35,63,.2); }
html[data-theme="light"] .theme-switch-icon.moon { color: #788196; opacity: .58; }
html[data-theme="light"] .theme-switch-icon.sun { color: #b45b00; opacity: 1; }
.standalone-theme-control { position: fixed; z-index: 500; top: 18px; right: 18px; }

html[data-theme="light"] {
  --background: #f4f6fb;
  --surface-section: #edf1f7;
  --surface: #ffffff;
  --surface-light: #e8edf6;
  --surface-raised: #ffffff;
  --surface-interactive: #eef2f8;
  --for-pink: #df176f;
  --for-pink-light: #b80d5d;
  --against-blue: #155fdc;
  --against-blue-light: #164fae;
  --neutral-violet: #7267ad;
  --neutral-violet-light: #5f568f;
  --text-primary: #151a2d;
  --text-secondary: #5d667d;
  --border: rgba(30, 43, 72, .12);
  --border-strong: rgba(30, 43, 72, .22);
  --border-glow: rgba(30, 43, 72, .32);
  --success: #14784a;
  --warning: #986000;
  --danger: #c22f43;
  --shadow: 0 24px 64px rgba(31, 43, 70, .14);
  --shadow-soft: 0 14px 38px rgba(31, 43, 70, .1);
  --glow-pink: 0 0 42px rgba(223, 23, 111, .1);
  --glow-blue: 0 0 42px rgba(21, 95, 220, .1);
}

html[data-theme="light"] body {
  background:
    linear-gradient(90deg, rgba(21,95,220,.035), transparent 24%, transparent 76%, rgba(223,23,111,.03)),
    var(--background);
}
html[data-theme="light"] ::selection { background: rgba(223,23,111,.22); color: #151a2d; }
html[data-theme="light"] .site-header.is-sticky,
html[data-theme="light"] .app-header,
html[data-theme="light"] .mobile-bottom-nav { background: rgba(244,246,251,.93); }
html[data-theme="light"] .desktop-nav,
html[data-theme="light"] .app-nav,
html[data-theme="light"] .global-menu-button,
html[data-theme="light"] .account-profile-trigger,
html[data-theme="light"] .countdown-box { background: rgba(255,255,255,.72); }
html[data-theme="light"] .home-view-switch {
  border-color: rgba(30, 43, 72, .16);
  background: #e7ecf5;
}
html[data-theme="light"] .home-view-tab[aria-selected="true"] {
  background: #ffffff;
  color: #151a2d;
  box-shadow: 0 2px 8px rgba(31, 43, 70, .12);
}
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link[aria-current="page"],
html[data-theme="light"] .app-nav a:hover,
html[data-theme="light"] .app-nav a[aria-current="page"],
html[data-theme="light"] .global-menu-link:hover,
html[data-theme="light"] .global-menu-link[aria-current="page"],
html[data-theme="light"] .account-profile-trigger:hover,
html[data-theme="light"] .account-profile-trigger[aria-expanded="true"] { background: #e7ecf5; color: var(--text-primary); }
html[data-theme="light"] .menu-button { color: var(--text-primary); }
html[data-theme="light"] .button-primary { border-color: #18223b; background: #18223b; color: #fff; }
html[data-theme="light"] .button-primary:hover { background: #263553; color: #fff; }
html[data-theme="light"] .button-secondary { background: rgba(255,255,255,.68); }
html[data-theme="light"] .text-link { text-decoration-color: rgba(21,26,45,.3); }
html[data-theme="light"] .panel,
html[data-theme="light"] .surface-card { border-color: var(--border); background-color: var(--surface); box-shadow: var(--shadow-soft); }
html[data-theme="light"] .input,
html[data-theme="light"] .textarea,
html[data-theme="light"] select.input { background: #fff; color: var(--text-primary); }
html[data-theme="light"] .input::placeholder,
html[data-theme="light"] .textarea::placeholder { color: #7b8498; }
html[data-theme="light"] .topic-card-sides { background: #edf2fa; }
html[data-theme="light"] .neutral-note,
html[data-theme="light"] .waiting-card blockquote,
html[data-theme="light"] .public-argument-card blockquote,
html[data-theme="light"] .archive-argument-card blockquote,
html[data-theme="light"] .today-argument-card blockquote,
html[data-theme="light"] .today-argument-card.is-official blockquote,
html[data-theme="light"] .argument-comments,
html[data-theme="light"] .comment-card,
html[data-theme="light"] .community-remove-confirm,
html[data-theme="light"] .pair-vote-status,
html[data-theme="light"] .ranking-tabs { background: #f2f5fa; }
html[data-theme="light"] .argument-pair-section { background: linear-gradient(145deg, rgba(21,95,220,.045), #fff 38%, #fff 62%, rgba(223,23,111,.04)); }
html[data-theme="light"] .today-argument-card,
html[data-theme="light"] .archive-argument-card,
html[data-theme="light"] .public-argument-card { border-color: #10131d; }
html[data-theme="light"] .argument-pair-topic { border-bottom-color: var(--border); }
html[data-theme="light"] .argument-pair-meta > span,
html[data-theme="light"] .argument-final-result,
html[data-theme="light"] .comment-form,
html[data-theme="light"] .comment-reaction-button,
html[data-theme="light"] .profile-record-stat,
html[data-theme="light"] .avatar-upload-zone,
html[data-theme="light"] .member-stat,
html[data-theme="light"] .admin-report-excerpt,
html[data-theme="light"] .admin-action-group,
html[data-theme="light"] .admin-community-topic-description,
html[data-theme="light"] .community-comment-form,
html[data-theme="light"] .community-reply-form,
html[data-theme="light"] .community-edit-form,
html[data-theme="light"] .community-comment-card.is-reply { background: #f5f7fb; }
html[data-theme="light"] .argument-submit-button { border-color: #28385a; background: linear-gradient(110deg, #18223b, #26385e 54%, #3a2947); color: #fff; }
html[data-theme="light"] .argument-submit-button:hover { background: linear-gradient(110deg, #223154, #30446f 54%, #50375f); }
html[data-theme="light"] .auth-form-panel { background: #f1f4fa; }
html[data-theme="light"] .auth-card { background: #fff; box-shadow: 0 22px 60px rgba(31,43,70,.14); }
html[data-theme="light"] .auth-form-panel::before,
html[data-theme="light"] .auth-form-panel::after { border-color: rgba(30,43,72,.1); }
html[data-theme="light"] .legal-callout,
html[data-theme="light"] .legal-table { background: #f3f6fb; }
html[data-theme="light"] .legal-language-switch button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--border); }
html[data-theme="light"] .community-topic-menu[open] summary { background: #eef2f8; }

@media (max-width: 760px) {
  .theme-switch { width: 58px; flex-basis: 58px; }
  html[data-theme="light"] .theme-switch-thumb { transform: translateX(24px); }
  .account-trigger-name { display: none; }
  .standalone-theme-control { top: 12px; right: 12px; }
}

@media (max-width: 430px) {
  .header-inner,
  .app-header-inner { gap: 8px; }
  .header-account-slot { gap: 5px; }
  .header-account-slot .theme-switch { width: 50px; flex-basis: 50px; padding-inline: 5px; }
  html[data-theme="light"] .header-account-slot .theme-switch-thumb { transform: translateX(16px); }
  .header-account-slot .account-auth-button { min-width: 0; padding-inline: 8px; font-size: .72rem; }
  .header-inner .brand-word,
  .app-header-inner .brand-word { display: none; }
  .header-inner .brand img,
  .app-header-inner .brand img { width: 34px; height: 34px; }
}

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

@media print {
  .theme-switch,
  .standalone-theme-control { display: none !important; }
}
