html[data-theme="kpop"] {
  /* Sunset street — teal sky accents */
  --tg-theme-bg-color: #1a1018;
  --tg-theme-text-color: #faf8f2;
  --tg-theme-hint-color: #b8a8b4;
  --tg-theme-button-color: #5eb8c8;
  --tg-theme-button-text-color: #f0fcff;
  --tg-theme-secondary-bg-color: rgba(255, 255, 255, 0.03);

  --bg: #1a1018;
  --text: #fffafc;
  --hint: #d4e8ee;
  --sky-teal: #4a9ead;
  --sky-bright: #9edde8;
  --sky-accent: #6ec4d4;
  --sky-deep: #2d6b78;
  --teal-glow: rgba(110, 196, 212, 0.35);
  --accent: var(--sky-teal);
  --accent-text: #f0fcff;
  --gold: #e8c878;
  --gold-bright: #f5e0a8;
  --gold-deep: #c9a855;
  --secondary: rgba(255, 255, 255, 0.03);
  --border: rgba(232, 200, 120, 0.72);
  --field-bg: rgba(255, 255, 255, 0.06);
  --error-bg: rgba(58, 32, 40, 0.28);
  --error-text: #ffc8d8;
  --danger-bg: rgba(74, 32, 48, 0.28);
  --danger-text: #ffd4e8;
  --accent-soft: rgba(74, 158, 173, 0.14);
  --chart-training-yes: #7ec8b0;
  --chart-training-no: #6a6460;
  --chart-routes-value: var(--sky-teal);
  --chart-routes-zero: #d898b8;
  --heading-font: "Segoe UI", system-ui, sans-serif;
  --surface-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  --card-glass-bg: rgba(255, 255, 255, 0.025);
  --panel-glass-bg: rgba(255, 255, 255, 0.02);
  --btn-glass-bg: rgba(255, 255, 255, 0.04);
  --btn-glass-bg-accent: rgba(74, 158, 173, 0.08);
  --btn-glass-border: rgba(232, 200, 120, 0.72);
  --btn-glass-border-accent: rgba(245, 224, 168, 0.85);
  --accent-border-left: #f0d890;
  --theme-panel-border: #f0d890;
  --btn-accent-bg: linear-gradient(
    135deg,
    rgba(74, 158, 173, 0.42),
    rgba(45, 107, 120, 0.32)
  );
  --btn-accent-text: #f0fcff;
  --btn-accent-shadow: none;
  --fab-shadow: 0 8px 24px rgba(74, 158, 173, 0.32);

  --theme-heading: #fffafc;
  --theme-subheading: var(--sky-bright);
  --theme-strong: #fffafc;
  --theme-countdown-color: var(--sky-bright);
  --theme-countdown-shadow: 0 0 20px rgba(110, 196, 212, 0.55);
  --theme-heading-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  --theme-heading-spacing: 0.03em;
  --theme-done-task: #a894a4;
  --theme-checkbox-accent: var(--sky-accent);
  --theme-bar-from: var(--sky-deep);
  --theme-bar-to: var(--sky-teal);
  --theme-modal-backdrop: rgba(12, 8, 14, 0.68);
  --theme-date-btn-text: var(--sky-bright);
  --theme-accent-glow: var(--teal-glow);
  --theme-surface-blur: blur(2px);
  --theme-cal-today-outline: var(--sky-accent);
}

html[data-theme="kpop"],
html[data-theme="kpop"] body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image:
    linear-gradient(
      rgba(30, 50, 58, 0.14) 0%,
      rgba(36, 20, 32, 0.22) 55%,
      rgba(20, 12, 18, 0.42) 100%
    ),
    url("/kpop_background.jpg?v=20260601-23");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* Main section picker */
html[data-theme="kpop"] #app .section-card {
  background: var(--card-glass-bg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1.5px solid var(--btn-glass-border-accent);
  border-left: 4px solid var(--accent-border-left);
  box-shadow: 0 0 10px rgba(232, 200, 120, 0.2);
}

html[data-theme="kpop"] #app .section-card strong {
  color: #fffafc;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

html[data-theme="kpop"] #app .section-card span {
  color: rgba(245, 224, 168, 0.96);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Inside sections — deeds, bouldering, timer */
html[data-theme="kpop"] #app .area-block,
html[data-theme="kpop"] #app .stat-card,
html[data-theme="kpop"] #app .day-stat,
html[data-theme="kpop"] #app .chart-block,
html[data-theme="kpop"] #app .timer-card,
html[data-theme="kpop"] #app .timer-field,
html[data-theme="kpop"] #app .modal-panel,
html[data-theme="kpop"] #app .settings-block {
  background: var(--panel-glass-bg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1.5px solid var(--btn-glass-border-accent);
  border-left: 4px solid var(--accent-border-left);
  box-shadow: 0 0 10px rgba(232, 200, 120, 0.2);
}

html[data-theme="kpop"] #app .area-block h2,
html[data-theme="kpop"] #app .chart-title {
  color: var(--sky-bright);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

html[data-theme="kpop"] #app .timer-card-head strong,
html[data-theme="kpop"] #app .stat-card strong,
html[data-theme="kpop"] #app .day-stat strong,
html[data-theme="kpop"] #app .task-row label,
html[data-theme="kpop"] #app .task-label,
html[data-theme="kpop"] #app .timer-field strong {
  color: #fffafc;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}

html[data-theme="kpop"] #app .timer-card-head span,
html[data-theme="kpop"] #app .stat-card span,
html[data-theme="kpop"] #app .timer-step-label,
html[data-theme="kpop"] #app .timer-field span,
html[data-theme="kpop"] #app .empty-state,
html[data-theme="kpop"] #app .day-stat span {
  color: rgba(200, 235, 242, 0.95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

html[data-theme="kpop"] #app .task-row {
  border-top-color: rgba(232, 200, 120, 0.55);
}

html[data-theme="kpop"] #app .stats-btn,
html[data-theme="kpop"] #app .timer-add-btn {
  background: var(--btn-accent-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--btn-glass-border-accent);
  color: var(--btn-accent-text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

html[data-theme="kpop"] #app .icon-btn,
html[data-theme="kpop"] #app .secondary-btn,
html[data-theme="kpop"] #app .timer-phase-btn,
html[data-theme="kpop"] #app .settings-toggle,
html[data-theme="kpop"] #app .theme-option,
html[data-theme="kpop"] #app .calendar-header button,
html[data-theme="kpop"] #app .timer-action {
  background: var(--btn-glass-bg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1.5px solid var(--btn-glass-border-accent);
  color: var(--text);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  box-shadow: none;
}

html[data-theme="kpop"] #app .date-btn {
  background: var(--btn-glass-bg-accent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1.5px solid var(--btn-glass-border-accent);
  color: var(--theme-date-btn-text);
  box-shadow: inset 4px 0 0 var(--accent-border-left);
}

html[data-theme="kpop"] #app .timer-phase-btn-active,
html[data-theme="kpop"] #app .timer-field-active {
  background: var(--accent-soft);
  border-color: var(--btn-glass-border-accent);
  outline-color: var(--sky-accent);
  box-shadow: inset 0 0 0 1px var(--teal-glow);
}

html[data-theme="kpop"] #app .theme-option.selected,
html[data-theme="kpop"] #app .settings-toggle.is-on {
  background: var(--accent-soft);
  border-color: var(--btn-glass-border-accent);
  border-left-color: var(--accent-border-left);
  outline-color: var(--sky-accent);
}

html[data-theme="kpop"] #app .settings-toggle.is-on .settings-toggle-state {
  color: var(--sky-bright);
}

html[data-theme="kpop"] #app .cal-day.selected {
  background: var(--btn-accent-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid var(--btn-glass-border-accent);
  color: var(--btn-accent-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

html[data-theme="kpop"] #app .cal-day.today:not(.selected) {
  outline-color: var(--sky-accent);
}

html[data-theme="kpop"] #app .timer-countdown {
  color: #e8f8fc;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), var(--theme-countdown-shadow);
}

html[data-theme="kpop"] #app .top-bar h1 {
  color: #fffafc;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

html[data-theme="kpop"] #app .danger-btn {
  background: rgba(255, 80, 140, 0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1.5px solid var(--btn-glass-border-accent);
}

html[data-theme="kpop"] #app .timer-form input,
html[data-theme="kpop"] #app .task-number-input {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1.5px solid var(--btn-glass-border-accent);
}