:root{font-family:'Trebuchet MS',sans-serif;color:var(--text);background:var(--background);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--background);transition:background .2s,color .2s}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}svg{width:24px;height:24px;display:block}button{border:0;background:none}.shell{max-width:540px;min-height:100vh;margin:auto;padding:0 24px 120px}.top{display:flex;align-items:center;justify-content:space-between;padding:32px 0 26px}.logo{padding:0;font-family:Georgia,serif;font-size:31px;letter-spacing:-2px;font-weight:bold}.logo span,.loading span{color:var(--accent)}.settings-btn,.circle{display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;width:44px;height:44px;flex:none}.settings-btn{background:var(--surfaceSoft)}.settings-btn svg{width:19px}.page-head{margin:7px 0 27px}.eyebrow{font-size:10px!important;letter-spacing:.16em;font-weight:700;color:var(--textMuted);margin:0 0 10px;text-transform:uppercase}.page-head h1{font-family:Georgia,serif;font-weight:500;font-size:clamp(43px,10vw,57px);letter-spacing:-2.5px;line-height:1.05;margin:0}.lead{color:var(--textMuted);margin:12px 0 0;font-size:15px}.month-row,.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.month-row{margin-top:10px}.month{font:italic 25px Georgia,serif;margin:0;text-transform:capitalize}.arrows{display:flex;gap:8px}.arrows .circle{width:39px;height:39px}.circle svg{width:19px}.goal{display:flex;align-items:center;gap:14px;background:var(--surfaceSoft);border-radius:16px;padding:18px;margin-bottom:20px}.goal-icon{color:var(--primary)}.goal-icon svg{width:32px;height:32px}.goal-copy{flex:1;min-width:0}.goal-copy strong{font-size:15px;display:block}.goal-copy span{font-size:12px;color:var(--textMuted);display:block;margin-top:5px}.goal-bars{display:flex;gap:3px;max-width:110px}.goal-bars i{height:7px;width:19px;border-radius:5px;background:var(--border)}.goal-bars i.filled{background:var(--primary)}.weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}.weekdays{font-size:11px;color:var(--textMuted);margin:0 0 5px}.weekdays span{padding:8px 0}.calendar-grid{row-gap:3px}.day{height:50px;display:grid;place-items:center;position:relative;font-size:15px;padding:0}.day span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center}.day.today span{outline:1px solid var(--primary)}.day.selected span{background:var(--primary);color:var(--onPrimary);outline:none}.day.has:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:var(--primary);bottom:1px}.day.selected.has:after{background:var(--accent)}.day-section{margin-top:28px;border-top:1px solid var(--border);padding-top:23px}.section-title h2,.settings-section h2,.detail-card h2{font:500 25px Georgia,serif;letter-spacing:-.5px;margin:0}.muted{color:var(--textMuted);font-size:13px;line-height:1.5}.empty-day{text-align:center;padding:30px 8px 20px;color:var(--textMuted);font-size:14px}.empty-mark{font-size:28px;color:var(--primary)}.text-action{font-weight:bold;color:var(--primary);padding:10px}.session{display:flex;gap:13px;align-items:center;padding:15px 0;border-bottom:1px solid var(--border)}.thumb{width:105px;height:78px;flex:none;border-radius:10px;background:var(--surfaceSoft);overflow:hidden;display:grid;place-items:center;color:var(--primary)}.thumb img,.video-cover img,.preview img{width:100%;height:100%;object-fit:cover}.session-copy{flex:1;min-width:0}.session h3{font-size:15px;line-height:1.3;margin:0 0 7px;overflow-wrap:anywhere}.session p,.video-content p{font-size:12px;color:var(--textMuted);margin:0}.rating-label{color:var(--accent);font-size:12px}.session-actions{display:flex;flex-direction:column}.session-actions button{padding:6px}.session-actions svg{width:17px;height:17px}.fab{position:fixed;z-index:4;bottom:calc(91px + env(safe-area-inset-bottom));right:max(24px,calc((100vw - 540px)/2 + 24px));width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--onAccent);display:grid;place-items:center;box-shadow:0 5px 15px #0002}.fab svg{width:29px;height:29px}.nav{position:fixed;z-index:3;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,540px);height:calc(78px + env(safe-area-inset-bottom));padding:6px 12px env(safe-area-inset-bottom);background:var(--background);border-top:1px solid var(--border);display:flex;justify-content:space-around}.nav-item{min-width:75px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;color:var(--textMuted);font-size:11px;position:relative}.nav-item.active{color:var(--primary);font-weight:bold}.nav-item.active:after{content:'';position:absolute;bottom:2px;width:25px;height:2px;background:var(--primary)}.nav-item svg{width:23px;height:23px}.segmented{display:flex;background:var(--surfaceSoft);border-radius:12px;padding:4px;gap:2px;margin:0 0 20px}.segmented button{flex:1;min-height:38px;border-radius:9px;font-size:12px;padding:5px}.segmented button.on{background:var(--surface);font-weight:bold}.chart-card,.detail-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px;margin-bottom:16px}.card-heading>div{display:flex;align-items:center;gap:9px}.card-heading h2,.video-content h2{font-size:16px;margin:0}.card-heading>.muted{display:block;margin:6px 0 0 33px}.mini-icon{color:var(--primary)}.bar-chart{height:190px;display:flex;align-items:stretch;gap:5px;margin-top:16px;overflow-x:auto}.bar-col{flex:1;min-width:25px;display:flex;flex-direction:column;align-items:center;justify-content:end;padding:0;gap:6px}.bar-value{height:18px;font-size:10px;white-space:nowrap}.bar-track{width:100%;height:130px;display:flex;align-items:end;justify-content:center;border-bottom:1px solid var(--border);background:repeating-linear-gradient(to top,transparent 0,transparent 32px,var(--border) 33px)}.bar-track i{display:block;width:min(26px,75%);background:var(--primary);border-radius:6px 6px 0 0;transition:height .3s}.bar-label{font-size:10px;color:var(--textMuted);white-space:nowrap}.empty-stat{color:var(--textMuted);font-size:13px;text-align:center}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.metric{background:var(--surfaceSoft);padding:19px;border-radius:16px;min-height:123px}.metric.soft{background:var(--surface);border:1px solid var(--border)}.metric span{font-size:10px;letter-spacing:.1em;font-weight:bold;display:block}.metric strong{font:40px Georgia,serif;display:block;margin-top:9px}.metric small{color:var(--textMuted)}.detail-card h2{font-size:21px;margin-bottom:15px}.detail-row,.category-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--border);font-size:14px}.detail-row small{display:block;color:var(--textMuted);margin-top:4px}.category-row span{display:flex;align-items:center;gap:8px}.category-row i{width:10px;height:10px;border-radius:50%}.date-range{display:flex;gap:10px;margin-bottom:15px}.date-range label{flex:1;min-width:0}.video-tools{display:flex;gap:8px;margin-bottom:20px}.video-tools input{min-width:0;flex:1}.video-tools select{width:125px}.video-list{display:grid;gap:18px}.video-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px}.video-cover{height:190px;display:block;position:relative;border-radius:10px;overflow:hidden;background:var(--surfaceSoft)}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--primary);color:var(--onPrimary);border-radius:50%;width:48px;height:48px;display:grid;place-items:center}.video-content{display:flex;justify-content:space-between;gap:10px;padding:15px 2px}.video-content p{margin-top:6px}.favorite{align-self:start;padding:3px;color:var(--textMuted)}.favorite.on{color:var(--accent)}.favorite.on svg{fill:currentColor}.empty-block{text-align:center;padding:55px 20px;color:var(--textMuted)}.empty-block h2{font:24px Georgia,serif;color:var(--text)}.empty-block p{font-size:14px;line-height:1.6}.empty-symbol{font-size:45px;color:var(--primary)}.settings-section{padding:23px 0;border-top:1px solid var(--border)}.goal-choice{display:flex;gap:7px;margin-top:18px}.goal-choice button,.difficulty button:not(.reset-stars){width:44px;height:44px;border:1px solid var(--border);border-radius:50%}.goal-choice button.on,.difficulty button.on{background:var(--primary);color:var(--onPrimary);border-color:var(--primary)}.themes{display:grid;gap:8px;margin-top:18px}.theme-option{display:flex;text-align:left;align-items:center;gap:12px;border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--surface);min-height:64px}.theme-option.on{border:2px solid var(--primary);padding:11px}.theme-option strong,.theme-option small{display:block}.theme-option strong{font-size:13px}.theme-option small{font-size:11px;color:var(--textMuted);margin-top:4px}.swatches{display:flex;min-width:59px}.swatches i{width:25px;height:25px;border-radius:50%;border:2px solid var(--surface);margin-right:-8px}.check{margin-left:auto;color:var(--primary)}.settings-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.outline,.primary{min-height:45px;border-radius:11px;padding:11px 15px;font-weight:bold}.outline{border:1px solid var(--border);background:var(--surface);color:var(--text)}.primary{background:var(--primary);color:var(--onPrimary)}.danger-link{min-height:44px;color:var(--textMuted);text-decoration:underline}.footnote{color:var(--textMuted);font-size:12px;line-height:1.7}.overlay{position:fixed;z-index:10;inset:0;background:#0008;display:flex;align-items:end;justify-content:center}.sheet{background:var(--background);width:min(100%,540px);max-height:94dvh;overflow-y:auto;border-radius:24px 24px 0 0;padding:12px 24px calc(24px + env(safe-area-inset-bottom));animation:slide .25s ease-out}.sheet-handle{width:45px;height:4px;border-radius:5px;background:var(--border);margin:0 auto 20px}.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}.sheet-header h2{font:32px Georgia,serif;letter-spacing:-1px;margin:0}.sheet form{display:grid;gap:16px}label,legend{font-weight:bold;font-size:13px}label{display:block}input,select,textarea{display:block;width:100%;min-height:45px;margin-top:7px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}textarea{resize:vertical}.optional{font-weight:normal;color:var(--textMuted);font-size:11px}fieldset{border:0;padding:0;margin:0}.stars,.difficulty{display:flex;align-items:center;gap:5px;margin-top:7px}.stars button:not(.reset-stars){font-size:28px;line-height:1;color:var(--border);padding:4px}.stars button.on{color:var(--accent)}.reset-stars{font-size:12px;color:var(--textMuted);text-decoration:underline;min-height:44px}.preview{height:165px;position:relative;border-radius:12px;overflow:hidden;background:var(--surfaceSoft)}.preview span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:white;font-size:30px;text-shadow:0 1px 6px #000}.error{color:var(--accent);font-size:12px;margin:3px 0}.full{width:100%}#toast{position:fixed;z-index:20;bottom:105px;left:50%;transform:translate(-50%,15px);background:var(--primary);color:var(--onPrimary);padding:12px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}.loading,.startup-error{padding:40px;font:30px Georgia,serif}@keyframes slide{from{transform:translateY(100%)}to{transform:translateY(0)}}@media(min-width:700px){.shell{border-left:1px solid var(--border);border-right:1px solid var(--border)}.top{padding-top:38px}.sheet{border-radius:24px;margin-bottom:20px}.overlay{align-items:center}.nav{border-left:1px solid var(--border);border-right:1px solid var(--border)}}@media(max-width:370px){.shell{padding-left:16px;padding-right:16px}.goal{padding:13px;gap:9px}.goal-bars i{width:12px}.goal-choice{gap:2px}.goal-choice button{width:39px;height:39px}.session .thumb{width:80px;height:65px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.no-image:after{content:'▷';font-size:28px;color:var(--primary)}
/* Tempo refinement: compact calendar, touch targets and meaningful motion. */
.top{padding:calc(20px + env(safe-area-inset-top)) 0 14px}.page-head{margin:3px 0 18px}.page-head h1{font-size:clamp(39px,10vw,54px)}.eyebrow{margin-bottom:7px}.month-row{margin-top:5px}.month{font-size:23px}.arrows .circle{width:44px;height:44px}.goal{padding:14px 16px;margin-bottom:10px}.weekdays{margin-bottom:0}.weekdays span{padding:6px 0}.calendar-grid{row-gap:0}.day{height:44px}.day span{width:40px;height:40px;transition:background-color .2s,color .2s,transform .2s,box-shadow .2s}.day.selected span{font-weight:700;box-shadow:0 0 0 3px var(--surfaceSoft)}.day.has:after{bottom:0}.day-section{margin-top:17px;padding-top:15px}.empty-day{padding:15px 8px 8px}.empty-day p{margin:6px 0}.empty-mark{font-size:22px}.session{display:grid;grid-template-columns:minmax(105px,36%) minmax(0,1fr);gap:12px;align-items:start}.session .thumb{width:100%;height:auto;aspect-ratio:4/3}.session h3{font-size:16px;line-height:1.35}.session p{font-size:13px;line-height:1.4}.rating-label{display:inline-block;font-size:15px;letter-spacing:1px;margin-top:4px;color:var(--primary)}.session-actions{grid-column:1/-1;flex-direction:row;justify-content:flex-end;margin-top:-6px}.session-actions button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;margin-left:7px}.session-actions svg{width:19px;height:19px}.fab{bottom:calc(88px + env(safe-area-inset-bottom))}.nav{height:calc(74px + env(safe-area-inset-bottom))}.chart-card{padding:20px 18px}.chart-feedback{font-size:12px;color:var(--textMuted);min-height:20px;margin:15px 0 -8px}.bar-chart{height:175px;margin-top:8px}.bar-col{min-width:32px}.bar-col[aria-pressed="true"] .bar-track i{background:var(--accent)}.bar-value{font-weight:700;color:var(--text)}.bar-track i{transform-origin:bottom;animation:bar-grow .42s cubic-bezier(.2,.7,.2,1) both}.is-empty .bar-track{opacity:.55}.metric-grid{gap:10px}.metric{min-height:116px}.metric strong{font-size:42px}.detail-card{padding:20px}.detail-row strong{font-size:17px;color:var(--primary);white-space:nowrap}.progress-track{height:6px;background:var(--surfaceSoft);border-radius:8px;overflow:hidden;margin:0 0 5px}.progress-track span{display:block;height:100%;background:var(--primary);border-radius:inherit;transition:width .3s}.video-tools{margin-bottom:8px}.video-filters{display:flex;gap:8px;align-items:center}.video-filters select{flex:1;width:auto;min-width:0;margin:0}.filter-favorite{min-height:45px;display:flex;align-items:center;gap:6px;padding:0 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface);white-space:nowrap}.filter-favorite svg{width:17px;height:17px}.filter-favorite.on{background:var(--primary);color:var(--onPrimary);border-color:var(--primary)}.results-count{font-size:12px;color:var(--textMuted);margin:14px 0}.video-list{gap:12px}.video-card{display:grid;grid-template-columns:minmax(110px,37%) minmax(0,1fr);gap:10px;padding:10px}.video-cover{height:auto;aspect-ratio:4/3;align-self:start}.play{width:38px;height:38px;font-size:12px}.video-content{padding:2px 0;min-width:0;gap:4px}.video-content>div{min-width:0}.video-content h2{overflow-wrap:anywhere;line-height:1.3}.video-content p{line-height:1.4;font-size:12px}.video-rating{color:var(--primary)!important;font-weight:700}.video-rating span{color:var(--textMuted);font-weight:400}.favorite{width:44px;height:44px;display:grid;place-items:center;flex:none}.video-card>.outline{grid-column:1/-1}.show-more{margin-top:14px}.theme-preview{width:62px;height:44px;flex:none;border-radius:8px;background:var(--preview-bg);border:1px solid var(--border);position:relative;overflow:hidden}.theme-preview:before{content:'';position:absolute;inset:7px;background:var(--preview-surface);border-radius:4px}.theme-preview i,.theme-preview b,.theme-preview em{position:absolute;z-index:1;display:block}.theme-preview i{left:12px;top:12px;width:20px;height:3px;background:var(--preview-primary);border-radius:2px}.theme-preview b{left:12px;top:19px;width:28px;height:3px;background:var(--preview-primary);opacity:.5;border-radius:2px}.theme-preview em{right:10px;bottom:8px;width:12px;height:12px;background:var(--preview-accent);border-radius:50%}.sheet{max-height:min(94dvh,100dvh - env(safe-area-inset-top));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;animation:sheet-in .32s cubic-bezier(.22,1.18,.36,1) both}.sheet form{padding-bottom:4px}.overlay{animation:overlay-in .2s ease both}button{transition:background-color .2s,color .2s,border-color .2s,transform .16s}button:active{transform:scale(.97)}.day:active span{transform:scale(.92)}.page-enter{animation:page-in .2s ease both}.month-enter{animation:month-in .22s ease both}.day-enter span{animation:day-in .24s cubic-bezier(.2,1.3,.35,1) both}.theme-option,.goal,.metric,.chart-card,.detail-card,.video-card,.nav,.sheet,input,select,textarea{transition:background-color .22s,color .22s,border-color .22s}.nav-item{transition:color .2s}.nav-item.active:after{transition:background-color .2s}#toast.show{box-shadow:0 4px 16px #0002}.stars button:not(.reset-stars){min-width:44px;min-height:44px}.favorite.on{color:var(--primary)}.error{color:var(--text)}
@keyframes page-in{from{opacity:.5}to{opacity:1}}@keyframes month-in{from{opacity:.45;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}@keyframes day-in{from{transform:scale(.72)}to{transform:scale(1)}}@keyframes bar-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes sheet-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes overlay-in{from{background-color:#0000}to{background-color:#0008}}
@media(min-width:700px){.top{padding-top:calc(26px + env(safe-area-inset-top))}.sheet{max-height:90dvh}}
@media(max-width:370px){.session .thumb{width:100%;height:auto}.goal-choice{gap:2px}.goal-choice button{width:calc((100vw - 44px)/7);height:44px;max-width:44px}.video-card{grid-template-columns:minmax(100px,36%) minmax(0,1fr)}.video-content h2{font-size:14px}.favorite{width:40px}.sheet{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{min-width:0}.bar-col[aria-pressed="true"] .bar-track i{background:var(--primary);outline:2px solid var(--text);outline-offset:2px}.bar-col[aria-pressed="true"] .bar-label{color:var(--text);font-weight:700}.goal-copy,.goal-icon,.muted,.eyebrow,.lead,.section-title,.session-copy,.video-content,.detail-row,.category-row,.card-heading,.metric,.nav-item,.theme-option,.logo,.day span{transition:color .22s,background-color .22s,border-color .22s,box-shadow .22s}.favorite{min-width:44px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sheet form,.sheet form>*{min-width:0}.stars,.difficulty{flex-wrap:wrap}
/* Circular statistics and the weekly liquid vessel. */
.visual-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px;margin:16px 0;overflow:hidden;transition:background-color .22s,color .22s,border-color .22s}
.visual-header{display:flex;justify-content:space-between;align-items:start;gap:12px}.visual-header h2{font:500 25px Georgia,serif;letter-spacing:-.5px;margin:0}.week-badge{font-size:12px;font-weight:700;color:var(--primary);background:var(--surfaceSoft);padding:7px 10px;border-radius:20px;white-space:nowrap}.weekly-layout{display:flex;align-items:center;gap:22px;margin-top:18px}.liquid-frame{--tilt:0deg;--parallax:0px;position:relative;width:150px;aspect-ratio:1;flex:none}.goal-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.ring-track,.ring-progress{fill:none;stroke-width:3}.ring-track{stroke:var(--border)}.ring-progress{stroke:var(--primary);stroke-linecap:round;stroke-dasharray:var(--ring-value) 100;transition:stroke-dasharray .7s ease}.liquid-vessel{position:absolute;inset:12%;border-radius:50%;overflow:hidden;background:var(--surfaceSoft);border:1px solid var(--border);box-shadow:inset 0 2px 8px #00000012;isolation:isolate}.liquid-surface{position:absolute;left:-35%;width:170%;height:120%;bottom:calc(var(--liquid-level) - 120%);transform:rotate(var(--tilt));transform-origin:50% 0;background:var(--primary);transition:bottom .8s cubic-bezier(.2,.7,.2,1);opacity:.83}.wave{position:absolute;top:-9px;width:200%;height:18px;border-radius:42%;background:var(--primary);animation:wave-move 5s linear infinite;animation-play-state:paused}.wave-front{left:0;opacity:.9}.wave-back{left:-25%;top:-13px;opacity:.5;animation-duration:7.2s;animation-direction:reverse}.liquid-glint{position:absolute;inset:4%;border-radius:50%;border-top:2px solid color-mix(in srgb,var(--surface) 70%,transparent);border-left:1px solid color-mix(in srgb,var(--surface) 50%,transparent);pointer-events:none}.liquid-value{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:30px;padding:7px 10px;white-space:nowrap;min-width:82px}.liquid-value strong{display:block;font:700 24px Georgia,serif;color:var(--text)}.liquid-value span{display:block;font-size:9px;color:var(--textMuted);margin-top:2px}.float-mark{position:absolute;color:var(--primary);font-size:16px;transform:translateX(var(--parallax));opacity:.75}.float-one{right:-4px;top:5px}.float-two{left:-2px;bottom:10px;font-size:29px;line-height:10px}.weekly-copy{min-width:0}.weekly-copy strong{font:500 21px Georgia,serif}.weekly-copy p,.weekly-copy small{display:block;color:var(--textMuted);font-size:12px;line-height:1.5;margin:8px 0}.weekly-copy small{font-size:11px}.goal-reached .ring-progress{animation:goal-complete .6s ease-out both;animation-play-state:paused}.visual-card.is-running .wave,.visual-card.is-running .ring-progress{animation-play-state:running}.visual-card.is-running .float-one{animation:float-soft 4s ease-in-out infinite}.visual-card.is-running .float-two{animation:float-soft 5.5s ease-in-out infinite reverse}
.donut-layout{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:18px;margin-top:18px}.donut-chart{position:relative;width:140px;aspect-ratio:1}.donut-chart svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.donut-track,.donut-segment{fill:none;stroke-width:11}.donut-track{stroke:var(--surfaceSoft)}.donut-segment{stroke:var(--segment-color);stroke-dasharray:var(--segment-length) calc(100 - var(--segment-length));stroke-dashoffset:var(--segment-offset);transform-origin:60px 60px;transition:stroke-width .2s,opacity .2s;animation:donut-reveal .6s ease both;animation-play-state:paused}.visual-card.is-running .donut-segment{animation-play-state:running}.donut-segment.selected{stroke-width:15}.donut-center{position:absolute;inset:24%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;pointer-events:none}.donut-center strong{font:700 26px Georgia,serif}.donut-center span{color:var(--textMuted);font-size:10px;line-height:1.2;max-width:100%;overflow-wrap:anywhere}.donut-legend{display:grid;gap:3px;min-width:0;max-height:260px;overflow-y:auto}.donut-item{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:44px;text-align:left;padding:7px;border-radius:9px;font-size:12px}.donut-item[aria-pressed=true]{background:var(--surfaceSoft);font-weight:700}.donut-item i{width:10px;height:10px;background:var(--segment-color);border-radius:50%;border:1px solid var(--border)}.donut-item span{overflow-wrap:anywhere}.donut-item strong{white-space:nowrap}.visual-hint{font-size:12px;line-height:1.5;color:var(--textMuted);margin:12px 0 0}.empty-donut{display:flex;align-items:center;gap:20px;margin-top:18px}.empty-donut .donut-chart{flex:none}.empty-donut p{font-size:13px;line-height:1.5;color:var(--textMuted)}
.motion-settings{margin-top:12px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:64px;border-top:1px solid var(--border);text-align:left;padding:10px 0}.toggle-row strong,.toggle-row small{display:block}.toggle-row strong{font-size:14px}.toggle-row small{font-size:12px;color:var(--textMuted);margin-top:4px}.switch{display:block;position:relative;flex:none;width:43px;height:25px;border-radius:20px;background:var(--border);transition:background-color .2s}.switch:after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--surface);transition:transform .2s}.switch.on{background:var(--primary)}.switch.on:after{transform:translateX(18px)}
@keyframes wave-move{from{transform:translateX(0)}to{transform:translateX(-40%)}}@keyframes float-soft{0%,100%{translate:0 0}50%{translate:0 -4px}}@keyframes goal-complete{0%{opacity:.5}60%{opacity:1;stroke-width:5}100%{stroke-width:3}}@keyframes donut-reveal{from{stroke-dasharray:0 100}to{stroke-dasharray:var(--segment-length) calc(100 - var(--segment-length))}}
@media(max-width:370px){.visual-card{padding:16px}.weekly-layout{gap:12px}.liquid-frame{width:130px}.donut-layout{grid-template-columns:120px minmax(0,1fr);gap:10px}.donut-chart{width:120px}.donut-item{gap:5px;padding:5px;font-size:11px}.empty-donut{gap:12px}}
@media(prefers-reduced-motion:reduce){.visual-card *{animation:none!important;transition:none!important}}
:root[data-animations=off] .visual-card *{animation:none!important;transition:none!important}
.liquid-empty,.ring-empty{visibility:hidden}
.donut-segment{pointer-events:stroke;cursor:pointer}.visual-card.is-running .ring-progress:not(.ring-empty){animation:ring-fill .65s ease-out both}.visual-card.is-running .liquid-surface:not(.liquid-empty){animation:liquid-rise .8s cubic-bezier(.2,.7,.2,1) both}@keyframes ring-fill{from{stroke-dasharray:0 100}to{stroke-dasharray:var(--ring-value) 100}}@keyframes liquid-rise{from{bottom:-120%}to{bottom:calc(var(--liquid-level) - 120%)}}@media(prefers-reduced-motion:reduce){.visual-card *{animation:none!important;transition:none!important}}:root[data-animations=off] .visual-card *{animation:none!important;transition:none!important}
.visual-card.is-running .goal-reached .liquid-vessel{animation:goal-settle .55s ease-out both}@keyframes goal-settle{0%{scale:.96}60%{scale:1.015}100%{scale:1}}@media(prefers-reduced-motion:reduce){.visual-card *{animation:none!important;transition:none!important}}:root[data-animations=off] .visual-card *{animation:none!important;transition:none!important}
/* Liquid layers stay behind content and pause when their card is not visible. */
.liquid-card{position:relative;display:block;overflow:hidden;isolation:isolate}.liquid-card-content{position:relative;z-index:1;display:flex;align-items:center;gap:14px}.liquid-card-water{--tilt:0deg;position:absolute;z-index:0;left:-18%;width:136%;height:120%;bottom:calc(var(--card-level) - 120%);background:var(--primary);opacity:.12;transform:rotate(var(--tilt));transform-origin:50% 0;transition:bottom .8s cubic-bezier(.2,.7,.2,1);pointer-events:none}.liquid-card-empty{visibility:hidden}.card-wave{position:absolute;left:0;top:-10px;width:190%;height:21px;background:var(--primary);border-radius:45%;animation:card-wave 7s linear infinite;animation-play-state:paused}.card-wave-back{top:-16px;left:-30%;opacity:.5;animation-duration:11s;animation-direction:reverse}.card-wave-front{opacity:.8}.liquid-card.is-running .card-wave{animation-play-state:running}.fluid-card{position:relative;isolation:isolate;overflow:hidden}.fluid-card>*:not(.fluid-background){position:relative;z-index:1}.fluid-background{--parallax:0px;position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;transform:translateX(var(--parallax));opacity:.16}.fluid-shape{position:absolute;display:block;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--fluid-color) 0%,transparent 70%);animation:fluid-drift 19s ease-in-out infinite alternate;animation-play-state:paused}.fluid-shape-one{--fluid-color:var(--chart1);left:-20%;top:-70%}.fluid-shape-two{--fluid-color:var(--chart2);right:-15%;bottom:-110%;animation-duration:23s;animation-direction:alternate-reverse}.fluid-shape-three{--fluid-color:var(--chart3);left:35%;top:30%;width:45%;animation-duration:27s}.fluid-card.is-running .fluid-shape{animation-play-state:running}#toast{isolation:isolate}.toast-message{position:relative;z-index:1}.water-ripple{position:absolute;z-index:-1;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);pointer-events:none}.water-ripple i{position:absolute;inset:0;border:1px solid var(--primary);border-radius:50%;opacity:0;animation:water-ripple .85s ease-out both}.water-ripple i:nth-child(2){animation-delay:.14s}.water-ripple i:nth-child(3){animation-delay:.28s}
@keyframes card-wave{from{transform:translateX(0)}to{transform:translateX(-42%)}}@keyframes fluid-drift{from{transform:translate3d(-4%,-3%,0) scale(.94)}to{transform:translate3d(8%,7%,0) scale(1.08)}}@keyframes water-ripple{0%{transform:scale(.35);opacity:.6}100%{transform:scale(2.5);opacity:0}}
@media(max-width:370px){.liquid-card-content{gap:9px}}
@media(prefers-reduced-motion:reduce){.liquid-card *,.fluid-card *,.water-ripple *{animation:none!important;transition:none!important}}
:root[data-animations=off] .liquid-card *,:root[data-animations=off] .fluid-card *,:root[data-animations=off] .water-ripple *{animation:none!important;transition:none!important}
.liquid-card .goal-copy span,.fluid-card .detail-row small{color:var(--text)}
.liquid-card.is-running .liquid-card-water:not(.liquid-card-empty){animation:card-fill .8s cubic-bezier(.2,.7,.2,1) both}@keyframes card-fill{from{bottom:-120%}to{bottom:calc(var(--card-level) - 120%)}}@media(prefers-reduced-motion:reduce){.liquid-card *{animation:none!important;transition:none!important}}:root[data-animations=off] .liquid-card *{animation:none!important;transition:none!important}
/* Water has a repeating wave silhouette; the surface remains visible at 0% and 100%. */
.liquid-card{min-height:92px;background:var(--surfaceSoft)}
.liquid-card-water{visibility:visible;opacity:.40;bottom:calc(var(--surface-level) - 120%)}
.liquid-card.is-running .liquid-card-water:not(.liquid-card-empty){animation:visible-card-fill .8s cubic-bezier(.2,.7,.2,1) both}
.card-wave{left:0;top:-13px;width:200%;height:26px;border-radius:0;background:var(--primary);opacity:.85;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='26' viewBox='0 0 160 26'%3E%3Cpath fill='black' d='M0 13 Q20 0 40 13 T80 13 T120 13 T160 13 V26 H0Z'/%3E%3C/svg%3E");mask-size:160px 26px;mask-repeat:repeat-x;animation:visible-wave 4.8s linear infinite;animation-play-state:paused}
.card-wave-back{top:-20px;left:-40px;opacity:.5;animation-duration:7.4s;animation-direction:reverse}
.liquid-card.is-running .card-wave{animation-play-state:running}
.liquid-card-content{padding:5px 10px;border-radius:12px;background:color-mix(in srgb,var(--surfaceSoft) 93%,transparent)}
.fluid-background{opacity:.58;inset:-12%;filter:saturate(1.1)}
.fluid-shape{width:80%;background:radial-gradient(ellipse,var(--fluid-color) 0%,color-mix(in srgb,var(--fluid-color) 65%,transparent) 35%,transparent 72%);animation:fluid-organic 11s ease-in-out infinite alternate;animation-play-state:paused}
.fluid-shape-one{left:-30%;top:-115%}.fluid-shape-two{right:-25%;bottom:-160%;animation-duration:14s}.fluid-shape-three{left:15%;top:-20%;width:65%;animation-duration:17s}
.fluid-card.is-running .fluid-shape{animation-play-state:running}
.fluid-card>h2,.fluid-card>.detail-row,.fluid-card>p{border-radius:8px;background:color-mix(in srgb,var(--surface) 91%,transparent);padding-left:8px;padding-right:8px}
.water-ripple{z-index:0;width:100%;height:100%;min-width:110px;min-height:48px}
.water-ripple i{border:3px solid var(--accent);box-shadow:0 0 0 1px var(--primary);animation:visible-ripple 1.35s ease-out both}
.toast-message{z-index:2}
.demo-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.demo-actions button[aria-pressed=true]{border-color:var(--primary);background:var(--surfaceSoft)}#demo-output:not(:empty){padding:15px 0;overflow:visible}.demo-fluid{min-height:140px;margin:0}.demo-fluid p{display:inline-block;font-size:13px;color:var(--text)}.demo-ripple{position:relative;isolation:isolate;margin:24px auto;width:max-content;border-radius:12px;padding:14px 22px;background:var(--primary);color:var(--onPrimary);font-weight:bold}.demo-ripple-label{position:relative;z-index:2}
@keyframes visible-card-fill{from{bottom:-120%}to{bottom:calc(var(--surface-level) - 120%)}}@keyframes visible-wave{from{transform:translateX(0)}to{transform:translateX(-160px)}}@keyframes fluid-organic{0%{transform:translate3d(-10%,-6%,0) scale(.9,1.08);border-radius:48% 52% 55% 45%}50%{transform:translate3d(8%,8%,0) scale(1.12,.9);border-radius:62% 38% 45% 55%}100%{transform:translate3d(20%,-7%,0) scale(.95,1.15);border-radius:40% 60% 58% 42%}}@keyframes visible-ripple{0%{transform:scale(.65);opacity:.9}100%{transform:scale(1.75,2.1);opacity:0}}
@media(prefers-reduced-motion:reduce){.liquid-card *,.fluid-card *,.water-ripple *{animation:none!important;transition:none!important}}:root[data-animations=off] .liquid-card *,:root[data-animations=off] .fluid-card *,:root[data-animations=off] .water-ripple *{animation:none!important;transition:none!important}
.liquid-card-content{background:transparent;padding:5px 0}.liquid-card .goal-icon{background:var(--surfaceSoft);border-radius:10px;padding:5px}.liquid-card .goal-copy strong,.liquid-card .goal-copy span{width:fit-content;max-width:100%;background:color-mix(in srgb,var(--surfaceSoft) 96%,transparent);border-radius:5px;padding:3px 6px}.liquid-card .goal-copy span{margin-top:3px}
@keyframes visible-ripple{0%{transform:scale(1.03,1.15);opacity:.9}100%{transform:scale(1.75,2.1);opacity:0}}
/* Liquid surfaces: broad overlapping volumes instead of tiled wave outlines. */
.liquid-card{padding:0;min-height:88px;background:var(--surfaceSoft);border:1px solid var(--border);border-radius:16px;isolation:isolate}
.liquid-card-water{position:absolute;inset:0;width:auto;height:auto;opacity:1;background:none;transform:none;transition:none;overflow:hidden}
.liquid-body{position:absolute;display:block;left:-40%;width:180%;height:200%;top:calc(100% - var(--card-level));transform:rotate(var(--tilt,0deg));transform-origin:50% 0;transition:top .85s cubic-bezier(.22,.7,.2,1),opacity .4s ease;will-change:transform}
.liquid-body--back{top:calc(100% - var(--card-level) - 5px);border-radius:44% 56% 0 0 / 20px 28px 0 0;background:color-mix(in srgb,var(--chart2) 25%,var(--primary));opacity:.23;animation:liquid-drift-back 9s ease-in-out infinite alternate;animation-play-state:paused}
.liquid-body--front{border-radius:57% 43% 0 0 / 19px 25px 0 0;background:linear-gradient(170deg,color-mix(in srgb,var(--primary) 72%,var(--surface)) 0%,var(--primary) 78%);opacity:.32;animation:liquid-drift-front 7s ease-in-out infinite alternate;animation-play-state:paused}
.liquid-card.is-running .liquid-body{animation-play-state:running}
.liquid-card--empty .liquid-body{opacity:0}.liquid-card--full .liquid-body{top:-18px;border-radius:0;animation:none!important}.liquid-card--full .liquid-body--front{opacity:.27}
.liquid-sheen{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 20% 0%,color-mix(in srgb,var(--surface) 46%,transparent),transparent 55%),linear-gradient(115deg,color-mix(in srgb,var(--surface) 18%,transparent),transparent 48%);opacity:.7}
.liquid-card-content{padding:14px 16px;min-height:88px;gap:12px}.liquid-card .goal-icon{background:var(--surface);border:1px solid var(--border);padding:7px}.liquid-card .goal-copy strong,.liquid-card .goal-copy span{padding:2px 5px;background:var(--surface);color:var(--text)}
.liquid-card--feature{min-height:230px;margin:16px 0 20px;border-radius:20px;background:var(--surfaceSoft)}.liquid-card--feature .liquid-card-content{min-height:230px;align-items:flex-start;justify-content:space-between;padding:25px}.liquid-feature-copy,.liquid-feature-value{position:relative;z-index:1;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--text)}.liquid-feature-copy{max-width:75%;padding:12px 14px}.liquid-feature-copy .eyebrow{display:block}.liquid-feature-copy strong{display:block;font:500 22px Georgia,serif;line-height:1.15}.liquid-feature-copy p{font-size:12px;color:var(--textMuted);margin:7px 0 0}.liquid-feature-value{padding:10px 12px;font:500 29px Georgia,serif;white-space:nowrap}.liquid-feature-value small{font:14px Georgia,serif}
.demo-levels{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.demo-levels button{flex:1;min-width:48px;padding:8px}.demo-levels button[aria-pressed=true]{background:var(--primary);color:var(--onPrimary)}
.fluid-background{inset:-12%;opacity:.65;filter:none}.fluid-shape{width:75%;border-radius:50%;background:radial-gradient(ellipse,var(--fluid-color) 0%,color-mix(in srgb,var(--fluid-color) 65%,transparent) 30%,transparent 72%);animation:fluid-breathe 16s ease-in-out infinite alternate;animation-play-state:paused}.fluid-shape-one{left:-27%;top:-95%}.fluid-shape-two{right:-20%;bottom:-130%;animation-duration:21s;animation-direction:alternate-reverse}.fluid-shape-three{left:20%;top:-20%;width:65%;animation-duration:25s}.fluid-card.is-running .fluid-shape{animation-play-state:running}.fluid-card>h2,.fluid-card>.detail-row,.fluid-card>p{background:var(--surface)}
@keyframes liquid-drift-back{from{translate:-2% 0;scale:1 1;rotate:-.6deg}to{translate:2% 3px;scale:1.04 .97;rotate:.5deg}}@keyframes liquid-drift-front{from{translate:2% 3px;scale:1.02 1;rotate:.5deg}to{translate:-2% -2px;scale:1 .98;rotate:-.6deg}}@keyframes fluid-breathe{from{translate:-7% -3%;scale:.94 1.03}to{translate:12% 6%;scale:1.06 .94}}
@media(max-width:370px){.liquid-card--feature .liquid-card-content{padding:18px}.liquid-feature-copy{padding:10px;max-width:73%}.liquid-feature-copy strong{font-size:19px}.liquid-feature-value{font-size:24px}}
@media(prefers-reduced-motion:reduce){.liquid-card *,.fluid-card *{animation:none!important;transition:none!important}}:root[data-animations=off] .liquid-card *,:root[data-animations=off] .fluid-card *{animation:none!important;transition:none!important}
.liquid-card.is-running .liquid-card-water{animation:none;bottom:0}
.liquid-card.is-running .liquid-card-water:not(.liquid-card-empty){animation:none;bottom:0}
.liquid-body--back{border-radius:43% 57% 0 0 / 80px 64px 0 0;background:linear-gradient(160deg,color-mix(in srgb,var(--chart2) 28%,var(--primary)),var(--primary));opacity:.24}
.liquid-body--front{border-radius:62% 38% 0 0 / 72px 52px 0 0;background:linear-gradient(165deg,color-mix(in srgb,var(--primary) 62%,var(--surface)) 0%,var(--primary) 70%);opacity:.33}
.liquid-body:after{content:'';position:absolute;left:18%;top:6px;width:68%;height:140px;border-radius:50%;background:radial-gradient(ellipse at 42% 0%,color-mix(in srgb,var(--surface) 42%,transparent),transparent 68%);pointer-events:none}
.liquid-card--full .liquid-body{border-radius:0}.liquid-card--full .liquid-body:after{opacity:.6}
/* Wide asymmetric contours keep the surface curved inside the visible frame. */
.liquid-body--back{left:-24%;width:150%;border-radius:48% 52% 0 0 / 95px 78px 0 0;opacity:.25}
.liquid-body--front{left:-18%;width:136%;border-radius:60% 40% 0 0 / 82px 108px 0 0;opacity:.34}
.liquid-body:before{content:'';position:absolute;left:12%;top:0;width:62%;height:170px;border-radius:50%;background:radial-gradient(ellipse at 30% 0%,color-mix(in srgb,var(--surface) 58%,transparent),transparent 68%);opacity:.7;animation:liquid-light 12s ease-in-out infinite alternate;animation-play-state:paused}
.liquid-card.is-running .liquid-body:before{animation-play-state:running}
.liquid-card--full .liquid-body{border-radius:0}
@keyframes liquid-light{from{transform:translateX(-8%) scale(.9,1)}to{transform:translateX(18%) scale(1.1,.8)}}
@media(prefers-reduced-motion:reduce){.liquid-card *:before{animation:none!important}}:root[data-animations=off] .liquid-card *:before{animation:none!important}
.activity-card{margin:18px 0;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:18px;color:var(--text)}.activity-heading,.activity-subhead,.activity-month{display:flex;justify-content:space-between;align-items:center;gap:12px}.activity-heading h2{margin:0;font:500 26px Georgia,serif}.activity-refresh{width:44px;height:44px;border:1px solid var(--border);border-radius:50%;font-size:25px;color:var(--primary)}.activity-refresh:disabled{opacity:.5}.steps-overview{display:flex;align-items:center;gap:20px;margin:18px 0}.steps-ring{width:142px;aspect-ratio:1;flex:none;position:relative}.steps-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.steps-ring circle{fill:none;stroke-width:7}.steps-track{stroke:var(--surfaceSoft)}.steps-progress{stroke:var(--primary);stroke-linecap:round;stroke-dasharray:var(--steps-progress) 100;animation:steps-fill .65s ease-out both}.steps-ring>div{position:absolute;inset:15%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.steps-ring strong{font:700 25px Georgia,serif;overflow-wrap:anywhere}.steps-ring span,.steps-copy p,.activity-note,.activity-message{font-size:12px;color:var(--textMuted);line-height:1.45}.steps-copy{min-width:0}.steps-copy strong{font:500 20px Georgia,serif}.steps-copy p{margin:8px 0}.activity-subhead{border-top:1px solid var(--border);padding-top:16px}.activity-subhead h3{font-size:14px;margin:0}.activity-subhead span,.steps-column{color:var(--textMuted);font-size:11px}.steps-chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:12px 0 18px}.steps-column{text-align:center;min-width:0}.steps-column-value{display:block;height:18px;font-size:9px;white-space:nowrap;overflow:hidden}.steps-bar-track{height:78px;display:flex;align-items:end;justify-content:center;border-bottom:1px solid var(--border)}.steps-bar-track i{display:block;width:55%;max-width:25px;background:var(--primary);border-radius:5px 5px 0 0}.steps-column>span:last-child{display:block;margin-top:7px;font-size:9px;white-space:nowrap}.activity-month{border-top:1px solid var(--border);padding-top:14px;font-size:14px}.activity-month small{display:block;color:var(--textMuted);font-size:11px;font-weight:400;margin-top:3px}.activity-month strong{text-align:right;font-size:16px}.activity-note{margin:16px 0}.activity-message{min-height:1em}.health-status{display:grid;grid-template-columns:1fr auto;gap:10px;margin:16px 0;padding:15px;background:var(--surfaceSoft);border-radius:12px;font-size:13px}.health-status strong{text-align:right}.health-form{display:flex;gap:10px;align-items:end;margin-top:16px;flex-wrap:wrap}.health-form label{flex:1;min-width:110px}.health-form button{min-height:45px}.health-form input{width:100%;min-width:0}@keyframes steps-fill{from{stroke-dasharray:0 100}to{stroke-dasharray:var(--steps-progress) 100}}@media(max-width:370px){.steps-overview{gap:12px}.steps-ring{width:120px}.steps-ring strong{font-size:22px}.activity-card{padding:16px}.steps-column>span:last-child{font-size:8px}}@media(prefers-reduced-motion:reduce){.steps-progress{animation:none}}:root[data-animations=off] .steps-progress{animation:none}
.shortcuts-settings{margin:22px 0;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:16px}.shortcuts-settings h3{font:500 21px Georgia,serif;margin:0}.shortcuts-form{display:grid;gap:12px;margin:15px 0}.shortcuts-form[hidden]{display:none}.shortcuts-message{font-size:13px;line-height:1.5;color:var(--text)}

/* Keep iOS form controls readable without suppressing manual zoom. */
input,textarea,select,[contenteditable="true"]{font-size:16px!important;max-width:100%;min-width:0}
html,body{width:100%;min-width:0}
.shell,main,.sheet,.video-content,.video-content>div,.settings-section,.chart-card,.detail-card{min-width:0;max-width:100%}
.video-content h2,.video-content p,.session h3,.sheet label,.sheet-header h2{overflow-wrap:anywhere}
.overlay{width:100%;bottom:auto;height:100%;min-width:0}
.sheet{max-width:100%;max-height:min(94dvh,100%);scroll-padding:16px;overscroll-behavior:contain}
@media(max-width:360px){.shell{padding-left:16px;padding-right:16px}.nav-item{min-width:0;flex:1}.video-tools{flex-wrap:wrap}.video-tools input{flex-basis:100%}}

/* Native iOS date control needs room for WebKit's internal date editor. */
#workout-form input[type="date"]{height:52px;min-height:52px;min-width:0;max-width:100%;padding:0 12px;line-height:1.4;white-space:nowrap}
#workout-form input[type="date"]::-webkit-date-and-time-value{min-height:1.4em;line-height:1.4;text-align:left}

/* Workout date picker: text and icon remain independent of native controls. */
.date-picker{min-width:0}.date-picker-label{display:block;font-size:13px;font-weight:bold}.date-picker-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;min-height:52px;margin-top:7px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);text-align:left;font-size:16px}.date-picker-toggle span{min-width:0;overflow-wrap:anywhere}.date-picker-toggle svg{width:20px;height:20px;flex:none;color:var(--primary)}.date-picker-panel{margin-top:8px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text)}.date-picker-panel[hidden]{display:none}.date-picker-header{display:flex;align-items:center;gap:4px}.date-picker-header label{min-width:0}.date-picker-month{flex:1}.date-picker-year{flex:0 0 75px}.date-picker-header select,.date-picker-header input{width:100%;min-width:0;min-height:44px;margin:0;padding:5px;border-radius:8px}.date-picker-arrow{flex:none;width:36px;min-height:44px;font-size:25px;line-height:1;color:var(--primary)}.date-picker-week,.date-picker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}.date-picker-week span{padding:10px 0 4px;font-size:11px;color:var(--textMuted)}.date-picker-grid button{display:grid;place-items:center;min-width:0;min-height:44px;padding:0;border-radius:10px;font-size:14px}.date-picker-grid button.selected{background:var(--primary);color:var(--onPrimary);font-weight:bold}.date-picker .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.date-picker-fields{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:4px;flex:1;min-width:0}.date-picker-fields label{display:block;width:100%;min-width:0}.date-picker-fields select,.date-picker-fields input{box-sizing:border-box;display:block;width:100%;height:46px;min-height:46px;margin:0;padding:0 8px;border:1px solid var(--border);border-radius:8px;background-color:var(--surface);color:var(--text);font-size:16px;line-height:normal;text-align:left}.date-picker-fields select{appearance:none;-webkit-appearance:none;padding-right:19px;background-image:linear-gradient(45deg,transparent 50%,var(--textMuted) 50%),linear-gradient(135deg,var(--textMuted) 50%,transparent 50%);background-position:calc(100% - 11px) 20px,calc(100% - 7px) 20px;background-size:4px 4px,4px 4px;background-repeat:no-repeat}.date-picker-fields input[type=number]{appearance:textfield;-moz-appearance:textfield}.date-picker-fields input[type=number]::-webkit-inner-spin-button,.date-picker-fields input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.date-picker-arrow{width:32px;height:46px;min-height:46px}.date-picker-header{gap:2px}@media(max-width:360px){.date-picker-panel{padding:6px}.date-picker-fields{gap:3px}.date-picker-fields select,.date-picker-fields input{padding-left:5px;padding-right:5px}.date-picker-fields select{padding-right:17px}}