:root {
  --ink: #17324d;
  --muted: #617894;
  --sky: #dff2ff;
  --sky-strong: #b7e2ff;
  --blue: #5aa7df;
  --blue-deep: #2f75aa;
  --mint: #c8f1e2;
  --lemon: #fff3b0;
  --coral: #ffc7bd;
  --white: #fbfdff;
  --line: rgba(73, 129, 170, 0.22);
  --shadow: 0 18px 45px rgba(41, 96, 135, 0.16);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255, 243, 176, 0.62), transparent 28rem),
    linear-gradient(135deg, #eef9ff 0%, #d7efff 48%, #f5fbff 100%);
}

body.app-locked .app-shell {
  display: none;
}

body:not(.app-locked) .app-login {
  display: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.app-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.app-login-card {
  width: min(100%, 24rem);
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: rgba(251, 253, 255, 0.9);
  box-shadow: var(--shadow);
  text-align: center;
}

.app-login-card img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}

.app-login-card h1 {
  margin: 0;
  font-size: 1.9rem;
}

.app-login-card form {
  width: 100%;
  display: grid;
  gap: 0.7rem;
}

.app-login-card small {
  color: var(--muted);
}

.app-shell {
  display: grid;
  grid-template-columns: 18.5rem minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;
  background: rgba(251, 253, 255, 0.78);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand,
.nav-tab,
.pet-status,
.section-heading,
.payout-row,
.pin-change {
  display: flex;
  align-items: center;
}

.brand {
  gap: 0.75rem;
}

.brand-dog {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  border-radius: 0.6rem;
  background: linear-gradient(160deg, var(--sky-strong), #ffffff);
  box-shadow: var(--shadow);
}

.brand strong,
.week-total strong {
  display: block;
  font-size: 1.15rem;
}

.brand small,
.week-total span,
.eyebrow,
.section-heading span,
.task-meta,
.lock-box small {
  color: var(--muted);
}

.nav-tabs {
  display: grid;
  gap: 0.5rem;
}

.nav-tab {
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.nav-tab.active {
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(47, 117, 170, 0.13);
}

svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.pet-panel {
  margin-top: auto;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #ffffff, #eaf7ff);
  box-shadow: var(--shadow);
}

.pet-stage {
  --pet-scale: 0.82;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 12.4rem;
  overflow: hidden;
}

.pet-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: 8.5rem;
  height: 1.2rem;
  border-radius: 999px;
  background: rgba(47, 117, 170, 0.12);
  transform: translateX(-50%);
}

.source-dog {
  display: none;
}

.dog-avatar {
  position: relative;
  width: 12.4rem;
  height: 11.8rem;
  display: block;
  object-fit: contain;
  scale: var(--pet-scale);
  transform-origin: 50% 88%;
  transition: scale 420ms ease;
  filter: drop-shadow(0 16px 14px rgba(47, 117, 170, 0.18));
  z-index: 5;
  overflow: visible;
  animation: jjIdle 2.4s ease-in-out infinite;
}

.pet-stage::after {
  content: "";
  display: none;
}

.pet-stage.level-up .dog-avatar {
  animation: levelBounce 780ms ease;
}

.pet-stage.standing .dog-avatar {
  animation: jjStand 1.15s ease-in-out;
}

.pet-stage.playing .dog-avatar {
  animation: jjFetch 2.7s ease-in-out;
}

.pet-stage.resting .dog-avatar {
  animation: jjRest 3.6s ease-in-out forwards;
  transform-origin: 48% 82%;
}

.pet-stage.feeding .dog-avatar {
  animation: jjSnack 1.65s ease-in-out;
}

.buddy-head,
.buddy-body,
.buddy-tail,
.buddy-leg {
  transform-box: fill-box;
  transform-origin: center;
}

.buddy-body {
  transform-origin: 50% 85%;
  animation: svgBodyBreathe 2.25s ease-in-out infinite;
}

.buddy-head {
  transform-origin: 50% 82%;
  animation: svgHeadTilt 2.25s ease-in-out infinite;
}

.buddy-tail {
  transform-origin: 74% 66%;
  animation: svgTailWag 0.66s ease-in-out infinite;
}

.buddy-ear {
  transform-box: fill-box;
  transform-origin: top center;
}

.buddy-ear-left {
  animation: svgEarLeft 2.8s ease-in-out infinite;
}

.buddy-ear-right {
  animation: svgEarRight 3s ease-in-out infinite;
}

.buddy-tongue {
  transform-box: fill-box;
  transform-origin: top center;
  animation: svgTongue 1.1s ease-in-out infinite;
}

.pet-stage.standing .buddy-body {
  animation: svgBodyStand 1.15s ease-in-out;
}

.pet-stage.standing .buddy-head {
  animation: svgHeadStand 1.15s ease-in-out;
}

.pet-stage.playing .buddy-body {
  animation: svgBodyRun 0.42s ease-in-out 7;
}

.pet-stage.playing .buddy-head {
  animation: svgHeadRun 0.5s ease-in-out 6;
}

.pet-stage.playing .buddy-leg {
  transform-box: fill-box;
  transform-origin: 50% 12%;
  animation: svgLegRun 0.32s ease-in-out 9;
}

.pet-stage.playing .leg-front-right,
.pet-stage.playing .leg-back-left {
  animation-delay: 0.16s;
}

.pet-stage.playing .buddy-tail {
  animation: svgTailWagFast 0.24s ease-in-out 11;
}

.pet-stage.resting .buddy-body {
  animation: svgBodyLie 3.6s ease-in-out forwards;
}

.pet-stage.resting .buddy-head {
  animation: svgHeadLie 3.6s ease-in-out forwards;
}

.pet-stage.resting .buddy-leg {
  animation: svgLegTuck 3.6s ease-in-out forwards;
}

.pet-stage.resting .buddy-tail {
  animation: svgTailLie 3.6s ease-in-out forwards;
}

.pet-stage.feeding .buddy-head {
  animation: svgHeadSnack 1.65s ease-in-out;
}

.pet-stage.feeding .buddy-tongue {
  animation: svgTongueSnack 0.35s ease-in-out 4;
}

.dog-body,
.dog-chest,
.dog-head,
.dog-ear,
.dog-brow,
.dog-eye,
.dog-muzzle,
.dog-nose,
.dog-tongue,
.dog-tail,
.dog-leg {
  position: absolute;
  display: block;
}

.dog-body {
  left: 3rem;
  bottom: 1.8rem;
  width: 5.3rem;
  height: 4.35rem;
  border-radius: 48% 52% 43% 47%;
  background: #2c2d31;
  box-shadow: inset 0.5rem -0.7rem 0 rgba(0, 0, 0, 0.12);
  transform-origin: 50% 90%;
  animation: bodyBreathe 2.2s ease-in-out infinite;
}

.dog-chest {
  left: 4.35rem;
  bottom: 2.65rem;
  width: 2.35rem;
  height: 1.6rem;
  border-radius: 55%;
  background: #d9923b;
  opacity: 0.95;
  z-index: 7;
}

.dog-head {
  left: 3.05rem;
  bottom: 5.1rem;
  width: 5rem;
  height: 4.65rem;
  border-radius: 46% 47% 50% 50%;
  background: #2b2c30;
  box-shadow: inset 0.4rem -0.45rem 0 rgba(0, 0, 0, 0.12);
  transform-origin: 50% 85%;
  animation: headLook 2.2s ease-in-out infinite;
  z-index: 10;
}

.dog-ear {
  top: 0.25rem;
  width: 1.55rem;
  height: 2.25rem;
  border-radius: 70% 35% 70% 45%;
  background: #25262a;
  z-index: -1;
}

.ear-left {
  left: -0.75rem;
  transform: rotate(-28deg);
  transform-origin: 95% 18%;
  animation: leftEarFlop 2.8s ease-in-out infinite;
}

.ear-right {
  right: -0.75rem;
  transform: rotate(28deg) scaleX(-1);
  transform-origin: 5% 18%;
  animation: rightEarFlop 3s ease-in-out infinite;
}

.dog-brow {
  top: 1.25rem;
  width: 0.95rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #d9923b;
}

.brow-left {
  left: 1rem;
  transform: rotate(10deg);
}

.brow-right {
  right: 1rem;
  transform: rotate(-10deg);
}

.dog-eye {
  top: 1.75rem;
  width: 0.64rem;
  height: 0.78rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0 16%, #5b341a 17% 52%, #111 53%);
}

.eye-left {
  left: 1.22rem;
}

.eye-right {
  right: 1.22rem;
}

.dog-muzzle {
  left: 1.15rem;
  bottom: 0.48rem;
  width: 2.7rem;
  height: 1.55rem;
  border-radius: 55% 55% 48% 48%;
  background: #d9923b;
}

.dog-nose {
  left: 2.08rem;
  bottom: 1.55rem;
  width: 0.86rem;
  height: 0.62rem;
  border-radius: 48% 48% 60% 60%;
  background: #141416;
}

.dog-tongue {
  left: 2.18rem;
  bottom: 0.22rem;
  width: 0.68rem;
  height: 0.9rem;
  border-radius: 0 0 999px 999px;
  background: #ff8c90;
  transform-origin: 50% 0;
  animation: tongueWiggle 1.1s ease-in-out infinite;
}

.dog-tail {
  left: 1.9rem;
  bottom: 4.15rem;
  width: 2.75rem;
  height: 0.82rem;
  border-radius: 999px 20% 20% 999px;
  background: #25262a;
  transform-origin: 100% 50%;
  animation: tailWag 0.72s ease-in-out infinite;
  z-index: 4;
}

.dog-leg {
  bottom: 0.75rem;
  width: 1.08rem;
  height: 2.65rem;
  border-radius: 999px 999px 0.5rem 0.5rem;
  background: linear-gradient(180deg, #2b2c30 0 48%, #d9923b 49%);
  transform-origin: 50% 10%;
  z-index: 8;
}

.front-left {
  left: 4.1rem;
}

.front-right {
  left: 5.8rem;
}

.back-left {
  left: 2.75rem;
  height: 2.2rem;
  z-index: 6;
}

.back-right {
  left: 7.15rem;
  height: 2.2rem;
  z-index: 6;
}

.pet-stage.standing .dog-body,
.pet-stage.feeding .dog-body {
  animation: bodyStand 1.2s ease-in-out;
}

.pet-stage.standing .dog-head {
  animation: headStand 1.2s ease-in-out;
}

.pet-stage.playing .dog-body {
  animation: bodyRun 0.45s ease-in-out 6;
}

.pet-stage.playing .dog-head {
  animation: headRun 0.55s ease-in-out 5;
}

.pet-stage.playing .dog-leg {
  animation: legRun 0.34s ease-in-out 8;
}

.pet-stage.playing .front-right,
.pet-stage.playing .back-left {
  animation-delay: 0.17s;
}

.pet-stage.playing .dog-tail {
  animation: tailWagFast 0.26s ease-in-out 10;
}

.pet-stage.resting .dog-body {
  animation: bodyLie 3.6s ease-in-out forwards;
}

.pet-stage.resting .dog-head {
  animation: headLie 3.6s ease-in-out forwards;
}

.pet-stage.resting .dog-leg {
  animation: legTuck 3.6s ease-in-out forwards;
}

.pet-stage.resting .dog-tail {
  animation: tailLie 3.6s ease-in-out forwards;
}

.pet-stage.resting .dog-tongue {
  opacity: 0;
}

.pet-stage.resting .dog-eye {
  height: 0.16rem;
  top: 2.05rem;
  border-radius: 999px;
  background: #111;
}

.pet-stage.feeding .dog-head {
  animation: headSnack 1.65s ease-in-out;
}

.pet-stage.feeding .dog-tongue {
  animation: tongueSnack 0.35s ease-in-out 4;
}

.pet-sparkle {
  position: absolute;
  top: 16%;
  right: 18%;
  width: 0.7rem;
  height: 0.7rem;
  opacity: 0.75;
  background: var(--lemon);
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  animation: twinkle 1.8s ease-in-out infinite;
}

.pet-ball {
  position: absolute;
  left: 14%;
  bottom: 23%;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 45%, rgba(255, 255, 255, 0.78) 45% 56%, transparent 56%),
    radial-gradient(circle at 35% 30%, #ffffff 0 10%, transparent 11%),
    var(--coral);
  border: 2px solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 9px 14px rgba(47, 117, 170, 0.18);
}

.pet-stage.playing .pet-ball {
  animation: ballFetch 2.7s ease-in-out;
}

.pet-bowl {
  position: absolute;
  left: 18%;
  bottom: 10%;
  width: 3rem;
  height: 1.35rem;
  border-radius: 0.35rem 0.35rem 1.1rem 1.1rem;
  opacity: 0;
  background: linear-gradient(180deg, var(--sky-strong), var(--blue));
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 16px rgba(47, 117, 170, 0.14);
}

.pet-bowl::before {
  content: "";
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  top: -0.25rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #8b5b37;
}

.pet-stage.feeding .pet-bowl {
  animation: bowlAppear 1.65s ease-in-out;
}

.nap-mat {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 7.4rem;
  height: 1.85rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ffffff, var(--sky-strong));
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 18px rgba(47, 117, 170, 0.12);
}

.pet-stage.resting .nap-mat {
  opacity: 1;
}

.sleep-bubble {
  position: absolute;
  top: 20%;
  right: 22%;
  opacity: 0;
  color: var(--blue-deep);
  font-weight: 900;
}

.z-two {
  top: 13%;
  right: 16%;
  font-size: 1.2rem;
}

.pet-stage.resting .sleep-bubble {
  animation: sleepFloat 1.8s ease-in-out infinite;
}

.pet-stage.resting .z-two {
  animation-delay: 0.45s;
}

.equipped-accessory {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  min-height: 2.2rem;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 10px 18px rgba(47, 117, 170, 0.18);
}

.equipped-accessory.on {
  display: flex;
}

.equipped-accessory.collar {
  left: 50%;
  top: 55%;
  transform: translateX(-50%);
}

.equipped-accessory.leash {
  right: 4%;
  top: 47%;
}

.equipped-accessory.bed {
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  min-width: 5.5rem;
  min-height: 1.2rem;
  border-radius: 999px;
}

.pet-stage.resting .equipped-accessory.bed.on {
  min-width: 7rem;
  min-height: 1.55rem;
  bottom: 4%;
  z-index: 2;
}

.growth-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  margin: 0.4rem 0 0.75rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.pet-status {
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pet-status span {
  font-size: 0.85rem;
  color: var(--blue-deep);
}

.needs {
  display: grid;
  gap: 0.55rem;
}

.needs label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.82rem;
  color: var(--muted);
}

progress {
  width: 100%;
  height: 0.55rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #d4ecfb;
}

progress::-webkit-progress-bar {
  background: #d4ecfb;
}

progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), #74d6bb);
}

.pet-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.icon-btn {
  display: grid;
  place-items: center;
  height: 2.35rem;
  border-radius: 0.5rem;
  background: #f8fcff;
  color: var(--blue-deep);
  border: 1px solid var(--line);
}

main {
  padding: 1.5rem;
  min-width: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

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

h1 {
  margin-bottom: 0;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: 1rem;
}

.week-total,
.lock-box,
.task-section,
.badges-strip,
.stats-grid article,
.history-item {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 32px rgba(47, 117, 170, 0.11);
}

.week-total {
  min-width: 10.5rem;
  padding: 0.85rem 1rem;
}

.week-total strong {
  font-size: 1.7rem;
  color: var(--blue-deep);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.stats-grid article {
  min-height: 5rem;
  padding: 1rem;
}

.stats-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}

.stats-grid strong {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.35rem;
}

.content-grid,
.parent-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
  gap: 0.75rem;
}

.money-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.money-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 32px rgba(47, 117, 170, 0.11);
}

.money-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.money-grid div,
.goal-summary {
  padding: 0.75rem;
  border-radius: 0.6rem;
  background: #f5fbff;
  border: 1px solid var(--line);
}

.money-grid span,
.goal-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.money-grid strong,
.goal-summary strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--blue-deep);
  font-size: 1.15rem;
}

.goal-summary progress {
  margin-bottom: 0.45rem;
}

.goal-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem auto;
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.calendar-section {
  margin-bottom: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 32px rgba(47, 117, 170, 0.11);
}

.calendar-weekdays,
.month-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.45rem;
}

.calendar-weekdays {
  margin-bottom: 0.45rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.calendar-day {
  display: grid;
  align-content: space-between;
  min-height: 4.4rem;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: #fbfdff;
}

.calendar-day.empty {
  border-color: transparent;
  background: transparent;
}

.calendar-day.today {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.calendar-day.selected {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(90, 167, 223, 0.24);
}

.calendar-day.exception {
  background: linear-gradient(160deg, var(--mint), #ffffff 82%);
}

.calendar-day.has-open {
  border-color: rgba(185, 68, 84, 0.34);
}

.calendar-day.has-done {
  box-shadow: inset 0 0 0 1px rgba(76, 156, 128, 0.24);
}

.calendar-day.sick {
  background: linear-gradient(160deg, #ffe8eb, #ffffff 82%);
}

.calendar-day strong,
.calendar-day span {
  display: block;
}

.calendar-day span {
  min-height: 1rem;
  color: var(--blue-deep);
  font-size: 0.72rem;
  font-weight: 800;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.calendar-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  align-items: center;
  min-height: 1.35rem;
  margin: 0.25rem 0;
}

.dot {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.dot.done {
  background: #56ad8e;
}

.dot.open {
  background: #cf6370;
}

.dot.pending {
  color: var(--ink);
  background: var(--lemon);
}

.dot.protected {
  background: var(--blue);
}

.calendar-detail {
  margin-top: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: #f5fbff;
}

.calendar-detail strong,
.calendar-detail span {
  display: block;
}

.calendar-detail span {
  margin-top: 0.2rem;
  color: var(--muted);
}

.calendar-detail ul {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
}

.task-section,
.badges-strip {
  padding: 1rem;
}

.section-heading {
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2rem;
  margin-bottom: 0.9rem;
}

.sub-heading {
  margin-top: 1rem;
}

.task-list {
  display: grid;
  gap: 0.65rem;
}

.task-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.5rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: #fbfdff;
}

.task-card.done {
  background: linear-gradient(90deg, rgba(200, 241, 226, 0.74), #fbfdff);
}

.task-card.pending {
  background: linear-gradient(90deg, rgba(255, 243, 176, 0.78), #fbfdff);
}

.task-card.protected {
  background: linear-gradient(90deg, rgba(200, 241, 226, 0.74), #fbfdff);
}

.task-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.55rem;
  color: var(--blue-deep);
  background: var(--sky);
}

.task-copy {
  min-width: 0;
}

.task-copy strong,
.task-copy span {
  display: block;
  overflow-wrap: anywhere;
}

.task-copy span {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.task-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.complete-btn,
.small-btn,
#closeWeek,
#changePin {
  min-height: 2.2rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  color: var(--ink);
  background: var(--sky);
  border: 1px solid var(--line);
}

.complete-btn[disabled] {
  opacity: 0.58;
  cursor: default;
}

.small-btn[disabled] {
  opacity: 0.48;
  cursor: default;
}

.danger-btn {
  color: #8d2d3a;
  background: #ffe8eb;
  border-color: rgba(185, 68, 84, 0.28);
}

.badges-strip {
  margin-top: 0.75rem;
}

.shop-section {
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 32px rgba(47, 117, 170, 0.11);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.shop-item {
  display: grid;
  gap: 0.55rem;
  min-height: 10.5rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: #fbfdff;
}

.shop-swatch {
  width: 100%;
  height: 2.2rem;
  border-radius: 0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(23, 50, 77, 0.08);
}

.shop-item strong,
.shop-item span {
  display: block;
  overflow-wrap: anywhere;
}

.shop-item span {
  color: var(--muted);
  font-size: 0.82rem;
}

.shop-actions {
  display: flex;
  gap: 0.45rem;
  margin-top: auto;
}

.shop-actions button {
  flex: 1;
}

.badges {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.65rem;
}

.badge {
  min-height: 5.4rem;
  padding: 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid var(--line);
  background: #fbfdff;
}

.badge.unlocked {
  background: linear-gradient(160deg, var(--lemon), #ffffff 75%);
}

.badge strong,
.badge span {
  display: block;
  overflow-wrap: anywhere;
}

.badge span {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.lock-box {
  max-width: 27rem;
  padding: 1.25rem;
}

.lock-box p {
  color: var(--muted);
}

form {
  margin: 0;
}

#pinForm,
.form-grid {
  display: grid;
  gap: 0.65rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: var(--ink);
  background: #ffffff;
}

textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.primary-btn {
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  color: #ffffff;
  background: linear-gradient(160deg, var(--blue), var(--blue-deep));
  box-shadow: 0 12px 20px rgba(47, 117, 170, 0.19);
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid textarea,
.form-grid .primary-btn {
  grid-column: 1 / -1;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  background: #f5fbff;
}

.check-row input {
  width: auto;
}

.parent-layout {
  align-items: start;
}

.parent-layout .task-section:last-child {
  grid-column: 1 / -1;
}

.payout-row {
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.payout-row strong {
  font-size: 1.7rem;
  color: var(--blue-deep);
}

.pin-change {
  gap: 0.65rem;
  margin-top: 0.65rem;
}

.payout-split,
.data-actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 0.65rem;
}

.payout-split input {
  max-width: 12rem;
}

.payout-split span {
  color: var(--muted);
  font-size: 0.85rem;
}

.data-actions {
  flex-wrap: wrap;
  margin-bottom: 0;
}

.import-label {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  color: var(--ink);
  background: var(--sky);
  border: 1px solid var(--line);
  cursor: pointer;
}

.import-label input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.history-list {
  display: grid;
  gap: 0.75rem;
}

.history-item {
  padding: 1rem;
}

.history-item header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

.history-grid span {
  display: block;
  padding: 0.65rem;
  border-radius: 0.5rem;
  background: #f3faff;
  color: var(--muted);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translate(-50%, 140%);
  max-width: min(92vw, 28rem);
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  color: #ffffff;
  background: var(--blue-deep);
  box-shadow: var(--shadow);
  transition: transform 180ms ease;
  z-index: 20;
}

.toast.show {
  transform: translate(-50%, 0);
}

.spark {
  animation: spark 520ms ease;
}

@keyframes jjIdle {
  0%,
  100% {
    transform: translateY(0) rotate(-0.4deg);
  }
  50% {
    transform: translateY(-0.18rem) rotate(0.5deg);
  }
}

@keyframes jjStand {
  0% {
    transform: translateY(0) rotate(-0.4deg) scaleY(1);
  }
  38% {
    transform: translateY(-1.05rem) rotate(0deg) scaleY(1.08) scaleX(0.97);
  }
  70% {
    transform: translateY(-0.75rem) rotate(1deg) scaleY(1.04);
  }
  100% {
    transform: translateY(0) rotate(-0.4deg) scaleY(1);
  }
}

@keyframes jjFetch {
  0% {
    transform: translate(0, 0) rotate(-0.5deg);
  }
  15% {
    transform: translateY(-1rem) rotate(0deg) scaleY(1.06);
  }
  34% {
    transform: translate(1.25rem, -0.25rem) rotate(3deg);
  }
  58% {
    transform: translate(-0.9rem, 0) rotate(-4deg);
  }
  78% {
    transform: translate(0.35rem, -0.7rem) rotate(1.5deg);
  }
  100% {
    transform: translate(0, 0) rotate(-0.5deg);
  }
}

@keyframes jjRest {
  0% {
    transform: translateY(0) rotate(-0.5deg) scaleY(1);
  }
  25% {
    transform: translateY(-0.85rem) rotate(0deg) scaleY(1.07);
  }
  55% {
    transform: translate(0, 1rem) rotate(58deg) scaleY(0.83) scaleX(1.04);
  }
  100% {
    transform: translate(0.2rem, 1.55rem) rotate(72deg) scaleY(0.78) scaleX(1.08);
  }
}

@keyframes jjSnack {
  0%,
  100% {
    transform: translate(0, 0) rotate(-0.4deg);
  }
  24% {
    transform: translateY(-0.8rem) rotate(0deg) scaleY(1.05);
  }
  48%,
  72% {
    transform: translate(-0.95rem, 0.35rem) rotate(-7deg) scaleY(0.96);
  }
}

@keyframes buddyDance {
  0%,
  100% {
    transform: translateY(0) rotate(-1.6deg);
  }
  25% {
    transform: translateY(-0.72rem) rotate(1.8deg);
  }
  50% {
    transform: translateY(-0.24rem) rotate(-1deg);
  }
  75% {
    transform: translateY(-0.58rem) rotate(1.2deg);
  }
}

@keyframes bodyBreathe {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-0.12rem) scaleY(1.03);
  }
}

@keyframes svgBodyBreathe {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-2px) scaleY(1.025);
  }
}

@keyframes svgHeadTilt {
  0%,
  100% {
    transform: rotate(-1.5deg) translateY(0);
  }
  50% {
    transform: rotate(2.5deg) translateY(-2px);
  }
}

@keyframes svgTailWag {
  0%,
  100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(16deg);
  }
}

@keyframes svgTailWagFast {
  0%,
  100% {
    transform: rotate(-22deg);
  }
  50% {
    transform: rotate(28deg);
  }
}

@keyframes svgEarLeft {
  0%,
  100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

@keyframes svgEarRight {
  0%,
  100% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-5deg);
  }
}

@keyframes svgTongue {
  0%,
  100% {
    transform: scaleY(0.88);
  }
  50% {
    transform: scaleY(1.08);
  }
}

@keyframes svgBodyStand {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  42%,
  72% {
    transform: translateY(-12px) scaleY(1.08) scaleX(0.96);
  }
}

@keyframes svgHeadStand {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  42%,
  72% {
    transform: translateY(-18px) rotate(0deg);
  }
}

@keyframes svgBodyRun {
  0%,
  100% {
    transform: translate(-3px, 0) rotate(-1deg);
  }
  50% {
    transform: translate(5px, -6px) rotate(2deg);
  }
}

@keyframes svgHeadRun {
  0%,
  100% {
    transform: translateX(0) rotate(-6deg);
  }
  50% {
    transform: translate(9px, -4px) rotate(7deg);
  }
}

@keyframes svgLegRun {
  0%,
  100% {
    transform: rotate(-16deg) translateY(0);
  }
  50% {
    transform: rotate(20deg) translateY(-3px);
  }
}

@keyframes svgBodyLie {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  35% {
    transform: translateY(-9px) rotate(0deg) scaleY(1.05);
  }
  68%,
  100% {
    transform: translate(-4px, 25px) rotate(90deg) scale(0.92, 0.82);
  }
}

@keyframes svgHeadLie {
  0% {
    transform: translateY(0) rotate(-1deg);
  }
  35% {
    transform: translateY(-12px) rotate(0deg);
  }
  68%,
  100% {
    transform: translate(-42px, 29px) rotate(-10deg) scale(0.9);
  }
}

@keyframes svgLegTuck {
  0%,
  35% {
    transform: rotate(0deg);
  }
  68%,
  100% {
    transform: translateY(21px) rotate(75deg) scaleY(0.68);
  }
}

@keyframes svgTailLie {
  0%,
  35% {
    transform: rotate(-8deg);
  }
  68%,
  100% {
    transform: translate(15px, 22px) rotate(8deg);
  }
}

@keyframes svgHeadSnack {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  35%,
  72% {
    transform: translate(-21px, 24px) rotate(-14deg);
  }
}

@keyframes svgTongueSnack {
  0%,
  100% {
    transform: scaleY(0.75);
  }
  50% {
    transform: scaleY(1.24) translateY(3px);
  }
}

@keyframes headLook {
  0%,
  100% {
    transform: rotate(-2deg) translateY(0);
  }
  50% {
    transform: rotate(3deg) translateY(-0.14rem);
  }
}

@keyframes leftEarFlop {
  0%,
  100% {
    transform: rotate(-28deg);
  }
  50% {
    transform: rotate(-20deg);
  }
}

@keyframes rightEarFlop {
  0%,
  100% {
    transform: rotate(28deg) scaleX(-1);
  }
  50% {
    transform: rotate(20deg) scaleX(-1);
  }
}

@keyframes tongueWiggle {
  0%,
  100% {
    transform: scaleY(0.88);
  }
  50% {
    transform: scaleY(1.08) rotate(4deg);
  }
}

@keyframes bodyStand {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  38%,
  74% {
    transform: translateY(-0.75rem) scaleY(1.16) scaleX(0.93);
  }
}

@keyframes headStand {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  38%,
  74% {
    transform: translateY(-1.2rem) rotate(0deg);
  }
}

@keyframes bodyRun {
  0%,
  100% {
    transform: translateX(-0.18rem) translateY(0);
  }
  50% {
    transform: translateX(0.22rem) translateY(-0.35rem) rotate(2deg);
  }
}

@keyframes headRun {
  0%,
  100% {
    transform: translateX(0) rotate(-7deg);
  }
  50% {
    transform: translateX(0.65rem) translateY(-0.22rem) rotate(8deg);
  }
}

@keyframes legRun {
  0%,
  100% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(22deg) translateY(-0.12rem);
  }
}

@keyframes bodyLie {
  0% {
    transform: translateY(0) rotate(0deg) scaleY(1);
  }
  32% {
    transform: translateY(-0.55rem) rotate(0deg) scaleY(1.1);
  }
  65%,
  100% {
    transform: translate(-0.15rem, 1.25rem) rotate(90deg) scaleY(0.88) scaleX(1.02);
  }
}

@keyframes headLie {
  0% {
    transform: translateY(0) rotate(-2deg);
  }
  34% {
    transform: translateY(-0.75rem) rotate(0deg);
  }
  65%,
  100% {
    transform: translate(-2.45rem, 1.55rem) rotate(-12deg) scale(0.9);
  }
}

@keyframes legTuck {
  0%,
  35% {
    transform: rotate(0deg);
  }
  68%,
  100% {
    transform: translateY(1.15rem) rotate(82deg) scaleY(0.72);
  }
}

@keyframes tailLie {
  0%,
  35% {
    transform: rotate(-11deg);
  }
  68%,
  100% {
    transform: translate(0.8rem, 1.05rem) rotate(8deg);
  }
}

@keyframes headSnack {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  35%,
  72% {
    transform: translate(-1.25rem, 1.3rem) rotate(-16deg);
  }
}

@keyframes tongueSnack {
  0%,
  100% {
    transform: scaleY(0.75);
  }
  50% {
    transform: scaleY(1.22) translateY(0.16rem);
  }
}

@keyframes buddyStand {
  0% {
    transform: translateY(0) rotate(-1deg) scaleY(1);
  }
  38% {
    transform: translateY(-1.55rem) rotate(0deg) scaleY(1.14) scaleX(0.94);
  }
  68% {
    transform: translateY(-1.15rem) rotate(2deg) scaleY(1.08) scaleX(0.96);
  }
  100% {
    transform: translateY(0) rotate(-1deg) scaleY(1);
  }
}

@keyframes buddyFetch {
  0% {
    transform: translate(0, 0) rotate(-1deg) scaleY(1);
  }
  16% {
    transform: translateY(-1.45rem) rotate(0deg) scaleY(1.13) scaleX(0.94);
  }
  34% {
    transform: translate(2.4rem, -0.55rem) rotate(5deg) scaleY(1.05);
  }
  58% {
    transform: translate(-1.3rem, -0.25rem) rotate(-6deg) scaleY(1.03);
  }
  78% {
    transform: translate(0.4rem, -1rem) rotate(2deg) scaleY(1.1);
  }
  100% {
    transform: translate(0, 0) rotate(-1deg) scaleY(1);
  }
}

@keyframes buddyRest {
  0% {
    transform: translateY(0) rotate(-1deg) scaleY(1);
  }
  22% {
    transform: translateY(-1.15rem) rotate(0deg) scaleY(1.12) scaleX(0.95);
  }
  52% {
    transform: translate(0, 1.2rem) rotate(68deg) scaleY(0.82) scaleX(1.04);
  }
  100% {
    transform: translate(0.2rem, 1.8rem) rotate(82deg) scaleY(0.76) scaleX(1.08);
  }
}

@keyframes buddySnack {
  0%,
  100% {
    transform: translate(0, 0) rotate(-1deg);
  }
  24% {
    transform: translateY(-1.05rem) rotate(0deg) scaleY(1.1);
  }
  48% {
    transform: translate(-1.3rem, 0.35rem) rotate(-9deg) scaleY(0.94);
  }
  70% {
    transform: translate(-1.1rem, 0.25rem) rotate(-6deg) scaleY(0.94);
  }
}

@keyframes ballFetch {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.75);
  }
  8% {
    opacity: 1;
  }
  32% {
    opacity: 1;
    transform: translate(8.4rem, -4.1rem) scale(1) rotate(160deg);
  }
  58% {
    opacity: 1;
    transform: translate(2.8rem, -0.9rem) scale(0.92) rotate(320deg);
  }
  78% {
    opacity: 1;
    transform: translate(5.3rem, -2rem) scale(0.9) rotate(460deg);
  }
  100% {
    opacity: 0;
    transform: translate(4.9rem, -1.1rem) scale(0.75) rotate(520deg);
  }
}

@keyframes bowlAppear {
  0%,
  100% {
    opacity: 0;
    transform: translateY(0) scale(0.85);
  }
  18%,
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sleepFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.75);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-1.4rem) scale(1.08);
  }
}

@keyframes levelBounce {
  0% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-0.9rem) scale(1.09);
  }
  70% {
    transform: translateY(0.1rem) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes tailWag {
  0%,
  100% {
    transform: rotate(-11deg);
  }
  50% {
    transform: rotate(14deg);
  }
}

@keyframes tailWagFast {
  0%,
  100% {
    transform: rotate(-22deg);
  }
  50% {
    transform: rotate(28deg);
  }
}

@keyframes twinkle {
  0%,
  100% {
    transform: scale(0.75) rotate(0deg);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.1) rotate(18deg);
    opacity: 0.95;
  }
}

@keyframes spark {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-tabs,
  .pet-actions,
  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pet-panel {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
  }

  .pet-status,
  .growth-row,
  .needs {
    grid-column: 2;
  }

  .pet-stage {
    min-height: 10rem;
  }

  .pet-stage img {
    width: min(100%, 6.8rem);
    margin: 0;
  }

  .dog-avatar {
    width: 9.4rem;
    height: 9rem;
  }

  .pet-actions {
    grid-column: 2;
  }

  .content-grid,
  .parent-layout,
  .money-section {
    grid-template-columns: 1fr;
  }

  .badges,
  .shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  main,
  .sidebar {
    padding: 0.85rem;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .nav-tabs,
  .stats-grid,
  .money-grid,
  .goal-form,
  .badges,
  .shop-grid,
  .form-grid,
  .history-grid {
    grid-template-columns: 1fr;
  }

  .pet-panel {
    grid-template-columns: 7rem minmax(0, 1fr);
  }

  .task-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .task-meta {
    grid-column: 2;
    align-items: flex-start;
    white-space: normal;
  }

  .pin-change {
    flex-direction: column;
  }
}