@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #EEF3EC;
  --ink: #1C2B22;
  --muted: #4E5D52;
  --green: #2F6B43;
  --flame: #D9612B;
  --stage: #1F3A2B;
  --line: #C9D3C6;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body[data-theme="dark"] { background: var(--stage); }
body[data-theme="dusk"] { background: #E9EBF3; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #5B9A6E; outline-offset: 2px; }
[hidden] { display: none !important; }

#app {
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.screens { flex: 1; min-height: 0; position: relative; }

.screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(20px + var(--sat)) 20px calc(22px + var(--sab));
  gap: 14px;
  background: var(--bg);
}
#app.has-nav .screen { padding-bottom: 14px; }
.grow { flex-grow: 1; }
.screen > * { flex-shrink: 0; }

.stage {
  position: relative;
  width: 100%;
  background: var(--stage);
  border-radius: 28px;
  overflow: hidden;
}
.stage img { position: absolute; display: block; object-fit: cover; }

.bubble {
  position: absolute;
  background: #FFFFFF;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.bubble-r { top: 14px; right: 16px; max-width: 200px; border-radius: 16px 16px 4px 16px; }
.bubble-l { top: 16px; left: 16px; font-size: 16px; font-weight: 800; border-radius: 16px 16px 16px 4px; }

.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px; }
.top-left { display: flex; flex-direction: column; gap: 6px; }
.streak { display: flex; align-items: center; gap: 8px; }
.flame { color: var(--flame); }
.streak-n { font-weight: 900; font-size: 30px; line-height: 1; }
.streak-l { font-weight: 700; font-size: 16px; color: var(--muted); }
.week { display: flex; gap: 6px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dot {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: #7C88B8;
}
.dot.done { background: var(--flame); border-color: var(--flame); }
.dot.nap { background: #DCDFF0; border-color: #DCDFF0; }
.dot.today { border-color: var(--ink); }
.dot.today.done { border-color: var(--flame); }
.day-l { font-size: 11px; font-weight: 700; color: var(--muted); }
.nap-pill {
  display: flex; align-items: center; gap: 6px;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700; font-size: 13px;
  color: #3F4A63;
  white-space: nowrap;
}
.nap-pill svg { color: #7C88B8; }

.stage-main { aspect-ratio: 350 / 286; }
.stage-main img { left: calc(-40 / 350 * 100%); top: calc(40 / 286 * 100%); width: calc(430 / 350 * 100%); height: calc(235 / 286 * 100%); }
.pz-breathe { transform-origin: 50% 85%; animation: pz-breathe 3.2s ease-in-out infinite; }

.goal { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.goal-l { font-size: 15px; font-weight: 700; color: var(--muted); }
.goal-t { font-weight: 900; font-size: 76px; line-height: 0.95; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.rise { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.chip { background: #FFF4D9; color: #6B4A00; border-radius: 999px; padding: 5px 10px; font-size: 13px; font-weight: 700; }
.chip-btn {
  border: 1.5px solid #B8CBB5; background: transparent; color: var(--green);
  border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700; min-height: 44px;
}
.cap-line { font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }

.btn-start {
  height: 68px; border: 0; border-radius: 22px;
  background: var(--green); color: #FFFFFF;
  font-weight: 900; font-size: 28px;
}
.btn-link { min-height: 44px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: underline; }

.nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 20px calc(12px + var(--sab)); background: var(--bg); }
.nav-btn {
  height: 56px; border: 0; border-radius: 16px; background: transparent; color: var(--muted);
  font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.nav-btn svg { color: var(--muted); }
.nav-btn[aria-current="page"] { background: #FFFFFF; color: var(--ink); }
.nav-btn[aria-current="page"] svg { color: var(--green); }

.s-timer { background: var(--stage); color: #F3F7F1; align-items: center; padding-top: calc(18px + var(--sat)); gap: 10px; overflow-x: hidden; }
.t-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.t-goal { font-size: 13px; font-weight: 700; color: #9FC3A8; }
.t-sound {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; margin-right: -10px; padding: 0 10px;
  border: 0; background: transparent;
  font: inherit; font-size: 13px; font-weight: 700; color: #CFE6D2;
}
.t-sound [hidden] { display: none; }
.ring { --ring: min(240px, 31dvh, 68vw); position: relative; width: var(--ring); height: var(--ring); margin-top: 6px; }
.ring svg { display: block; width: 100%; height: 100%; }
.ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-l { font-size: 15px; font-weight: 700; color: #CFE6D2; }
.ring-t { font-weight: 900; font-size: calc(var(--ring) * 0.3833); line-height: 0.95; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.stage-timer { aspect-ratio: 350 / 190; border-radius: 24px; }
.stage-timer .pz-shake, .stage-timer .pz-breathe-box { position: absolute; inset: 0; }
.pz-img { left: calc(-10 / 350 * 100%); top: calc(-6 / 190 * 100%); width: calc(370 / 350 * 100%); height: calc(202 / 190 * 100%); }
.pz-breathe-box { transform-origin: 50% 85%; animation: pz-breathe-t 3.2s ease-in-out infinite; }
.pz-effort { opacity: 0; }
.is-effort .pz-effort { opacity: 1; }
.is-effort .pz-shake { animation: pz-shake 0.18s linear infinite; }
.is-overtime .ring-t { color: #F2B544; font-size: calc(var(--ring) * 0.3); }
.cue { font-size: 18px; font-weight: 700; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; justify-content: center; text-align: center; color: #E4EFE2; }
.cue2 { font-size: 13px; text-align: center; color: #9FC3A8; }
.btn-stop {
  width: 100%; height: 160px; border: 0; border-radius: 28px;
  background: #F3F7F1; color: var(--stage);
  font-weight: 900; font-size: 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.btn-stop-sub { font-size: 13px; font-weight: 700; color: #4E6B59; }
.warn { font-size: 12px; color: #9FC3A8; text-align: center; }

.s-done { align-items: center; padding-top: calc(30px + var(--sat)); gap: 12px; }
.d-streak { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.d-col { display: flex; flex-direction: column; }
.d-row { display: flex; align-items: baseline; gap: 6px; }
.d-old { font-weight: 900; font-size: 30px; color: #B7C2B9; text-decoration: line-through; text-decoration-thickness: 3px; }
.d-new { font-weight: 900; font-size: 96px; line-height: 0.9; letter-spacing: -3px; color: #B4501F; }
.d-lab { font-weight: 800; font-size: 18px; color: var(--muted); }
.stage-done { aspect-ratio: 350 / 250; }
.stage-done img { left: calc(-45 / 350 * 100%); top: calc(10 / 250 * 100%); width: calc(440 / 350 * 100%); height: calc(240 / 250 * 100%); }
.d-line { font-size: 15px; color: var(--muted); text-align: center; }
.nap-card {
  width: 100%; background: #E7E9F4; border-radius: 18px; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; line-height: 1.4; color: #2E3554;
}
.nap-card svg { color: #7C88B8; flex-shrink: 0; }
.btn-ok {
  width: 100%; height: 62px; border: 0; border-radius: 22px;
  background: var(--green); color: #FFFFFF; font-weight: 900; font-size: 22px;
}

.stage-izdarits { aspect-ratio: 350 / 300; }
.stage-izdarits img { left: calc(-50 / 350 * 100%); top: calc(50 / 300 * 100%); width: calc(450 / 350 * 100%); height: calc(246 / 300 * 100%); }
.stage-izdarits .bubble-r { max-width: 210px; top: 16px; }
.iz-box { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.iz-row { display: flex; align-items: center; gap: 8px; }
.iz-title { font-weight: 900; font-size: 30px; }
.iz-sub { font-size: 16px; color: var(--muted); text-align: center; }
.btn-tomorrow {
  height: 60px; border: 2px solid var(--line); border-radius: 22px;
  background: transparent; color: #6B786E; font-weight: 800; font-size: 18px; cursor: default;
}

.s-reminder { padding-top: calc(36px + var(--sat)); padding-bottom: calc(22px + var(--sab)); gap: 16px; position: relative; }
.stage-reminder { aspect-ratio: 350 / 190; border-radius: 24px; }
.stage-reminder img { left: calc(-10 / 350 * 100%); top: calc(-4 / 190 * 100%); width: calc(370 / 350 * 100%); height: calc(202 / 190 * 100%); }
.r-head { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.r-title { font-weight: 900; font-size: 28px; line-height: 1.15; }
.r-text { font-size: 16px; color: var(--muted); line-height: 1.45; max-width: 310px; }
.r-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.r-time {
  height: 64px; border-radius: 18px; border: 2px solid #DCE5DA; background: #FFFFFF; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.r-time[aria-pressed="true"] { background: var(--green); color: #FFFFFF; border-color: var(--green); }
.r-time-t { font-weight: 900; font-size: 22px; font-variant-numeric: tabular-nums; }
.r-time-l { font-weight: 700; font-size: 12px; }
.btn-link-g { min-height: 44px; border: 0; background: transparent; color: var(--green); font-weight: 800; font-size: 15px; text-decoration: underline; }
.sr-time { position: absolute; left: 50%; bottom: 40%; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.btn-cal {
  height: 64px; border: 0; border-radius: 22px; background: var(--green); color: #FFFFFF;
  font-weight: 900; font-size: 20px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.r-note { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.4; }
.btn-later { min-height: 44px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; }

.s-garden { gap: 12px; }
.stage-garden { aspect-ratio: 350 / 220; }
.stage-garden img { left: calc(-30 / 350 * 100%); top: calc(-10 / 220 * 100%); width: calc(410 / 350 * 100%); height: calc(224 / 220 * 100%); }
.g-stats { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.g-stats strong { font-size: 18px; font-weight: 900; }
.gear { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gear-item {
  background: #FFFFFF; border-radius: 14px; padding: 8px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 76px; border: 0;
}
.gear-item.locked { background: transparent; border: 2px dashed #B8CBB5; }
.gear-dot { width: 22px; height: 22px; margin: 3px; border-radius: 50%; flex-shrink: 0; }
.gear-n { font-size: 11px; font-weight: 800; text-align: center; line-height: 1.15; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.gear-w { font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; overflow-wrap: normal; word-break: normal; }
.cal { display: flex; flex-direction: column; gap: 6px; }
.cal-month { font-weight: 800; font-size: 15px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-h { font-size: 11px; font-weight: 800; color: var(--muted); text-align: center; }
.cal-c {
  height: 28px; border-radius: 8px; background: #FFFFFF; color: #8A978C;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.cal-c.ok { background: #6FB07A; color: #FFFFFF; }
.cal-c.nap { background: #DCDFF0; color: #3F4A63; }
.cal-c.miss { background: transparent; border: 2px dashed #B8A877; color: #4E4325; }
.cal-c.today { border: 2px solid var(--ink); color: var(--ink); }
.cal-c.today.ok { color: #FFFFFF; }
.cal-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.rem-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 700; }
.rem-btn {
  min-height: 44px; padding: 0 16px; border: 1.5px solid #B8CBB5; border-radius: 14px; background: transparent;
  color: var(--green); font-weight: 800; font-size: 14px;
}
.rem-hint, .iz-hint { font-size: 14px; font-weight: 700; color: var(--green); text-align: center; line-height: 1.4; }
.btn-backup {
  min-height: 44px; border: 1.5px solid #B8CBB5; border-radius: 14px; background: transparent;
  color: var(--green); font-weight: 800; font-size: 14px;
}

.s-backup { gap: 12px; }
.b-back {
  align-self: flex-start; min-height: 44px; margin-left: -8px; padding: 0 12px 0 8px; border: 0; background: transparent;
  color: var(--green); font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 4px;
}
.b-title { font-weight: 900; font-size: 28px; line-height: 1.15; }
.b-text { font-size: 15px; color: var(--muted); line-height: 1.45; }
.b-sub { margin-top: 10px; font-weight: 800; font-size: 17px; }
.b-area {
  width: 100%; resize: none; padding: 10px 12px; border: 2px solid #DCE5DA; border-radius: 14px;
  background: #FFFFFF; color: var(--ink);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.4;
  word-break: break-all; overflow-wrap: anywhere;
}
.b-row { display: flex; flex-wrap: wrap; gap: 8px; }
.b-btn {
  flex: 1 1 140px; min-height: 48px; padding: 0 14px; border: 1.5px solid #B8CBB5; border-radius: 14px;
  background: transparent; color: var(--green); font-weight: 800; font-size: 15px;
}
.b-btn.b-primary { background: var(--green); border-color: var(--green); color: #FFFFFF; }
.b-error { padding: 10px 14px; border-radius: 14px; background: #FBE6DF; color: #7A2A12; font-size: 14px; font-weight: 700; line-height: 1.4; }
.b-confirm { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: #FFFFFF; border: 2px solid var(--line); }
.b-confirm-t { font-size: 15px; font-weight: 700; line-height: 1.4; }

.s-wilted { background: #E9EBF3; color: #1C2433; }
.w-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.w-left { display: flex; align-items: center; gap: 8px; color: #E7A27C; }
.w-start { font-weight: 800; font-size: 16px; color: #3F4A63; }
.w-record { background: #FFFFFF; border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 13px; color: #3F4A63; white-space: nowrap; }
.stage-wilted { aspect-ratio: 350 / 290; background: #3E4A73; }
.stage-wilted img { left: calc(-50 / 350 * 100%); top: calc(40 / 290 * 100%); width: calc(450 / 350 * 100%); height: calc(246 / 290 * 100%); }
.stage-wilted .bubble-r { top: 18px; max-width: 190px; }
.w-head { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.w-title { font-weight: 900; font-size: 24px; line-height: 1.2; }
.w-text { font-size: 15px; color: #4A5168; line-height: 1.45; max-width: 320px; }
.w-nap { background: #FFFFFF; border-radius: 16px; padding: 10px 14px; font-size: 13px; color: #4A5168; line-height: 1.4; display: flex; gap: 10px; align-items: center; }
.w-nap svg { color: #7C88B8; flex-shrink: 0; }
.btn-wake {
  height: 68px; border: 0; border-radius: 22px; background: var(--green); color: #FFFFFF;
  font-weight: 900; font-size: 24px;
}
.w-easier { font-size: 13px; color: #4A5168; text-align: center; }

@media (max-width: 380px) {
  .streak { gap: 6px; }
  .streak-n { font-size: 28px; }
  .streak-l { font-size: 14px; }
  .nap-pill { padding: 6px 10px; font-size: 12px; gap: 5px; }
  .w-start { font-size: 15px; }
}
@media (max-width: 379.98px) {
  .gear { gap: 6px; }
  .gear-item { padding: 8px 1px; }
  .gear-n { font-size: 10px; }
  .gear-w { font-size: 9.5px; }
}
@media (max-height: 780px) {
  .screen { gap: 10px; }
  .s-reminder { padding-top: calc(20px + var(--sat)); }
}

.update-toast {
  position: fixed; left: 50%; bottom: calc(84px + var(--sab)); transform: translateX(-50%); z-index: 20;
  width: min(398px, calc(100vw - 32px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 18px; border: 1.5px solid var(--line); border-radius: 20px;
  background: #FFFFFF; color: var(--stage); font-weight: 800; font-size: 15px;
  box-shadow: 0 8px 24px rgba(31, 58, 43, 0.18);
}
.update-toast.is-top { bottom: auto; top: calc(12px + var(--sat)); }
.update-toast button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 14px;
  background: var(--stage); color: #FFFFFF; font-weight: 800; font-size: 15px;
}

@keyframes pz-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.028); } }
@keyframes pz-breathe-t { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.01, 1.025); } }
@keyframes pz-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(0.8px, -0.4px); }
  75% { transform: translate(-0.8px, 0.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .pz-breathe, .pz-breathe-box, .is-effort .pz-shake { animation: none; }
}