/* ==========================================================================
   Meeow 0.2.9 — Mio page, signed in: the little one's file with the live 3D
   Mio, the daily / weekly / monthly care routine and charts of what was
   logged (ADR-0016). Dashboard colours live in the --mp-* tokens below.
   Same soft tray recipe as the sign-in stage: raised cards and buttons,
   pressed fields and tracks. Mint = selection and progress, coral = the one
   primary action, sun = notices only.
   ========================================================================== */

.pn {
  --nm-base: #ffeede;
  --nm-card: #fffaf4;
  --nm-dark: rgba(196, 120, 72, .22);
  --nm-light: rgba(255, 255, 255, .96);
  --nm-raise: 6px 6px 14px var(--nm-dark), -6px -6px 14px var(--nm-light);
  --nm-raise-sm: 3px 3px 8px var(--nm-dark), -3px -3px 8px var(--nm-light);
  --nm-press: inset 3px 3px 7px var(--nm-dark), inset -3px -3px 7px var(--nm-light);
  --nm-ring: 0 0 0 2px var(--b-mint-ink);
  /* Warm energetic panel: sun + coral atmosphere, mint progress, peach pet.
     AA text pairs on surfaces; chart marks ≥ 3:1 on white. */
  --mp-page: #fff4e8;
  --mp-surface: #f5f3ef;
  --mp-surface-2: #fff1e4;
  --mp-hair: rgba(140, 72, 40, .12);
  --mp-hair-2: rgba(140, 72, 40, .22);
  --mp-shadow: 0 1px 2px rgba(140, 72, 40, .06), 0 16px 34px -20px rgba(255, 107, 94, .35);
  --mp-radius: 22px;
  --mp-radius-sm: 14px;
  --mp-gap: 16px;
  --mp-ink: #2a2030;
  --mp-ink-2: #5c4652;
  --mp-muted: #8a6a62;
  --mp-done: #0a7166;
  --mp-done-soft: #d8f7f0;
  --mp-progress: #14b39f;
  --mp-due: #9a5a00;
  --mp-due-soft: #fff0c2;
  --mp-due-mark: #e09a00;
  --mp-overdue: #c2471f;
  --mp-overdue-soft: #ffe4d4;
  --mp-info: #1f6fa8;
  --mp-info-soft: #e4f3ff;
  --mp-pet: #c23a2e;
  --mp-pet-soft: #ffe3da;
  --mp-flag: #b42318;
  --mp-flag-soft: #fff1ee;
  --mp-action: #ff6b5e;
  --mp-chart-1: #12b39a;
  --mp-chart-2: #ff7a59;
  --mp-chart-3: #f0b429;
  --mp-chart-4: #3db8e8;
  --mp-heat-0: #fff3ea;
  --mp-heat-1: #ffe0c8;
  --mp-heat-2: #ffc48a;
  --mp-heat-3: #47c1ad;
  --mp-heat-4: #0a7166;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  grid-template-areas: "main stage";
  align-items: start;
  gap: clamp(18px, 2.6vw, 34px);
  margin: 10px 0 28px;
  padding: clamp(14px, 2.2vw, 26px);
  color: var(--b-ink);
  background: var(--nm-base);
  border-radius: 34px;
  box-shadow: var(--nm-raise);
}
.pn[hidden] { display: none; }
/* The page wrapper hides overflow; clip keeps that look without breaking the sticky stage. */
.pet-home-page:has(.pn:not([hidden])) { overflow: clip; }
body.is-mio-touring .pet-home-page:has(.pn:not([hidden])) { overflow: visible; }
.pn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Stage: live Mio; an illustrated poster when 3D is off ---------- */
.pn-stage-wrap {
  grid-area: stage;
  position: sticky; top: calc(var(--mio-nav-top, 72px) + var(--mio-nav-h, 64px) + 22px);
  padding: 10px;
  background: var(--nm-base);
  border-radius: 30px;
  box-shadow: var(--nm-press);
}
.pn-mio-tour {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; margin-top: 8px; padding: 0 12px;
  color: #7a2e24;
  background: linear-gradient(135deg, #ffe8de, #fff1c4 55%, #d9f7ef);
  border: 1px solid color-mix(in srgb, var(--mp-action) 32%, transparent);
  border-radius: 14px; font: 800 .78rem/1.3 var(--font); cursor: pointer;
  box-shadow: 0 8px 16px -12px rgba(255, 107, 94, .55);
}
.pn-mio-tour:hover { filter: brightness(1.03); }
.pn-mio-tour:focus-visible { outline: 3px solid var(--b-mint); outline-offset: 2px; }
.pn-stage.mio-slot {
  position: relative;
  width: 100%;
  height: clamp(360px, 38vw, 470px);
  overflow: hidden;
  background:
    radial-gradient(120% 46% at 50% 104%, #ffd3b8 0 42%, transparent 45%),
    radial-gradient(70% 48% at 18% 10%, rgba(255, 201, 77, .55), transparent 68%),
    radial-gradient(60% 40% at 88% 14%, rgba(255, 255, 255, .95), transparent 70%),
    linear-gradient(180deg, #fff7ec, #ffe3d2 55%, #d9f5ec);
  border-radius: 22px;
  transition: height .45s var(--b-ease, ease), opacity .35s ease;
  cursor: pointer;
}
.pn-stage.mio-slot[data-away] { cursor: default; }
.pn[data-mode="panel"] .pn-stage.mio-slot { height: clamp(300px, 30vw, 380px); }
.pn-stage > .pn-scene { position: absolute; inset: 8% 8% 4%; width: 84%; height: 88%; object-fit: contain; transition: opacity .5s ease; }
.pn-stage > .mio-stage { position: absolute; inset: 0; }
.pn-stage .mio-stage > .mio-poster { display: none; }
.pn-stage:has(> .mio-stage.is-live) > .pn-scene { opacity: 0; pointer-events: none; }
.pn-stage .mio-bubble { max-width: min(270px, 88%); font-size: .9rem; }

/* ---------- Head ---------- */
.pn-main { grid-area: main; min-width: 0; display: grid; gap: 16px; }
.pn-head { display: grid; gap: 8px; padding-inline-start: 4px; }
.pn-head-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 0;
}
.pn-head-stat {
  flex: none; display: inline-flex; align-items: center;
  min-height: 28px; padding: 4px 11px;
  color: #8a4a00;
  background: linear-gradient(135deg, #fff1c4, #ffe0b8);
  border: 1px solid color-mix(in srgb, var(--b-sun) 36%, transparent);
  border-radius: 999px;
  font: 800 .68rem/1.3 var(--font);
  white-space: nowrap;
}
.pn-head-stat.is-done {
  color: var(--mp-done);
  background: var(--mp-done-soft);
  border-color: color-mix(in srgb, var(--mp-done) 22%, transparent);
}
.pn-head-stat[hidden] { display: none; }
.pn-head-avatar { flex: none; display: grid; place-items: center; }
.pn-head-avatar[hidden] { display: none; }
.pn-head-progress {
  display: block; height: 4px; margin: 0;
  background: color-mix(in srgb, var(--mp-hair) 70%, #fff);
}
.pn-head-progress[hidden] { display: none; }
.pn-head-progress > i {
  display: block; height: 100%; width: calc(var(--pn-file, 0) * 1%);
  max-width: 100%;
  background: linear-gradient(90deg, #ffc94d, #ff6b5e 70%, #14b39f);
  border-radius: 0 0 2px 2px;
  transition: width .45s var(--b-ease, ease);
}
.pn-head-progress.is-done > i {
  background: linear-gradient(90deg, #47c1ad, #0a7166);
}
.pn-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pn-title-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.pn-title-line { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; }
.pn-title-line h1 { flex: 0 1 auto; min-width: 0; }
.pn-head-file {
  flex: none; display: grid; justify-items: center; gap: 2px;
  min-width: 56px;
}
.pn-head-file[hidden] { display: none; }
.pn-head-file .pn-ring { width: 52px; height: 52px; }
.pn-head-file .pn-ring svg { inset: 3px; width: 46px; height: 46px; }
.pn-head-file .pn-ring strong { font-size: .72rem; }
.pn-head-file-label {
  color: var(--mp-muted);
  font: 800 .62rem/1.2 var(--font);
}
.pn-title-edit {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  color: var(--b-ink-2); background: var(--nm-base); border: 0; border-radius: 14px;
  box-shadow: var(--nm-raise-sm); cursor: pointer;
}
.pn-title-edit[hidden] { display: none; }
.pn-title-edit:hover { color: var(--b-peach-ink); }
.pn-title-edit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pn-title-edit:focus-visible { outline: 3px solid var(--b-mint); outline-offset: 2px; }
.pn-overline {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  padding: 5px 12px;
  color: var(--b-mint-ink);
  background: var(--nm-base);
  border-radius: 999px;
  box-shadow: var(--nm-raise-sm);
  font: 700 .74rem/1.4 var(--font);
}
.pn h1 {
  margin: 4px 0 0;
  color: var(--b-ink);
  font: 800 clamp(1.55rem, 2.7vw, 2.3rem)/1.35 var(--font-display, var(--font));
  letter-spacing: -.02em;
}
.pn h1 em { font-style: normal; font-weight: 400; color: var(--b-peach-ink); }
.pn-lead { max-width: 34rem; margin: 0; color: var(--b-ink-2); font-size: .95rem; line-height: 1.7; }
.pn-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 2px 0 0;
}
.pn-status__pill {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; padding: 4px 12px 4px 10px;
  color: var(--b-ink-2);
  background: color-mix(in srgb, var(--nm-base, #fff) 88%, #e8fff8);
  border: 1px solid color-mix(in srgb, #14b39f 18%, transparent);
  border-radius: 999px;
  font: 700 .72rem/1.3 var(--font);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .2s ease;
}
.pn-status__pill.is-offline {
  color: #6b3a00;
  background: color-mix(in srgb, var(--b-sun-soft, #fff3cf) 90%, #fff);
  border-color: color-mix(in srgb, #e8a317 28%, transparent);
}
.pn-status__light {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #14b39f;
  box-shadow: 0 0 0 3px color-mix(in srgb, #14b39f 18%, transparent);
}
.pn-status__pill.is-offline .pn-status__light {
  background: #e8a317;
  box-shadow: 0 0 0 3px color-mix(in srgb, #e8a317 20%, transparent);
}
.pn-status__pill--btn {
  cursor: pointer;
  color: var(--b-ink-2);
  background: color-mix(in srgb, var(--nm-base, #fff) 90%, #fff4f0);
  border-color: color-mix(in srgb, var(--b-peach, #ff8a7a) 22%, transparent);
}
.pn-status__pill--btn svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pn-status__pill--btn.is-on {
  color: #0a5c52;
  background: color-mix(in srgb, #e8fff8 85%, #fff);
  border-color: color-mix(in srgb, #14b39f 28%, transparent);
}
.pn-status__pill--btn.is-off:not([data-state="denied"]):hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--b-peach, #ff8a7a) 40%, transparent);
}
.pn-status__pill--btn:focus-visible {
  outline: 3px solid var(--b-mint, #14b39f);
  outline-offset: 2px;
}
.pn-status__pill--btn[data-state="denied"] {
  color: #7a3b3b;
  background: color-mix(in srgb, #ffe8e8 80%, #fff);
  border-color: color-mix(in srgb, #e07070 30%, transparent);
}
.pn-offline {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 10px 0 0; padding: 8px 12px;
  color: var(--b-sun-ink); background: var(--b-sun-soft);
  border-radius: 14px;
  font: 600 .8rem/1.7 var(--font);
}
.pn-offline[hidden] { display: none; }
.pn-offline svg { flex: none; margin-top: 3px; }
.pn-live, .pn-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pn-view[hidden] { display: none !important; }

/* ---------- Buttons: coral primary, soft raised secondary, links ---------- */
.pn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 24px;
  color: #fff;
  background: linear-gradient(135deg, #ff6b5e 0%, #ff8a4c 55%, #ffc94d 140%);
  border: 0; border-radius: 18px;
  box-shadow: 0 10px 22px -12px rgba(255, 107, 94, .7), inset 1px 1px 1px rgba(255, 255, 255, .32), inset -1px -1px 2px rgba(110, 26, 16, .22);
  font: 700 .98rem/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.pn-cta:hover { filter: brightness(1.04); transform: translateY(-1px); text-decoration: none; }
.pn-cta:active { transform: none; box-shadow: inset 3px 3px 7px rgba(110, 26, 16, .35); }
.pn-cta--sm { min-height: 46px; padding: 0 16px; font-size: .88rem; border-radius: 15px; }
.pn-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 48px; padding: 0 18px;
  color: var(--b-ink); background: var(--nm-base);
  border: 0; border-radius: 16px;
  box-shadow: var(--nm-raise-sm);
  font: 700 .88rem/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .18s ease, color .18s ease, transform .15s ease;
}
.pn-soft:hover { color: var(--b-mint-ink); transform: translateY(-1px); text-decoration: none; }
.pn-soft:active { transform: none; box-shadow: var(--nm-press); }
.pn-soft--sm { min-height: 40px; padding: 0 14px; font-size: .8rem; border-radius: 13px; }
.pn-link {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 40px; padding: 6px 10px;
  color: var(--b-mint-ink); background: color-mix(in srgb, var(--b-mint-soft) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--b-mint-ink) 14%, transparent);
  border-radius: 12px;
  font: 800 .8rem/1.3 var(--font);
  text-decoration: none;
  cursor: pointer;
}
.pn-link:hover { color: var(--b-ink); background: var(--b-mint-soft); text-decoration: none; }
.pn-link--danger {
  color: var(--b-peach-ink);
  background: color-mix(in srgb, var(--b-peach) 35%, transparent);
  border-color: color-mix(in srgb, var(--b-peach-ink) 18%, transparent);
}
.pn-link--danger:hover { color: var(--b-peach-ink); background: var(--b-peach); }
.pn-danger {
  min-height: 44px; padding: 0 16px;
  color: #fff; background: var(--b-peach-ink);
  border: 0; border-radius: 14px;
  font: 700 .86rem/1 var(--font);
  cursor: pointer;
}
.pn-icon-btn {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--b-ink); background: var(--nm-base);
  border: 0; border-radius: 50%;
  box-shadow: var(--nm-raise-sm);
  cursor: pointer;
}
.pn-icon-btn svg { transform: scaleX(-1); }
.pn-icon-btn:active { box-shadow: var(--nm-press); }
.pn-icon-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.pn button:disabled { cursor: default; }

/* Two-tone focus ring: mint glow + deep mint line, on every control. */
.pn :is(button, a, select, input, .pn-card-face, .pn-seg span, [data-pt]):focus-visible,
.pn .pn-card input:focus-visible + .pn-card-face,
.pn .pn-seg input:focus-visible + span,
.pn .pn-consent input:focus-visible,
.pn .pn-file:focus-visible + * {
  outline: 3px solid var(--b-mint); outline-offset: 2px;
  box-shadow: var(--nm-ring);
}
.pn .pn-field:focus-within { outline: 3px solid var(--b-mint); outline-offset: 2px; box-shadow: var(--nm-press), var(--nm-ring); }
.pn .pn-field :focus-visible { outline: none; box-shadow: none; }

/* ---------- Intro (no file yet) ---------- */
.pn-intro { display: grid; gap: 16px; justify-items: start; }
.pn-intro .pn-cta { min-width: min(100%, 300px); }
.pn-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: pn; }
.pn-preview li {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 8px;
  text-align: center;
  background: var(--nm-card);
  border-radius: 22px;
  box-shadow: var(--nm-raise-sm);
  counter-increment: pn;
}
.pn-preview li::before {
  content: counter(pn, persian);
  position: absolute; top: 8px; inset-inline-start: 10px;
  width: 22px; height: 22px; display: grid; place-items: center;
  color: var(--b-mint-ink); background: var(--b-mint-soft);
  border-radius: 50%;
  font: 800 .72rem/1 var(--font);
}
.pn-preview img { width: 72px; height: 72px; border-radius: 18px; background: #e8f7f1; }
.pn-preview span { display: grid; gap: 2px; }
.pn-preview strong { font: 700 .84rem/1.45 var(--font); }
.pn-preview small { color: var(--b-muted); font-size: .72rem; line-height: 1.55; }
.pn-privacy { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--b-muted); font-size: .78rem; line-height: 1.8; }
.pn-privacy svg { flex: none; margin-top: 3px; stroke: var(--b-mint-ink); }

/* ---------- Wizard ---------- */
.pn-wizard {
  display: grid; gap: 14px;
  padding: clamp(14px, 2vw, 22px);
  background: var(--nm-card);
  border-radius: 26px;
  box-shadow: var(--nm-raise);
}
.pn-wiz-top { display: flex; align-items: center; gap: 12px; }
.pn-steps { flex: 1 1 auto; display: flex; gap: 5px; padding: 5px; background: var(--nm-base); border-radius: 999px; box-shadow: var(--nm-press); }
.pn-steps span { flex: 1 1 0; height: 7px; background: rgba(34, 48, 74, .08); border-radius: 999px; transition: background .3s ease; }
.pn-steps span.is-done { background: var(--b-mint); }
.pn-steps span.is-current { background: var(--b-mint-ink); }
.pn-step-count { flex: none; color: var(--b-muted); font: 700 .76rem/1 var(--font); }
.pn-step { min-width: 0; margin: 0; padding: 0; border: 0; animation: pn-in .35s var(--b-ease, ease); }
.pn-step legend, .pn-date legend { padding: 0; }
.pn-step > legend { margin: 4px 0 12px; font: 800 clamp(1.15rem, 2vw, 1.4rem)/1.5 var(--font-display, var(--font)); }
.pn-step legend small { margin-inline-start: 6px; padding: 2px 9px; color: var(--b-mint-ink); background: var(--b-mint-soft); border-radius: 999px; font: 700 .7rem/1.6 var(--font); vertical-align: 3px; }
@keyframes pn-in { from { opacity: 0; transform: translateY(8px); } }
.pn-label { display: block; margin: 12px 2px 8px; color: var(--b-ink); font: 700 .84rem/1.4 var(--font); }
.pn-step > .pn-label:first-of-type, .pn-row .pn-label { margin-top: 0; }
.pn-hint { display: flex; gap: 7px; align-items: flex-start; margin: 8px 2px 0; color: var(--b-muted); font-size: .78rem; line-height: 1.8; }
.pn-hint svg { flex: none; width: 16px; height: 16px; margin-top: 3px; stroke: var(--b-mint-ink); }
.pn-field {
  position: relative;
  display: flex; align-items: center;
  height: 54px; padding: 0 14px;
  background: var(--nm-base);
  border-radius: 16px;
  box-shadow: var(--nm-press);
}
.pn-field input, .pn-field select {
  width: 100%; height: 100%; min-width: 0;
  color: var(--b-ink); background: transparent;
  border: 0; outline: none;
  font: 700 1.02rem/1 var(--font);
}
.pn-field select { appearance: none; padding-inline-end: 22px; cursor: pointer; }
.pn-field--select::after {
  content: ""; position: absolute; inset-inline-end: 14px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border: solid var(--b-muted); border-width: 0 2px 2px 0;
  transform: rotate(45deg); pointer-events: none;
}
.pn-field input::placeholder { color: #9a9185; font-weight: 500; }
.pn-field.is-invalid, .pn-date.is-invalid .pn-field { box-shadow: var(--nm-press), 0 0 0 2px var(--b-cta); }
.pn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.is-shake { animation: pn-shake .42s ease; }
@keyframes pn-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Species cards: raised; chosen = pressed with a mint face. */
.pn-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border-radius: 24px; }
.pn-cards.is-invalid { box-shadow: 0 0 0 2px var(--b-cta); }
.pn-card { position: relative; cursor: pointer; }
.pn-card input, .pn-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pn-card-face {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 140px; padding: 16px;
  background: var(--nm-base);
  border-radius: 22px;
  box-shadow: var(--nm-raise);
  transition: box-shadow .2s ease, background .2s ease, transform .2s var(--b-ease, ease);
}
.pn-card-face svg { width: 52px; height: 52px; stroke-width: 1.6; color: var(--b-ink-2); }
.pn-card-face strong { font: 800 1.05rem/1 var(--font); }
.pn-card:hover .pn-card-face { transform: translateY(-2px); }
.pn-card input:checked + .pn-card-face { background: var(--b-mint-soft); box-shadow: var(--nm-press), 0 0 0 2px var(--b-mint-ink); transform: none; }
.pn-card input:checked + .pn-card-face svg { color: var(--b-mint-ink); animation: pn-pop .4s cubic-bezier(.22, 1.45, .36, 1); }
@keyframes pn-pop { 40% { transform: scale(1.15) rotate(-6deg); } }

/* Segmented control: pressed track, raised chosen pill (like ON / OFF in the reference). */
.pn-seg { display: flex; gap: 6px; padding: 6px; background: var(--nm-base); border-radius: 18px; box-shadow: var(--nm-press); }
.pn-seg label { flex: 1 1 0; position: relative; min-width: 0; cursor: pointer; }
.pn-seg span {
  display: grid; place-items: center;
  min-height: 42px; padding: 0 8px;
  color: var(--b-ink-2);
  border-radius: 13px;
  font: 700 .86rem/1.3 var(--font);
  text-align: center;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.pn-seg input:checked + span { color: var(--b-mint-ink); background: var(--nm-card); box-shadow: var(--nm-raise-sm); }

/* Photo */
.pn-photo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pn-photo-frame {
  flex: none;
  width: 132px; height: 132px;
  display: grid; place-items: center; overflow: hidden;
  background: #e8f7f1;
  border-radius: 50%;
  box-shadow: var(--nm-press);
  border: 6px solid var(--nm-base);
}
.pn-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.pn-photo-frame img[hidden] { display: none; }
.pn-photo-frame #pnPhotoPreview { animation: pn-pop .45s cubic-bezier(.22, 1.45, .36, 1); }
.pn-photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pn-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pn-photo-actions label.pn-soft { cursor: pointer; }
.pn-file:focus-visible + label, .pn-photo-actions label:has(+ .pn-file:focus-visible) { outline: 3px solid var(--b-mint); outline-offset: 2px; box-shadow: var(--nm-ring); }

/* Health */
.pn-consent {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--nm-base);
  border-radius: 16px;
  box-shadow: var(--nm-raise-sm);
  font: 600 .86rem/1.8 var(--font);
  cursor: pointer;
}
.pn-consent input { flex: none; width: 22px; height: 22px; margin-top: 3px; accent-color: var(--b-mint-ink); }
.pn-health { display: grid; gap: 12px; margin-top: 12px; }
.pn-health[hidden] { display: none; }
.pn-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pn-date { min-width: 0; margin: 0; padding: 0; border: 0; }
.pn-date legend { margin: 0 2px 8px; font: 700 .82rem/1.4 var(--font); }
.pn-date-row { display: grid; grid-template-columns: .8fr 1.3fr 1fr; gap: 6px; }
.pn-date .pn-field { height: 48px; padding: 0 10px; border-radius: 14px; }
.pn-date .pn-field select { font-size: .88rem; }
.pn-date .pn-field--select::after { inset-inline-end: 9px; }
.pn-field-error { margin: 6px 2px 0; color: var(--b-peach-ink); font: 700 .76rem/1.6 var(--font); }
.pn-field-error[hidden] { display: none; }

.pn-error { margin: 0; padding: 10px 14px; color: var(--b-peach-ink); background: var(--b-peach); border-radius: 14px; font: 700 .84rem/1.7 var(--font); }
.pn-error[hidden] { display: none; }
.pn-wiz-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pn-wiz-foot .pn-cta { flex: 1 1 200px; }
.pn-wiz-foot .pn-cta svg { transform: scaleX(-1); }
.pn-wiz-foot .pn-soft[hidden], .pn-wiz-foot .pn-link[hidden] { display: none; }

/* ---------- Celebration ---------- */
.pn-done {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; gap: 12px;
  padding: 18px 18px 22px;
  text-align: center;
  background: linear-gradient(180deg, #eaf8f2, var(--nm-card) 60%);
  border-radius: 26px;
  box-shadow: var(--nm-raise);
}
.pn-done > img { width: min(220px, 60%); height: auto; border-radius: 50%; background: #e8f7f1; box-shadow: var(--nm-raise-sm); animation: pn-bounce 1.2s cubic-bezier(.22, 1.45, .36, 1); }
@keyframes pn-bounce { 0% { transform: scale(.6) translateY(30px); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } }
.pn-done-text { max-width: 26rem; margin: 0; font: 600 1rem/1.9 var(--font); }
.pn-done-text strong { color: var(--b-peach-ink); }
.pn-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pn-done-actions .pn-cta svg { transform: scaleX(-1); }
.pn-confetti { position: absolute; inset: 0; pointer-events: none; }
.pn-confetti i {
  position: absolute; top: -12px;
  width: 9px; height: 14px;
  background: var(--b-mint); border-radius: 3px;
  opacity: 0;
  animation: pn-fall 2.4s ease-in forwards;
}
.pn-confetti i:nth-child(3n) { background: var(--b-coral); }
.pn-confetti i:nth-child(3n + 1) { background: var(--b-sun); width: 8px; height: 8px; border-radius: 50%; }
.pn-confetti i:nth-child(1) { left: 8%; animation-delay: .05s; }
.pn-confetti i:nth-child(2) { left: 18%; animation-delay: .3s; }
.pn-confetti i:nth-child(3) { left: 29%; animation-delay: .12s; }
.pn-confetti i:nth-child(4) { left: 40%; animation-delay: .42s; }
.pn-confetti i:nth-child(5) { left: 51%; animation-delay: .2s; }
.pn-confetti i:nth-child(6) { left: 61%; animation-delay: .5s; }
.pn-confetti i:nth-child(7) { left: 70%; animation-delay: .08s; }
.pn-confetti i:nth-child(8) { left: 79%; animation-delay: .36s; }
.pn-confetti i:nth-child(9) { left: 88%; animation-delay: .18s; }
.pn-confetti i:nth-child(10) { left: 95%; animation-delay: .46s; }
@keyframes pn-fall {
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateY(420px) rotate(540deg); }
}

/* Sparkles around Mio for a new friend (placed by the Mio script). */
.mio-spark {
  position: absolute; z-index: 3;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffc94d' stroke='%23fff' stroke-width='1.4' d='m12 1.5 2.6 7.9 7.9 2.6-7.9 2.6L12 22.5l-2.6-7.9L1.5 12l7.9-2.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: mio-spark 1.5s ease-out forwards;
}
.mio-spark--1 { filter: hue-rotate(130deg) saturate(1.3); }
.mio-spark--2 { width: 12px; height: 12px; margin: -6px 0 0 -6px; filter: hue-rotate(-40deg); }
@keyframes mio-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  25% { opacity: 1; transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5)) scale(1.1) rotate(20deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.6) rotate(90deg); }
}

/* ---------- Dashboard ---------- */
/* Legacy view class; chrome lives on `.pn-overview` / `.pn-card-box` now. */
.pn-view.pn-dash { display: contents; }
.pn-card-box {
  position: relative;
  min-width: 0;
  padding: clamp(14px, 2vw, 20px);
  padding-inline-start: clamp(16px, 2.2vw, 22px);
  background:
    linear-gradient(160deg, color-mix(in srgb, #fff 94%, #ffe4d2) 0%, var(--mp-surface) 55%, color-mix(in srgb, var(--mp-surface) 92%, #e8fff8) 100%);
  border: 1px solid color-mix(in srgb, var(--mp-hair) 85%, #14b39f);
  border-radius: calc(var(--mp-radius) + 2px);
  box-shadow:
    var(--mp-shadow),
    0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset;
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.pn-card-box::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 999px;
  background: linear-gradient(180deg, #ff8a7a, #14b39f);
  opacity: .55;
  pointer-events: none;
}
.pn-card-box h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 1.05rem/1.45 var(--font-display, var(--font)); color: var(--mp-ink); }

.pn-pets { display: flex; gap: 10px; overflow-x: auto; padding: 6px 4px 10px; margin: -6px -4px -6px; scrollbar-width: none; }
.pn-pets::-webkit-scrollbar { display: none; }
.pn-pet-chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 4px 6px; padding-inline-end: 16px;
  color: var(--b-ink); background: var(--nm-base);
  border: 0; border-radius: 999px;
  box-shadow: var(--nm-raise-sm);
  font: 700 .86rem/1 var(--font);
  cursor: pointer;
}
.pn-pet-chip[aria-pressed="true"] { color: var(--b-mint-ink); background: var(--b-mint-soft); box-shadow: var(--nm-press), 0 0 0 2px var(--b-mint-ink); }
.pn-pet-chip--add { padding-inline-start: 14px; color: var(--b-muted); }
.pn-pet-chip--add:disabled { opacity: .5; }

.pn-avatar { flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #e8f7f1; color: var(--b-mint-ink); }
.pn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pn-avatar--dog { background: var(--b-peach); color: var(--b-peach-ink); }
.pn-avatar--sm { width: 38px; height: 38px; }
.pn-avatar--sm svg { width: 22px; height: 22px; }
.pn-avatar--md { width: 52px; height: 52px; border: 3px solid #fff; box-shadow: 0 6px 14px -8px rgba(140, 72, 40, .45); }
.pn-avatar--md svg { width: 28px; height: 28px; }
.pn-avatar--lg { width: 84px; height: 84px; border: 5px solid var(--nm-base); box-shadow: var(--nm-raise-sm); }
.pn-avatar--lg svg { width: 42px; height: 42px; stroke-width: 1.6; }

.pn-pet { display: flex; align-items: center; gap: 16px; }
.pn-pet-body { flex: 1 1 auto; min-width: 0; }
.pn-pet-body h2 { font-size: 1.3rem; }
.pn-pet-body p { margin: 2px 0 8px; color: var(--b-ink-2); font-size: .84rem; line-height: 1.8; }
.pn-edit { align-self: flex-start; }
.pn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  color: var(--b-ink-2); background: rgba(34, 48, 74, .06);
  border-radius: 999px;
  font: 700 .72rem/1.5 var(--font);
}
.pn-chip svg { width: 14px; height: 14px; }
.pn-chip--mint { color: var(--b-mint-ink); background: var(--b-mint-soft); }
.pn-chip--coral { color: var(--b-peach-ink); background: var(--b-peach); }
.pn-chip--sun { color: var(--b-sun-ink); background: var(--b-sun-soft); }
.pn-chip--peach { color: var(--mp-pet); background: var(--mp-pet-soft); }
.pn-chip--sky { color: var(--mp-info); background: var(--mp-info-soft); }
.pn-chip--overdue { color: var(--mp-overdue); background: var(--mp-overdue-soft); }

/* Entry to میوو‌مپ (ADR-0017). */
.pn-mapcard {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 10px;
  padding-inline-end: 16px;
  color: var(--b-ink);
  background: linear-gradient(100deg, #e4f6ef, var(--nm-card) 70%);
  text-align: start;
  font: inherit;
  cursor: pointer;
  transition: transform .18s var(--b-ease, ease);
}
.pn-mapcard:hover { transform: translateY(-2px); }
.pn-mapcard > img { flex: none; width: 76px; height: 76px; border-radius: 20px; background: #bfe9dc; }
.pn-mapcard-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.pn-mapcard-copy strong { display: flex; align-items: center; gap: 8px; font: 800 1.02rem/1.5 var(--font-display, var(--font)); }
.pn-mapcard-copy small { color: var(--b-ink-2); font-size: .8rem; line-height: 1.75; }
.pn-mapcard-new { padding: 1px 8px; color: var(--b-mint-ink); background: var(--b-mint-soft); border-radius: 999px; font: 800 .66rem/1.6 var(--font); font-style: normal; }
.pn-mapcard-badge { flex: none; min-width: 24px; height: 24px; padding: 0 7px; display: grid; place-items: center; color: #fff; background: var(--b-cta); border-radius: 999px; font: 800 .74rem/1 var(--font); font-style: normal; }
.pn-mapcard-badge[hidden] { display: none; }
.pn-mapcard-arrow { flex: none; width: 20px; height: 20px; color: var(--b-mint-ink); }
@media (prefers-reduced-motion: reduce) { .pn-mapcard { transition: none; } .pn-mapcard:hover { transform: none; } }

.pn-due h2 svg { color: var(--mp-due); }
.pn-due ul { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }

.pn-routine-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pn-tabs { display: flex; gap: 4px; padding: 5px; background: var(--nm-base); border-radius: 16px; box-shadow: var(--nm-press); }
.pn-tabs button {
  min-height: 40px; padding: 0 16px;
  color: var(--b-ink-2); background: transparent;
  border: 0; border-radius: 12px;
  font: 700 .84rem/1 var(--font);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.pn-tabs button[aria-selected="true"] { color: var(--b-mint-ink); background: var(--nm-card); box-shadow: var(--nm-raise-sm); }

.pn-progress { display: flex; align-items: center; gap: 14px; margin: 16px 0 8px; }
.pn-progress > div:last-child { display: grid; gap: 2px; }
.pn-progress strong#pnPeriod { font: 800 .95rem/1.5 var(--font); }
.pn-progress span { color: var(--b-ink-2); font-size: .82rem; }
.pn-ring {
  position: relative; flex: none;
  width: 70px; height: 70px;
  display: grid; place-items: center;
  background: var(--nm-base);
  border-radius: 50%;
  box-shadow: var(--nm-raise-sm);
}
.pn-ring svg { position: absolute; inset: 5px; width: 60px; height: 60px; transform: rotate(-90deg); }
.pn-ring circle { fill: none; stroke: rgba(34, 48, 74, .08); stroke-width: 5; }
.pn-ring .pn-ring-bar { stroke: var(--b-mint); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--pn-pct, 0)); transition: stroke-dashoffset .6s var(--b-ease, ease); }
.pn-ring strong { position: relative; font: 800 .86rem/1 var(--font); color: var(--b-mint-ink); }
.pn-ring.is-complete .pn-ring-bar { stroke: var(--b-mint-ink); }
.pn-ring.is-complete { animation: pn-pop .5s cubic-bezier(.22, 1.45, .36, 1); }

.pn-items { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.pn-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px;
  background: var(--mp-surface-2);
  border-radius: 18px;
  transition: background .25s ease;
}
.pn-item.is-done { background: #eaf7f1; }
.pn-item.is-done .pn-item-title strong { color: var(--b-mint-ink); }
.pn-item.is-pop .pn-check { animation: pn-pop .45s cubic-bezier(.22, 1.45, .36, 1); }
.pn-check {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: transparent; background: var(--nm-card);
  border: 0; border-radius: 14px;
  box-shadow: var(--nm-raise-sm);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.pn-check svg { width: 22px; height: 22px; stroke-width: 2.6; }
.pn-check:hover { color: rgba(10, 113, 102, .35); }
.pn-check[aria-pressed="true"] { color: #fff; background: var(--b-mint-ink); box-shadow: inset 2px 2px 5px rgba(0, 60, 52, .35); }
.pn-check--setup { color: var(--b-sun-ink); background: var(--b-sun-soft); box-shadow: none; cursor: default; }
.pn-check--setup svg { width: 20px; height: 20px; stroke-width: 2; }
.pn-item-body { flex: 1 1 auto; min-width: 0; }
.pn-item-title { display: flex; align-items: center; gap: 7px; }
.pn-item-title strong { font: 800 .94rem/1.5 var(--font); }
.pn-item-icon { flex: none; width: 26px; height: 26px; display: grid; place-items: center; color: var(--b-mint-ink); background: var(--b-mint-soft); border-radius: 8px; }
.pn-item-icon svg { width: 15px; height: 15px; }
.pn-item p { margin: 4px 0 6px; color: var(--b-ink-2); font-size: .82rem; line-height: 1.85; }
.pn-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pn-source { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: var(--b-mint-ink); font: 700 .74rem/1.4 var(--font); text-decoration: none; border-radius: 8px; }
.pn-source svg { width: 14px; height: 14px; }
.pn-source:hover { color: var(--b-ink); }
.pn-weigh { display: flex; gap: 8px; margin-top: 8px; }
.pn-weigh input {
  width: 110px; height: 40px; padding: 0 12px;
  color: var(--b-ink); background: var(--nm-card);
  border: 0; border-radius: 12px;
  box-shadow: var(--nm-press);
  font: 700 .95rem/1 var(--font);
}
.pn-weigh input[aria-invalid="true"] { box-shadow: var(--nm-press), 0 0 0 2px var(--b-cta); }
.pn-notes { margin: 12px 0 0; padding: 10px 14px; list-style: none; color: var(--b-sun-ink); background: var(--b-sun-soft); border-radius: 14px; font-size: .8rem; line-height: 1.8; }
.pn-notes[hidden] { display: none; }
.pn-review { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 0; padding-top: 12px; color: var(--b-muted); border-top: 1px solid var(--b-hair); font-size: .74rem; line-height: 1.8; }

.pn-flags { border-color: rgba(180, 35, 24, .14); }
.pn-flags h2 svg { color: var(--mp-flag); }
.pn-flags ul { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.pn-flag { display: grid; gap: 2px; padding: 10px 12px; border-inline-start: 4px solid var(--mp-flag); background: var(--mp-flag-soft); border-radius: 12px; }
.pn-flag--today { border-color: var(--mp-due-mark); background: #fffaf0; }
.pn-flag strong { color: var(--mp-flag); font: 800 .76rem/1.6 var(--font); }
.pn-flag--today strong { color: var(--b-sun-ink); }
.pn-flag span { font-size: .84rem; line-height: 1.8; }
.pn-flag a { justify-self: start; color: var(--b-ink-2); font: 700 .74rem/1.8 var(--font); text-underline-offset: 3px; }
.pn-flag-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.pn-manage { display: grid; gap: 6px; justify-items: start; padding: 0 4px; }
.pn-confirm { display: grid; gap: 10px; width: 100%; padding: 14px; background: var(--b-peach); border-radius: 16px; }
.pn-confirm[hidden] { display: none; }
.pn-confirm p { margin: 0; font: 700 .86rem/1.8 var(--font); color: var(--b-peach-ink); }
.pn-confirm div { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- «بعداً تکمیل می‌کنم»: ghost button, unfinished file, reminder, hints ---------- */
.pn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; margin-inline-start: auto;
  color: var(--b-ink-2); background: transparent;
  border: 0; border-radius: 14px;
  font: 700 .84rem/1 var(--font);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.pn-ghost:hover { color: var(--b-mint-ink); background: rgba(10, 113, 102, .06); }
.pn-ghost svg { width: 16px; height: 16px; }
.pn-close svg { transform: none; }

.pn-draft { display: grid; gap: 12px; border-color: var(--b-sun-soft); background: linear-gradient(180deg, #fffaf0, var(--nm-card) 70%); }
.pn-draft-top { display: flex; align-items: center; gap: 14px; }
.pn-draft-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; justify-items: start; }
.pn-draft-body h2 { font-size: 1.2rem; }
.pn-draft-body p { margin: 0; color: var(--b-ink-2); font-size: .84rem; line-height: 1.8; }
.pn-ring--draft { width: 74px; height: 74px; }
.pn-draft-label { margin: 0; color: var(--b-ink-2); font: 700 .8rem/1.4 var(--font); }
.pn-missing { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-miss {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 38px; padding: 0 12px;
  color: var(--b-ink); background: var(--nm-base);
  border: 1px dashed rgba(138, 90, 0, .35); border-radius: 999px;
  font: 700 .78rem/1 var(--font);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pn-miss svg { width: 15px; height: 15px; color: var(--b-mint-ink); }
.pn-miss:hover { color: var(--b-mint-ink); background: var(--b-mint-soft); border-color: var(--b-mint-ink); }
.pn-draft-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pn-draft-actions .pn-cta { flex: 1 1 200px; }
.pn-draft-actions .pn-cta svg { transform: scaleX(-1); }
.pn-draft.is-min { padding: 6px; }
.pn-draft-bar {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 52px; padding: 4px 6px; padding-inline-end: 14px;
  color: var(--b-ink); background: transparent;
  border: 0; border-radius: 18px;
  font: 600 .86rem/1.5 var(--font); text-align: start;
  cursor: pointer;
}
.pn-draft-bar span { flex: 1 1 auto; }
.pn-draft-bar em { font-style: normal; color: var(--b-cta); font-weight: 800; }

.pn-nudge {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; padding-inline-end: 52px;
  color: var(--b-ink);
  background: var(--b-sun-soft);
  border-radius: 22px;
  box-shadow: var(--nm-raise-sm);
  animation: pn-in .4s var(--b-ease, ease);
}
.pn-nudge[hidden] { display: none; }
.pn-nudge > img { flex: none; width: 76px; height: 76px; border-radius: 18px; background: #fdd98a; }
.pn-nudge-body { min-width: 0; display: grid; gap: 4px; }
.pn-nudge h2 { margin: 0; font: 800 1rem/1.5 var(--font-display, var(--font)); }
.pn-nudge p { margin: 0; color: var(--b-sun-ink); font-size: .82rem; line-height: 1.8; }
.pn-nudge-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.pn-snooze { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pn-nudge .pn-soft { background: #fff7e0; box-shadow: 2px 2px 6px rgba(186, 144, 58, .3), -2px -2px 6px rgba(255, 255, 255, .8); }
.pn-nudge .pn-link { color: var(--b-sun-ink); }
.pn-nudge-close { position: absolute; top: 10px; inset-inline-end: 10px; width: 36px; height: 36px; background: #fff7e0; box-shadow: none; }
.pn-nudge-close svg { transform: none; width: 16px; height: 16px; }

.pn-norout { display: flex; align-items: center; gap: 16px; }
.pn-norout[hidden] { display: none; }
.pn-norout img { flex: none; width: 96px; height: 96px; border-radius: 22px; background: #acd9be; }
.pn-norout div { display: grid; gap: 6px; justify-items: start; }
.pn-norout p { margin: 0; color: var(--b-ink-2); font-size: .86rem; line-height: 1.8; }
.pn-routine[hidden], .pn-pet[hidden], .pn-draft[hidden] { display: none; }

.pn-hints { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pn-hints[hidden] { display: none; }
.pn-hints li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  color: var(--b-ink-2); background: var(--b-mint-soft);
  border-radius: 14px;
  font-size: .8rem; line-height: 1.8;
}
.pn-hints li > svg { flex: none; color: var(--b-mint-ink); width: 16px; height: 16px; }
.pn-hints li span { flex: 1 1 auto; }
.pn-hints .pn-soft { flex: none; background: var(--nm-card); }

.pn-pet-chip small { color: var(--b-sun-ink); font-weight: 700; }
.pn-pet-chip.is-partial .pn-avatar { box-shadow: 0 0 0 2px var(--b-sun); }

/* The dot on «میو» in the menus while an unfinished file waits. */
[data-route="pet"]:has(> .pn-dot) { position: relative; }
.pn-dot {
  position: absolute; top: 4px; inset-inline-end: 2px;
  width: 9px; height: 9px;
  background: var(--b-coral, #ff6b5e);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}
.mobile-nav .pn-dot { top: 6px; inset-inline-end: calc(50% - 18px); }

/* ==========================================================================
   Dashboard layout: white cards on a calm tray, one hairline and one soft
   shadow each. Wide screens: two columns beside the sticky Mio stage.
   ========================================================================== */
.pn[data-mode="panel"] {
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, #ffc94d 34%, transparent), transparent 55%),
    radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, #ff6b5e 22%, transparent), transparent 52%),
    var(--mp-page);
  box-shadow: var(--mp-shadow);
  border: 1px solid var(--mp-hair);
}
/* Inside the independent Mio app shell the page already is the tray — drop the
   outer mega-card so home cards sit in one clean layer. */
body.is-mio-app .pn[data-mode="panel"] {
  margin: 8px 0 20px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: clamp(16px, 2.2vw, 28px);
}
body.is-mio-app .pn[data-mode="panel"] .pn-main { gap: var(--mp-gap); }
.pn[data-mode="panel"] .pn-stage-wrap {
  background:
    linear-gradient(180deg, #fffaf2, color-mix(in srgb, #ffe8de 70%, white));
  box-shadow: var(--mp-shadow);
  border: 1px solid color-mix(in srgb, #ff6b5e 18%, var(--mp-hair));
  padding: 8px;
  border-radius: calc(var(--mp-radius) + 6px);
}
.pn[data-mode="panel"] .pn-stage.mio-slot { border-radius: var(--mp-radius); }
/* Flat controls on the panel tray (keep neumorphism for the wizard only). */
.pn[data-mode="panel"] .pn-pet-chip {
  background: color-mix(in srgb, var(--mp-surface) 88%, #ffe8de);
  border: 1px solid var(--mp-hair);
  box-shadow: var(--mp-shadow);
}
.pn[data-mode="panel"] .pn-pet-chip[aria-pressed="true"] {
  color: var(--mp-pet);
  background: var(--mp-pet-soft);
  border-color: color-mix(in srgb, var(--mp-action) 40%, var(--mp-hair));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mp-action) 28%, transparent);
}
.pn[data-mode="panel"] .pn-soft {
  background: linear-gradient(180deg, #fff, color-mix(in srgb, #fff5ea 70%, white));
  border: 1px solid var(--mp-hair);
  box-shadow: var(--mp-shadow);
}
.pn[data-mode="panel"] .pn-soft:hover {
  border-color: color-mix(in srgb, var(--mp-action) 35%, var(--mp-hair-2));
  color: var(--mp-pet);
}
.pn[data-mode="panel"] .pn-soft:active { box-shadow: none; background: var(--mp-surface-2); }
.pn[data-mode="panel"] .pn-title-edit,
.pn[data-mode="panel"] .pn-icon-btn {
  background: color-mix(in srgb, #fff 80%, #ffe8de);
  border: 1px solid var(--mp-hair);
  box-shadow: var(--mp-shadow);
}
.pn[data-mode="panel"] .pn-overline {
  color: #8a4a00;
  background: linear-gradient(135deg, #fff1c4, #ffe0b8);
  box-shadow: none;
  border: 1px solid color-mix(in srgb, #ffc94d 45%, transparent);
}
.pn-view.pn-dash { display: contents; }
.pn-insights { display: contents; }
.pn-insights[hidden] { display: none; }
.pn-nudge { order: 1; } .pn-pets { order: 2; } .pn-draft { order: 3; } .pn-pet { order: 4; } .pn-norout { order: 5; }
.pn-stats { order: 6; } .pn-routine { order: 7; } .pn-due { order: 8; } .pn-chart--weight { order: 9; }
.pn-section { order: 10; } .pn-chart--week { order: 11; } .pn-chart--cal { order: 12; } .pn-chart--split { order: 13; }
.pn-quick { order: 14; } .pn-mapcard { order: 15; } .pn-flags { order: 16; } .pn-manage { order: 17; }
@media (min-width: 1101px) {
  .pn[data-mode="panel"] { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }
  .pn-routine .pn-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pn-section { display: grid; gap: 2px; margin: 10px 4px -4px; font: 800 1.12rem/1.5 var(--font-display, var(--font)); color: var(--mp-ink); }
.pn-section small { color: var(--mp-muted); font: 600 .76rem/1.6 var(--font); }

/* Pet identity: avatar, name and chips, the file ring, edit. */
.pn-completion { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 88px; }
.pn-ring--file { width: 64px; height: 64px; background: var(--mp-surface-2); box-shadow: none; }
.pn-ring--file svg { inset: 4px; width: 56px; height: 56px; }
.pn-completion-label { color: var(--mp-ink-2); font: 700 .72rem/1.5 var(--font); }
.pn-completion .pn-link { min-height: 32px; padding: 2px 4px; font-size: .72rem; }
.pn-pet .pn-avatar--lg { border-color: var(--mp-pet-soft); box-shadow: none; }

/* Stats row */
.pn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pn-stat { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 14px 12px; background: var(--mp-surface); border: 1px solid var(--mp-hair); border-radius: 18px; box-shadow: var(--mp-shadow); }
.pn-stat-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; color: var(--mp-done); background: var(--mp-done-soft); border-radius: 12px; }
.pn-stat-ic svg { width: 19px; height: 19px; }
.pn-stat--best .pn-stat-ic { color: var(--mp-pet); background: var(--mp-pet-soft); }
.pn-stat--weight .pn-stat-ic { color: var(--mp-info); background: var(--mp-info-soft); }
.pn-stat-body { display: grid; min-width: 0; }
.pn-stat-body strong { color: var(--mp-ink); font: 800 1.35rem/1.25 var(--font-display, var(--font)); }
.pn-stat-body strong small { color: var(--mp-muted); font: 700 .72rem/1 var(--font); }
.pn-stat-body > span { color: var(--mp-ink-2); font: 700 .76rem/1.5 var(--font); }
.pn-stat-body > small { color: var(--mp-muted); font: 600 .68rem/1.55 var(--font); }

/* Upcoming care: countdowns with how much of the gap has passed. */
.ch-due { display: grid; gap: 8px; padding: 12px; background: var(--mp-surface-2); border-inline-start: 4px solid var(--mp-done); border-radius: var(--mp-radius-sm); }
.ch-due.is-soon { border-color: var(--mp-due-mark); }
.ch-due.is-overdue { border-color: var(--mp-overdue); }
.ch-due.is-setup { border-inline-start: 4px dashed var(--mp-hair-2); }
.ch-due.is-logged { border-inline-start: 4px solid var(--mp-info); }
.ch-due-top { display: flex; align-items: center; gap: 8px; }
.ch-due-top strong { flex: 1 1 auto; min-width: 0; font: 800 .9rem/1.5 var(--font); }
.ch-due-top em { flex: none; padding: 2px 10px; color: var(--mp-done); background: var(--mp-done-soft); border-radius: 999px; font: 800 .74rem/1.6 var(--font); font-style: normal; }
.ch-due.is-soon em { color: var(--mp-due); background: var(--mp-due-soft); }
.ch-due.is-overdue em { color: var(--mp-overdue); background: var(--mp-overdue-soft); }
.ch-due.is-setup em { color: var(--mp-ink-2); background: rgba(34, 48, 74, .06); }
.ch-due.is-logged em { color: var(--mp-info); background: var(--mp-info-soft); }
.ch-due-ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: var(--mp-done); background: var(--mp-surface); border-radius: 9px; }
.ch-due-ic svg { width: 15px; height: 15px; }
.ch-due small { color: var(--mp-muted); font-size: .74rem; line-height: 1.7; }
.ch-due-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ch-track { height: 8px; overflow: hidden; background: rgba(34, 48, 74, .08); border-radius: 999px; }
.ch-track span { display: block; width: calc(var(--v) * 1%); height: 100%; background: var(--mp-progress); border-radius: inherit; }
.ch-due.is-soon .ch-track span { background: var(--mp-due-mark); }
.ch-due.is-overdue .ch-track span { background: var(--mp-overdue); }

/* ---------- Charts ---------- */
.pn-chart { display: grid; gap: 14px; align-content: start; margin: 0; }
.pn-card-box.pn-chart {
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--b-mint) 14%, transparent), transparent 55%),
    linear-gradient(165deg, #f5f3ef, #f7fbf9);
  border-color: color-mix(in srgb, var(--mp-done) 12%, var(--mp-hair));
}
.pn-card-box.pn-chart--weight {
  background:
    radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--b-sky) 18%, transparent), transparent 55%),
    linear-gradient(165deg, #f5f3ef, #f3f7fb);
  border-color: color-mix(in srgb, var(--mp-info) 14%, var(--mp-hair));
}
.pn-card-box.pn-chart--cal {
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--b-sun) 16%, transparent), transparent 55%),
    linear-gradient(165deg, #f5f3ef, #fff8ef);
}
.pn-card-box.pn-chart--split {
  background:
    radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--mp-chart-4) 12%, transparent), transparent 55%),
    linear-gradient(165deg, #f5f3ef, #f8f5fb);
}
.ch-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.ch-head h3 { margin: 0; color: var(--mp-ink); font: 800 1.02rem/1.45 var(--font-display, var(--font)); }
.ch-meta {
  padding: 3px 9px;
  color: var(--mp-done);
  background: var(--mp-done-soft);
  border-radius: 999px;
  font: 700 .68rem/1.4 var(--font);
}
.ch-cap { color: var(--mp-ink-2); font-size: .8rem; line-height: 1.85; }
.ch-plot { position: relative; }
.ch-plot [data-pt] { position: relative; outline: none; cursor: default; }
/* Tooltip on hover and keyboard focus; edge points open inwards. */
.ch-plot [data-tip]:is(:hover, :focus-visible)::after {
  content: attr(data-tip);
  position: absolute; z-index: 6; bottom: calc(100% + 8px); left: 50%;
  width: max-content; max-width: 210px;
  padding: 6px 10px;
  color: #fff; background: var(--mp-ink);
  border-radius: 10px;
  box-shadow: 0 8px 20px -10px rgba(34, 48, 74, .6);
  font: 700 .72rem/1.6 var(--font); white-space: normal; text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.ch-bars > li:nth-child(-n + 2) [data-tip]::after, .ch-cal-grid > :is(:nth-child(7n + 1), :nth-child(7n + 2))::after, .ch-dot.tip-r::after { left: auto !important; right: 0; transform: none !important; }
.ch-bars > li:nth-last-child(-n + 2) [data-tip]::after, .ch-cal-grid > :is(:nth-child(7n), :nth-child(7n + 6))::after, .ch-dot.tip-l::after { left: 0 !important; transform: none !important; }

/* Last 7 days: bars grow from the floor; oldest on the right. */
.ch-week { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.ch-grid { display: flex; flex-direction: column; justify-content: space-between; height: 140px; color: var(--mp-muted); font: 700 .66rem/1 var(--font); text-align: end; }
.ch-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ch-day { display: grid; grid-template-rows: 140px auto; min-width: 0; }
.ch-day .ch-pt {
  display: flex; align-items: flex-end; height: 100%;
  border-radius: 10px;
  background: linear-gradient(to bottom, var(--mp-hair) 0 1px, transparent 1px calc(50% - .5px), var(--mp-hair) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px) calc(100% - 1px), var(--mp-hair-2) calc(100% - 1px));
}
.ch-bar {
  display: block; width: 100%; height: calc(var(--v) * 1%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--b-mint) 75%, #fff), var(--mp-progress));
  border-radius: 10px 10px 4px 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transform-origin: bottom;
  animation: ch-grow .7s var(--b-ease, ease) both;
}
.ch-day.is-l0 .ch-bar { background: var(--mp-hair-2); box-shadow: none; }
.ch-day.is-l1 .ch-bar { background: linear-gradient(180deg, #ffc48a, var(--mp-heat-1)); }
.ch-day.is-l2 .ch-bar { background: linear-gradient(180deg, #47c1ad, var(--mp-heat-2)); }
.ch-day.is-l3 .ch-bar { background: linear-gradient(180deg, #1ad0b8, var(--mp-heat-3)); }
.ch-day.is-l4 .ch-bar { background: linear-gradient(180deg, #14c4ae, var(--mp-done)); }
.ch-day.is-today .ch-pt { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mp-done) 35%, transparent); }
.ch-day.is-off .ch-bar { background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(34, 48, 74, .06) 5px 7px); border: 1px dashed var(--mp-hair-2); animation: none; }
.ch-x { display: grid; justify-items: center; padding-top: 6px; color: var(--mp-ink-2); font: 700 .72rem/1.35 var(--font); }
.ch-x small { color: var(--mp-muted); font-size: .66rem; }
.ch-day.is-today .ch-x { color: var(--mp-done); font-weight: 800; }
@keyframes ch-grow { from { transform: scaleY(0); } }

/* Last 30 days: a Saturday-first calendar, Saturday on the right. */
.ch-cal { display: grid; gap: 6px; width: 100%; max-width: 380px; margin-inline: auto; }
.ch-cal-head, .ch-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.ch-cal-head span { color: var(--mp-muted); font: 700 .68rem/1.6 var(--font); text-align: center; }
.ch-cell {
  aspect-ratio: 1; display: grid; place-items: center;
  color: var(--mp-ink-2); background: var(--mp-heat-0);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(34, 48, 74, .07);
  font: 700 .72rem/1 var(--font);
}
.ch-cell.is-l1 { color: var(--mp-ink); background: var(--mp-heat-1); }
.ch-cell.is-l2 { color: var(--mp-ink); background: var(--mp-heat-2); }
.ch-cell.is-l3 { color: var(--mp-ink); background: var(--mp-heat-3); }
.ch-cell.is-l4 { color: #fff; background: var(--mp-heat-4); }
.ch-cell.is-off { color: var(--mp-muted); background: repeating-linear-gradient(135deg, #fff 0 4px, rgba(34, 48, 74, .06) 4px 6px); }
.ch-cell.is-pad { background: none; box-shadow: none; }
.ch-cell.is-today { box-shadow: inset 0 0 0 2px var(--mp-done), inset 0 0 0 4px #fff; }
.ch-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 5px; color: var(--mp-muted); font: 600 .7rem/1.6 var(--font); }
.ch-legend i { width: 14px; height: 14px; border-radius: 4px; background: var(--mp-heat-0); box-shadow: inset 0 0 0 1px rgba(34, 48, 74, .07); }
.ch-legend i.is-l1 { background: var(--mp-heat-1); } .ch-legend i.is-l2 { background: var(--mp-heat-2); }
.ch-legend i.is-l3 { background: var(--mp-heat-3); } .ch-legend i.is-l4 { background: var(--mp-heat-4); }
.ch-legend i.is-off { margin-inline-start: 10px; background: repeating-linear-gradient(135deg, #fff 0 3px, rgba(34, 48, 74, .12) 3px 5px); }

/* Weight: the user's own weigh-ins; sky = information. Draws in from the right. */
.ch-line { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 150px auto; gap: 6px 8px; }
.ch-yaxis { position: relative; min-width: 2.2em; }
.ch-yaxis span { position: absolute; inset-inline-start: 0; top: var(--y); color: var(--mp-muted); font: 700 .68rem/1 var(--font); transform: translateY(-50%); }
.ch-area { position: relative; }
.ch-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: ch-reveal 1s var(--b-ease, ease) both; }
.ch-gridline { stroke: rgba(34, 48, 74, .1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ch-fill { fill: var(--mp-info-soft); stroke: none; }
.ch-stroke { fill: none; stroke: var(--mp-info); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ch-plot .ch-dot { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #fff; border: 3px solid var(--mp-info); border-radius: 50%; }
.ch-dot.is-last { background: var(--mp-info); box-shadow: 0 0 0 4px var(--mp-info-soft); }
.ch-dot::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.ch-xaxis { grid-column: 2; display: flex; justify-content: space-between; color: var(--mp-muted); font: 700 .68rem/1.5 var(--font); }
.ch-xaxis:has(> :only-child) { justify-content: center; }
.ch-hint { margin: 0; color: var(--mp-info); font: 600 .78rem/1.8 var(--font); }
@keyframes ch-reveal { from { clip-path: inset(0 0 0 100%); } }
.ch-weigh { display: grid; gap: 6px; margin: 0; }
.ch-weigh label { color: var(--mp-ink); font: 700 .8rem/1.5 var(--font); }
.ch-weigh label small { color: var(--mp-muted); font-weight: 600; }
.ch-weigh > div { display: flex; gap: 8px; }
.ch-weigh input { flex: 1 1 auto; width: auto; max-width: 180px; background: var(--mp-surface-2); }
.ch-note { margin: 0; color: var(--mp-muted); font-size: .74rem; line-height: 1.85; }
.ch-note a { color: var(--mp-done); font-weight: 700; text-underline-offset: 3px; }
.ch-note .pn-chip { vertical-align: 1px; }
.ch-empty { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--mp-surface-2); border-radius: 16px; }
.ch-empty img { flex: none; width: 84px; height: 84px; border-radius: 18px; background: #e3f3ee; }
.ch-empty p { margin: 0; color: var(--mp-ink-2); font-size: .84rem; line-height: 1.85; }
.ch-empty strong { display: block; color: var(--mp-ink); }

/* What got done: one stacked bar and a legend that doubles as the data. */
.ch-stack { display: flex; gap: 2px; height: 16px; overflow: hidden; background: var(--mp-surface-2); border-radius: 999px; }
.ch-stack span { flex: none; width: var(--w); background: var(--c); }
.ch-c-food { --c: var(--mp-chart-1); } .ch-c-hygiene { --c: var(--mp-chart-2); } .ch-c-play { --c: var(--mp-chart-3); } .ch-c-health { --c: var(--mp-chart-4); }
.ch-keys { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ch-keys li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 3.2em; align-items: center; gap: 8px; color: var(--mp-ink); font-size: .82rem; line-height: 1.6; }
.ch-keys i { width: 12px; height: 12px; background: var(--c); border-radius: 4px; }
.ch-keys strong { font-weight: 800; }
.ch-keys small { color: var(--mp-muted); text-align: end; }
.ch-keys li.is-zero { color: var(--mp-muted); }

/* Quick actions to the rest of Meeow. */
.pn-quick ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pn-quick :is(button, a) {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 58px; padding: 8px 10px;
  color: var(--mp-ink); background: var(--mp-surface-2);
  border: 0; border-radius: var(--mp-radius-sm);
  font: inherit; text-align: start; text-decoration: none;
  cursor: pointer;
  transition: background .18s ease;
}
.pn-quick :is(button, a):hover { background: var(--mp-done-soft); }
.pn-quick-ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 0; background: transparent; }
.pn-quick-ic svg { width: 22px; height: 22px; stroke-width: 1.5; }
.pn-quick-ic--mint { color: var(--mp-done); }
.pn-quick-ic--peach { color: var(--mp-pet); }
.pn-quick-ic--sky { color: var(--mp-info); }
.pn-quick :is(button, a) > span:last-child { display: grid; min-width: 0; }
.pn-quick strong { font: 800 .88rem/1.5 var(--font); }
.pn-quick small { color: var(--mp-ink-2); font-size: .74rem; line-height: 1.6; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .pn { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); }
  .pn-dates { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Mobile: Mio on top, compact; the form right under him ---------- */
@media (max-width: 760px) {
  .pn {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "main";
    gap: 12px;
    margin: 4px 0 18px;
    padding: 10px 10px 16px;
    border-radius: 28px;
  }
  .pn-stage-wrap { position: relative; top: 0; padding: 6px; border-radius: 24px; }
  .pn-stage.mio-slot { height: 230px; border-radius: 19px; }
  .pn[data-mode="wizard"] .pn-stage.mio-slot { height: 200px; }
  .pn[data-mode="panel"] .pn-stage.mio-slot { height: 190px; }
  .pn-stage .mio-bubble { font-size: .84rem; padding: 7px 12px 8px; }
  .pn h1 { margin: 8px 0 4px; font-size: 1.36rem; line-height: 1.5; }
  .pn[data-mode="wizard"] .pn-head { display: none; }
  .pn-lead { font-size: .84rem; line-height: 1.8; }
  .pn-intro .pn-cta { width: 100%; }
  .pn-preview { gap: 8px; }
  .pn-preview li { padding: 10px 6px; border-radius: 18px; }
  .pn-preview img { width: 60px; height: 60px; }
  .pn-preview strong { font-size: .76rem; }
  .pn-preview small { font-size: .68rem; }
  .pn-wizard { padding: 12px; border-radius: 22px; }
  .pn-step-count { font-size: .7rem; }
  .pn-row, .pn-dates { grid-template-columns: minmax(0, 1fr); }
  .pn-card-face { min-height: 116px; }
  .pn-card-face svg { width: 44px; height: 44px; }
  .pn-wiz-foot .pn-cta { flex-basis: 100%; }
  .pn-wiz-foot .pn-soft { flex: 1 1 auto; }
  .pn-pet { flex-wrap: wrap; gap: 12px; }
  .pn-avatar--lg { width: 68px; height: 68px; }
  .pn-edit { order: 3; width: 100%; }
  .pn-routine-head { flex-direction: column; align-items: stretch; }
  .pn-tabs button { flex: 1 1 0; }
  .pn-item { padding: 10px; gap: 10px; }
  .pn-flag-actions > * { flex: 1 1 auto; }
  .pn-wiz-foot .pn-ghost { flex-basis: 100%; justify-content: center; margin-inline-start: 0; }
  .pn-nudge { align-items: flex-start; gap: 10px; padding: 10px 12px; padding-inline-end: 46px; }
  .pn-nudge > img { width: 56px; height: 56px; border-radius: 14px; }
  .pn-nudge-actions .pn-cta { width: 100%; }
  .pn-draft-top { gap: 10px; }
  .pn-draft .pn-avatar--lg { width: 60px; height: 60px; }
  .pn-ring--draft { width: 62px; height: 62px; }
  .pn-ring--draft svg { inset: 4px; width: 54px; height: 54px; }
  .pn-norout { align-items: flex-start; }
  .pn-norout img { width: 72px; height: 72px; }
  .pn-hints li { flex-wrap: wrap; }
  /* Today's list first; the numbers and charts after it; red flags before the shortcuts. */
  body.is-mio-app .pn[data-mode="panel"] { margin: 4px 0 16px; gap: 12px; }
  .pn-page { gap: 12px; }
  .pn-routine { order: 6; } .pn-due { order: 7; } .pn-section { order: 8; } .pn-stats { order: 9; }
  .pn-chart--week { order: 10; } .pn-chart--weight { order: 11; } .pn-chart--cal { order: 12; } .pn-chart--split { order: 13; }
  .pn-flags { order: 14; } .pn-quick { order: 15; } .pn-mapcard { order: 16; } .pn-manage { order: 17; }
  .pn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pn-stat { padding: 12px 10px; gap: 8px; }
  .pn-stat-ic { width: 34px; height: 34px; }
  .pn-stat-body strong { font-size: 1.2rem; }
  .pn-pet { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
  .pn-pet .pn-completion { grid-column: 3; grid-row: 1; min-width: 0; }
  .pn-pet .pn-edit { grid-column: 1 / -1; }
  .pn-ring--file { width: 56px; height: 56px; }
  .pn-ring--file svg { inset: 4px; width: 48px; height: 48px; }
  .ch-grid, .ch-day .ch-pt { height: 120px; }
  .ch-day { grid-template-rows: 120px auto; }
  .ch-bars { gap: 4px; }
  .ch-line { grid-template-rows: 130px auto; }
  .ch-empty img { width: 64px; height: 64px; }
}
@media (max-width: 360px) {
  .pn-stats { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pn-stage.mio-slot, .pn-ring .pn-ring-bar, .pn-steps span, .pn-soft, .pn-cta, .pn-card-face { transition: none; }
  .pn-step, .pn-done > img, .pn-card input:checked + .pn-card-face svg, .pn-photo-frame #pnPhotoPreview,
  .pn-ring.is-complete, .pn-item.is-pop .pn-check, .is-shake, .pn-nudge { animation: none; }
  .pn-ghost, .pn-miss, .pn-quick :is(button, a) { transition: none; }
  .ch-bar, .ch-area svg { animation: none; }
  .pn-confetti, .mio-spark { display: none; }
  .pn-cta:hover, .pn-soft:hover, .pn-card:hover .pn-card-face { transform: none; }
}

/* ==========================================================================
   Mio's panel bar (mio-nav-v1.js, ADR-0017): «امروز» and the three میوو‌مپ
   views under one sticky bar. Each view keeps one tone (sun, mint, peach, sky)
   for its clay icon tile and its label when current; coral badges only count
   things waiting for the member.
   ========================================================================== */
.mio-nav {
  position: sticky; top: calc(var(--mio-nav-top, 72px) + 8px); z-index: 60;
  margin: 10px 0 6px;
  color: var(--b-ink);
}
.mio-nav[hidden] { display: none; }
.pet-home-shell > .mio-nav:not([hidden]) ~ .app-bar { display: none; }
.mio-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mio-nav__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px;
  background: linear-gradient(135deg, rgba(255, 250, 244, .96), rgba(255, 236, 220, .94));
  border: 1px solid color-mix(in srgb, #ff6b5e 16%, rgba(140, 72, 40, .1));
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(140, 72, 40, .06), 0 16px 36px -18px rgba(255, 107, 94, .45);
  backdrop-filter: blur(14px);
}
.mio-nav button { font-family: var(--font); cursor: pointer; }
.mio-nav button:focus-visible { outline: 3px solid var(--b-mint); outline-offset: 2px; }
.mio-nav__me {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; padding: 3px; padding-inline-end: 12px;
  color: inherit; background: none; border: 0; border-radius: 16px;
  text-align: start;
}
.mio-nav__me:hover { background: rgba(34, 48, 74, .04); }
.mio-nav__av { flex: none; width: 40px; height: 40px; overflow: hidden; background: var(--b-mint-soft); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--b-mint); }
.mio-nav__av img { width: 100%; height: 100%; object-fit: cover; }
.mio-nav__who { display: grid; min-width: 0; line-height: 1.35; }
.mio-nav__who small { color: var(--b-muted); font: 700 .66rem/1.4 var(--font); }
.mio-nav__who strong { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 .9rem/1.4 var(--font); }
.mio-nav__items {
  display: flex; gap: 4px; margin: 0; padding: 5px; list-style: none;
  background: linear-gradient(180deg, #fff1e4, #ffe8d6);
  border-radius: 20px;
  box-shadow: inset 0 1px 2px rgba(140, 72, 40, .08);
}
.mio-nav__item {
  --tone: var(--b-mint-soft); --tone-ink: var(--b-mint-ink);
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 6px; padding-inline-end: 16px;
  color: var(--b-ink-2); background: transparent;
  border: 0; border-radius: 16px;
  text-align: start; white-space: nowrap;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.mio-nav__item[data-tone="sun"] { --tone: var(--b-sun-soft); --tone-ink: var(--b-sun-ink); }
.mio-nav__item[data-tone="peach"] { --tone: var(--b-peach); --tone-ink: var(--b-peach-ink); }
.mio-nav__item[data-tone="sky"] { --tone: var(--b-sky-soft); --tone-ink: var(--b-sky-ink); }
.mio-nav__item[data-tone="lilac"] { --tone: #efe8ff; --tone-ink: #6446c4; }
:root[data-theme="dark"] .mio-nav__item[data-tone="lilac"] { --tone: rgba(150, 120, 255, .16); --tone-ink: #c7b6ff; }
.mio-nav__ic {
  position: relative; flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--tone); border-radius: 14px;
  transition: box-shadow .2s ease;
}
.mio-nav__ic img {
  width: 38px; height: 38px; object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(34, 48, 74, .16));
  transition: transform .35s var(--b-ease, ease);
}
.mio-nav__txt { display: grid; gap: 3px; min-width: 0; }
.mio-nav__label { font: 800 .9rem/1.2 var(--font); }
.mio-nav__hint { color: var(--b-muted); font: 600 .68rem/1.3 var(--font); }
.mio-nav__item:hover { color: var(--b-ink); background: rgba(255, 255, 255, .72); }
.mio-nav__item:hover .mio-nav__ic img { transform: translateY(-2px) rotate(-6deg) scale(1.07); }
.mio-nav__item[aria-current] {
  color: var(--b-ink); background: #fff;
  box-shadow: 0 1px 2px rgba(34, 48, 74, .06), 0 12px 24px -14px rgba(34, 48, 74, .5);
}
.mio-nav__item[aria-current] .mio-nav__ic { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tone-ink) 26%, transparent); }
.mio-nav__item[aria-current] .mio-nav__ic img { transform: scale(1.08); }
.mio-nav__item[aria-current] .mio-nav__label { color: var(--tone-ink); }
.mio-nav__badge {
  position: absolute; top: -6px; inset-inline-end: -7px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  color: #fff; background: var(--b-cta);
  border: 2px solid #fff; border-radius: 999px;
  box-shadow: 0 4px 8px -3px rgba(210, 64, 47, .7);
  font: 800 .64rem/1 var(--font); font-style: normal;
}
.mio-nav__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mio-nav__end { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.mio-nav__talk {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 8px; padding-inline-end: 14px;
  color: var(--b-mint-ink); background: var(--b-mint-soft);
  border: 0; border-radius: 14px;
  font: 800 .82rem/1 var(--font); white-space: nowrap;
}
.mio-nav__talk:hover { background: #cdf1ea; }
.mio-nav__talk img { width: 28px; height: 28px; border-radius: 50%; background: #fff; }
.mio-nav__more { position: relative; }
.mio-nav__icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--b-ink-2); background: transparent; border: 0; border-radius: 14px; }
.mio-nav__icon:hover, .mio-nav__icon[aria-expanded="true"] { color: var(--b-ink); background: #f1ebe3; }
.mio-nav__menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 5;
  min-width: 232px; padding: 8px;
  background: #fff;
  border: 1px solid var(--b-hair);
  border-radius: 16px;
  box-shadow: 0 20px 44px -18px rgba(34, 48, 74, .5);
}
.mio-nav__menu[hidden] { display: none; }
.mio-nav__menu p { margin: 4px 8px 8px; color: var(--b-muted); font: 600 .74rem/1.7 var(--font); }
.mio-nav__menu p b { color: var(--b-ink); }
.mio-nav__menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 0 10px;
  color: var(--b-ink); background: none;
  border: 0; border-radius: 12px;
  font: 700 .84rem/1 var(--font); text-align: start;
}
.mio-nav__menu button:hover { background: #f6f1ea; }
.mio-nav__menu svg { width: 18px; height: 18px; color: var(--b-ink-2); }

@media (max-width: 1380px) {
  .mio-nav__hint { display: none; }
  .mio-nav__item { min-height: 52px; padding-inline-end: 14px; }
  .mio-nav__ic { width: 40px; height: 40px; border-radius: 13px; }
  .mio-nav__ic img { width: 34px; height: 34px; }
}
@media (max-width: 1100px) {
  .mio-nav__talk span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mio-nav__talk { padding-inline-end: 8px; }
  .mio-nav__item { gap: 8px; padding-inline-end: 12px; }
}
@media (max-width: 860px) {
  .mio-nav__who { display: none; }
  .mio-nav__me { padding-inline-end: 3px; }
}
@media (max-width: 760px) {
  .mio-nav { top: calc(var(--mio-nav-top, 60px) + 6px); margin: 6px 0 4px; }
  .mio-nav__bar { gap: 4px; padding: 5px; border-radius: 19px; }
  .mio-nav__me, .mio-nav__talk { display: none; }
  .mio-nav__items { flex: 1 1 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 4px; border-radius: 17px; }
  .mio-nav__items > li { display: flex; min-width: 0; }
  .mio-nav__item { flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 66px; padding: 6px 2px 7px; border-radius: 14px; text-align: center; }
  .mio-nav__ic { width: 38px; height: 38px; border-radius: 12px; }
  .mio-nav__ic img { width: 32px; height: 32px; }
  .mio-nav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: .7rem; }
  .mio-nav__txt { max-width: 100%; }
  .mio-nav__item[aria-current]::after {
    content: ''; position: absolute; bottom: 3px; left: 50%;
    width: 18px; height: 3px; margin-left: -9px;
    background: var(--tone-ink); border-radius: 3px;
  }
  .mio-nav__icon { width: 40px; height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .mio-nav__item, .mio-nav__ic { transition: none; }
  .mio-nav__ic img { transition: none; transform: none !important; }
}