/* ── Reset ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Dark mode (Standard) ── */
:root {
  --bg:                 #0f0f13;
  --text:               #f0f0f0;
  --text-heading:       #e2e2f0;
  --text-muted:         #6b7280;
  --text-subtle:        #4b5563;
  --text-label:         #4f4f7a;
  --card-bg:            #1a1a24;
  --card-border:        #2d2d3d;
  --surface:            #12121c;
  --surface-border:     #222235;
  --dot-bg:             #1a1a28;
  --dot-border:         #2d2d45;
  --dot-color:          #4b5563;
  --line-bg:            #1f1f30;
  --tip-color:          #7c7ca8;
  --tip-em:             #F07820;
  --timer-track:        #1f1f30;
  --ghost-bg:           #12121c;
  --ghost-border:       #2d2d45;
  --ghost-color:        #9ca3af;
  --ghost-hover-border: #4f4f7a;
  --ghost-hover-color:  #c4c4d4;
  --toggle-bg:          #1a1a28;
  --toggle-border:      #2d2d45;
  --toggle-color:       #9ca3af;
  --copy-color:         #6b5040;
  --copy-hover:         #F07820;
  --link:               #F07820;
  --link-hover:         #F59340;
  --divider:            #1f1f2e;
}

/* ── Light mode ── */
body.light {
  --bg:                 #f3f4f6;
  --text:               #111827;
  --text-heading:       #111827;
  --text-muted:         #4b5563;
  --text-subtle:        #6b7280;
  --text-label:         #9ca3af;
  --card-bg:            #ffffff;
  --card-border:        #e5e7eb;
  --surface:            #f9fafb;
  --surface-border:     #e5e7eb;
  --dot-bg:             #f3f4f6;
  --dot-border:         #d1d5db;
  --dot-color:          #9ca3af;
  --line-bg:            #e5e7eb;
  --tip-color:          #4b5563;
  --tip-em:             #C05A10;
  --timer-track:        #e5e7eb;
  --ghost-bg:           #f3f4f6;
  --ghost-border:       #d1d5db;
  --ghost-color:        #6b7280;
  --ghost-hover-border: #9ca3af;
  --ghost-hover-color:  #111827;
  --toggle-bg:          #ffffff;
  --toggle-border:      #e5e7eb;
  --toggle-color:       #4b5563;
  --copy-color:         #f5d5b8;
  --copy-hover:         #F07820;
  --link:               #C05A10;
  --link-hover:         #F07820;
  --divider:            #e5e7eb;
}

/* ── Base ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ── Theme toggle ── */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  color: var(--toggle-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: border-color 0.2s, background 0.3s, transform 0.15s;
  z-index: 100;
}

.theme-toggle:hover { transform: scale(1.1); border-color: var(--ghost-hover-border); }

/* ── Footer ── */
.footer {
  font-size: 0.8rem;
  color: var(--text-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.footer a {
  color: var(--text-subtle);
  text-decoration: none;
  transition: color 0.2s;
}

.footer a:hover { color: var(--link); }
.footer-sep { opacity: 0.35; }