/* Pages layer: My dashboard + Education */
body.page-other #introExplainer{display:none!important}
.page-title{margin:4px 0 2px;font-size:clamp(22px,3vw,28px);font-weight:800}
.page-sub{margin:0 0 14px;color:var(--ink-muted);font-size:14px;line-height:1.55;max-width:70ch}
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.subnav a{padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none}
.subnav a:hover{border-color:var(--accent);color:var(--accent)}
.edu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.edu-card{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.edu-card h3{font-size:15px;margin:0 0 5px}
.edu-card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.edu-note{margin-top:12px;font-size:12px;color:var(--ink-muted);line-height:1.5}
.edu-panel details{border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:8px}
.edu-panel summary{cursor:pointer;padding:11px 14px;font-weight:600;font-size:14px;list-style:none;display:flex;justify-content:space-between;gap:10px}
.edu-panel summary::-webkit-details-marker{display:none}
.edu-panel summary::after{content:"+";color:var(--accent);font-weight:800}
.edu-panel details[open] summary::after{content:"–"}
.edu-panel details ul{margin:0;padding:0 16px 12px 32px;font-size:13.5px;line-height:1.6}
.reco-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:14px}
.reco-big{font-family:"IBM Plex Mono",monospace;font-size:24px;font-weight:600;color:var(--accent);margin:2px 0 4px}
.week{width:100%;border-collapse:collapse;font-size:13.5px}
.week td,.week th{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.week th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted)}
.safety{background:var(--warn-soft);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:10px;padding:12px 14px;font-size:13.5px;line-height:1.6;margin-top:14px}
.safety ul{margin:6px 0 0;padding-left:20px}
/* ranking */
.rank-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.seg2{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg2 button{padding:7px 12px;border:0;background:var(--surface);color:var(--ink-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.seg2 button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
.rank-row{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:9px 10px;border-bottom:1px solid var(--line);border-radius:8px}
.rank-row.me{background:var(--accent-soft)}
.rank-no{width:30px;height:30px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px}
.rank-row:nth-child(1) .rank-no{background:#E8C766;color:#3a2c00}
.rank-row:nth-child(2) .rank-no{background:#CFD3D6;color:#2b2f31}
.rank-row:nth-child(3) .rank-no{background:#D9A57A;color:#3a2207}
.rank-name{font-weight:600;font-size:14.5px}
.rank-bar{height:6px;background:var(--surface-2);border-radius:4px;margin-top:5px;overflow:hidden}
.rank-bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.rank-nums{display:flex;gap:14px;font-family:"IBM Plex Mono",monospace;font-size:13px;text-align:right}
.rank-nums small{display:block;font-family:"IBM Plex Sans",sans-serif;font-size:10.5px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em}
.rank-nums b.hl{color:var(--accent)}
.rank-empty{padding:22px;text-align:center;color:var(--ink-muted);font-size:14px}
.opt{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:12px;color:var(--ink-muted);cursor:pointer}
/* education chat */
.echat{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.echat-body{height:340px;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.echat-msg{max-width:88%;font-size:14px;line-height:1.55;border-radius:12px;padding:9px 12px}
.echat-msg.bot{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:3px}
.echat-msg.user{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:3px}
.echat-msg p{margin:0 0 6px}.echat-msg p:last-child{margin:0}
.echat-msg ul{margin:4px 0 0;padding-left:18px}
.echat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0}
.echat-chip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-size:12.5px;cursor:pointer;color:var(--ink);font-family:inherit}
.echat-chip:hover{border-color:var(--accent)}
.echat-form{display:flex;gap:8px;padding:10px 12px}
.echat-form input{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 15px;font-size:14px;background:var(--bg);color:var(--ink);font-family:inherit}
.echat-form button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:0 18px;font-weight:600;cursor:pointer;font-family:inherit}
.rpe-row label{min-width:200px}
.rpe-row select{padding:6px 7px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:13px}
@media print{#pageDashboard,#pageEducation,#pageProgress,#pageProfile{display:none!important}}
/* language */
html[lang="ms"] .lang-en{display:none!important}
html:not([lang="ms"]) .lang-ms{display:none!important}
.lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.lang-switch button{padding:7px 11px;border:0;background:var(--surface);color:var(--ink-muted);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.lang-switch button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}

/* Ask Dr Hafifi / choose my own */
.ask-card .ask-label{display:block;font-size:12px;font-weight:600;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.ask-card textarea{width:100%;box-sizing:border-box;min-height:84px;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);resize:vertical}
.ask-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:12px 0}
.ask-opt{text-align:left;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:12px 14px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:4px}
.ask-opt b{font-size:15px}.ask-opt span{font-size:12.5px;color:var(--ink-muted);line-height:1.45}
.ask-opt:hover{border-color:var(--accent)}
.ask-opt.on{border-color:var(--accent);background:var(--accent-soft,rgba(0,120,120,.08))}
.ask-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ask-msg{font-size:13px}.ask-msg.err{color:#b3261e}.ask-msg.ok{color:#1e7a4a}
.ask-h{font-size:14px;margin:16px 0 8px}
.ask-req{border:1px solid var(--line);border-left:4px solid var(--warn,#d90);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--surface-2)}
.ask-req.done{border-left-color:#1e7a4a}
.ask-req-top{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-muted)}
.ask-pill{font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ask-q{margin:6px 0;font-size:13.5px;font-style:italic}.ask-note{margin:6px 0;font-size:13.5px}
.ask-plan{margin:4px 0 10px;padding-left:20px;font-size:13.5px}
@media print{.ask-card{display:none!important}}
#ownWorkspace[hidden],#ownSteps[hidden],#askChange[hidden]{display:none!important}

.ask-hint{font-size:12.5px;color:var(--ink-muted);margin:0 0 8px}
.ask-ach{display:flex;flex-wrap:wrap;gap:8px}
.ask-chip{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:13.5px;cursor:pointer;text-align:left}
.ask-chip:hover{border-color:var(--accent)}
.ask-chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.ask-chip.on::before{content:"\2713  "}

/* make the 'Inform your physio' button stand out */
button[data-informphysio]{background:#ffd43b!important;color:#2b2200!important;border:2px solid #e0a800!important;font-weight:700!important;box-shadow:0 0 0 3px rgba(255,212,59,.35)}
button[data-informphysio]:hover{background:#ffca1a!important}
.ask-next{margin:14px 0 0;font-size:13.5px;color:var(--ink-muted)}

/* 8-week progress plan */
.prog-card .prog-lead{font-size:14px;line-height:1.55;margin:0 0 12px;max-width:75ch}
.prog-week{background:var(--accent-soft,#dce9e4);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.prog-wk-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.prog-ph{font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:700}
.prog-week p{margin:8px 0 0;font-size:13.5px;line-height:1.5}
.prog-bar{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:10px}
.prog-bar .seg{height:26px;border-radius:6px;background:var(--surface);border:1px solid var(--line);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--ink-muted)}
.prog-bar .seg.past{background:var(--accent);border-color:var(--accent);color:#fff}
.prog-bar .seg.now{background:#ffd43b;border-color:#e0a800;color:#2b2200}
.prog-meta{font-size:13px;color:var(--ink-muted);margin:6px 0 10px}
.prog-note{border:1px solid var(--line);border-left:4px solid var(--ink-muted);border-radius:10px;padding:9px 12px;font-size:13.5px;margin-bottom:10px;background:var(--surface-2)}
.prog-note.up{border-left-color:#1e7a4a;background:#e6f4ec;font-weight:700}
.prog-note.back{border-left-color:#d98f00;background:#fff4dc}
.prog-done{border:1px solid var(--line);border-left:4px solid #1e7a4a;border-radius:10px;padding:12px 14px;background:#e6f4ec;margin-bottom:10px}
.prog-rows{display:grid;gap:8px;margin:6px 0 12px}
.prog-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--surface)}
.prog-row.progress{border-color:#1e7a4a}
.prog-name{font-weight:700;font-size:14px}.prog-det{font-size:12.5px;color:var(--ink-muted);margin-top:2px}
.prog-act{display:flex;gap:8px;align-items:center}
.prog-badge{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:3px 9px;background:#e8e6df;color:#444}
.prog-badge.progress{background:#1e7a4a;color:#fff}.prog-badge.hold{background:#f3d9a4;color:#5a3a00}.prog-badge.restart{background:#fff0c2;color:#6a4b00}
.prog-plan{margin:8px 0}.prog-plan summary{cursor:pointer;font-weight:600;font-size:14px}
.prog-plan tr.cur td{background:#fff4c4;font-weight:600}
.prog-foot{margin:8px 0 0;font-size:12.5px}.linklike{background:none;border:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.prog-tip{margin-top:8px;border-radius:8px;padding:7px 10px;font-size:12.5px;line-height:1.45;background:var(--surface-2);border:1px solid var(--line)}
.prog-tip span{color:var(--ink-muted)}
.prog-tip.up{background:#e6f4ec;border-color:#1e7a4a}.prog-tip.hold,.prog-tip.back{background:#fff4dc;border-color:#d98f00}
@media print{.prog-card{display:none!important}}

.prog-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 0 14px}
.prog-sum div{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface-2)}
.prog-sum b{display:block;font-family:"IBM Plex Mono",monospace;font-size:24px;color:var(--accent)}
.prog-sum span{font-size:12px;color:var(--ink-muted)}
.prog-weeks td,.prog-weeks th{white-space:nowrap}
.prog-badge.st-achieved,.prog-badge.tr-up{background:#1e7a4a;color:#fff}
.prog-badge.st-missed,.prog-badge.tr-down{background:#f6d4d0;color:#7a1d14}
.prog-badge.st-inprogress,.prog-badge.tr-new{background:#ffd43b;color:#2b2200}
.prog-badge.st-upcoming,.prog-badge.tr-same{background:#e8e6df;color:#444}

/* camera rep counter */
.cam-beta{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#ffd43b;color:#2b2200;border-radius:999px;padding:2px 8px;vertical-align:middle;margin-left:6px}
.cam-lead{font-size:13.5px;line-height:1.55;margin:0 0 12px;max-width:75ch;color:var(--ink-muted)}
.cam-card select{width:100%;max-width:440px;font:inherit;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.cam-help{font-size:13.5px;line-height:1.5;margin:8px 0 12px}
.cam-stage{position:relative;width:100%;max-width:560px;aspect-ratio:4/3;background:#1d2a27;border-radius:14px;overflow:hidden;margin-bottom:12px}
.cam-stage video,.cam-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam-stage:not(.on) video,.cam-stage:not(.on) canvas{display:none}
.cam-stage:not(.on)::after{content:"\1F4F7";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:56px;opacity:.5}
.cam-count{position:absolute;right:12px;top:8px;font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:64px;line-height:1;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.cam-count.pop{animation:campop .25s ease}
@keyframes campop{0%{transform:scale(1.5)}100%{transform:scale(1)}}
.cam-status{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:rgba(0,0,0,.6);color:#fff;font-size:13.5px;display:none}
.cam-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.cam-check{display:block;font-size:13.5px;margin:6px 0 10px}
.cam-sets{margin:8px 0;font-size:14px}.cam-setchip{display:inline-block;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin:2px 4px 2px 0;font-weight:600}
.cam-save{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0;padding:10px 12px;border:2px solid #e0a800;background:#fff8dc;border-radius:12px}
.cam-save select{width:auto}
.cam-msg{font-size:13.5px;margin:6px 0}.cam-msg.ok{color:#1e7a4a;font-weight:700}.cam-msg.err{color:#b3261e}
.cam-tips{font-size:13px;color:var(--ink-muted);line-height:1.55;padding-left:20px;margin:10px 0 0}
@media print{.cam-card{display:none!important}}

.cam-cheer{position:absolute;left:10px;right:10px;top:50%;transform:translateY(-50%) scale(.9);text-align:center;font-size:clamp(20px,5vw,34px);font-weight:800;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.cam-cheer.on{opacity:1;transform:translateY(-50%) scale(1)}
#pageCamera{margin-bottom:6px}
.mode-tabs{overflow-x:auto}
.mode-tab{white-space:nowrap}

/* ---- extras: achievements, charts, safety, team, voice ---- */
.wow-card{margin-bottom:16px}
.wow-sub{font-size:13px;color:var(--ink-muted);line-height:1.55;margin:6px 0 10px}
.wow-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:8px 0 14px}
.wow-tiles>div{background:var(--accent-soft);border-radius:12px;padding:12px;text-align:center}
.wow-tiles b{display:block;font-size:26px;color:var(--accent);line-height:1.1;word-break:break-all}
.wow-tiles span{font-size:12px;color:var(--ink-muted)}
.wow-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:12px}
.wow-badge{border:1px dashed var(--line);border-radius:12px;padding:10px;text-align:center;opacity:.65}
.wow-badge i{display:block;font-style:normal;font-size:26px;color:var(--ink-muted)}
.wow-badge b{display:block;font-size:12.5px}.wow-badge span{font-size:11px;color:var(--ink-muted)}
.wow-badge.on{border:1px solid #e0b400;background:#FFF6CC;opacity:1}.wow-badge.on i{color:#c79100}
.wow-badge.on b,.wow-badge.on span{color:#4a3b00}
.wow-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.wow-msg{font-size:12.5px;color:var(--accent)}
.wow-chart{width:100%;height:auto;display:block}
.wow-chart .gl{stroke:var(--line);stroke-width:1}.wow-chart .ax{fill:var(--ink-muted);font-size:11px}
.wow-chart .bar{fill:var(--accent)}.wow-chart .ln{fill:none;stroke:#e08a00;stroke-width:2.5}.wow-chart .dot{fill:#e08a00;stroke:var(--surface);stroke-width:1.5}
.wow-legend{font-size:12px;color:var(--ink-muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wow-legend .k{display:inline-block;width:14px;height:8px;border-radius:2px;background:var(--accent)}.wow-legend .k.ln{background:#e08a00;margin-left:10px}
.wow-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wow-row input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.wow-members{display:grid;gap:6px;margin:6px 0}
.wow-mem{display:flex;gap:10px;align-items:baseline;border-bottom:1px solid var(--line);padding:6px 0;font-size:14px}.wow-mem span{flex:1}.wow-mem small{color:var(--ink-muted)}.wow-mem.me{font-weight:700;color:var(--accent)}
.wow-status{padding:12px 16px}.wow-status:empty{display:none}
.wow-line{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:14px}.wow-line.ok{color:var(--accent);font-weight:600}
.wow-note{border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13.5px;line-height:1.5;background:var(--surface-2)}
.wow-note.warn{background:var(--warn-soft);color:var(--warn)}.wow-note.bad{background:var(--danger-soft);color:var(--danger)}
.wow-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.wow-box{background:var(--surface);color:var(--ink);border-radius:16px;max-width:520px;width:100%;max-height:92vh;overflow:auto;padding:20px;box-shadow:var(--shadow)}
.wow-box h3{margin:0 0 4px}.wow-qs{display:grid;gap:8px;margin:10px 0}
.wow-q{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:14px;line-height:1.45;cursor:pointer}
.wow-q input{margin-top:3px;width:18px;height:18px}
.wow-res{border-radius:10px;padding:12px;font-size:14px;line-height:1.5;margin:8px 0;font-weight:600}
.wow-res.clear{background:var(--accent-soft);color:var(--accent)}.wow-res.skip{background:var(--warn-soft);color:var(--warn)}.wow-res.urgent{background:var(--danger-soft);color:var(--danger)}
.wow-fine{font-size:11.5px;color:var(--ink-muted);margin:8px 0 0}
.wow-mic{position:fixed;left:12px;bottom:12px;z-index:60;display:flex;gap:8px;align-items:center;max-width:calc(100vw - 24px)}
.wow-mic button{width:52px;height:52px;border-radius:50%;border:none;background:var(--accent);color:var(--accent-ink);font-size:22px;cursor:pointer;box-shadow:var(--shadow);flex:none}
.wow-mic.on button{background:var(--danger);animation:wowp 1s infinite}
.wow-miclabel{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:6px 10px;font-size:12.5px;max-width:260px}.wow-miclabel:empty{display:none}
@keyframes wowp{50%{transform:scale(1.1)}}
@media print{.wow-mic,.wow-status,.wow-modal,#wowProgress{display:none!important}}

/* ---- camera games ---- */
#pageGames{display:block}
.game-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:8px 0}
.game-opts label{display:block;font-size:12.5px;color:var(--ink-muted);margin-bottom:3px}
.game-opts select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.game-stage{position:relative;width:100%;background:#14201D;border-radius:12px;overflow:hidden;aspect-ratio:4/3;max-width:720px;margin:10px 0}
.game-stage video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.game-stage canvas{width:100%;height:100%;display:block;transform:none}
.game-over{z-index:5;position:absolute;inset:0;background:rgba(10,24,20,.82);display:flex;align-items:center;justify-content:center;padding:12px;color:#fff;text-align:center}
.game-over[hidden]{display:none}
.game-res{max-width:440px;font-size:14px;line-height:1.5}.game-res h3{margin:0;color:#FFD43B}
.game-big{font-size:64px;font-weight:800;line-height:1.05}.game-sub{margin:8px 0 12px;color:#DCEAE3;font-size:13px}
.game-res select{padding:6px 8px;border-radius:8px}.game-res .cam-btns{justify-content:center;margin-top:12px}
.game-msg{font-size:13.5px;margin:8px 0;min-height:1.2em}.game-msg.ok{color:var(--accent);font-weight:600}.game-msg.err{color:var(--danger);font-weight:600}
@media print{#pageGames{display:none!important}}

.echat-msg.bot{position:relative;margin-left:36px}.echat-msg.bot::before{content:"";position:absolute;left:-38px;top:0;width:30px;height:30px;border-radius:50%;background:url(/avatar-hafifi.jpg) center/cover;border:2px solid var(--accent)}

/* exercise camera: close button + hand control */
.cam-x{position:absolute;left:10px;top:10px;z-index:9;width:44px;height:44px;border-radius:12px;border:2px solid rgba(255,255,255,.8);background:rgba(10,10,14,.65);color:#fff;font-size:22px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.cam-x:hover,.cam-x:focus-visible{background:rgba(255,77,94,.92);outline:none}
.cam-stage:not(.on) .cam-x{display:none}
.cam-handbar{position:absolute;left:8px;right:8px;bottom:62px;z-index:7;display:flex;gap:10px}
.cam-handbar[hidden]{display:none}
.cam-hb{position:relative;flex:1;min-height:64px;border-radius:14px;border:3px solid #fff;background:rgba(10,10,14,.6);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.cam-hb span{position:relative;z-index:1;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.cam-hb i{position:absolute;left:0;bottom:0;height:100%;width:0;background:rgba(255,77,94,.75)}
.cam-hb.on{border-color:#ffd43b}
.cam-ptr{position:absolute;z-index:8;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,212,59,.9);border:3px solid #fff;pointer-events:none}
.cam-ptr[hidden]{display:none}

/* camera card: small pause/stop, slide arrows, exercise name */
.cam-mini{position:absolute;left:8px;top:8px;z-index:9;display:flex;gap:6px}
.cam-mini button{width:34px;height:34px;border-radius:10px;border:1.5px solid rgba(255,255,255,.75);background:rgba(10,10,14,.6);color:#fff;font-size:15px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.cam-mini button:disabled{opacity:.4;cursor:default}
.cam-mini button:hover:not(:disabled),.cam-mini button:focus-visible{background:rgba(31,134,171,.9);outline:none}
.cam-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:44px;height:64px;border:0;border-radius:12px;background:rgba(10,10,14,.5);color:#fff;font-size:38px;line-height:1;cursor:pointer;padding:0 0 6px}
.cam-arrow.l{left:6px}.cam-arrow.r{right:6px}
.cam-arrow:hover,.cam-arrow:focus-visible{background:rgba(31,134,171,.85);outline:none}
.cam-name{position:absolute;left:84px;right:90px;top:10px;z-index:7;text-align:center;color:#fff;font-weight:700;font-size:13.5px;text-shadow:0 1px 5px rgba(0,0,0,.8);pointer-events:none;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-stage:not(.on) .cam-mini,.cam-stage:not(.on) .cam-name{display:none}
.cam-stage:not(.on) .cam-arrow{top:auto;bottom:10px;transform:none}
/* pause + stop: small, at the bottom centre of the camera */
.cam-mini{left:50%;right:auto;top:auto;bottom:10px;transform:translateX(-50%);gap:10px}
.cam-mini button{width:40px;height:40px;font-size:17px}
.cam-stage .cam-status{bottom:58px}
.cam-name{top:10px;left:12px;right:84px}

.cam-cat{float:right;height:92px;width:auto;margin:0 0 6px 12px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.cam-cat[hidden]{display:none}
.ill-empty{display:block;margin:6px auto 10px;max-width:190px;width:60%;height:auto}

.wow-bimg{display:block;width:76px;height:auto;margin:0 auto 6px;filter:grayscale(1) brightness(.7);opacity:.7}
.wow-badge.on .wow-bimg{filter:drop-shadow(0 4px 10px rgba(255,212,59,.4));opacity:1}
.wow-safe-img{display:block;width:130px;max-width:40%;height:auto;margin:0 auto 6px}