:root { --ink:#17352f; --muted:#71807a; --cream:#f5f1e8; --paper:#fffdf8; --orange:#ed7145; --lime:#d9e681; --line:#dbe0d8; --shadow:0 18px 45px rgba(24,54,46,.12); font-family:"Noto Sans TC",sans-serif; color:var(--ink); background:#e7ebe2; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 6% 2%,#fffdf5 0,transparent 24rem),linear-gradient(135deg,#ebeee6,#dfe7dd); }
.is-hidden { display:none!important; }.login-gate { min-height:100vh; display:grid; place-items:center; padding:22px; }.login-card { width:min(100%,390px); padding:38px; border:1px solid #e4e5dc; border-radius:28px; background:var(--paper); box-shadow:var(--shadow); }.login-mark { margin-bottom:28px; }.login-card h1 { margin:0; font-family:"Playfair Display","Noto Sans TC",serif; font-size:38px; letter-spacing:-.04em; }.login-card>p:not(.eyebrow):not(.login-error) { margin:10px 0 25px; color:var(--muted); font-size:14px; }.login-card label { display:block; color:var(--muted); font-size:12px; font-weight:700; }.login-card input { width:100%; height:48px; margin-top:7px; padding:0 14px; border:1px solid var(--line); border-radius:12px; outline:0; background:#fbfcf8; color:var(--ink); font-size:18px; }.login-card input:focus { border-color:#6f9488; box-shadow:0 0 0 3px rgba(111,148,136,.15); }.login-error { min-height:20px; margin:8px 0 0; color:#b84b31; font-size:12px; }.login-card .primary-button { margin-top:7px; }
button,input,select { font:inherit; }
button { cursor:pointer; color:inherit; }
.app-shell { width:min(100%,760px); min-height:100vh; margin:auto; padding:28px clamp(20px,5vw,48px) 30px; background:rgba(255,253,248,.83); box-shadow:0 0 80px rgba(45,74,63,.08); }
.topbar,.session-title-row,.progress-row,.stage-topline,.target-panel,.navigation,.dialog-heading,.exercise-editor-head,.dialog-footer { display:flex; align-items:center; }
.topbar { justify-content:space-between; }
.brand { display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-family:"Playfair Display",serif; font-size:23px; font-weight:700; letter-spacing:.04em; }
.brand-mark { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:var(--ink); color:var(--lime); font-size:17px; }
.top-actions { display:flex; gap:8px; }.icon-button { display:grid; place-items:center; width:39px; height:39px; border:1px solid var(--line); border-radius:50%; background:transparent; font-size:19px; }.icon-button:hover { background:#edf1e9; }
.session-header { margin-top:52px; }.eyebrow { margin:0 0 8px; color:#60776d; font-size:12px; font-weight:800; letter-spacing:.14em; }.session-title-row { justify-content:space-between; gap:24px; }.session-title-row h1,.dialog-heading h2 { margin:0; font-family:"Playfair Display","Noto Sans TC",serif; font-size:clamp(28px,5vw,39px); line-height:1.15; letter-spacing:-.035em; }.session-title-row p { margin:8px 0 0; color:var(--muted); font-size:14px; }.edit-link,.text-button { padding:7px 0; border:0; background:none; color:#427265; font-weight:700; white-space:nowrap; }.edit-link span { padding-left:4px; font-size:19px; }.progress-row { gap:11px; margin-top:28px; color:var(--muted); font-size:12px; font-weight:700; }.progress-row>span:first-child { min-width:72px; }.progress-row>span:last-child { width:28px; text-align:right; }.progress-track { height:6px; flex:1; overflow:hidden; border-radius:8px; background:#e6e9df; }.progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:var(--orange); transition:width .35s ease; }
.exercise-stage { margin-top:33px; padding:22px; border:1px solid #e4e5dc; border-radius:26px; background:var(--paper); box-shadow:var(--shadow); }.stage-topline { gap:10px; color:#738077; font-size:12px; font-weight:800; letter-spacing:.09em; }.exercise-index { color:var(--orange); }.stage-line { width:28px; height:1px; background:#bdc6bc; }.media-card { position:relative; height:clamp(195px,42vw,278px); overflow:hidden; margin-top:17px; border-radius:17px; background:linear-gradient(130deg,#1f4a40,#2d685a 52%,#739a70); }.motion-grid { position:absolute; inset:0; opacity:.3; background-image:linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(110deg,#000,transparent 75%); }.media-card:after { content:""; position:absolute; right:-45px; bottom:-75px; width:240px; height:240px; border:35px solid var(--lime); border-radius:50%; opacity:.78; }.media-copy { position:absolute; z-index:2; top:18px; left:18px; color:white; }.media-copy p { margin:12px 0; font-size:15px; font-weight:600; }.media-chip { display:inline-block; padding:5px 9px; border:1px solid rgba(255,255,255,.5); border-radius:20px; font-size:11px; font-weight:800; letter-spacing:.08em; }.movement-figure { position:absolute; z-index:1; left:50%; bottom:5%; width:116px; height:172px; transform:translateX(-50%); filter:drop-shadow(7px 12px 5px rgba(0,0,0,.15)); }.movement-figure i { position:absolute; display:block; background:#fcf6e6; border-radius:20px; transform-origin:top center; }.head { top:2px; left:48px; width:28px; height:28px; }.body { top:29px; left:54px; width:18px; height:65px; border-radius:14px; }.arm { top:39px; left:59px; width:12px; height:68px; }.arm-left { transform:rotate(63deg); }.arm-right { transform:rotate(-65deg); }.leg { top:87px; left:58px; width:15px; height:76px; }.leg-left { transform:rotate(15deg); }.leg-right { transform:rotate(-15deg); }.exercise-copy { margin-top:23px; }.exercise-copy h2 { margin:0; font-size:27px; letter-spacing:-.035em; }.exercise-copy p { margin:7px 0 0; color:var(--muted); font-size:14px; }.target-panel { justify-content:space-between; margin-top:23px; padding-top:20px; border-top:1px solid var(--line); }.target-label,.set-status span,.timer-panel p { display:block; color:var(--muted); font-size:12px; font-weight:700; }.target-panel strong { display:block; margin-top:4px; font-family:"Noto Sans TC",sans-serif; font-size:36px; font-weight:700; line-height:1; }.target-panel small { font-family:"Noto Sans TC",sans-serif; font-size:14px; }.set-status { text-align:right; }.set-status strong { margin-top:8px; font-family:"Noto Sans TC",sans-serif; font-size:14px; }.timer-panel { position:relative; margin-top:22px; padding:14px 18px; border-radius:14px; background:#eff2e9; text-align:center; }.timer-panel p { margin:0; }.timer-panel output,.rest-dialog output { display:block; font-family:"Noto Sans TC",sans-serif; font-size:43px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; }.timer-panel .text-button { position:absolute; right:15px; top:50%; transform:translateY(-50%); font-size:12px; }.primary-button,.complete-button,.secondary-button,.add-exercise { min-height:50px; border:0; border-radius:14px; font-weight:800; }.primary-button { width:100%; margin-top:11px; background:var(--orange); color:white; font-size:15px; box-shadow:0 8px 17px rgba(237,113,69,.26); }.primary-button span,.complete-button span { margin-left:8px; font-size:18px; }.primary-button:hover,.complete-button:hover { filter:brightness(.96); transform:translateY(-1px); }.timer-note { margin:13px 4px 0; color:#87928a; font-size:11px; text-align:center; }.navigation { gap:10px; margin-top:16px; }.navigation button { flex:1; }.secondary-button { padding:0 12px; border:1px solid var(--line); background:var(--paper); font-size:13px; }.complete-button { padding:0 12px; border:0; background:var(--ink); color:white; font-size:13px; }.rest-dialog,.editor-dialog { border:0; color:var(--ink); background:var(--paper); box-shadow:0 25px 70px rgba(15,36,29,.28); }.rest-dialog { width:min(420px,calc(100% - 36px)); padding:35px; border-radius:28px; text-align:center; }.rest-dialog::backdrop,.editor-dialog::backdrop { background:rgba(18,48,40,.46); backdrop-filter:blur(3px); }.rest-sun { display:grid; place-items:center; width:47px; height:47px; margin:0 auto 18px; border-radius:50%; background:var(--lime); font-size:25px; }.rest-dialog h2 { margin:0; font-family:"Playfair Display","Noto Sans TC",serif; font-size:31px; }.rest-dialog>p:not(.eyebrow) { color:var(--muted); font-size:14px; }.rest-dialog output { margin:24px 0 6px; font-size:58px; }.editor-dialog { width:min(740px,calc(100% - 26px)); max-height:90vh; padding:26px; overflow:auto; border-radius:24px; }.dialog-heading { justify-content:space-between; }.dialog-heading h2 { font-size:29px; }.close-button { font-size:29px; line-height:1; }.dialog-help { color:var(--muted); font-size:13px; line-height:1.6; }.exercise-list { display:grid; gap:12px; margin-top:20px; }.exercise-editor-card { padding:15px; border:1px solid var(--line); border-radius:15px; background:#fbfbf6; }.exercise-editor-head { gap:8px; }.drag-handle { color:#9aa69d; font-size:19px; }.exercise-editor-head input { flex:1; padding:5px; border:0; border-bottom:1px solid transparent; outline:0; background:transparent; color:var(--ink); font-weight:800; font-size:16px; }.exercise-editor-head input:focus { border-color:#6c9487; }.exercise-editor-head button { width:30px; height:30px; border:0; border-radius:50%; background:#f5e8e3; color:#b84b31; font-size:19px; }.editor-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:13px; }.editor-grid label,.cue-input { color:var(--muted); font-size:11px; font-weight:700; }.editor-grid input,.editor-grid select,.cue-input input { display:block; width:100%; height:33px; margin-top:4px; padding:5px 7px; border:1px solid var(--line); border-radius:7px; background:white; color:var(--ink); }.cue-input { display:block; margin-top:9px; }.order-actions { display:flex; gap:6px; margin-top:10px; }.order-actions button { padding:4px 8px; border:0; border-radius:6px; background:#e8eee8; color:#567066; font-size:11px; font-weight:700; }.add-exercise { width:100%; margin-top:14px; border:1px dashed #a4b7aa; background:transparent; color:#477567; }.dialog-footer { justify-content:flex-end; gap:10px; margin-top:20px; }.dialog-footer .primary-button { width:auto; min-width:150px; margin:0; padding:0 17px; }.dialog-footer .secondary-button { min-width:110px; }
.exercise-image { display:none; position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; }.media-card.has-image { background:#193c35; }.media-card.has-image .exercise-image { display:block; }.media-card.has-image .motion-grid,.media-card.has-image:after,.media-card.has-image .movement-figure { display:none; }.media-card.has-image .media-copy { z-index:3; }.media-card.has-image .media-chip { border-color:rgba(255,255,255,.7); background:rgba(12,37,30,.72); box-shadow:0 2px 8px rgba(0,0,0,.16); }.image-setting-row { display:flex; align-items:center; gap:12px; margin-top:11px; }.editor-image-preview { display:grid; flex:0 0 142px; width:142px; height:94px; overflow:hidden; place-items:center; border:1px solid #d7ded6; border-radius:10px; background:#173f36; color:#d8e1dc; font-size:11px; }.editor-image-preview img { width:100%; height:100%; object-fit:contain; }.editor-image-preview img[hidden],.editor-image-preview span[hidden] { display:none; }.image-controls { display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:7px; min-width:0; }.image-picker,.image-controls button,.image-fit-label { display:inline-flex; align-items:center; min-height:30px; padding:5px 9px; border:1px solid #aec2b5; border-radius:7px; background:#f4f8f2; color:#477567; font-size:11px; font-weight:800; cursor:pointer; }.image-picker input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }.image-fit-label select { margin-left:5px; border:0; outline:0; background:transparent; color:#477567; font:inherit; font-weight:800; }.image-controls button { border-color:#edd0c7; background:#fff5f1; color:#ad563f; }.image-status { flex-basis:100%; color:#849087; font-size:11px; }
.editor-dialog .dialog-footer { position:sticky; top:0; z-index:20; justify-content:flex-end; margin:13px -12px 18px; padding:11px 12px; border:1px solid rgba(219,224,216,.9); border-radius:14px; background:rgba(255,253,248,.94); box-shadow:0 9px 22px rgba(24,54,46,.1); backdrop-filter:blur(10px); }.drag-handle { cursor:grab; user-select:none; touch-action:none; }.drag-handle:active { cursor:grabbing; }.exercise-editor-card.is-dragging { opacity:.42; }.exercise-editor-card.drag-before { box-shadow:inset 0 3px 0 var(--orange); }.exercise-editor-card.drag-after { box-shadow:inset 0 -3px 0 var(--orange); }
.app-shell { padding-bottom:112px; }.compact-progress { margin-top:22px; }.compact-progress .progress-row { margin-top:0; }.exercise-stage { margin-top:18px; }.media-card { height:clamp(260px,55vw,380px); }.floating-timer { position:fixed; z-index:40; right:max(18px,calc((100vw - 760px)/2 + 18px)); bottom:18px; display:flex; align-items:center; gap:8px; min-width:248px; padding:9px 10px 9px 15px; border:1px solid rgba(255,255,255,.72); border-radius:17px; background:rgba(245,247,240,.94); box-shadow:0 14px 38px rgba(18,48,40,.22); backdrop-filter:blur(14px); }.floating-timer-reading { min-width:82px; margin-right:auto; }.floating-timer-reading span { display:block; color:var(--muted); font-size:10px; font-weight:700; }.floating-timer-reading output { display:block; margin-top:1px; font-family:"Noto Sans TC",sans-serif; font-size:25px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:.02em; }.timer-reset,.timer-action { height:38px; border:0; border-radius:11px; font-weight:800; }.timer-reset { width:38px; background:#e5ebe2; color:#567066; font-size:20px; }.timer-action { min-width:66px; padding:0 13px; background:var(--orange); color:white; box-shadow:0 6px 13px rgba(237,113,69,.22); }.timer-action:hover,.timer-reset:hover { filter:brightness(.96); }
.app-shell { padding-bottom:30px; }.exercise-stage { position:relative; }.stage-topline { min-height:58px; padding-top:7px; }.media-card { margin-top:4px; }.floating-timer { position:absolute; top:13px; right:16px; bottom:auto; z-index:4; min-width:220px; padding:7px 8px 7px 12px; border-color:rgba(219,224,216,.95); border-radius:14px; box-shadow:0 8px 20px rgba(18,48,40,.12); }.floating-timer-reading { min-width:75px; }.floating-timer-reading output { font-size:22px; }.timer-reset,.timer-action { height:34px; }.timer-reset { width:34px; }.timer-action { min-width:58px; padding:0 10px; }
.media-card { height:clamp(220px,calc(100svh - 470px),520px); }
@media (max-width:530px) { .app-shell { padding:20px 16px 24px; }.session-header { margin-top:36px; }.session-title-row { align-items:flex-end; }.session-title-row h1 { font-size:29px; }.edit-link { font-size:12px; }.exercise-stage { padding:17px; border-radius:21px; }.editor-dialog { padding:19px; }.editor-grid { grid-template-columns:repeat(2,1fr); }.navigation { gap:7px; }.navigation button { min-height:47px; font-size:12px; }.secondary-button span { display:none; }.complete-button { flex:1.4!important; }.timer-panel output { font-size:39px; } }
@media (max-width:530px) { .editor-dialog .dialog-footer { margin:10px -6px 15px; padding:9px 7px; }.editor-dialog .dialog-footer button { min-width:0; }.editor-dialog .dialog-footer .primary-button { flex:1; }.order-actions { flex-wrap:wrap; } }
@media (max-width:530px) { body { overflow-x:hidden; }.app-shell { padding-bottom:24px; }.compact-progress { margin-top:17px; }.stage-topline { min-height:56px; }.media-card { height:clamp(220px,calc(100svh - 460px),460px); }.floating-timer { top:11px; right:11px; bottom:auto; min-width:200px; padding:6px 7px 6px 10px; gap:6px; }.floating-timer-reading { min-width:68px; }.floating-timer-reading output { font-size:20px; }.timer-reset,.timer-action { height:32px; }.timer-reset { width:32px; }.timer-action { min-width:53px; padding:0 8px; }.editor-dialog { width:calc(100% - 18px); max-width:calc(100vw - 18px); overflow-x:hidden; }.editor-dialog .dialog-footer { margin:10px 0 15px; }.exercise-list,.exercise-editor-card,.exercise-editor-head,.editor-grid,.image-setting-row,.image-controls,.order-actions { min-width:0; max-width:100%; }.exercise-editor-card { width:100%; overflow:hidden; }.exercise-editor-head input { min-width:0; }.editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.editor-grid label { min-width:0; }.editor-grid input,.editor-grid select,.cue-input input { min-width:0; max-width:100%; }.image-setting-row { align-items:stretch; flex-direction:column; }.editor-image-preview { width:100%; height:150px; flex-basis:150px; }.image-controls>* { min-width:0; max-width:100%; }.image-fit-label select { min-width:0; max-width:120px; }.image-status { flex-basis:100%; overflow-wrap:anywhere; } }
@media (max-width:530px) { html,body { height:100%; min-height:0; } body { overflow:hidden; overscroll-behavior:none; }.login-gate { height:100vh; height:100dvh; min-height:0; overflow-y:auto; padding-top:max(20px,env(safe-area-inset-top)); padding-bottom:max(20px,env(safe-area-inset-bottom)); }.app-shell { display:flex; flex-direction:column; height:100vh; height:100dvh; min-height:0; max-height:100dvh; overflow:hidden; padding-top:max(14px,env(safe-area-inset-top)); padding-bottom:max(10px,env(safe-area-inset-bottom)); }.topbar,.compact-progress,.navigation { flex:0 0 auto; }.compact-progress { margin-top:12px; }.exercise-stage { display:flex; flex:1 1 auto; flex-direction:column; min-height:0; overflow:hidden; margin-top:12px; }.stage-topline,.exercise-copy,.target-panel { flex:0 0 auto; }.media-card { flex:1 1 auto; height:auto; min-height:80px; max-height:none; }.exercise-copy { margin-top:14px; }.target-panel { margin-top:14px; padding-top:13px; }.navigation { margin-top:9px; } }
.stage-topline { font-size:15px; font-weight:900; letter-spacing:.04em; }.exercise-index { font-size:16px; }.stage-line { width:32px; height:2px; }.complete-button { font-size:17px; font-weight:900; letter-spacing:.03em; }.navigation .secondary-button { display:flex; align-items:center; justify-content:center; gap:9px; font-weight:800; }.nav-arrow { font-family:"Noto Sans TC",sans-serif; font-size:25px; font-weight:900; line-height:1; }.timer-reset { display:grid; place-items:center; padding:0; font-family:"Noto Sans TC",sans-serif; line-height:1; }.music-settings { display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:13px 14px; border:1px solid var(--line); border-radius:14px; background:#f6f8f2; }.music-settings>div { min-width:0; margin-right:auto; }.music-settings strong,.music-settings span { display:block; }.music-settings strong { font-size:14px; }.music-settings span { max-width:280px; margin-top:3px; overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.music-settings>button { min-height:30px; padding:5px 9px; border:1px solid #edd0c7; border-radius:7px; background:#fff5f1; color:#ad563f; font-size:11px; font-weight:800; }.icon-button.is-playing { border-color:var(--orange); background:var(--orange); color:white; box-shadow:0 5px 12px rgba(237,113,69,.2); }
@media (max-width:530px) { .top-actions { gap:5px; }.top-actions .icon-button { width:37px; height:37px; }.complete-button { font-size:16px; }.navigation .secondary-button span { display:inline; }.navigation .secondary-button { gap:4px; }.nav-arrow { font-size:24px; }.music-settings { flex-wrap:wrap; gap:7px; }.music-settings>div { flex-basis:100%; }.music-settings span { max-width:100%; }.music-settings .image-picker,.music-settings>button { flex:1; justify-content:center; } }

/* Draw the close mark so it stays optically centered on every device. */
.close-button { position:relative; font-size:0; }
.close-button::before,
.close-button::after { content:""; position:absolute; top:50%; left:50%; width:18px; height:2px; border-radius:2px; background:currentColor; transform-origin:center; }
.close-button::before { transform:translate(-50%,-50%) rotate(45deg); }
.close-button::after { transform:translate(-50%,-50%) rotate(-45deg); }

.routine-toolbar { display:flex; align-items:center; margin-bottom:10px; }
.routine-toolbar label { display:flex; align-items:center; gap:9px; width:100%; color:var(--muted); font-size:11px; font-weight:800; }
.routine-toolbar label span { white-space:nowrap; }
.routine-toolbar select { min-width:0; max-width:280px; height:35px; padding:0 34px 0 11px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font-size:14px; font-weight:800; }
.routine-settings { margin:0 0 14px; padding:14px; border:1px solid #cfd9cf; border-radius:15px; background:#f3f6ef; }
.routine-fields { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(220px,1.4fr); gap:10px; }
.routine-fields label { color:var(--muted); font-size:11px; font-weight:800; }
.routine-fields select,.routine-fields input { display:block; width:100%; height:38px; margin-top:5px; padding:0 10px; border:1px solid var(--line); border-radius:9px; outline:0; background:white; color:var(--ink); font-weight:700; }
.routine-fields select:focus,.routine-fields input:focus { border-color:#6f9488; box-shadow:0 0 0 3px rgba(111,148,136,.12); }
.routine-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.routine-actions button { min-height:32px; padding:5px 10px; border:1px solid #aec2b5; border-radius:8px; background:white; color:#477567; font-size:11px; font-weight:800; }
.routine-actions .danger-action { margin-left:auto; border-color:#edd0c7; color:#ad563f; }
.routine-actions button:disabled { cursor:not-allowed; opacity:.45; }

@media (max-width:530px) {
  .routine-toolbar { margin-bottom:7px; }
  .routine-toolbar select { flex:1; max-width:none; height:32px; font-size:13px; }
  .routine-fields { grid-template-columns:1fr; gap:8px; }
  .routine-actions button { flex:1 1 calc(50% - 4px); }
  .routine-actions .danger-action { margin-left:0; }
}