/* ============================================================
   Spider Venom — dark theme
   ============================================================ */
[data-theme="dark"] {
  --ms-orange: #84cc16;
  --ms-orange-dark: #65a30d;
  --ms-link: #c4b5fd;
  --ms-bg: #08080c;
  --ms-panel: rgba(14, 10, 22, 0.94);
  --ms-soft: rgba(20, 14, 32, 0.9);
  --ms-border: rgba(124, 58, 237, 0.28);
  --ms-text: #ece8f4;
  --ms-muted: #9d8bb8;
  --orbit-magenta: #a855f7;
  --avatar-ring: #7c3aed;
  --venom-toxic: #84cc16;
  --venom-purple: #a855f7;
  --page-bg-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 237, 0.18), transparent 55%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 23px, rgba(124, 58, 237, 0.04) 23px, rgba(124, 58, 237, 0.04) 24px),
    linear-gradient(180deg, #050508 0%, #0a0612 45%, #0e0818 100%);
  --page-bg-size: 100% 100%, 48px 48px, 100% 100%;
  --page-bg-animation: venomWebDrift 90s linear infinite;
  color-scheme: dark;
}

[data-theme="dark"] a:hover {
  color: #e9d5ff;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.35);
}

[data-theme="dark"] .accent-text {
  color: #a3e635;
  text-shadow: 0 0 10px rgba(132, 204, 22, 0.4);
}

[data-theme="dark"] .panel-title {
  background: linear-gradient(90deg, #1a0a2e, #2d1b4e) !important;
  color: #d4c4f0 !important;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
}

[data-theme="dark"] .sidebar {
  background: rgba(12, 6, 20, 0.75);
  border-right-color: rgba(124, 58, 237, 0.25);
}

[data-theme="dark"] .content {
  background: rgba(8, 4, 14, 0.5);
}

[data-theme="dark"] .counter {
  background: rgba(124, 58, 237, 0.15);
  color: #c4b5fd;
  border-color: rgba(124, 58, 237, 0.35);
}

[data-theme="dark"] .dm-mine .chat-user {
  color: #a3e635;
}

[data-theme="dark"] .dm-theirs .chat-user {
  color: #c4b5fd;
}

[data-theme="dark"] .user-avatar-fallback {
  color: #a3e635;
}

[data-theme="dark"] .theme-btn.is-active {
  outline-color: #84cc16;
  box-shadow: 0 0 10px rgba(132, 204, 22, 0.35);
}

[data-theme="dark"] .theme-btn:hover {
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.35);
}

[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] .content {
  color: var(--ms-text);
}

[data-theme="dark"] .section-bar {
  color: #d4c4f0 !important;
}

[data-theme="dark"] .ms-box-body {
  background: var(--ms-soft);
  color: var(--ms-text);
}

[data-theme="dark"] .page-title {
  color: #f4f4f6;
}

[data-theme="dark"] .flash-ok {
  background: rgba(40, 120, 40, 0.22);
  border-color: rgba(139, 201, 139, 0.45);
  color: #b8f0b8;
}

[data-theme="dark"] .flash-error {
  background: rgba(138, 34, 34, 0.22);
  border-color: rgba(224, 160, 160, 0.45);
  color: #ffb8b8;
}

[data-theme="dark"] .shout-row {
  border-bottom-color: var(--ms-border);
}

[data-theme="dark"] .post-box,
[data-theme="dark"] .post-box td {
  background-color: var(--ms-soft) !important;
  color: var(--ms-text) !important;
}

[data-theme="dark"] table[bgcolor="#ffffff"],
[data-theme="dark"] table[bgcolor="#ffffff"] td,
[data-theme="dark"] table[bgcolor="#ffffff"] th {
  background-color: var(--ms-panel) !important;
  color: var(--ms-text) !important;
}

[data-theme="dark"] table[bgcolor="#ffffee"],
[data-theme="dark"] table[bgcolor="#eeffee"],
[data-theme="dark"] table[bgcolor="#e8e8ff"],
[data-theme="dark"] table.form-box {
  background-color: var(--ms-panel) !important;
  color: var(--ms-text) !important;
}

[data-theme="dark"] table[bgcolor="#ffcccc"],
[data-theme="dark"] table[bgcolor="#ffe0e0"] {
  background-color: rgba(138, 34, 34, 0.2) !important;
  color: #ffb8b8 !important;
}

[data-theme="dark"] tr[bgcolor="#000080"] td,
[data-theme="dark"] tr[bgcolor="#000080"] font,
[data-theme="dark"] tr[bgcolor="#008080"] td,
[data-theme="dark"] tr[bgcolor="#008080"] font {
  color: #f0ecfa !important;
}

[data-theme="dark"] td[bgcolor="#c0c0c0"] {
  background-color: var(--ms-soft) !important;
  color: var(--ms-text) !important;
}

[data-theme="dark"] .ms-box-body[style*="background:#fff"],
[data-theme="dark"] .ms-box-body[style*="background: #fff"] {
  background: var(--ms-soft) !important;
  color: var(--ms-text) !important;
}

[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#888"],
[data-theme="dark"] [style*="color: #888"],
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color: #555"] {
  color: var(--ms-muted) !important;
}

[data-theme="dark"] [style*="background:#fff8f0"] {
  background: rgba(124, 58, 237, 0.12) !important;
}

[data-theme="dark"] font[color="#800000"] {
  color: #ff9a9a !important;
}

[data-theme="dark"] .stack-table td,
[data-theme="dark"] .forum-thread-list td {
  color: var(--ms-text);
}

[data-theme="dark"] .form-box td,
[data-theme="dark"] .form-box label {
  color: var(--ms-text);
}

[data-theme="dark"] .bevel-in::placeholder {
  color: #9d8bb8;
  opacity: 1;
}

/* ============================================================
   Frutiger Aero / Windows 7 — light theme
   ============================================================ */
@keyframes aeroCloudDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 30px, 20px 10px, 0 0, 0 0; }
}

[data-theme="light"] {
  --ms-orange: #00a2e8;
  --ms-orange-dark: #0078d7;
  --ms-link: #0066b3;
  --ms-bg: #b8dff5;
  --ms-panel: rgba(255, 255, 255, 0.72);
  --ms-soft: rgba(255, 255, 255, 0.55);
  --ms-border: rgba(0, 120, 215, 0.22);
  --ms-text: #1a3a52;
  --ms-muted: #4a7a9a;
  --orbit-magenta: #2d9cdb;
  --avatar-ring: #00a2e8;
  --aero-sky: #b8e4f8;
  --aero-grass: rgba(120, 200, 80, 0.4);
  --aero-glass: rgba(255, 255, 255, 0.65);
  --page-bg-image:
    radial-gradient(ellipse 130% 70% at 50% 110%, var(--aero-grass), transparent 58%),
    radial-gradient(ellipse 90% 55% at 85% 5%, rgba(255, 255, 255, 0.95), transparent 52%),
    radial-gradient(ellipse 70% 45% at 8% 18%, rgba(180, 230, 255, 0.75), transparent 48%),
    linear-gradient(180deg, #c5e8fa 0%, #d8f0fc 30%, #a8d8f0 65%, #7ec8e8 100%);
  --page-bg-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  --page-bg-animation: aeroCloudDrift 60s ease-in-out infinite alternate;
  color-scheme: light;
}

[data-theme="light"] html,
[data-theme="light"] body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--ms-text);
}

[data-theme="light"] a {
  color: var(--ms-link);
}

[data-theme="light"] a:hover {
  color: #004d80;
  text-shadow: none;
}

[data-theme="light"] .accent-text {
  color: #0078d7;
  text-shadow: none;
}

[data-theme="light"] .shell {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(220, 240, 255, 0.72));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 10px 40px rgba(0, 100, 180, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 120, 215, 0.08);
  border-radius: 8px;
}

[data-theme="light"] .banner-cell {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 40%),
    linear-gradient(90deg, #7ec8e8 0%, #a8dff5 25%, #c5ebfa 50%, #a8dff5 75%, #7ec8e8 100%);
  border-bottom: 1px solid rgba(0, 120, 215, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .brand-mark {
  color: #0d3d5c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  font-family: "Segoe UI", "Exo 2", "Trebuchet MS", sans-serif;
}

[data-theme="light"] .brand-mark .dot {
  color: #0078d7;
  text-shadow: 0 0 12px rgba(0, 162, 232, 0.45);
}

[data-theme="light"] .brand-tag,
[data-theme="light"] .banner-greet {
  color: #2a6080;
}

[data-theme="light"] .brand-logo-circle {
  border-color: #00a2e8;
  box-shadow:
    0 2px 12px rgba(0, 120, 215, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, #fff, #e8f4fc);
}

[data-theme="light"] .nav-bar {
  background: linear-gradient(180deg, #f0f8ff 0%, #d9ecf8 45%, #c5e0f0 50%, #d4e8f6 100%);
  border-bottom: 1px solid rgba(0, 120, 215, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .nav-toggle {
  background: linear-gradient(180deg, #f0f8ff 0%, #d9ecf8 50%, #c5e0f0 100%);
  color: #1a4a6e;
  border-bottom-color: rgba(0, 120, 215, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .nav-toggle:hover,
[data-theme="light"] .nav-toggle.is-open {
  background: linear-gradient(180deg, #fff 0%, #dceef8 50%, #c5dff0 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 120, 215, 0.15);
}

[data-theme="light"] .nav-item {
  border-right-color: rgba(0, 120, 215, 0.12);
}

[data-theme="light"] .nav-item a {
  color: #1a4a6e;
  border-radius: 4px;
}

[data-theme="light"] .nav-item a:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(200, 230, 255, 0.7));
  color: #003d66;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .nav-signup {
  color: #0078d7 !important;
}

[data-theme="light"] .nav-btn {
  background: linear-gradient(180deg, #eaf6fc 0%, #d0e8f8 48%, #b8d4ec 52%, #c8e4f4 100%);
  border: 1px solid #3c7fb1;
  color: #1a3a52;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .nav-btn:hover {
  background: linear-gradient(180deg, #f5fbff 0%, #dceef8 48%, #c5dff0 52%, #d8ecf8 100%);
  border-color: #2a6ea0;
}

[data-theme="light"] .sidebar {
  background: rgba(230, 245, 255, 0.55);
  border-right-color: rgba(0, 120, 215, 0.15);
}

[data-theme="light"] .content {
  background: rgba(255, 255, 255, 0.35);
}

[data-theme="light"] .panel {
  background: var(--aero-glass) !important;
  backdrop-filter: blur(8px);
  border-color: rgba(0, 120, 215, 0.2) !important;
}

[data-theme="light"] .panel-title,
[data-theme="light"] .section-bar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(190, 225, 250, 0.85) 100%) !important;
  color: #0d3d5c !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(0, 120, 215, 0.2) !important;
}

[data-theme="light"] .panel-body,
[data-theme="light"] .ms-box-body {
  background: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .ms-box {
  background: var(--aero-glass);
  backdrop-filter: blur(10px);
  border-color: rgba(0, 120, 215, 0.22);
  box-shadow:
    0 4px 16px rgba(0, 100, 180, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .bevel-in {
  background: linear-gradient(180deg, #fff 0%, #f0f8ff 100%);
  color: #1a3a52;
  border: 1px solid #7eb8dc;
  box-shadow: inset 0 2px 4px rgba(0, 80, 140, 0.08);
}

[data-theme="light"] .bevel-btn,
[data-theme="light"] .ms-btn {
  background: linear-gradient(180deg, #6eb6f7 0%, #3a8fd9 45%, #2a7fc8 50%, #4a9ee0 100%);
  border: 1px solid #1e5a8a;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 40, 80, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 4px rgba(0, 60, 120, 0.25);
}

[data-theme="light"] .bevel-btn:hover,
[data-theme="light"] .ms-btn:hover {
  background: linear-gradient(180deg, #82c4ff 0%, #4a9ee0 45%, #3a8fd9 50%, #5aadf0 100%);
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 8px rgba(0, 80, 160, 0.3);
}

[data-theme="light"] .page-title,
[data-theme="light"] .home-hero h1 {
  color: #0d3d5c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  font-family: "Segoe UI", "Exo 2", "Trebuchet MS", sans-serif;
}

[data-theme="light"] .page-title {
  border-bottom-color: rgba(0, 120, 215, 0.2);
}

[data-theme="light"] .home-hero {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(200, 230, 255, 0.55));
  border-color: rgba(0, 120, 215, 0.25);
  box-shadow: 0 4px 20px rgba(0, 100, 180, 0.12);
}

[data-theme="light"] .counter,
[data-theme="light"] .pill-stat {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 120, 215, 0.25);
  color: #2a6080;
}

[data-theme="light"] .comment-row td {
  background: rgba(255, 255, 255, 0.55);
  border-top-color: rgba(0, 120, 215, 0.12);
}

[data-theme="light"] .comment-author {
  background: rgba(220, 240, 255, 0.8) !important;
}

[data-theme="light"] .homepage-body {
  background: rgba(255, 255, 255, 0.45);
}

[data-theme="light"] .post-author-cell {
  background: rgba(220, 240, 255, 0.7) !important;
}

[data-theme="light"] .chat-log {
  background: linear-gradient(180deg, #e8f4fc, #d0e8f8);
  color: #1a3a52;
  border-color: rgba(0, 120, 215, 0.2);
}

[data-theme="light"] .chat-user {
  color: #0078d7;
  text-shadow: none;
}

[data-theme="light"] .chat-time {
  color: #5a8aaa;
}

[data-theme="light"] .dm-mine .chat-user {
  color: #0078d7;
}

[data-theme="light"] .dm-theirs .chat-user {
  color: #00a2e8;
}

[data-theme="light"] .online-dot {
  color: #2d9b2d;
  text-shadow: none;
}

[data-theme="light"] .presence-dot {
  background: #2d9b2d;
  border-color: #fff;
  box-shadow: none;
}

[data-theme="light"] .nav-badge {
  background: linear-gradient(180deg, #6eb6f7, #2a7fc8);
  box-shadow: 0 1px 3px rgba(0, 60, 120, 0.25);
}

[data-theme="light"] .user-avatar {
  background: #fff;
  border-color: #7eb8dc;
}

[data-theme="light"] .user-avatar-fallback {
  color: #0078d7;
}

[data-theme="light"] .friend-avatar {
  background: #fff;
  border-color: rgba(0, 120, 215, 0.3);
}

[data-theme="light"] .shout-row {
  border-bottom-color: rgba(0, 120, 215, 0.12);
}

[data-theme="light"] .shout-time {
  color: #5a8aaa;
}

[data-theme="light"] .photo-card img {
  border-color: #7eb8dc;
}

[data-theme="light"] .footer-bar {
  background: linear-gradient(180deg, #d4e8f6, #c0dff0);
  border-top-color: rgba(0, 120, 215, 0.2);
  color: #4a7a9a;
}

[data-theme="light"] .interest-table th {
  color: #4a7a9a;
}

[data-theme="light"] .interest-table td {
  color: #1a3a52;
}

[data-theme="light"] .upload-box {
  background: rgba(255, 255, 255, 0.8);
  border-color: #7eb8dc;
}

[data-theme="light"] .theme-btn {
  background: linear-gradient(180deg, #fff, #d8ecf8);
  border-color: #7eb8dc;
  color: #1a3a52;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .theme-btn.is-active {
  outline-color: #0078d7;
  background: linear-gradient(180deg, #c5e8fa, #a8d8f0);
}

/* ============================================================
   Accessibility
   ============================================================ */
[data-font-scale="large"] {
  font-size: 15px;
}

[data-font-scale="xlarge"] {
  font-size: 17px;
}

[data-font-scale="large"] .bevel-in,
[data-font-scale="xlarge"] .bevel-in {
  font-size: 1em;
}

[data-a11y-contrast="true"] {
  --ms-border: rgba(0, 0, 0, 0.35);
  --ms-text: #000;
  --ms-link: #0000ee;
}

[data-theme="dark"][data-a11y-contrast="true"] {
  --ms-text: #fff;
  --ms-link: #c4b5fd;
  --ms-border: rgba(255, 255, 255, 0.35);
}

[data-a11y-contrast="true"] a {
  text-decoration: underline;
}

[data-a11y-contrast="true"] .bevel-btn,
[data-a11y-contrast="true"] .ms-btn {
  border-width: 2px;
}

[data-underline-links="true"] a {
  text-decoration: underline;
}

[data-reduce-motion="true"] *,
[data-reduce-motion="true"] *::before,
[data-reduce-motion="true"] *::after {
  animation: none !important;
  transition: none !important;
}

/* ============================================================
   Theme toggle + settings layout
   ============================================================ */
.theme-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.theme-btn {
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--ms-border);
  border-radius: 6px;
  background: var(--ms-soft);
  color: var(--ms-text);
  cursor: pointer;
}

.theme-btn:hover {
  filter: brightness(1.08);
}

.theme-btn.is-active {
  outline: 2px solid var(--ms-orange);
  outline-offset: 1px;
}

.settings-grid {
  display: grid;
  gap: 14px;
}

.settings-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ms-border);
}

.settings-option:last-child {
  border-bottom: none;
}

.settings-option label {
  flex: 1;
  cursor: pointer;
}

.settings-option small {
  display: block;
  color: var(--ms-muted);
  margin-top: 3px;
  font-size: 11px;
}

.settings-actions {
  margin-top: 14px;
}