:root {
  color-scheme: light;
  --browser-color: #c8e9e5;
  --page-bg:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.72), transparent 35%),
    radial-gradient(circle at 84% 82%, rgba(31, 151, 143, 0.16), transparent 42%),
    linear-gradient(145deg, #e2f6f3 0%, #c6e9e5 52%, #acdcd7 100%);
  --text: #10322f;
  --muted: #486d69;
  --panel: rgba(248, 255, 254, 0.78);
  --panel-strong: #f8fffe;
  --menu-bg: #f8fffe;
  --border: rgba(2, 104, 98, 0.18);
  --soft: rgba(0, 111, 105, 0.09);
  --soft-hover: rgba(0, 111, 105, 0.16);
  --accent: #006d68;
  --accent-hover: #005752;
  --accent-text: #ffffff;
  --highlight: #0b817a;
  --highlight-text: #ffffff;
  --danger: #a72d25;
  --danger-soft: rgba(167, 45, 37, 0.09);
  --focus: #087f78;
  --shadow: 0 18px 50px rgba(5, 91, 85, 0.14);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --browser-color: #080d0c;
  --page-bg:
    radial-gradient(circle at 16% 12%, rgba(38, 179, 168, 0.12), transparent 36%),
    radial-gradient(circle at 86% 84%, rgba(34, 120, 114, 0.14), transparent 40%),
    linear-gradient(145deg, #060908 0%, #0a1110 54%, #0d1716 100%);
  --text: #f2faf8;
  --muted: #a8bfbb;
  --panel: rgba(13, 24, 23, 0.90);
  --panel-strong: #111c1a;
  --menu-bg: #111c1a;
  --border: rgba(166, 230, 222, 0.17);
  --soft: rgba(129, 221, 211, 0.10);
  --soft-hover: rgba(129, 221, 211, 0.18);
  --accent: #62d8cd;
  --accent-hover: #83e7de;
  --accent-text: #06211f;
  --highlight: #66dcd1;
  --highlight-text: #06211f;
  --danger: #ffb4ab;
  --danger-soft: rgba(255, 180, 171, 0.10);
  --focus: #79e2d8;
  --shadow: 0 18px 52px rgba(0, 0, 0, 0.30);
}

:root[data-theme="pink"] {
  color-scheme: dark;
  --browser-color: #c400ff;
  --page-bg:
    radial-gradient(circle at 15% 20%, rgba(0, 229, 255, 0.35), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(255, 230, 0, 0.30), transparent 38%),
    radial-gradient(circle at 80% 85%, rgba(157, 0, 255, 0.40), transparent 45%),
    linear-gradient(135deg, #ff0080 0%, #ff2e9a 35%, #c400ff 70%, #7b2ff7 100%);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.78);
  --panel: rgba(20, 10, 30, 0.58);
  --panel-strong: rgba(255, 255, 255, 0.08);
  --menu-bg: #5a1749;
  --border: rgba(255, 255, 255, 0.25);
  --soft: rgba(255, 255, 255, 0.10);
  --soft-hover: rgba(255, 255, 255, 0.22);
  --accent: #ffd93d;
  --accent-hover: #ffe46e;
  --accent-text: #222222;
  --highlight: #ffd93d;
  --highlight-text: #222222;
  --danger: #ffb4b4;
  --danger-soft: rgba(255, 107, 107, 0.12);
  --focus: #a7f3d0;
  --shadow: 0 0 30px rgba(110, 0, 160, 0.28);
}

:root[data-theme="pink"] .share-chain-btn { color: var(--text); }
:root[data-theme="pink"] .share-feedback,
:root[data-theme="pink"] a.back { color: #a7f3d0; }
:root[data-theme="pink"] .legal-links a { color: rgba(255, 255, 255, 0.78); }
:root[data-theme="pink"] .legal-links a:hover { color: #ffd93d; }

html { background: var(--browser-color); }

body {
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--text);
  padding-top: 72px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1 {
  color: var(--text);
  text-shadow: none;
}

.subtitle,
.chain-loading,
.counter-box .label,
.hint,
.donate-title,
.visits-counter,
footer,
.copyright,
.updated,
p {
  color: var(--muted);
}

.chain-box,
.input-card,
.card {
  background: var(--panel);
  border-color: var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.chain-words span.word,
.donate-btn {
  background: var(--soft);
  color: var(--text);
  border-color: var(--border);
}

.chain-words span.word.last,
.counter-box .num,
h2 {
  color: var(--highlight);
}

.chain-words span.word.last {
  background: var(--highlight);
  color: var(--highlight-text);
}

.input-card input[type="text"] {
  background: var(--panel-strong);
  color: var(--text);
  border-color: var(--border);
}

.input-card input::placeholder { color: var(--muted); }
.input-card input.invalid { border-color: var(--danger); }

.input-card input:focus-visible,
button:focus-visible,
a:focus-visible,
select:focus-visible,
.share-btn:focus-visible,
a.btn:focus-visible {
  outline-color: var(--focus);
}

.error-text,
.status-note.warn { color: var(--danger); }

button.main-btn,
.share-btn {
  background: var(--accent);
  color: var(--accent-text);
}

button.main-btn:hover,
.share-btn:hover { background: var(--accent-hover); }

.status-note.info,
.notice {
  background: var(--soft);
  border-color: var(--border);
  color: var(--text);
}

.status-note.warn {
  background: var(--danger-soft);
  border-color: var(--danger);
}

.share-chain-btn {
  background: var(--soft);
  color: var(--accent);
  border-color: var(--accent);
}

.share-chain-btn:hover,
.donate-btn:hover { background: var(--soft-hover); }

.share-feedback,
.legal-links a,
.legal-links a:hover,
a.back,
a.btn {
  color: var(--accent);
}

a.btn { border-color: var(--border); }

.theme-switcher {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 9px 7px 12px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(7, 52, 49, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.theme-switcher label {
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.theme-switcher select {
  max-width: 140px;
  padding: 5px 24px 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--text);
  font: 600 0.78rem/1.2 'Segoe UI', system-ui, sans-serif;
  cursor: pointer;
}

.theme-switcher select option {
  background: var(--menu-bg);
  color: var(--text);
}

.theme-dots { display: none; }

.theme-dot {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: 2px solid rgba(128, 128, 128, 0.48);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease, outline-color 0.15s ease;
}

.theme-dot:hover { transform: scale(1.08); }
.theme-dot.is-active {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.theme-dot-light { background: #79cbc4; }
.theme-dot-dark { background: #0a1110; }
.theme-dot-pink { background: linear-gradient(135deg, #ff2e9a, #b900f5); }

@media (max-width: 560px) {
  body { padding-top: 76px; }
  .theme-switcher {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    gap: 0;
    min-height: 50px;
    padding: 8px 12px;
  }
  .theme-switcher label,
  .theme-switcher select { display: none; }
  .theme-dots {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}