:root {
  --bg-a: #fff7ef;
  --bg-b: #f2fbff;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-strong: rgba(255, 255, 255, 0.94);
  --line: #d6e8f6;
  --ink: #18222e;
  --muted: #5e6f82;
  --accent: #ff7a38;
  --accent-deep: #f2552c;
  --accent-soft: #ffe9de;
  --sky: #4cc4ff;
  --mint: #44d2a8;
  --danger: #d93f61;
  --shadow-lg: 0 24px 54px rgba(15, 41, 68, 0.14);
  --shadow-md: 0 10px 26px rgba(24, 38, 57, 0.1);
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Outfit", sans-serif;
  background:
    radial-gradient(850px 460px at -5% -8%, rgba(255, 161, 89, 0.34), transparent 60%),
    radial-gradient(880px 440px at 112% 0%, rgba(88, 193, 255, 0.28), transparent 60%),
    linear-gradient(145deg, var(--bg-a), var(--bg-b));
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: auto;
  border-radius: 999px;
  filter: blur(42px);
  pointer-events: none;
}

body::before {
  width: 38vw;
  min-width: 240px;
  height: 38vw;
  min-height: 240px;
  top: 8vh;
  left: -10vw;
  background: rgba(255, 129, 63, 0.22);
  animation: driftA 13s ease-in-out infinite;
}

body::after {
  width: 42vw;
  min-width: 260px;
  height: 42vw;
  min-height: 260px;
  right: -13vw;
  bottom: -10vh;
  background: rgba(74, 191, 255, 0.2);
  animation: driftB 15s ease-in-out infinite;
}

.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

.shell {
  position: relative;
  z-index: 10;
  max-width: 1180px;
  margin: 1rem auto;
  padding: 0 1rem 2.1rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.hero,
.panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
}

.hero {
  grid-column: span 12;
  text-align: center;
  padding: 1.35rem 1rem;
  position: relative;
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  z-index: -1;
  background: linear-gradient(120deg, rgba(255, 122, 56, 0.4), rgba(76, 196, 255, 0.35));
  filter: blur(18px);
  opacity: 0.45;
}

.signature {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  color: var(--muted);
  letter-spacing: 0.02em;
}

h1 {
  margin: 0.25rem 0 0;
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
}

h2,
h3,
p {
  margin-top: 0;
}

.panel {
  padding: 1rem;
  transition: transform 170ms ease, box-shadow 170ms ease;
}

.panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(21, 37, 52, 0.12);
}

.input-panel {
  grid-column: span 7;
}

.timer-panel {
  grid-column: span 5;
}

.majors-panel {
  grid-column: span 12;
}

label {
  display: block;
  margin: 0.62rem 0 0.25rem;
  font-weight: 700;
}

input,
textarea,
button {
  font: inherit;
}

input,
textarea {
  width: 100%;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  padding: 0.7rem 0.75rem;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #85cbff;
  box-shadow: 0 0 0 4px rgba(102, 194, 255, 0.2);
}

textarea {
  min-height: 102px;
  resize: vertical;
}

.actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.52rem;
  align-items: center;
  flex-wrap: wrap;
}

button {
  border: 0;
  border-radius: 12px;
  padding: 0.55rem 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

button:active {
  transform: translateY(1px) scale(0.985);
}

button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 10px 20px rgba(227, 83, 42, 0.34);
}

.btn-primary:hover {
  filter: saturate(1.06) brightness(1.02);
}

.btn-secondary {
  color: var(--ink);
  border: 1px solid var(--line);
  background: #fff;
}

.tiny {
  padding: 0.3rem 0.48rem;
  font-size: 0.8rem;
}

.status {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.status.error {
  color: var(--danger);
  font-weight: 700;
}

.hidden {
  display: none !important;
}

.mono {
  margin: 0.6rem 0 0.22rem;
  font-family: "JetBrains Mono", monospace;
  color: #3b5770;
  font-size: 0.93rem;
}

.timer {
  margin: 0.2rem 0;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 8px 24px rgba(76, 196, 255, 0.28);
}

.timer-finished {
  animation: timerFinish 1s ease-out;
}

.timer-edit {
  display: grid;
  grid-template-columns: auto 84px auto 84px auto;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.timer-edit label {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.timer-edit input {
  padding: 0.38rem 0.45rem;
}

.music-panel {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}

.music-panel label {
  margin: 0.2rem 0 0.3rem;
}

.music-player-wrap {
  margin-top: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.music-player-wrap iframe {
  width: 100%;
  height: 160px;
  border: 0;
  display: block;
}

.tabs {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.tab-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.tab-btn.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--sky), #3195ff);
  box-shadow: 0 8px 20px rgba(54, 150, 255, 0.32);
}

.majors-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.8rem;
}

.major-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
  padding: 0.75rem;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  animation: cardIn 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.major-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.major-head h3 {
  margin: 0;
  font-size: 1.06rem;
}

.x-btn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #f5c6af;
  background: #ffefe4;
  color: #af4721;
  font-weight: 800;
  line-height: 1;
  padding: 0;
}

.subtask-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.5rem;
}

.subtask-item {
  border: 1px solid #dceaf6;
  border-radius: 11px;
  background: #fff;
  padding: 0.48rem;
  cursor: grab;
  transition: box-shadow 130ms ease, transform 130ms ease, border-color 130ms ease;
}

.subtask-item:hover {
  border-color: #a6d8f8;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(35, 73, 105, 0.1);
}

.subtask-item.done {
  opacity: 0.65;
}

.subtask-item.dragging {
  opacity: 0.56;
}

.drag-target {
  border-color: #7cc9f7 !important;
  box-shadow: 0 0 0 3px rgba(124, 201, 247, 0.27);
}

.subtask-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subtask-title {
  margin: 0;
  font-weight: 700;
}

.subtask-meta {
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.subtask-controls {
  margin-top: 0.42rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.subtask-controls label {
  margin: 0;
  font-weight: 600;
  color: var(--muted);
}

.minutes-input {
  width: 72px;
  padding: 0.35rem 0.42rem;
}

.complete-drop-zone {
  margin-top: 0.9rem;
  border-radius: 14px;
  border: 2px dashed #8acfff;
  background: linear-gradient(135deg, rgba(213, 240, 255, 0.6), rgba(233, 249, 255, 0.8));
  color: #2d6188;
  text-align: center;
  font-weight: 700;
  padding: 1rem 0.75rem;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.complete-drop-zone.is-over {
  border-color: #4cc4ff;
  transform: scale(1.01);
  box-shadow: 0 12px 26px rgba(41, 122, 171, 0.2);
}

.completed-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.72rem;
}

.completed-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.7rem;
}

.restore-drop-zone {
  margin-bottom: 0.8rem;
  border-radius: 14px;
  border: 2px dashed #c8b9d8;
  background: linear-gradient(140deg, rgba(242, 235, 248, 0.9), rgba(242, 249, 252, 0.9));
  color: #6f5f84;
  text-align: center;
  font-weight: 700;
  padding: 0.9rem 0.75rem;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.restore-drop-zone.is-over {
  border-color: #9a88b5;
  transform: scale(1.01);
  box-shadow: 0 8px 16px rgba(124, 112, 148, 0.16);
}

#purgeCompletedBtn {
  border-color: #2b3342;
  background: linear-gradient(140deg, #202735, #090b11);
  color: #e6ecf8;
  box-shadow: 0 10px 24px rgba(6, 8, 14, 0.35);
}

#purgeCompletedBtn:hover {
  filter: brightness(1.08);
}

.completed-item {
  border: 1px solid #d7dce3;
  border-radius: 12px;
  padding: 0.68rem;
  background: #f4f6f8;
  color: #718292;
  opacity: 0;
  transform: translateY(10px);
  animation: cardIn 330ms ease forwards;
  animation-delay: var(--delay, 0ms);
  cursor: grab;
}

.completed-item.dragging {
  opacity: 0.58;
}

.completed-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.completed-title {
  margin: 0;
  color: #667683;
  text-decoration: line-through;
  font-weight: 800;
}

.completed-meta {
  margin: 0.18rem 0 0;
  color: #8394a0;
  font-size: 0.86rem;
  text-decoration: line-through;
}

body.impact-active .hero {
  animation: impactHero 620ms ease-out;
}

body.impact-active .shell {
  animation: impactShake 320ms ease-out;
}

body.quake-active .shell {
  animation: quakeShake 820ms cubic-bezier(0.2, 0.72, 0.24, 1);
}

body.purge-quake-active .shell {
  animation: purgeQuakeShake 1250ms cubic-bezier(0.1, 0.7, 0.15, 1);
}

.impact-burst {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 50%;
  top: 42%;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff3d6 0%, #ffad7f 40%, rgba(255, 127, 71, 0.05) 75%);
  box-shadow: 0 0 0 0 rgba(255, 133, 68, 0.4);
  animation: burstWave 780ms cubic-bezier(0.15, 0.77, 0.3, 1) forwards;
}

.impact-spark {
  position: absolute;
  width: 9px;
  height: 9px;
  left: 50%;
  top: 42%;
  margin-left: -4.5px;
  margin-top: -4.5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff974e, #ffd45f);
  transform: rotate(var(--angle)) translateX(0px) scale(0.6);
  animation: sparkFly var(--life) ease-out forwards;
}

.confetti-piece {
  position: absolute;
  border-radius: 2px;
  will-change: transform, opacity;
  animation-name: confettiFall;
  animation-timing-function: cubic-bezier(0.15, 0.72, 0.31, 1);
  animation-fill-mode: forwards;
}

.black-hole {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  border-radius: 999px;
  background: radial-gradient(circle, #000 0%, #05070d 44%, #1f2f55 58%, #52b0ff 82%, rgba(82, 176, 255, 0) 100%);
  box-shadow: 0 0 32px rgba(82, 176, 255, 0.52), 0 0 90px rgba(77, 132, 255, 0.35);
  animation: blackHoleGrow 1250ms cubic-bezier(0.13, 0.66, 0.2, 1) forwards;
}

.black-hole-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 999px;
  border: 2px solid rgba(123, 195, 255, 0.8);
  opacity: 0;
  animation: blackHoleRing 700ms ease-out forwards;
  animation-delay: var(--delay, 0ms);
}

.black-hole-shard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 2px;
  background: linear-gradient(150deg, #d3e0ff, #77c8ff);
  box-shadow: 0 0 12px rgba(118, 206, 255, 0.6);
  transform: rotate(var(--angle)) translateX(var(--distance));
  animation: blackHoleSuck var(--duration, 700ms) cubic-bezier(0.17, 0.89, 0.34, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes cardIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes timerFinish {
  0% {
    transform: scale(1);
    text-shadow: 0 8px 24px rgba(76, 196, 255, 0.28);
    color: var(--ink);
  }
  30% {
    transform: scale(1.08);
    text-shadow: 0 10px 32px rgba(255, 122, 56, 0.5);
    color: #f2552c;
  }
  100% {
    transform: scale(1);
    text-shadow: 0 8px 24px rgba(76, 196, 255, 0.28);
    color: var(--ink);
  }
}

@keyframes burstWave {
  0% {
    transform: scale(0.35);
    opacity: 0.9;
    box-shadow: 0 0 0 0 rgba(255, 133, 68, 0.48);
  }
  70% {
    opacity: 0.75;
    box-shadow: 0 0 0 100px rgba(255, 133, 68, 0);
  }
  100% {
    transform: scale(9.8);
    opacity: 0;
    box-shadow: 0 0 0 130px rgba(255, 133, 68, 0);
  }
}

@keyframes sparkFly {
  0% {
    transform: rotate(var(--angle)) translateX(0) scale(0.55);
    opacity: 1;
  }
  100% {
    transform: rotate(var(--angle)) translateX(var(--distance)) scale(1.05);
    opacity: 0;
  }
}

@keyframes confettiFall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0turn) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--drift), 120vh, 0) rotate(calc(var(--spin) * 2.5turn)) scale(0.8);
    opacity: 0;
  }
}

@keyframes blackHoleGrow {
  0% {
    transform: scale(0.4) rotate(0turn);
    opacity: 0.86;
  }
  38% {
    transform: scale(5.2) rotate(0.35turn);
    opacity: 1;
  }
  70% {
    transform: scale(7.4) rotate(0.66turn);
    opacity: 0.95;
  }
  100% {
    transform: scale(0.2) rotate(1turn);
    opacity: 0;
  }
}

@keyframes blackHoleRing {
  0% {
    transform: scale(0.2);
    opacity: 0.9;
  }
  100% {
    transform: scale(16);
    opacity: 0;
  }
}

@keyframes blackHoleSuck {
  0% {
    transform: rotate(var(--angle)) translateX(var(--distance)) scale(1);
    opacity: 0.95;
  }
  100% {
    transform: rotate(var(--angle)) translateX(0) scale(0.2);
    opacity: 0;
  }
}

@keyframes impactHero {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.015);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes impactShake {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(0, -2px, 0);
  }
  50% {
    transform: translate3d(0, 1px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes quakeShake {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  10% {
    transform: translate3d(-8px, 3px, 0) rotate(-0.25deg);
  }
  20% {
    transform: translate3d(9px, -4px, 0) rotate(0.28deg);
  }
  30% {
    transform: translate3d(-11px, 4px, 0) rotate(-0.32deg);
  }
  40% {
    transform: translate3d(10px, -2px, 0) rotate(0.22deg);
  }
  50% {
    transform: translate3d(-7px, 3px, 0) rotate(-0.2deg);
  }
  60% {
    transform: translate3d(6px, -2px, 0) rotate(0.16deg);
  }
  70% {
    transform: translate3d(-4px, 2px, 0) rotate(-0.1deg);
  }
  80% {
    transform: translate3d(3px, -1px, 0) rotate(0.06deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes purgeQuakeShake {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  8% {
    transform: translate3d(-18px, 8px, 0) rotate(-0.6deg) scale(1.002);
  }
  16% {
    transform: translate3d(20px, -10px, 0) rotate(0.7deg) scale(1.003);
  }
  24% {
    transform: translate3d(-24px, 11px, 0) rotate(-0.8deg) scale(1.004);
  }
  32% {
    transform: translate3d(22px, -12px, 0) rotate(0.7deg) scale(1.004);
  }
  40% {
    transform: translate3d(-19px, 9px, 0) rotate(-0.6deg) scale(1.003);
  }
  48% {
    transform: translate3d(16px, -8px, 0) rotate(0.5deg) scale(1.002);
  }
  56% {
    transform: translate3d(-13px, 7px, 0) rotate(-0.4deg) scale(1.002);
  }
  64% {
    transform: translate3d(11px, -5px, 0) rotate(0.3deg) scale(1.001);
  }
  72% {
    transform: translate3d(-8px, 4px, 0) rotate(-0.2deg) scale(1.001);
  }
  80% {
    transform: translate3d(6px, -3px, 0) rotate(0.12deg) scale(1);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes driftA {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(30px, -24px);
  }
}

@keyframes driftB {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-26px, 22px);
  }
}

@media (max-width: 980px) {
  .input-panel,
  .timer-panel,
  .majors-panel {
    grid-column: span 12;
  }

  .shell {
    margin: 0.8rem auto;
  }

  .majors-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .shell {
    padding: 0 0.7rem 1.3rem;
    gap: 0.75rem;
  }

  .hero,
  .panel {
    border-radius: 14px;
  }

  .hero {
    padding: 1rem 0.8rem;
  }

  .panel {
    padding: 0.85rem;
  }

  .actions {
    gap: 0.42rem;
  }

  button {
    padding: 0.48rem 0.72rem;
  }

  .subtask-controls {
    gap: 0.28rem;
  }

  .minutes-input {
    width: 64px;
  }

  .timer-edit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .timer-edit label {
    font-size: 0.8rem;
  }

  .timer-edit button {
    grid-column: span 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* HEHE PASTEL CHAOS PAINT BUCKET :3 */
:root {
  --bg-a: #fff6fb;
  --bg-b: #f3fcff;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --line: #ffd6ea;
  --ink: #3a2742;
  --muted: #8f6f95;
  --accent: #ff8bc2;
  --accent-deep: #ff6aa9;
  --accent-soft: #ffe8f4;
  --sky: #78d8ff;
  --mint: #8ae7cb;
  --danger: #dc4f7f;
}

body {
  background:
    radial-gradient(900px 420px at -8% -12%, rgba(255, 156, 210, 0.26), transparent 62%),
    radial-gradient(920px 430px at 108% 2%, rgba(124, 220, 255, 0.24), transparent 62%),
    linear-gradient(150deg, var(--bg-a), var(--bg-b));
}

.hero,
.panel,
.major-card,
.completed-item {
  border-radius: 24px;
}

.hero {
  background:
    radial-gradient(260px 120px at 12% 4%, rgba(255, 188, 224, 0.25), transparent 72%),
    radial-gradient(260px 120px at 92% 8%, rgba(154, 228, 255, 0.25), transparent 72%),
    var(--panel);
}

.hero h1 {
  letter-spacing: 0.01em;
  text-shadow: 0 8px 22px rgba(255, 116, 186, 0.25);
}

.panel {
  border: 1px solid #ffd9ea;
  box-shadow: 0 18px 44px rgba(190, 98, 151, 0.14);
}

.panel::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  right: 16px;
  top: 14px;
  background: #ffd0e8;
  box-shadow:
    14px 4px 0 #cdefff,
    6px 16px 0 #d5ffe9;
  opacity: 0.9;
  pointer-events: none;
}

.panel {
  position: relative;
  overflow: clip;
}

textarea,
input {
  border-radius: 16px;
  border-color: #ffd4e8;
  background: linear-gradient(180deg, #fff, #fff9fd);
}

textarea:focus,
input:focus {
  border-color: #ff9fcd;
  box-shadow: 0 0 0 4px rgba(255, 150, 201, 0.22);
}

button {
  border-radius: 999px;
}

.btn-primary {
  background: linear-gradient(135deg, #ff98c8, #ff76b1);
  box-shadow: 0 10px 24px rgba(236, 101, 167, 0.34);
}

.btn-secondary {
  background: linear-gradient(180deg, #ffffff, #fff8fd);
  border: 1px solid #f6cfe4;
}

.tab-btn.active {
  background: linear-gradient(135deg, #ff8dc4, #7cd9ff);
  box-shadow: 0 10px 24px rgba(119, 186, 235, 0.28);
}

.timer {
  color: #a93b79;
  text-shadow:
    0 8px 24px rgba(255, 132, 191, 0.35),
    0 0 22px rgba(142, 220, 255, 0.24);
}

.major-card {
  border: 1px solid #ffd9ea;
  background:
    radial-gradient(220px 90px at 0% 0%, rgba(255, 196, 230, 0.2), transparent 70%),
    var(--panel-strong);
}

.major-head h3 {
  color: #7b2f61;
}

.x-btn {
  border: 1px solid #ffc3df;
  background: linear-gradient(180deg, #fff3fa, #ffe8f4);
  color: #bf4b86;
}

.subtask-item {
  border: 1px solid #ffd9ea;
  border-radius: 14px;
}

.subtask-item:hover {
  border-color: #ffaad2;
  box-shadow: 0 9px 20px rgba(228, 121, 178, 0.2);
}

.complete-drop-zone {
  border: 2px dashed #ffb0d5;
  background: linear-gradient(140deg, rgba(255, 236, 247, 0.9), rgba(230, 248, 255, 0.85));
  color: #9d4a7a;
}

.complete-drop-zone.is-over {
  border-color: #ff78b7;
  box-shadow: 0 14px 28px rgba(241, 123, 184, 0.2);
}

.completed-item {
  border: 1px solid #edd8e7;
  background: linear-gradient(170deg, #f6f1f5, #eef3f6);
}

#purgeCompletedBtn {
  border-color: #3f2a4a;
  background: linear-gradient(145deg, #261c30, #09080f);
}

.impact-spark {
  background: linear-gradient(135deg, #ff9dd0, #ffd98a);
}

.confetti-piece {
  border-radius: 999px;
}

/* glow machine turned down bc eyeballs said nope :3 */
.hero h1 {
  text-shadow: 0 4px 12px rgba(255, 116, 186, 0.15);
}

.panel {
  box-shadow: 0 10px 24px rgba(190, 98, 151, 0.09);
}

.panel::after {
  display: none;
}

.btn-primary {
  box-shadow: 0 6px 14px rgba(236, 101, 167, 0.2);
}

.timer {
  text-shadow: 0 4px 12px rgba(255, 132, 191, 0.18);
}

.complete-drop-zone.is-over {
  box-shadow: 0 8px 14px rgba(241, 123, 184, 0.12);
}

/* tiny vibe remix, less shouty more floaty weeee :3 */
:root {
  --bg-a: #fff9fc;
  --bg-b: #f8fcff;
  --panel: rgba(255, 255, 255, 0.95);
  --panel-strong: rgba(255, 255, 255, 0.98);
  --line: #f1dfea;
  --ink: #44354a;
  --muted: #917f96;
  --accent: #ec9cc1;
  --accent-deep: #df8eb4;
  --sky: #9ed8ee;
}

body {
  background:
    radial-gradient(880px 400px at -10% -10%, rgba(249, 204, 231, 0.2), transparent 65%),
    radial-gradient(820px 380px at 110% -5%, rgba(190, 228, 246, 0.18), transparent 65%),
    linear-gradient(152deg, var(--bg-a), var(--bg-b));
}

.hero,
.panel,
.major-card,
.completed-item {
  border-radius: 18px;
}

.panel {
  box-shadow: 0 6px 16px rgba(165, 126, 152, 0.08);
}

.btn-primary {
  box-shadow: 0 4px 10px rgba(218, 146, 183, 0.18);
}

.timer {
  color: #8f5f7a;
  text-shadow: 0 2px 8px rgba(220, 163, 195, 0.16);
}

/* background went poof, flatland arc unlocked :3 */
:root {
  --bg-a: #fff9fd;
  --bg-b: #fff9fd;
  --line: #f2d9e7;
  --ink: #4a3a52;
  --muted: #9a859f;
  --accent: #ee9ec5;
  --accent-deep: #e48bb6;
}

body {
  background: #fff9fd;
}

body::before,
body::after,
.hero::after {
  display: none !important;
}

.panel,
.major-card,
.completed-item {
  border-color: #efd7e6;
}

.btn-primary {
  background: linear-gradient(135deg, #f2a8cf, #e997c3);
}