/* M3E Canvas: shared visual layer. Existing state and interaction selectors stay intact. */
:root {
  color-scheme: light;
  --bg: #f4fbfb;
  --surface: #f4fbfb;
  --surface-2: #eef5f5;
  --surface-translucent: #e8efef;
  --text: #161d1d;
  --muted: #3f4948;
  --orange: #00696e;
  --orange-cta: #00696e;
  --ink-orange: #00696e;
  --green-strong: #00696e;
  --ink-green: #005055;
  --line: #bec8c8;
  --line-strong: #6f7979;
  --soft: #cce8e9;
  --chip-active-bg: #9cf1f6;
  --tag-has-border: #80c6ca;
  --tag-has-bg: #cce8e9;
  --hero-grad-1: #9cf1f6;
  --hero-grad-2: #9cf1f6;
  --medal-border: #80c6ca;
  --disabled-text: #637474;
  --toast-bg: #2b3232;
  --scrim: rgba(0,32,34,.46);
  --shadow: 0 12px 32px rgba(0,32,34,.09);
  --shadow-soft: none;
  --r-card: 20px;
  --r-hero: 24px;
  --r-btn: 999px;
}
body {font-size: 16px;}
button, input, select {font-family: inherit;}
button {touch-action: manipulation;}
:where(button,a,input,select,[tabindex]):focus-visible {outline: 3px solid #00696e;outline-offset: 3px;}
.appbar {padding-block: 12px; border: 0;}
.appbar__brand {margin: 0; min-height: 40px; gap: 12px;}
.appbar__name {font-size: 18px; font-weight: 700;}
.appbar__step {background: transparent; border: 0; font-size: 12px; padding: 0;}
.appbar .settings-btn {margin: 0; min-width: 44px; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; color: var(--text);}
.ui-icon {display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.screen {padding-block: 24px 32px; padding-inline: max(16px,calc((100% - var(--content-max)) / 2));}
.card {padding: 20px; border: 1px solid transparent; background: var(--surface-2); box-shadow: none;}
.home__hero {padding: 0; margin-bottom: 24px; background: transparent; border: 0; box-shadow: none;}
.home__eyebrow {font-size: 12px; margin-bottom: 8px;}
.home__title {font-size: clamp(26px,6.5vw,32px); line-height: 1.4; font-weight: 750; margin-bottom: 8px;}
.home__lead {font-size: 16px; line-height: 1.7; margin-bottom: 16px;}
.home__progress {font-size: 12px; background: var(--surface-2); border: 0; margin: 0;}
.home__welcome {padding: 20px; margin-bottom: 24px; background: #9cf1f6; border-radius: 24px;}
.home__welcome h3 {font-size: 18px; margin: 0 0 8px;}
.home__welcome p {font-size: 14px; margin: 0 0 20px; color: #002022;}
.home__primary {width: 100%; min-height: 56px; padding: 14px 20px; font-size: 15px; line-height: 1.5; border-radius: 999px;}
.home__primary:hover,.cta:not([disabled]):hover,.intro__start:hover {background: #005055;}
.home__section {margin-bottom: 24px;}
.home__section-head {margin-bottom: 14px; flex-wrap: wrap;}
.home__section-head h2 {font-size: 22px; font-weight: 700;}
.home__text-link {min-height: 44px; font-size: 13px;}
.home__routine,.routine,.home__shortcuts {gap: 12px;}
.home__routine-card,.routine__card {min-height: 140px; padding: 16px; border: 2px solid transparent; border-radius: 20px;}
.home__routine-card:first-child,.routine__card:first-child {background: #d2e4ff;}
.home__routine-card:nth-child(2),.routine__card:nth-child(2) {background: #cce8e9;}
.home__routine-card span,.routine__t {font-size: 14px;}
.home__routine-card strong,.routine__d {font-size: 14px; line-height: 1.7;}
.routine-record [data-record-status] {font-size: 12px; line-height: 1.6;}
.routine-record[aria-pressed="true"] {border-color: #00696e; background: #9cf1f6;}
.home__week {padding: 20px; margin-bottom: 24px;}
.home__week-copy {font-size: 13px; line-height: 1.7;}
.home__day {font-size: 12px; gap: 8px;}
.home__day-dot {width: 24px; height: 24px;}
.home__explore {padding: 20px 0 0; border-radius: 0; background: transparent;}
.home__explore-head h2 {font-size: 20px;}
.home__explore-head p,.home__shortcut span {font-size: 13px;}
.home__shortcut {min-height: 108px; padding: 16px;}
.home__shortcut strong {font-size: 15px;}
.home__guide-card {min-height: 132px; padding: 24px; align-items: flex-start; flex-direction: column;}
.home__guide-card:first-child {background: #9cf1f6;}
.home__guide-card strong {font-size: 20px;}
.home__guide-card span {font-size: 14px; text-align: left;}
.home__guide-list {gap: 16px;}
.s1-head {padding: 20px; border: 0; background: #cce8e9; margin-bottom: 24px;}
.s1-value {font-size: 22px; line-height: 1.5;}
.s1-remain {font-size: 14px;}
.qcard,.qcard--core {padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible;}
.qcard--core::before,.chip.chip--core::before {display: none;}
.qtitle,.qcard--core .qtitle {font-size: 26px; line-height: 1.45;}
.qhint {font-size: 14px; margin-bottom: 20px;}
.chips {gap: 12px;}
.chip,.chip.chip--core {min-height: 76px; padding: 18px 16px; border: 2px solid transparent; border-radius: 20px; background: var(--surface-2);}
.chip.chip--core {padding-right: 42px;}
.chip.chip--core::after {top: 24px;}
.chip__label,.chip.chip--core .chip__label {font-size: 16px; line-height: 1.5;}
.chip__hint {font-size: 13px; line-height: 1.6;}
.chip:hover,.chip.chip--core:hover {box-shadow: none; transform: none; border-color: var(--orange);}
.chip[aria-checked="true"],.chip.chip--core[aria-checked="true"] {background: #9cf1f6; border-color: #00696e; box-shadow: none;}
.sec-label {font-size: 22px; margin: 24px 0 16px;}
.done-title {font-size: 28px;}
.done-sub {font-size: 16px;}
.today-card {background: #9cf1f6; border: 0; margin-block: 16px 24px;}
.today-card__k {font-size: 14px;}
.today-card__t {font-size: 18px;}
.road {gap: 12px;}
.road__item {padding: 20px; align-items: flex-start;}
.road__t {font-size: 18px;}
.road__flow {font-size: 15px; line-height: 1.7;}
.road__desc {display: block; font-size: 14px;}
.road__row {display: flex;}
.budget {gap: 8px;}
.budget__btn,.rate {min-height: 52px; padding: 12px; font-size: 14px; border-radius: 18px;}
.budget__btn.is-on,.rate[aria-pressed="true"] {background: #9cf1f6; border-color: #00696e;}
.cand {gap: 16px;}
.cand__name {font-size: 18px; line-height: 1.6;}
.cand__price {font-size: 16px;}
.cand__vol,.cand__note {font-size: 13px;}
.cand__item.is-selected {background: #cce8e9; border-color: #00696e; box-shadow: none;}
.cand__select:focus-visible {outline-color: #00696e;}
.compare {overflow-x: auto; border-radius: 20px;}
.compare__row {grid-template-columns: 80px repeat(2,minmax(0,1fr));}
.compare__lab,.compare__cell {font-size: 13px; padding: 12px 8px; overflow-wrap: anywhere;}
.factnote,.safety,.sec-note,.disclaimer__line {font-size: 13px; line-height: 1.7;}
.week__t {font-size: 20px;}
.week__sub,.reminder {font-size: 13px;}
.sheet__panel {border-radius: 28px 28px 0 0; padding: 24px 20px; background: var(--surface);}
.sheet__t {font-size: 24px;}
.sheet__b,.settings-sheet__note,.settings-sheet__lead,.settings-sheet__confirm-text {font-size: 14px; line-height: 1.8;}
.settings-sheet__block {padding: 20px; border-radius: 20px; background: var(--surface-2);}
.settings-sheet__label {font-size: 17px;}
.ghost-btn,.settings-sheet__action,.settings-sheet__save {min-height: 48px; font-size: 14px; border-radius: 999px; white-space: normal;}
select,input {max-width: 100%; min-height: 44px; font-size: 16px;}
.dock {position: relative; flex: 0 0 auto; gap: 12px; padding-block: 12px calc(8px + env(safe-area-inset-bottom)); border: 0; box-shadow: 0 -1px 0 var(--line); background: #e8efef;}
.cta {min-width: 0; height: auto; min-height: 56px; padding: 14px 20px; font-size: 16px; flex: 1 1 0; box-shadow: none;}
.cta[hidden] {display: none;}
.bottom-nav {order: 2; margin: 0; padding: 0; border: 0; gap: 4px;}
.bottom-nav__item {min-height: 64px; gap: 4px; padding: 4px 0; font-size: 12px; border: 0; border-radius: 0; color: var(--muted);}
.bottom-nav__item > span:first-child {display: flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 999px;}
.bottom-nav__item.is-active {background: transparent; color: #002022;}
.bottom-nav__item.is-active > span:first-child {background: #cce8e9;}
.bottom-nav__item.is-done:not(.is-active) {color: var(--muted);}
.app:has(#s1:not([hidden])) .bottom-nav {display: none;}
@media (min-width:1024px) {
  .screen {row-gap: 24px;}
  #home .home__hero,#home .home__welcome {grid-column: 1 / -1;}
  #home .home__welcome {display: grid; grid-template-columns: 1fr minmax(260px,380px); column-gap: 32px; align-items: center;}
  #home .home__welcome p {margin-bottom: 0;}
  #home .home__welcome .home__primary {grid-column: 2; grid-row: 1 / 3;}
  #guide .safety {grid-column: 1 / -1;}
  .dock {--content-max: 760px;}
}
@media (max-width:360px) {
  .appbar__name {font-size: 16px;}
  .home__routine,.routine,.home__shortcuts,.chips.chips--core {grid-template-columns: 1fr;}
  .bottom-nav__item {font-size: 11px;}
  .bottom-nav__item > span:first-child {width: 48px;}
}