@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--bg:#0b100d;--card:#131e18;--card2:#18291e;--line:#2c3c30;--green:#b6f56b;--text:#f5f8f2;--muted:#a4b2a5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 'Noto Sans Thai',system-ui,sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button{cursor:pointer;border:1px solid var(--line);border-radius:12px;background:#1b2b20;color:var(--text);padding:10px 18px}button:hover{border-color:var(--green)}button.primary{background:var(--green);color:#14200d;font-weight:700;border:0}button:disabled{opacity:.45;cursor:not-allowed}a{color:var(--green);text-decoration:none}aside{width:235px;position:fixed;inset:0 auto 0 0;border-right:1px solid var(--line);padding:32px 23px;background:#0e1711;display:flex;flex-direction:column}.brand{display:flex;gap:13px;align-items:center;color:white;font:700 22px/1.08 system-ui;letter-spacing:.5px}.brand img{width:46px;height:46px}.brand b{color:var(--green)}.side-caption{font-size:12px;letter-spacing:1.4px;color:#7e9381;margin:22px 0 35px}nav{display:grid;gap:8px}nav a{color:var(--muted);padding:13px;border-radius:12px;display:flex;gap:13px;align-items:center}nav a.active{background:#263c23;color:var(--green)}nav svg{width:22px;height:22px}.side-bottom{margin-top:auto;color:var(--muted);font-size:14px}.pill{display:inline-block;border:1px solid #52723c;color:var(--green);padding:4px 12px;border-radius:30px;font-size:14px}.shell{margin-left:235px;max-width:1700px}header{display:flex;align-items:center;justify-content:space-between;padding:28px 40px;border-bottom:1px solid var(--line);gap:16px}header small{font:12px system-ui;letter-spacing:2px;color:var(--green)}h1{font-size:29px;margin:5px 0 0}h2{font-size:21px;margin:0 0 15px}h3{font-size:18px;margin:0 0 8px}.header-tools{display:flex;align-items:center;gap:15px}.header-tools #saveStatus{font-size:13px;color:var(--muted)}.avatar{border-radius:50%;width:42px;height:42px;background:var(--green);color:#163014;display:grid;place-items:center;font-weight:bold}main{padding:30px 40px}footer{font-size:12px;color:#7f9483;padding:10px 40px 26px}.grid{display:grid;gap:20px}.cols{grid-template-columns:1.4fr 1fr}.three{grid-template-columns:repeat(3,1fr)}.two{grid-template-columns:repeat(2,1fr)}.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px}.card.accent{background:linear-gradient(125deg,#203c22,#132119);border-color:#46603a}.flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.muted{color:var(--muted)}.small{font-size:14px}.kicker{font:12px system-ui;letter-spacing:1.8px;color:var(--green);margin-bottom:10px}.big{font:600 40px/1.2 system-ui;margin:10px 0}.big span{font-size:18px;color:var(--muted)}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.tabs button.selected{background:var(--green);color:#152015;border-color:var(--green)}.progress{height:9px;background:#2a3b2a;border-radius:20px;overflow:hidden;margin:16px 0}.progress i{display:block;background:var(--green);height:100%;border-radius:20px}.check{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #243528}.check:last-child{border-bottom:0}input[type=checkbox]{accent-color:var(--green);width:21px;height:21px;flex-shrink:0}.ring{width:114px;height:114px;border-radius:50%;background:conic-gradient(var(--green) var(--pct),#2b3d2a 0);display:grid;place-items:center;flex-shrink:0}.ring div{width:88px;height:88px;border-radius:50%;background:#182a1a;display:grid;place-items:center;font:600 27px system-ui}.timeline{border-left:2px solid #395734;margin-left:8px;padding-left:20px}.timeline .event{padding:0 0 17px;position:relative}.timeline .event:before{content:'';width:9px;height:9px;position:absolute;left:-26px;top:8px;background:var(--green);border-radius:50%}.event time{color:var(--green);font:600 14px system-ui}.event p{margin:3px 0}.banner{border-left:3px solid var(--green);background:#19291d;padding:13px 17px;margin:18px 0;border-radius:0 12px 12px 0;font-size:14px}.warning{border-color:#ecc377;color:#f3dcad}.field{display:flex;flex-direction:column;gap:5px;margin-bottom:15px}.field label,.date-label{font-size:14px;color:var(--muted)}input,select,textarea{background:#0c160f;border:1px solid #3a4e3c;border-radius:10px;padding:10px;color:white;max-width:100%;min-width:0}textarea{min-height:90px;width:100%}input[type=number]{width:100%}.date-label input{padding:7px 10px;color-scheme:dark}.week-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.day-box{background:#0f1913;border:1px solid var(--line);padding:12px;border-radius:15px}.day-box.today{border-color:var(--green)}.day-box select{width:100%;padding:8px 3px;font-size:14px}.day-box .day-date{font:600 23px system-ui;color:var(--green);margin:7px 0}.session-tag{font-size:13px;color:var(--muted);margin-top:9px}.exercise-card{overflow:hidden;padding:0}.exercise-card img{width:100%;height:215px;object-fit:cover;background:#22352b}.exercise-card .body{padding:20px}.tag{padding:4px 9px;border-radius:7px;background:#253928;color:#c9dfc5;font-size:13px}.timer{font:500 65px/1.3 system-ui;letter-spacing:3px;margin:15px 0;color:var(--green);font-variant-numeric:tabular-nums}.meal-photo{width:100%;height:190px;object-fit:cover;border-radius:14px;margin-bottom:15px}.chart{display:flex;align-items:flex-end;gap:14px;height:160px;border-bottom:1px solid var(--line);padding:15px 4px 0}.chart-bar{flex:1;min-width:25px;background:linear-gradient(#b6f56b,#507844);border-radius:7px 7px 0 0;position:relative}.chart-bar span{position:absolute;top:-27px;width:100%;text-align:center;font-size:12px}.chart-labels{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:7px}.chart-labels span{flex:1;text-align:center}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;padding:12px 9px;border-bottom:1px solid var(--line)}.table-wrap{overflow:auto}dialog{width:min(760px,94vw);border:1px solid #4b6344;border-radius:22px;background:var(--card);color:white;padding:28px}dialog::backdrop{background:#000b}.close{float:right;padding:0 12px;font-size:28px}.detail-image{width:100%;max-height:330px;object-fit:contain;border-radius:15px}.steps li{padding:6px 0}#toast{position:fixed;bottom:28px;right:24px;background:var(--green);color:#172016;padding:12px 20px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}#toast.show{opacity:1}.empty{padding:35px 20px;text-align:center;color:var(--muted)}.session-summary{margin-bottom:20px}.source{font-size:13px;color:#8faa8d}.form-actions{margin-top:15px}.profile-note{color:var(--muted);font-size:14px}.mobile-label{display:none}button svg{width:18px;height:18px}svg.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1500px){main{padding:34px 55px}}@media(max-width:1100px){aside{width:195px;padding:25px 17px}.shell{margin-left:195px}main,header{padding:24px}.cols{grid-template-columns:1fr}.three{grid-template-columns:repeat(2,1fr)}.week-grid{grid-template-columns:repeat(4,1fr)}.header-tools #saveStatus{display:none}}@media(max-width:700px){aside{inset:auto 0 0;width:100%;height:73px;z-index:10;padding:4px 5px;background:#0d1711f5;border-top:1px solid var(--line)}aside .brand,.side-caption,.side-bottom{display:none}nav{display:flex;justify-content:space-around;gap:0}nav a{padding:8px 4px;flex-direction:column;gap:3px;font-size:11px;border-radius:8px}nav a svg{width:21px;height:21px}.shell{margin-left:0}header{padding:20px 17px;align-items:flex-start}header h1{font-size:24px}.avatar{display:none}.header-tools{padding-top:6px}.date-label{font-size:12px}.date-label input{display:block;width:143px;font-size:13px}main{padding:20px 16px}footer{padding:12px 16px 96px}.grid{gap:14px}.two,.three{grid-template-columns:1fr}.card{padding:20px;border-radius:18px}.exercise-card{padding:0}.exercise-card img{height:230px}.week-grid{grid-template-columns:repeat(2,1fr)}.tabs button{padding:9px 12px}.big{font-size:34px}.timer{font-size:60px}#toast{bottom:85px;left:18px;right:18px;text-align:center}.ring{width:100px;height:100px}.ring div{width:78px;height:78px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.exercise-card img{object-fit:contain;height:260px;background:#101712}.grid{align-content:start}

.set-exercise{padding:22px 0;border-bottom:1px solid var(--line)}.set-exercise:last-child{border-bottom:0}.set-table td input[type=number]{min-width:70px;width:100%;padding:8px}.set-table th{font-size:13px}.set-table td:first-child{min-width:115px}.video-link{display:inline-block;padding:12px 16px;border:1px solid var(--green);border-radius:12px}.course-tabs{margin-bottom:20px}@media(max-width:700px){.set-table td,.set-table th{padding:8px 4px}.set-table td:first-child{min-width:90px}.set-table td input[type=number]{min-width:60px;padding:6px}.set-table{font-size:13px}}

#fitnessMascot{margin:14px 0 12px;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:225px}.mascot-top{display:flex;justify-content:space-between;align-items:center;color:#9cc973;font-size:10px;letter-spacing:1px}.mascot-top button{font-size:12px;padding:2px 8px;border-radius:8px}.mascot-ground{height:150px;position:relative;display:grid;place-items:center}.mascot-ground:after{content:'';width:100px;height:12px;background:#80c64b25;border-radius:50%;position:absolute;bottom:3px;z-index:0}.clover-buddy{width:150px;height:150px;object-fit:contain;position:relative;z-index:1;animation:buddy-lift var(--buddy-pace,2.6s) ease-in-out infinite;transform-origin:50% 90%;filter:drop-shadow(0 5px 5px #0005)}.clover-buddy.paused{animation-play-state:paused}.mascot-message{font-size:13px;color:#d4ecbd;font-weight:600}.mascot-caption{font-size:11px;color:var(--muted);line-height:1.8}.mascot-meter{height:5px;background:#283c2a;border-radius:10px;margin:6px 10px;overflow:hidden}.mascot-meter i{display:block;height:100%;background:var(--green);border-radius:10px;transition:width .5s}@keyframes buddy-lift{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}@media(min-width:701px) and (max-height:850px){aside{padding-top:20px;padding-bottom:15px;overflow-y:auto}.side-caption{margin:16px 0 20px}nav{gap:3px}nav a{padding:9px 12px}#fitnessMascot{min-height:200px;margin:10px 0}.mascot-ground,.clover-buddy{height:125px}.clover-buddy{width:125px}.side-bottom p{margin:7px 0}}@media(max-width:700px){#fitnessMascot{display:none}}@media(prefers-reduced-motion:reduce){.clover-buddy{animation:none}.mascot-meter i{transition:none}}

.buddy-walk{width:150px;height:150px;animation:buddy-roam 7s ease-in-out infinite;position:relative;z-index:1}.clover-buddy{animation:buddy-step var(--buddy-pace,2.6s) ease-in-out infinite}.mascot-ground:after{animation:buddy-shadow 7s ease-in-out infinite}.mascot-ground.paused .buddy-walk,.mascot-ground.paused:after{animation-play-state:paused}@keyframes buddy-roam{0%,100%{transform:translateX(-18px)}50%{transform:translateX(18px)}}@keyframes buddy-step{0%,100%{transform:translateY(0) rotate(-5deg) scaleY(1)}25%{transform:translateY(-10px) rotate(1deg) scaleY(1.03)}50%{transform:translateY(-2px) rotate(5deg) scaleY(.97)}75%{transform:translateY(-10px) rotate(-1deg) scaleY(1.03)}}@keyframes buddy-shadow{0%,100%{transform:translateX(-18px) scaleX(.9)}50%{transform:translateX(18px) scaleX(1.05)}}@media(min-width:701px) and (max-height:850px){.buddy-walk{width:125px;height:125px}}@media(prefers-reduced-motion:reduce){.buddy-walk,.clover-buddy,.mascot-ground:after{animation:none}}

/* Controlled effort: feet stay near the floor; acceleration and pauses follow a rep. */
.mascot-ground{perspective:600px}.buddy-walk{animation:buddy-weight-shift 9s cubic-bezier(.45,0,.25,1) infinite;transform-origin:50% 96%}.clover-buddy{animation:buddy-controlled-rep 4.8s infinite;transform-origin:50% 96%;will-change:transform}.clover-buddy.energized{animation-duration:4.2s}.mascot-ground:after{animation:buddy-planted-shadow 9s ease-in-out infinite;opacity:.8}.mascot-ground.paused .clover-buddy{animation-play-state:paused}
@keyframes buddy-weight-shift{0%,12%,100%{transform:translateX(-3px) rotateY(-4deg)}38%,52%{transform:translateX(3px) rotateY(4deg)}75%,85%{transform:translateX(0) rotateY(0)}}
@keyframes buddy-controlled-rep{0%,14%,100%{transform:translateY(0) scale(1,1) rotate(-.6deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}28%{transform:translateY(1px) scale(1.012,.985) rotate(-1deg);animation-timing-function:cubic-bezier(.2,.65,.35,1)}46%{transform:translateY(-1px) scale(.995,1.01) rotate(.5deg);animation-timing-function:ease-out}54%{transform:translateY(-1px) scale(.995,1.01) rotate(.5deg);animation-timing-function:cubic-bezier(.55,0,.75,.65)}79%{transform:translateY(1px) scale(1.008,.99) rotate(.1deg);animation-timing-function:ease-in-out}90%{transform:translateY(0) scale(1,1) rotate(-.6deg)}}
@keyframes buddy-planted-shadow{0%,12%,100%{transform:translateX(-3px) scaleX(1)}38%,52%{transform:translateX(3px) scaleX(.97)}75%,85%{transform:translateX(0) scaleX(1)}}
@media(prefers-reduced-motion:reduce){.buddy-walk,.clover-buddy,.mascot-ground:after{animation:none}}

.buddy-medal{position:absolute;right:18px;bottom:15px;font-size:27px;z-index:2;filter:drop-shadow(0 2px 3px #0008)}

.program-guide{margin-bottom:20px}.program-guide-item{padding:14px 0;border-top:1px solid var(--line)}.program-guide-item summary{cursor:pointer;font-weight:600}.program-guide-item summary span{display:block;margin:6px 0 0 20px;font-weight:400}.program-guide-list{padding-left:24px}.program-guide-list li{padding:9px 0}.program-guide-list li>div{display:inline-block;vertical-align:middle;min-width:55%}.program-guide-list li span{display:block}.program-guide-list button{margin:6px 0}@media(max-width:700px){.program-guide-list li>div{display:block}}