:root{--motion-fast:140ms;--motion-state:220ms;--motion-surface:280ms;--motion-ease:cubic-bezier(.16,1,.3,1)}
#main:focus{outline:none}
button{touch-action:manipulation}
.button,.quick-grid button,.filter-button,.rating-grid button,.text-link,.day-select,.scenario,.icon-button,.task-action,.hero-cta{transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease)}
.button:active:not(:disabled),.quick-grid button:active,.rating-grid button:active,.icon-button:active,.hero-cta:active{transform:scale(.97)}
.sidebar nav button svg{transition:transform var(--motion-state) var(--motion-ease),fill var(--motion-state) ease}
.sidebar nav button:active svg{transform:scale(.9)}
.sidebar nav button.active svg{transform:translateY(-1px)}
.lab-tabs>button{transition:color var(--motion-fast) ease,border-color var(--motion-state) ease}
.lab-tabs>button:active{transform:translateY(1px)}
.check,.step-list .check,.plan-block .check{position:relative;width:44px;height:44px;min-width:44px;border:0;background:transparent;color:var(--action);border-radius:10px;isolation:isolate}
.check::before{content:"";position:absolute;inset:10px;border:1.5px solid #a7b6a0;border-radius:5px;z-index:-1;background:var(--paper);transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease}
.check.checked{background:transparent;border:0;color:#fff}
.check.checked::before{background:var(--action);border-color:var(--action)}
.check svg{width:17px;height:17px}
.check:active::before{transform:scale(.94)}
.check:focus-visible{outline:2px solid var(--action);outline-offset:1px}
dialog[open]::backdrop{animation:backdrop-arrive var(--motion-surface) ease-out}
.review-finish>svg{animation:completion-mark 340ms var(--motion-ease)}
#toast{transition:opacity 160ms ease,transform var(--motion-state) var(--motion-ease)}
.storage-warning{margin:18px 40px 0;padding:15px 18px;border:1px solid #ad8056;border-radius:9px;background:#fcf0dc;color:#65451f;font-size:13px;line-height:1.8}
.storage-warning[hidden]{display:none}
.storage-warning button{display:inline-flex;margin-top:7px;color:#65451f;font-weight:600;text-decoration:underline;text-underline-offset:4px;min-height:40px;background:transparent;border:0;padding:0 10px 0 0}
.storage-warning b,.storage-warning span{display:block}
.local-status.storage-unavailable{color:#805329}
.local-status.storage-unavailable i{background:#9e6d35}
@keyframes backdrop-arrive{from{background-color:#172e2620}to{background-color:#172e266e}}
@keyframes completion-mark{from{opacity:.7;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@media(hover:hover){.quick-grid button:hover,.day-select:hover,.scenario:hover{transform:translateY(-2px)}.hero-cta:hover svg,.text-link:hover svg{transform:translateX(3px)}.hero-cta svg,.text-link svg{transition:transform var(--motion-state) var(--motion-ease)}}
@media(max-width:650px){.storage-warning{margin:16px 17px 0;font-size:13px}.plan-block{gap:8px}.step-list li{gap:8px}.step-list{gap:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.sidebar nav button.active svg,.quick-grid button:hover,.day-select:hover,.scenario:hover,.hero-cta:hover svg,.text-link:hover svg,.button:active,.icon-button:active,.hero-cta:active,.check:active::before,.lab-tabs>button:active{transform:none!important}}
#storage-modal-warning{margin:0 0 20px;font-size:13px;text-align:left}.immersive #storage-modal-warning{background:#fcf0dc;color:#65451f}.immersive #storage-modal-warning button{color:#65451f}
@media(prefers-reduced-motion:reduce){.quick-grid button:active,.rating-grid button:active,.sidebar nav button:active svg{transform:none!important}}
/* Touch browsers: avoid full-viewport blur/animation layers during dialog and
   navigation updates. Small button feedback remains available. */
html[data-motion="stable"] dialog::backdrop{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-motion="stable"] .sidebar{backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-motion="stable"] .recall-answer,html[data-motion="stable"] .review-finish>svg{animation:none}
@media(hover:none),(pointer:coarse){
  dialog::backdrop{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .sidebar{backdrop-filter:none;-webkit-backdrop-filter:none}
  .recall-answer,.review-finish>svg{animation:none}
}