:root{
  color-scheme:dark;
  --bg:#0a1429;--panel:#142440;--panel2:#1b3152;--panel3:#223d60;--line:#304c71;
  --text:#f5f8ff;--muted:#a7bad3;--accent:#3566c0;--accent-hi:#467bd8;--accent-soft:#1d365b;
  --stone:#203e69;--stone2:#2c5285;--ink:#101f39;--danger:#ff667a;--warn:#f0b95d;
  --radius:18px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}html,body{margin:0;background:var(--bg);color:var(--text);min-height:100%}body{padding-bottom:max(92px,env(safe-area-inset-bottom));background-image:radial-gradient(circle at 82% -10%,#142d5755,transparent 28%),linear-gradient(180deg,#0a1429,#0d1b34 45%,#0a1429)}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.app-shell{max-width:860px;margin:auto;min-height:100vh}

/* Thương hiệu */
.topbar{position:sticky;top:0;z-index:20;display:block;padding:16px 16px 12px;background:linear-gradient(180deg,#0a1429 84%,#0a142900);text-align:center}.brand-copy{min-width:0;width:100%;text-align:center}.system-title{font-weight:950;font-size:clamp(20px,3vw,30px);letter-spacing:-.015em;line-height:1.08;text-align:center;white-space:nowrap}.gym-sign{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:8px;padding:10px 12px;border-radius:13px;background:linear-gradient(135deg,var(--stone),var(--stone2));box-shadow:inset 0 0 0 1px #ffffff88,0 6px 24px #00000055;color:var(--ink);justify-content:center}.gym-sign b{font-weight:950;color:#ffffff;letter-spacing:.035em}.gym-sign strong{font-weight:950;color:var(--accent);letter-spacing:.035em}.gym-sign span{font-weight:750;color:#c5d7ee}.gym-sign.compact{font-size:clamp(11px,1.8vw,14px);padding:7px 12px;width:max-content;max-width:100%;margin:8px auto 0}.page-title{margin-top:8px;color:var(--muted);font-size:12px;font-weight:800;text-align:center}
main{padding:5px 16px 30px}section{margin-bottom:16px}.eyebrow{font-size:11px;letter-spacing:.14em;color:#93aad1;font-weight:900}

/* Khối / nút */
.hero{padding:24px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#141a25,#101f39);box-shadow:0 12px 40px #00000044}.hero.accent,.today-card{border-color:#203d6e;box-shadow:inset 0 0 70px #3566c00d,0 12px 40px #00000044}.hero h2{font-size:30px;margin:7px 0}.hero p{color:var(--muted)}.card{background:linear-gradient(145deg,#11161f,#0f131b);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 9px 30px #00000022}.card h3{margin:0 0 12px}.btn{border:0;border-radius:13px;padding:12px 16px;cursor:pointer;font-weight:850;text-decoration:none;text-align:center;display:inline-flex;justify-content:center;align-items:center;min-height:44px}.btn.primary{background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:white;box-shadow:0 7px 18px #3566c02e}.btn.ghost{background:var(--panel2);color:var(--text);border:1px solid var(--line)}.btn.danger{background:#30131a;color:#ffb9c3;border:1px solid #5b202d}.btn.small{padding:8px 12px;min-height:38px;border-radius:10px}.btn.full{width:100%}.icon-btn{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:var(--panel);color:var(--text);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;flex:none}.icon-btn:hover,.btn.ghost:hover{border-color:#364764}.toolbar,.row{display:flex;align-items:center}.toolbar{gap:8px;overflow:auto;padding-bottom:2px}.gap{gap:8px}.grow{flex:1}.empty{border:1px dashed #2a384f;border-radius:16px;padding:20px;color:var(--muted);text-align:center;background:#101f39}

/* Điều hướng */
.bottom-nav{position:fixed;z-index:40;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 18px),820px);display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:7px;border:1px solid var(--line);background:#101f39ec;backdrop-filter:blur(18px);border-radius:21px;box-shadow:0 12px 40px #000000aa}.bottom-nav a{color:var(--muted);text-decoration:none;display:flex;flex-direction:column;align-items:center;padding:7px 3px;border-radius:14px;font-size:10px;gap:2px;min-width:0}.bottom-nav b{font-size:20px;line-height:1}.bottom-nav a.active{background:#141c2a;color:#9cb0d4}.bottom-nav span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* Trang chủ */
.today-routine{display:flex;align-items:center;gap:14px;margin:12px 0 15px}.today-routine h2{margin:0}.today-routine p{margin:3px 0 0}.routine-badge{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--accent);color:#ffffff;font-weight:950;box-shadow:0 8px 20px #3566c03d;flex:none}.compact-label{margin:0 0 10px;font-size:11px;color:var(--muted)}.compact-label select{margin-top:5px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat-grid.two{grid-template-columns:repeat(2,1fr)}.stat{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:14px;min-width:0}.stat.featured{border-color:#203d6e;background:linear-gradient(145deg,#141c2b,#11161f)}.stat span,.stat small{display:block;color:var(--muted);font-size:12px}.stat strong{display:block;font-size:23px;margin:6px 0;overflow:hidden;text-overflow:ellipsis}.section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 2px 9px}.section-title h3{margin:0}.section-title a{color:#96acd2;text-decoration:none;font-size:13px}.progress-snapshot{display:flex;justify-content:space-between;align-items:center;gap:14px}.progress-snapshot span,.progress-snapshot small{display:block;color:var(--muted);font-size:12px}.progress-snapshot strong{font-size:31px}.progress-snapshot a{color:#9cb0d4;text-decoration:none;font-weight:800;font-size:13px}.progression-card{display:flex;justify-content:space-between;align-items:center;gap:12px}.progression-card p{color:var(--muted);font-size:13px;margin:5px 0}.weight-confirm{display:flex;gap:6px;max-width:235px}

/* Kế hoạch */
#routine-list{display:flex;flex-direction:column;gap:10px}.routine-card{margin:0;position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .15s,border-color .15s,opacity .15s}.routine-card.expanded{border-color:#2b3951}.routine-summary{display:flex;align-items:center;gap:10px}.routine-summary h3{margin:0}.routine-summary small{color:var(--muted)}.routine-body{padding-top:12px;margin-top:12px;border-top:1px solid var(--line)}.routine-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid #1d2635;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.routine-item:first-child{border-top:0}.routine-item p{margin:4px 0;color:var(--muted);font-size:13px}.index,.set-no{width:32px;height:32px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);color:var(--text);display:grid;place-items:center}.hint{color:var(--muted);font-size:12px}

/* Workout */
.workout-head,.routine-head,.exercise-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.workout-head{padding:8px 2px 16px}.workout-head h2,.exercise-title h3{margin:0}.workout-head small,.exercise-title small{color:var(--muted)}.workout-ex{padding:15px}.note{background:#151c27;border:1px solid #242f42;border-radius:12px;padding:10px;color:#c5d1e6}.set-table{margin:14px -4px}.set-row{display:grid;grid-template-columns:40px 86px 1fr 1fr 42px;gap:6px;align-items:center;padding:5px 0}.set-row.head{font-size:10px;color:var(--muted);font-weight:900;text-align:center}.set-row.done{opacity:.78}.set-row.done input{background:#151c28;border-color:#303f59}.set-type{text-align:center;font-size:9px;color:#92a9d1;font-weight:800}.set-row input{text-align:center;padding:10px 5px}.check{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:#97add3;font-size:20px}.set-row.done .check{background:var(--accent);color:white;border-color:var(--accent)}

/* Form */
input,select,textarea{width:100%;font-size:16px;background:#0b0f15;border:1px solid var(--line);color:var(--text);border-radius:11px;padding:11px 12px;outline:none}input:focus,select:focus,textarea:focus{border-color:#29529a;box-shadow:0 0 0 3px #3566c018}textarea{resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}label{display:block;color:#b9c8e1;font-size:13px;margin-bottom:12px}label input,label select,label textarea{margin-top:6px}.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.toggle-row small{display:block;color:var(--muted);margin-top:3px}.toggle-row input,.check-row input{width:22px;height:22px;accent-color:var(--accent)}.check-row{display:flex;align-items:center;gap:10px}.check-row input{margin:0;flex:none}.check-row span{color:var(--muted)}

/* Lịch sử */
.session-row{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:15px;color:var(--text);padding:14px;margin-bottom:8px;text-align:left;cursor:pointer}.session-row div{display:flex;flex-direction:column;gap:3px}.session-row div:last-child{text-align:right}.session-row span{font-size:12px;color:var(--muted)}.month h3{color:var(--muted);font-size:13px}.history-set{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}.history-set:first-of-type{border-top:0}.history-set span{color:var(--muted)}.calendar .section-title{margin-top:0}.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.cal-week span{text-align:center;color:var(--muted);font-size:11px;padding:4px}.cal-cell{aspect-ratio:1;border:1px solid var(--line);border-radius:12px;background:#0b0f15;color:var(--muted);display:flex;align-items:center;justify-content:center;position:relative}.cal-cell.blank{visibility:hidden}.cal-cell.trained{color:var(--text);background:#131e32;border-color:#213b68;cursor:pointer}.cal-cell.trained i{position:absolute;width:6px;height:6px;background:#8ea6cf;border-radius:50%;bottom:7px}.cal-cell.trained em{position:absolute;top:4px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent);color:#ffffff;font-size:9px;font-style:normal;display:grid;place-items:center}.calendar-head{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:10px;margin-bottom:10px}.calendar-head>div{text-align:center}.calendar-head h3{margin:0;text-transform:capitalize}.calendar-head small{color:var(--muted)}.history-edit span{text-align:center}

/* Tiến bộ */
.segmented{display:grid;grid-template-columns:1fr 1fr;padding:4px;background:#101f39;border:1px solid var(--line);border-radius:14px}.segmented button{border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:850;padding:10px}.segmented button.active{background:#131e32;color:#a3b6d7}.progress-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.progress-controls label{margin:0}.chart-card canvas{width:100%;height:auto;background:linear-gradient(180deg,#0c1016,#0a0d12);border-radius:14px;border:1px solid #19212f}.progress-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}.progress-row:first-of-type{border-top:0}.progress-row b{white-space:nowrap}.progress-row em{font-style:normal;color:#9db2d5;font-size:12px;margin-left:5px}

/* Cài đặt */
.profile-card{display:flex;justify-content:space-between;align-items:center;gap:12px}.profile-card span,.profile-card small{display:block;color:var(--muted);font-size:12px}.profile-card h3{margin:4px 0}.file-btn{position:relative}.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}hr{border:0;border-top:1px solid var(--line);margin:16px 0}

/* Modal */
.modal{width:min(92vw,520px);max-height:88vh;overflow:auto;border:1px solid #2b3950;border-radius:20px;padding:0;background:#142440;color:var(--text);box-shadow:0 30px 90px #000000cc}.modal::backdrop{background:#000000bb;backdrop-filter:blur(4px)}.modal-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:16px 18px 10px;background:#142440}.modal-head h3{margin:0}.modal-x{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--text);font-size:22px}.modal-body{padding:8px 18px 2px}.modal-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 18px;background:linear-gradient(transparent,#142440 22%)}

/* Đăng nhập local */
.profile-gate{max-width:600px;margin:0 auto;padding:22px 14px 60px;min-height:100vh}.brand-panel{position:relative;overflow:hidden;padding:24px 18px 18px;border-radius:27px;border:1px solid #2b384f;background:radial-gradient(circle at 50% 105%,#3566c02a,transparent 40%),radial-gradient(circle at 100% 0,#19366855,transparent 36%),linear-gradient(145deg,#131924,#0b0f15);box-shadow:0 22px 70px #00000099,inset 0 1px #ffffff12;text-align:center}.brand-panel:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 22%,#ffffff08 42%,transparent 62%);pointer-events:none}.brand-kicker{position:relative;z-index:1;font-size:clamp(15px,4.55vw,30px);font-weight:950;line-height:1.08;letter-spacing:-.035em;text-align:center;white-space:nowrap;text-shadow:0 0 24px #3566c033}.brand-panel .gym-sign{position:relative;z-index:1;margin:12px auto 4px;font-size:clamp(11px,3.3vw,15px);width:max-content;max-width:100%}.brand-panel .profile-sign{flex-wrap:nowrap;white-space:nowrap;padding:8px 10px}.athlete-glow{position:relative;z-index:1;height:118px;margin:2px auto -2px;display:flex;align-items:center;justify-content:center}.athlete-glow svg{width:min(100%,440px);height:100%;overflow:visible}.brand-note{position:relative;z-index:1;color:#a5b8d8!important;margin:0!important;text-align:center;font-size:12px}.auth-card{margin-top:14px}.auth-card h2{margin:0 0 15px;font-size:20px}

#toast-root{position:fixed;z-index:100;top:16px;left:50%;transform:translateX(-50%);width:min(92%,460px)}.toast{margin-bottom:8px;background:#151e2d;border:1px solid #28467a;border-radius:14px;padding:12px 15px;box-shadow:0 8px 30px #00000088}.toast.error{background:#3b151b;border-color:#a3384d}

@media(max-width:560px){
  .system-title{font-size:clamp(18px,4.8vw,21px)}.gym-sign.compact{font-size:11px}.page-title{font-size:11px}.topbar{padding-left:12px;padding-right:12px}main{padding-left:12px;padding-right:12px}.hero{padding:19px}.hero h2{font-size:27px}.form-grid{grid-template-columns:1fr 1fr}.stat-grid{grid-template-columns:repeat(3,1fr)}.stat{padding:11px}.stat strong{font-size:18px}.progression-card{align-items:stretch;flex-direction:column}.weight-confirm{max-width:none}.set-row{grid-template-columns:34px 68px 1fr 1fr 38px;gap:4px}.set-type{font-size:8px}.progress-controls{grid-template-columns:1fr 1fr}.cal-grid,.cal-week{gap:4px}.cal-cell{border-radius:9px}.routine-card{padding:13px}.routine-summary{gap:7px}.routine-badge{width:43px;height:43px;border-radius:13px}.progress-snapshot{align-items:flex-end}.progress-snapshot strong{font-size:27px}
}
@media(max-width:390px){.bottom-nav{width:calc(100% - 10px);gap:2px;padding:5px}.bottom-nav span{font-size:8px}.bottom-nav b{font-size:18px}.form-grid{grid-template-columns:1fr}.set-row{grid-template-columns:32px 58px 1fr 1fr 36px}.stat-grid{gap:5px}.stat{padding:9px}.stat span{font-size:10px}.system-title{font-size:17px}.gym-sign.compact{font-size:10.5px}}

@media(max-width:420px){.profile-gate{padding-left:9px;padding-right:9px}.brand-panel{padding-left:8px;padding-right:8px}.brand-kicker{font-size:clamp(14px,4.45vw,18px)}.brand-panel .profile-sign{font-size:clamp(10px,3vw,12px);gap:3px}.athlete-glow{height:104px}.brand-note{font-size:11px}.bottom-nav a{padding-left:1px;padding-right:1px}}

/* SUPs Fitness & Yoga V1.2 — cân chỉnh trên di động */
.system-title{font-size:clamp(19px,3.5vw,31px);line-height:1.15;white-space:normal;overflow-wrap:normal;text-wrap:balance;max-width:100%;}
.gym-sign.compact{font-size:clamp(12px,2.3vw,18px);min-height:40px;border-radius:15px;max-width:100%;flex-wrap:wrap}
.page-title{font-size:clamp(15px,2.65vw,21px);color:#edeff2;margin-top:11px;font-weight:950}
.brand-kicker{white-space:normal!important;text-wrap:balance;font-size:clamp(19px,4.8vw,27px)!important;line-height:1.14}
.brand-panel .profile-sign{white-space:normal;flex-wrap:wrap;max-width:100%;gap:4px;}
.auth-card .hint{line-height:1.65}
main{padding-bottom:calc(105px + env(safe-area-inset-bottom))}
.vi-name{display:block;color:#7a96c6;font-size:11px;font-weight:500;margin-top:4px;line-height:1.35}
.routine-item .grow,.exercise-title .grow,.routine-summary .grow{min-width:0;overflow-wrap:anywhere}
.routine-item{gap:6px}.routine-item .icon-btn{width:34px;height:36px;border-radius:9px}

.remove-btn{color:#ef8d98;border-color:#472b32}

.workout-ex .exercise-title h3{font-size:17px}
.workout-ex 
.advice-result{line-height:1.7}.advice-result h3{font-size:25px;color:#ffffff}
.advice-disclaimer{margin-top:16px;background:#161d29;padding:14px;border-radius:11px;border:1px solid #24406f;color:#c7d3e7;font-size:12px}
.finish-summary>strong{font-size:38px;color:#87a0cc}.finish-summary p{line-height:1.6}.finish-summary details{margin-top:12px;color:#cfd9eb}.finish-summary li{margin:8px 0}
.modal{max-height: min(87dvh,850px)}
@media(max-width:420px){.system-title{font-size:clamp(18px,4.6vw,23px);letter-spacing:-.03em}.gym-sign.compact{font-size:clamp(11px,3vw,14px)}.page-title{font-size:17px}.topbar{padding-top:12px}.routine-item .index{width:24px;height:29px;font-size:12px}.routine-item .brand-panel .profile-sign{font-size:clamp(11px,3.4vw,16px)}.workout-ex .exercise-title h3{font-size:16px}}
.offline-warning{margin:8px 0 14px;padding:14px;border:1px solid #7e4b16;background:#2c2114;border-radius:14px;color:#f5cf98;font-weight:750;font-size:13px}
.discipline-card{border-color:#88552e;background:linear-gradient(145deg,#302117,#142440)}.discipline-card p{color:#e1c7ae;line-height:1.6}

/* SUPs Fitness & Yoga V1.2.1 — polish theo mockup và thao tác iPhone */
.brand-mini-logo{width:27px;height:27px;object-fit:contain;flex:none;border-radius:5px;mix-blend-mode:multiply}
.gym-sign.compact{gap:4px;padding-inline:13px}
.gym-sign.compact .brand-mini-logo{width:24px;height:24px;margin-right:2px}
.brand-panel{min-height:265px;padding:20px 16px 24px;background:
  radial-gradient(ellipse at 50% 42%,rgba(53,102,192,.28) 0,transparent 48%),
  repeating-linear-gradient(110deg,transparent 0,transparent 38px,rgba(255,255,255,.014) 39px,transparent 40px),
  linear-gradient(140deg,#121822 0,#0a0d12 55%,#101826 100%)}
.brand-panel::after{content:"";position:absolute;inset:auto 5% 0;height:2px;background:linear-gradient(90deg,transparent,#4d72b3,transparent);opacity:.6}
.brand-official-logo{position:relative;z-index:1;display:block;width:clamp(118px,29vw,155px);height:clamp(118px,29vw,155px);object-fit:contain;margin:-3px auto 12px;border-radius:28px;background:#f7f8f9;padding:10px;box-shadow:0 0 70px #5a7db83d,0 18px 36px #00000088}
.brand-kicker{font-size:clamp(21px,4.5vw,28px)!important;letter-spacing:-.028em;white-space:normal!important;overflow-wrap:normal;text-wrap:balance;line-height:1.11;max-width:480px;margin-inline:auto}
.brand-panel .gym-sign.profile-sign{margin:13px auto 12px;display:flex;justify-content:center;gap:4px;max-width:100%;width:max-content;white-space:normal;flex-wrap:wrap;padding:9px 12px;border-radius:999px;font-size:clamp(11px,2.6vw,14px)}
.profile-sign .brand-mini-logo{width:25px;height:25px;margin-right:2px}
.brand-note{font-size:12px;line-height:1.5;margin:6px auto 0!important;color:#acbedc!important}
.profile-gate{max-width:580px;padding:14px 12px calc(52px + env(safe-area-inset-bottom));}
.auth-card{margin:14px auto 0;padding:clamp(16px,4vw,24px);border:1px solid #28354b;background:linear-gradient(145deg,#141b26,#0e131b 70%);box-shadow:0 16px 48px #00000077}
.auth-card h2{font-size:clamp(21px,5vw,25px);text-align:center;margin:0 0 7px}
.auth-card>.hint{text-align:center;margin:0 0 18px;line-height:1.5}
.auth-card label{font-size:13px;font-weight:650;color:#ced8ea}
.auth-card input{background:#0c1017;border:1px solid #303f58;height:48px;border-radius:12px;padding:10px 13px}
.auth-card button.primary{min-height:50px;font-size:15px}
.auth-separator{margin:17px auto;display:flex;align-items:center;gap:13px;color:#5c7eb9;font-size:12px}
.auth-separator::before,.auth-separator::after{content:"";height:1px;background:#2f3e58;flex:1}
.auth-back{margin-top:10px}
.auth-card[hidden]{display:none!important}

/* During workout, the original large brand scrolls away. Only the session bar stays. */
.app-shell.in-workout .topbar{position:relative;top:auto;z-index:1;padding-bottom:6px}
.app-shell.in-workout main{overflow:visible;}
.workout-head{position:sticky;top:max(0px,env(safe-area-inset-top));z-index:35;background:rgba(13,28,52,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #253145;border-radius:17px;box-shadow:0 8px 26px #000000bb;padding:11px 13px;margin:2px 0 13px;min-height:73px}
.workout-head .eyebrow{color:#92a9d1;letter-spacing:.09em;font-size:10px}
.workout-head h2{font-size:clamp(20px,5.8vw,27px);line-height:1.1;margin:3px 0 0}
.workout-session-info{min-width:0;flex:1}
.workout-header-actions{display:flex;align-items:center;gap:7px;flex:none}
.workout-header-actions .finish-btn{padding:9px 11px;font-size:clamp(11px,3.1vw,14px);min-height:40px;white-space:nowrap}
.workout-header-actions .eye-toggle{display:flex;align-items:center;gap:3px;width:auto;min-width:43px;height:40px;padding:0 8px;background:#161d28;border-color:#33435e;color:#cdd8ea}
.workout-header-actions .eye-toggle[aria-pressed="true"]{color:#94aad1;border-color:#2c569f;background:#142035}
.eye-toggle span{font-size:10px;font-weight:800}
.workout-ex{padding:13px 12px;margin-bottom:12px;scroll-margin-top:100px}
.workout-ex .exercise-title{display:flex;align-items:flex-start;gap:7px;flex-wrap:nowrap}
.workout-ex 
.workout-ex .exercise-title .grow{align-self:center;min-width:0}
.workout-ex .exercise-title h3{font-size:clamp(13px,3.65vw,17px);line-height:1.3;margin:0;overflow-wrap:anywhere}
.workout-ex .exercise-title .vi-name{font-size:11px;margin-top:3px;line-height:1.3}
.first-session-hint{display:block;color:#9db2d5;font-size:10px;margin-top:4px}
.exercise-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex:none;min-width:0}
.workout-action-btn{width:33px;height:35px;border-radius:10px;font-size:17px}
.unit-switch{display:flex;align-items:stretch;border:1px solid #344561;border-radius:10px;overflow:hidden;height:35px;background:#10161f;flex:none}
.unit-switch button{appearance:none;border:0;background:transparent;color:#89a2cd;padding:0 8px;min-width:38px;font-size:11px;font-weight:900;line-height:1;cursor:pointer}
.unit-switch button.active{background:linear-gradient(160deg,#467bd8,#2755a5);color:#ffffff;box-shadow:0 0 14px #3566c02b}
.workout-ex .set-table{margin:10px -3px 12px}
.workout-ex .set-row.head{padding-bottom:3px}
.workout-ex .set-row input{min-height:40px;font-size:16px}
.workout-add-exercise{margin-top:4px;margin-bottom:12px;min-height:48px;border-color:#2e508a!important;color:#e4eaf4!important;background:linear-gradient(135deg,#152849,#141b28)!important;font-weight:900}
@media(min-width:600px){.workout-head{top:0}.workout-ex .exercise-title h3{font-size:17px}}
@media(max-width:430px){
  .brand-panel{padding:16px 9px 19px}
  .brand-official-logo{width:120px;height:120px;border-radius:25px}
  .brand-kicker{font-size:clamp(17px,4.65vw,21px)!important}
  .brand-panel .gym-sign.profile-sign{font-size:clamp(10px,2.9vw,13px);padding:8px 9px}
  .profile-sign .brand-mini-logo{width:20px;height:20px}
  .workout-head{padding:9px 8px;min-height:68px;gap:6px}
  .workout-header-actions{gap:5px}
  .workout-header-actions .finish-btn{padding-inline:8px}
  .workout-header-actions .eye-toggle{min-width:38px;padding-inline:6px}
  .workout-ex{padding:12px 9px}
  .workout-ex .exercise-title{gap:3px}
  .workout-ex 
  .exercise-actions{gap:3px}
  .workout-action-btn{width:29px;height:33px;padding:0;font-size:16px}
  .unit-switch{height:33px}
  .unit-switch button{min-width:33px;padding-inline:5px;font-size:10px}
}
@media(max-width:350px){
  .workout-ex .exercise-title{flex-wrap:wrap}
  .workout-ex .exercise-title .grow{flex-basis:calc(100% - 28px)}
  .exercise-actions{margin-left:auto}
  .system-title{font-size:17px}
  .brand-panel .gym-sign.profile-sign{font-size:10px}
  .brand-panel .gym-sign.profile-sign span{font-size:10px}
}

/* SUPs Fitness & Yoga V1.2.2 — Menus thay thế toàn bộ kéo-thả */
.routine-card,.workout-ex{position:relative;overflow:visible}
.routine-item{position:relative;user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}
.card.menu-open,.routine-item.menu-open{z-index:45;position:relative;overflow:visible}
.action-menu-wrap{position:relative;flex:none;display:flex;align-items:center}
.menu-trigger{width:38px;min-width:38px;height:38px;border:1px solid #364663;border-radius:11px;background:#19212e;color:#ffffff;font-size:24px;line-height:1;cursor:pointer;touch-action:manipulation}
.menu-trigger[aria-expanded="true"]{border-color:#3566c0;background:#192437}
.action-menu{position:absolute;top:calc(100% + 7px);right:0;min-width:218px;max-width:min(88vw,268px);display:flex;flex-direction:column;gap:3px;padding:7px;border-radius:14px;background:#1a222f;border:1px solid #415679;box-shadow:0 14px 34px #000000dd;z-index:90}
.action-menu[hidden]{display:none!important}
.action-menu.open-up{top:auto;bottom:calc(100% + 7px)}
.menu-option{display:block;width:100%;padding:12px 10px;text-align:left;background:transparent;color:#ecf0f7;border:0;border-radius:9px;font-size:13px;font-weight:650;line-height:1.35;min-height:42px;cursor:pointer}
.menu-option:hover,.menu-option:focus-visible{background:#2b384f;outline:none}
.menu-option:disabled{opacity:.35;cursor:default}
.menu-option.menu-danger{color:#ff9cab}
.routine-summary .grow,.routine-item .grow,.workout-ex .exercise-title .grow{flex:1;min-width:0}
.routine-card .routine-summary,.routine-item{overflow:visible}
.workout-ex .exercise-title{align-items:center;gap:7px;flex-wrap:nowrap}
.workout-ex .exercise-actions{gap:5px}
.workout-ex .exercise-title .grow{overflow-wrap:anywhere}
.workout-ex .menu-trigger{width:34px;min-width:34px;height:35px}
.advice-disclaimer{text-align:center;margin:16px 0 3px;padding:14px 12px;border-radius:14px;background:linear-gradient(155deg,#1a222f,#121721);border:1px solid #2d3b53;color:#d9e1ee}
.advice-disclaimer b{display:block;font-size:13px;color:#ffffff}
.advice-disclaimer p{margin:10px auto 8px;font-size:12px;line-height:1.65;max-width:400px;color:#c0cde4}
.advice-disclaimer strong{display:block;font-size:12px;line-height:1.65;color:#cbd6e9;overflow-wrap:anywhere}
.overdue-message{line-height:1.75;color:#e3e6ec}
@media(max-width:390px){
 .routine-summary{gap:6px}
 .routine-badge{width:36px;min-width:36px;height:38px}
 .routine-item .menu-trigger{min-width:32px;width:32px;height:36px}
 .workout-ex .menu-trigger{min-width:31px;width:31px}
 .workout-ex .exercise-actions{gap:3px}
}

.cycle-overview{padding:13px 14px;border:1px solid #2c3a53;border-radius:14px;background:linear-gradient(135deg,#151c27,#10151d);margin-bottom:13px;display:flex;flex-direction:column;gap:7px}
.cycle-overview span{font-size:10px;color:#b0c0dd;font-weight:850;letter-spacing:.1em}
.cycle-overview strong{font-size:13px;line-height:1.6;color:#e3e9f3;overflow-wrap:anywhere}
.cycle-overview small{font-size:11px;color:#849ecb;line-height:1.5}

/* A discreet author signature on the login branding and the bottom of Settings. */
.author-credit{margin:0;text-align:center;color:#6888be;font-size:11px;font-weight:400;line-height:1.55;letter-spacing:.012em}
/* Login: tagline hugs the logo group, discreet author line sits below with its own breathing room. */
.brand-panel .gym-sign.profile-sign{margin-bottom:5px}
.brand-panel .brand-note{margin:0 auto!important}
.author-credit-login{position:relative;z-index:1;margin:29px auto 0;color:#5b7eb9;font-size:8px;line-height:1.35;letter-spacing:.005em}
@media(min-width:600px){.brand-panel .author-credit-login{font-size:9px}}
.author-credit-settings{display:block;padding:15px 8px calc(16px + env(safe-area-inset-bottom));color:#5e80ba}
@media(min-width:600px){.author-credit{font-size:12px}}

/* SUPs Fitness & Yoga — navy identity */
:root{color-scheme:dark}
body{background-image:radial-gradient(ellipse at 85% 0,rgba(63,109,190,.18),transparent 42%),linear-gradient(180deg,#0a1429,#10213e 52%,#0a1429)}
.brand-panel{padding:22px 16px 25px;border-color:#3b5a86;background:radial-gradient(ellipse at 50% 0,rgba(108,152,224,.18),transparent 65%),linear-gradient(150deg,#213f70,#132746 80%)}
.brand-official-logo{width:min(100%,390px);height:auto;aspect-ratio:656/258;object-fit:contain;border-radius:0;padding:0;background:transparent;box-shadow:none;margin:0 auto 23px}
.brand-panel .brand-kicker{font-size:clamp(18px,4.65vw,26px)!important;line-height:1.22}
.gym-sign{border:1px solid #496b99;box-shadow:inset 0 1px 0 #ffffff10,0 6px 24px #0002;background:linear-gradient(135deg,#23436f,#2b5284);color:#fff}
.gym-sign b,.gym-sign strong{color:#fff;letter-spacing:.015em}
.gym-sign .brand-address{flex-basis:100%;color:#ccdcef;font-size:clamp(10px,2.6vw,12px);font-weight:550;line-height:1.45}
.brand-panel .gym-sign.profile-sign{border-radius:15px;width:100%;max-width:430px;gap:3px 7px;padding:11px 10px}
.brand-mini-logo{content:url('./icons/favicon-64.png');mix-blend-mode:normal;background:transparent;border-radius:7px}
.gym-sign.compact{width:100%;max-width:530px;border-radius:14px;gap:3px 6px}
.gym-sign.compact .brand-address{font-size:clamp(10px,2.55vw,12px)}
.brand-note{color:#c4d6ef!important;font-size:11px;margin-top:13px!important}
.auth-card{border-color:#314d74;background:linear-gradient(145deg,#1a3153,#101f39 80%)}
.auth-card input{background:#0e1e38;border-color:#36537a}
.auth-card label{color:#dbe7f7}
.btn.primary{background:linear-gradient(160deg,#3e73ce,#2d58a7);box-shadow:0 7px 24px #2c66c134}
.btn.primary:hover{filter:brightness(1.1)}
.bottom-nav a.active{background:#23416b;color:#c1dcff}
.topbar{background:linear-gradient(180deg,#0a1429 88%,#0a142900)}
.system-title{font-size:clamp(16px,4.4vw,29px);line-height:1.2}
.advice-disclaimer strong{color:#b9d9ff}
@media(min-width:600px){.profile-gate{padding-top:34px}.brand-panel{padding:25px 24px 27px}.brand-official-logo{margin-bottom:24px}}