:root {
  --bg: #f6f7f9;
  --bg-accent: #ffffff;
  --text: #1a1d21;
  --muted: #8a9099;
  --ring: #e6e8ec;
  --glow: #ffffff;
  --shadow: 0 10px 30px rgba(20, 24, 31, 0.08);
  --shadow-hover: 0 16px 40px rgba(20, 24, 31, 0.14);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--glow), transparent),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 300ms ease, color 300ms ease;
}

/* Background effects layer (fireworks / snow / bats) sits behind the content. */
.fx {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.view {
  position: relative;
  z-index: 1;
}

.view {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

/* Chooser */
.chooser-head {
  text-align: center;
  margin-bottom: 56px;
}

.chooser-head h1 {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.profiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
}

.profile-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.customize-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: var(--bg-accent);
  border: 1px solid var(--ring);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.customize-btn:hover {
  color: var(--text);
  box-shadow: var(--shadow);
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  font: inherit;
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease;
}

.profile:hover { transform: translateY(-6px); }
.profile:focus-visible { outline: none; }

.avatar {
  width: 132px;
  height: 132px;
  border-radius: 28px;
  background: var(--bg-accent);
  border: 1px solid var(--ring);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

.profile:hover .avatar { box-shadow: var(--shadow-hover); }
.profile:focus-visible .avatar { border-color: var(--text); }

.profile-name {
  font-size: 19px;
  font-weight: 500;
  color: var(--muted);
  transition: color 160ms ease;
}

.profile:hover .profile-name { color: var(--text); }

.avatar.has-emoji {
  font-size: 68px;
  line-height: 1;
}

/* "Add profile" card */
.add-profile {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 8px;
  transition: transform 160ms ease;
}
.add-profile:hover { transform: translateY(-6px); }
.add-avatar {
  background: transparent;
  border: 2px dashed var(--ring);
  box-shadow: none;
  color: var(--muted);
  font-size: 56px;
  font-weight: 300;
}
.add-profile:hover .add-avatar { border-color: var(--muted); color: var(--text); }

/* Blank profile view */
#profile {
  justify-content: flex-start;
  align-items: flex-start;
}

.back {
  background: none;
  border: none;
  font: inherit;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 4px;
  transition: color 160ms ease;
}

.back:hover { color: var(--text); }

/* ---- App views (chores / overview) ---- */
.app-view {
  justify-content: flex-start;
  align-items: stretch;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* Two-column body: chores left, apply panel right */
.columns {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.col-left { flex: 1 1 auto; min-width: 0; }
.col-right { flex: 0 0 300px; }

@media (max-width: 720px) {
  .columns { flex-direction: column; }
  .col-right { flex: 1 1 auto; width: 100%; }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.who {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Notification bell */
.bell-wrap { position: relative; }
.bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--ring);
  background: var(--bg-accent);
  color: var(--text);
  cursor: pointer;
  transition: box-shadow 140ms ease, border-color 140ms ease;
}
.bell:hover { box-shadow: var(--shadow); }
.bell-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #e9483f;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}
.bell-badge[hidden] { display: none; }

.notif-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  max-width: 78vw;
  background: var(--bg-accent);
  border: 1px solid var(--ring);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(20, 24, 31, 0.18);
  z-index: 50;
  overflow: hidden;
}
.notif-head {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--ring);
}
.notif-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 340px;
  overflow-y: auto;
}
.notif-empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.notif-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px;
  border-radius: 10px;
}
.notif-item.is-unread { background: rgba(127, 127, 127, 0.14); }
.notif-text { font-size: 14.5px; line-height: 1.4; }
.notif-time {
  font-size: 12px;
  color: var(--muted);
}

.back {
  background: none;
  border: none;
  font: inherit;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 4px;
  transition: color 160ms ease;
}
.back:hover { color: var(--text); }

/* Earnings header */
.earnings {
  text-align: center;
  background: var(--bg-accent);
  border: 1px solid var(--ring);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 32px 24px 28px;
  margin-bottom: 32px;
}
.earnings-label {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.earnings-amount {
  margin: 6px 0 20px;
  font-size: clamp(40px, 9vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.cashout {
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  color: var(--bg-accent);
  background: var(--text);
  border: none;
  border-radius: 12px;
  padding: 11px 22px;
  cursor: pointer;
  transition: transform 140ms ease, opacity 140ms ease;
}
.cashout:hover { transform: translateY(-2px); }
.cashout:active { transform: translateY(0); }
.banked {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* Chore list */
.chore-heading {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.chore-list { list-style: none; margin: 0; padding: 0; }

.chore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-accent);
  border: 1px solid var(--ring);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: border-color 140ms ease, background 140ms ease;
}
.chore.is-done { background: var(--bg); border-color: var(--ring); }

.chore-main {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  flex: 1;
}
.chore-main input {
  width: 22px;
  height: 22px;
  accent-color: var(--text);
  cursor: pointer;
  flex: none;
}
.chore-label {
  font-size: 17px;
  transition: color 140ms ease;
}
.is-done .chore-label {
  color: var(--muted);
  text-decoration: line-through;
}
.chore-pay {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.is-done .chore-pay { color: var(--muted); }

.chore-delete {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e9483f;
  background: #e9483f;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.chore-delete:hover {
  background: #d13b33;
  border-color: #d13b33;
}

/* Confirmation modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 31, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--bg-accent);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(20, 24, 31, 0.25);
  padding: 28px 28px 22px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}
.modal-text {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.5;
}
.modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.btn-modal-no,
.btn-modal-yes {
  min-width: 96px;
}
.btn-modal-yes {
  background: #e9483f;
  border-color: #e9483f;
  color: #fff;
}

/* Apply for new chore */
.apply {
  background: var(--bg-accent);
  border: 1px solid var(--ring);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.apply-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.field input {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 140ms ease;
}
.field input::placeholder { color: var(--muted); }
.field input:focus {
  outline: none;
  border-color: var(--text);
}
.apply-submit {
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  color: var(--bg-accent);
  background: var(--text);
  border: none;
  border-radius: 12px;
  padding: 11px 18px;
  cursor: pointer;
  transition: transform 140ms ease;
}
.apply-submit:hover { transform: translateY(-2px); }
.apply-submit:active { transform: translateY(0); }
.apply-status {
  margin: 0;
  min-height: 18px;
  font-size: 13px;
  color: var(--muted);
}
.allowance { margin-top: 20px; }
.allowance-amount {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.apply-submit:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Dad overview */
.overview { list-style: none; margin: 0; padding: 0; }
.overview-row {
  background: var(--bg-accent);
  border: 1px solid var(--ring);
  border-radius: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.overview-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 22px 24px;
  text-align: left;
}
.overview-name { font-size: 20px; font-weight: 600; }
.overview-figures { display: flex; align-items: center; gap: 24px; }
.fig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fig small {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}
.req-badge {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  background: #e9483f;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chevron {
  color: var(--muted);
  font-size: 14px;
  transition: transform 160ms ease;
}
.is-open .chevron { transform: rotate(180deg); }

/* Requests dropdown */
.requests {
  border-top: 1px solid var(--ring);
  padding: 8px 24px 20px;
}
.no-req {
  margin: 12px 0 4px;
  color: var(--muted);
  font-size: 15px;
}
.add-chore {
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--ring);
}
.add-chore-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 8px;
}
.add-chore-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.add-chore-name {
  flex: 1;
  min-width: 120px;
  font: inherit;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--ring);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
}
.add-chore-name:focus { outline: none; border-color: var(--text); }
.add-chore-amt { width: 56px; }

.pay-wrap {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--ring);
}
.pay-btn {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-accent);
}
.pay-btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}
.request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--ring);
}
.request:last-child { border-bottom: none; }
.request-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.request-label { font-size: 17px; font-weight: 500; }
.request-pay {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.request-actions { display: flex; gap: 8px; }
.btn {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  border: 1px solid var(--ring);
  background: var(--bg);
  color: var(--text);
  transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-accept {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-accent);
}
.btn-reject { color: #c0392b; }
.alter-price {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 4px 10px;
}
.alter-dollar { color: var(--muted); font-weight: 600; }
.alter-input {
  width: 64px;
  font: inherit;
  font-weight: 600;
  border: none;
  background: none;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.alter-input:focus { outline: none; }

@media (max-width: 480px) {
  .profiles { gap: 28px; }
  .avatar { width: 104px; height: 104px; font-size: 40px; border-radius: 24px; }
  .overview-figures { gap: 18px; }
}

/* ===================== Sign in ===================== */
.signin { max-width: 340px; }
.signin-who {
  margin: 0 0 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
#signinPass {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 11px 12px;
  border: 1px solid var(--ring);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}
#signinPass:focus { outline: none; border-color: var(--text); }
.signin-error {
  color: #c0392b;
  text-align: center;
}
.signin .modal-actions {
  margin-top: 18px;
  justify-content: center;
}

/* ===================== Allowance admin ===================== */
.allow-admin {
  margin-top: 40px;
}
.allow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--bg-accent);
  border: 1px solid var(--ring);
  border-radius: 14px;
  margin-bottom: 10px;
}
.allow-kid {
  font-size: 17px;
  font-weight: 600;
}
.allow-controls {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.allow-ctl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.allow-amt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg);
  border: 1px solid var(--ring);
  border-radius: 9px;
  padding: 6px 10px;
}
.allow-dollar { color: var(--muted); font-weight: 600; }
.allow-amt-input {
  width: 64px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border: none;
  background: none;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.allow-amt-input:focus { outline: none; }
.allow-rate {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--ring);
  border-radius: 9px;
  padding: 7px 10px;
  cursor: pointer;
}
.allow-rate:focus { outline: none; border-color: var(--text); }

/* ===================== Parent history ===================== */
.history {
  margin-top: 44px;
}
.history-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.history-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--ring);
  font-size: 14.5px;
}
.history-item:last-child { border-bottom: none; }
.history-item .h-time {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  flex: none;
}
.history-empty {
  color: var(--muted);
  font-size: 14px;
  padding: 4px 2px;
}

/* Restore button inside a parent notification */
.btn-restore {
  align-self: flex-start;
  margin: 2px 0;
  padding: 6px 12px;
  font-size: 13px;
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-accent);
}

/* ===================== Customize profile ===================== */
.customizer {
  max-width: 420px;
  text-align: left;
}
.modal-title {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.cust-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.cust-preview .avatar {
  width: 96px;
  height: 96px;
  font-size: 40px;
  border-radius: 24px;
}
.cust-preview .avatar.has-emoji { font-size: 52px; }

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  margin: 10px 0 20px;
  max-height: 168px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--ring);
  border-radius: 12px;
}
.emoji-opt {
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
  padding: 6px 0;
  cursor: pointer;
  transition: background 120ms ease;
}
.emoji-opt:hover { background: rgba(127, 127, 127, 0.16); }

#custColor {
  width: 100%;
  height: 42px;
  padding: 4px;
  border: 1px solid var(--ring);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
}
.cust-msg {
  margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
  color: #c0392b;
  min-height: 0;
}
.cust-msg:empty { display: none; }
.customizer .modal-actions { margin-top: 22px; }

.pw-change {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--ring);
}
.pw-change > input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--ring);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}
.pw-change > input:focus { outline: none; border-color: var(--text); }
.pw-change .apply-status { margin: 0; }
.pw-show {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.pw-show input {
  accent-color: var(--text);
  cursor: pointer;
}
.cust-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cust-actions-right { display: flex; gap: 12px; }
.btn-danger {
  color: #c0392b;
  border-color: #e6b8b2;
  background: var(--bg-accent);
}
.btn-danger.armed {
  background: #e9483f;
  border-color: #e9483f;
  color: #fff;
}

/* Role choice (Kid / Parent) */
.role-choices {
  display: flex;
  gap: 10px;
}
.role-choice {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ring);
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
}
.role-choice input { accent-color: var(--text); }

@media (max-width: 480px) {
  .emoji-grid { grid-template-columns: repeat(8, 1fr); }
}

/* ===================== Theming ===================== */

/* Theming button + menu */
.theme-wrap { position: relative; }
.theme-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-accent);
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 9px 14px;
  cursor: pointer;
  transition: box-shadow 140ms ease, border-color 140ms ease;
}
.theme-btn:hover { box-shadow: var(--shadow); }
.theme-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 210px;
  background: var(--bg-accent);
  border: 1px solid var(--ring);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(20, 24, 31, 0.18);
  z-index: 50;
  overflow: hidden;
}
.theme-menu[hidden] { display: none; }
.menu-head {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--ring);
}
.theme-list { list-style: none; margin: 0; padding: 6px; }
.theme-opt {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: none;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 120ms ease;
}
.theme-opt:hover { background: rgba(127, 127, 127, 0.14); }
.theme-opt.is-active { font-weight: 600; }
.theme-opt.is-active::after { content: " ✓"; color: var(--muted); }

/* Display fonts per theme */
:root[data-theme="newyear"] body {
  font-family: "Bungee", "Arial Black", Impact, sans-serif; /* bold & exciting */
}
:root[data-theme="christmas"] body {
  font-family: "Pacifico", "Comic Sans MS", cursive; /* fun */
}
:root[data-theme="halloween"] body {
  font-family: "Creepster", Impact, fantasy; /* spooky */
  letter-spacing: 0.6px;
}

/* Keep what you're typing readable, whatever the display font is. */
:root[data-theme="newyear"] input,
:root[data-theme="christmas"] input,
:root[data-theme="halloween"] input {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: normal;
}

/* ---- New Year: dark + glowing fireworks ---- */
:root[data-theme="newyear"] {
  --bg: #070714;
  --bg-accent: #131332;
  --text: #ffffff;
  --muted: #9a9ad0;
  --ring: #2a2a54;
  --glow: rgba(120, 120, 255, 0.16);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 16px 44px rgba(0, 0, 0, 0.6);
}
/* Static firework bursts: a glowing core ringed by particles. */
.fx-fw {
  position: absolute;
  width: 0;
  height: 0;
}
.fx-fw-core {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px 5px currentColor;
}
.fx-fw-p {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px 2px currentColor;
  opacity: 0.9;
}

/* ---- Christmas: snowy, red & green ---- */
:root[data-theme="christmas"] {
  --bg: #e9f2ec;
  --bg-accent: #ffffff;
  --text: #14432b;
  --muted: #6f8f7d;
  --ring: #cfe3d6;
  --glow: #ffffff;
  --shadow: 0 10px 30px rgba(20, 60, 40, 0.12);
  --shadow-hover: 0 16px 40px rgba(20, 60, 40, 0.18);
}
:root[data-theme="christmas"] .earnings { border-top: 4px solid #c1121f; }
:root[data-theme="christmas"] .chore-heading,
:root[data-theme="christmas"] .chooser-head h1 { color: #c1121f; }
.fx-snow {
  position: absolute;
  top: -24px;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(120, 160, 200, 0.7);
  animation: fx-snow linear infinite;
}
@keyframes fx-snow {
  0%   { transform: translateY(-24px) translateX(0); }
  100% { transform: translateY(112vh) translateX(var(--drift, 20px)); }
}
.fx-tree {
  position: absolute;
  bottom: 10px;
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
}
.fx-sleigh {
  position: absolute;
  top: 12%;
  left: -220px;
  font-size: 46px;
  line-height: 1;
  white-space: nowrap;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  animation: fx-sleigh 15s linear infinite;
}
@keyframes fx-sleigh {
  0%   { transform: translateX(0) translateY(0); }
  50%  { transform: translateX(50vw) translateY(-16px); }
  100% { transform: translateX(calc(100vw + 260px)) translateY(0); }
}

/* ---- Halloween: dark, pumpkin orange & purple, drifting bats ---- */
:root[data-theme="halloween"] {
  --bg: #120c18;
  --bg-accent: #1e1430;
  --text: #ff8c1a;
  --muted: #b98cff;
  --ring: #3b2a4d;
  --glow: rgba(255, 120, 0, 0.14);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 16px 44px rgba(0, 0, 0, 0.6);
}
:root[data-theme="halloween"] .chore-heading,
:root[data-theme="halloween"] .earnings-amount,
:root[data-theme="halloween"] .chooser-head h1 {
  text-shadow: 0 0 14px rgba(255, 140, 26, 0.5);
}
.fx-bat {
  position: absolute;
  animation: fx-bat ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
@keyframes fx-bat {
  from { transform: translate(0, 0) rotate(-6deg); }
  to   { transform: translate(46px, -34px) rotate(6deg); }
}
.fx-pumpkin {
  position: absolute;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.6));
  animation: fx-bob ease-in-out infinite alternate;
}
@keyframes fx-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* ---- Hacker: dark, neon green, monospace, CRT scanlines ---- */
:root[data-theme="hacker"] {
  --bg: #050805;
  --bg-accent: #0c120c;
  --text: #39ff14;
  --muted: #2ea043;
  --ring: #16391a;
  --glow: rgba(57, 255, 20, 0.10);
  --shadow: 0 0 0 1px rgba(57, 255, 20, 0.15), 0 10px 30px rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 0 0 1px rgba(57, 255, 20, 0.3), 0 16px 40px rgba(0, 0, 0, 0.7);
}
:root[data-theme="hacker"] body {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", "Courier New", monospace;
}
:root[data-theme="hacker"] .chore-heading,
:root[data-theme="hacker"] .earnings-amount,
:root[data-theme="hacker"] .chooser-head h1,
:root[data-theme="hacker"] .profile-name {
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.7);
}
:root[data-theme="hacker"] .fx {
  background: repeating-linear-gradient(
    to bottom,
    rgba(57, 255, 20, 0.045) 0px,
    rgba(57, 255, 20, 0.045) 1px,
    transparent 2px,
    transparent 4px
  );
}

/* ---- Dark: plain neutral dark mode (chooser) ---- */
:root[data-theme="dark"] {
  --bg: #14171c;
  --bg-accent: #1c2027;
  --text: #eef1f5;
  --muted: #98a1ad;
  --ring: #2c313a;
  --glow: rgba(255, 255, 255, 0.04);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.chooser-theme {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 30;
}

/* ---- Preppy: pastel pink, bobbing bows & manicures ---- */
:root[data-theme="preppy"] {
  --bg: #ffe3ef;
  --bg-accent: #fff5f9;
  --text: #a3346a;
  --muted: #cf8fac;
  --ring: #f6cfe0;
  --glow: #ffd6e8;
  --shadow: 0 10px 30px rgba(200, 120, 160, 0.18);
  --shadow-hover: 0 16px 40px rgba(200, 120, 160, 0.26);
}
.fx-charm {
  position: absolute;
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(214, 130, 170, 0.4));
  animation: fx-bob ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .fx-fw, .fx-snow, .fx-bat, .fx-pumpkin, .fx-charm { animation: none; }
}