html,body{margin:0;padding:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f8fafc}
.container{display:grid;grid-template-columns:1fr;gap:16px;padding:16px}
.card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.04);background:#fff}
.header{padding:10px 12px;font-weight:600;background:#fafafa;border-bottom:1px solid #eee}
.content{padding:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.input{padding:10px 12px;border:1px solid #d1d5db;border-radius:10px}
.btn{padding:10px 14px;border-radius:10px;border:1px solid #d1d5db;background:#fff;cursor:pointer;font-size:14px;white-space:nowrap}
@media (max-width:768px){.btn{padding:8px 12px;font-size:13px}.toolbar{gap:6px !important}}
@media (max-width:480px){.btn{padding:6px 10px;font-size:12px}.toolbar{gap:4px !important;flex-wrap:wrap;max-width:95vw}.videoControls{flex-wrap:wrap;padding:6px}.videoControls button{padding:4px 8px;font-size:11px}.videoControls .playbackBtns{gap:2px}.videoControls .speedBtns{gap:2px}}
.btn.primary{background:#111;color:#fff;border-color:#111}
.btn.recording{background:#dc2626;color:#fff;border-color:#dc2626;animation:pulse 1.5s infinite}
.btn.clipping{background:#f97316;color:#fff;border-color:#f97316}
.btn:disabled{opacity:.6;cursor:not-allowed}
#btnBgBlur.active{background:#8b5cf6;color:#fff;border-color:#8b5cf6}
.motion-dropdown{position:relative;display:inline-block}
.motion-menu{position:relative;top:0;left:0;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;display:none;min-width:160px;margin-top:6px}
.motion-menu button{display:block;width:100%;padding:10px 16px;border:none;background:none;text-align:left;cursor:pointer;font-size:14px;color:#111;transition:background 0.2s}
.motion-menu button:hover{background:#f3f4f6}
.motion-menu button:first-child{border-radius:8px 8px 0 0}
.motion-menu button:last-child{border-radius:0 0 8px 8px}
.motion-type-btn{background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;transition:all 0.2s}
.motion-type-btn:hover{background:#e5e7eb}
.motion-type-btn.active{background:#10b981;color:#fff;border-color:#10b981}
.motion-type-btn:disabled{opacity:0.5;cursor:not-allowed}
.motion-menu .menu-divider{padding:8px 16px 4px;font-size:11px;font-weight:600;color:#6b7280;background:#f9fafb;border-top:1px solid #e5e7eb;margin-top:4px;cursor:default}
.motion-menu .menu-divider:first-child{border-top:none;margin-top:0}
.motion-menu .menu-group{padding:6px 16px 4px;font-size:12px;font-weight:700;color:#374151;background:#e5e7eb;border-top:1px solid #d1d5db;margin-top:4px;cursor:default}
.motion-menu .menu-group:first-child{border-top:none;margin-top:0}
.motion-menu .menu-subgroup{padding:4px 16px 3px 24px;font-size:11px;font-weight:600;color:#6b7280;background:#f3f4f6;cursor:default}
.motion-led{position:absolute;top:10px;right:10px;background:rgba(0,0,0,0.8);padding:8px 12px;border-radius:20px;display:flex;align-items:center;gap:8px;z-index:100;font-size:13px;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.led-indicator{width:10px;height:10px;border-radius:50%;background:#10b981;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.9)}}
.motion-status-indicator{position:absolute;top:10px;left:10px;background:rgba(0,0,0,0.9);padding:8px 12px;border-radius:20px;display:flex;align-items:center;gap:8px;z-index:100;font-size:13px;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.status-led{width:10px;height:10px;border-radius:50%;background:#6b7280}
.status-led.active{background:#10b981;animation:pulse 1.5s ease-in-out infinite}
#remoteVideo,#poseResultVideo{position:absolute;top:0;left:0;width:100% !important;height:100% !important;object-fit:contain !important;transform:none !important;z-index:1 !important}
#offCanvas{z-index:2 !important}
.btn.disabled{opacity:.5;cursor:not-allowed;background:#e5e7eb;color:#9ca3af}
.upload-progress-overlay{position:fixed;bottom:20px;left:20px;width:auto;height:auto;background:transparent;display:none;z-index:1000}
.upload-progress-overlay.active{display:block}
.upload-progress-box{background:#fff;border-radius:12px;padding:16px 20px;max-width:280px;box-shadow:0 4px 20px rgba(0,0,0,0.4)}
.upload-progress-title{font-size:14px;font-weight:600;margin-bottom:12px;color:#111}
.upload-progress-bar{width:100%;height:20px;background:#e5e7eb;border-radius:10px;overflow:hidden;margin-bottom:10px}
.upload-progress-fill{height:100%;background:linear-gradient(90deg,#f97316,#fb923c);transition:width 0.3s ease;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600}
.upload-progress-text{color:#6b7280;font-size:12px;text-align:center}
.hint{color:#6b7280;font-size:12px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
.gridChat{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;height:calc(100vh - 32px);padding:16px}
.tile{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#000;position:relative}
#instructorTile{grid-column:1;grid-row:1}
#memberTile{grid-column:2;grid-row:1}
#contentTile{grid-column:1;grid-row:2}
#analysisTile{grid-column:2;grid-row:2}
body.role-member #contentTile{grid-column:2}
body.role-member #analysisTile{grid-column:1}
#memberVideoReview{position:absolute;inset:0;z-index:1}
#memberReviewVideo{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;z-index:1}
#memberDrawingCanvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100 !important}
#memberTile.portrait-mode,#analysisTile.portrait-mode{aspect-ratio:auto}
#memberTile.portrait-mode video,#analysisTile.portrait-mode video,#analysisTile.portrait-mode canvas{position:absolute;top:0;left:0;width:100% !important;height:100% !important;object-fit:contain !important;transform:none !important}
.tile .label{position:absolute;top:8px;left:10px;z-index:10;background:rgba(0,0,0,.55);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px}
video,canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#pdfContainer{position:absolute;inset:0;z-index:100 !important}
#pdfCanvas{z-index:101 !important}
.toolbar-main{position:absolute;top:40px;left:10px;display:flex;gap:8px;z-index:150}
.toolbar-panel{position:absolute;top:85px;left:10px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.15);display:none;z-index:160;min-width:260px;max-width:90vw;max-height:min(350px,calc(100vh - 120px));overflow-y:auto !important;overflow-x:visible}
.toolbar-panel.open{display:block}
.panel-header{padding:12px 16px;font-weight:600;font-size:14px;background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:12px 12px 0 0;display:flex;justify-content:space-between;align-items:center}
.panel-close{background:none;border:none;font-size:18px;cursor:pointer;color:#6b7280;padding:0 4px}
.panel-close:hover{color:#111}
.panel-section{padding:8px 12px;border-bottom:1px solid #f3f4f6}
.panel-section:last-child{border-bottom:none}
.panel-section-title{font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:8px}
.panel-buttons{display:flex;flex-direction:column;gap:6px}
.panel-buttons .btn{width:100%;text-align:left}
.panel-row{display:flex;gap:6px;flex-wrap:wrap}
.btn-menu{font-size:16px;padding:10px 12px}
.toolbar{position:absolute;top:40px;left:10px;display:flex;gap:8px;z-index:150;flex-wrap:wrap;max-width:80vw}
.settings{position:absolute;top:50px;right:10px;z-index:30;background:#fff;color:#111;border:1px solid #e5e7eb;border-radius:12px;padding:12px;min-width:340px;box-shadow:0 8px 24px rgba(0,0,0,.08);display:none}
.recordingPanel{position:absolute;top:50px;right:10px;z-index:30;background:#fff;color:#111;border:1px solid #e5e7eb;border-radius:12px;padding:12px;min-width:300px;box-shadow:0 8px 24px rgba(0,0,0,.08);display:none}
.recStatus{color:#dc2626;font-weight:600;font-size:13px;margin-top:8px}
.kpiBar{position:absolute;bottom:10px;left:10px;right:10px;display:flex;gap:10px;flex-wrap:wrap;z-index:50 !important}
.adultKpiPanel{position:absolute;inset:40px 10px 10px 10px;background:rgba(0,0,0,0.85);border-radius:12px;padding:12px;z-index:60;display:flex;flex-direction:column;overflow:hidden}
.adultKpiHeader{color:#fff;font-size:14px;font-weight:600;margin-bottom:10px;text-align:center;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.2)}
.adultKpiGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:1;overflow-y:auto}
.jointRow{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.1);padding:6px 8px;border-radius:6px}
.jointDot{width:12px;height:12px;border-radius:50%;background:#6b7280;flex-shrink:0}
.jointDot.good{background:#10b981}
.jointDot.fair{background:#f59e0b}
.jointDot.poor{background:#ef4444}
.jointName{color:#d1d5db;font-size:10px;flex:1;white-space:nowrap}
.jointValue{color:#fff;font-size:11px;font-weight:600;min-width:35px;text-align:right}
.adultKpiSummary{display:flex;justify-content:center;gap:16px;margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.2)}
.summaryItem{color:#fff;font-size:12px}
.summaryScore{color:#10b981;font-size:13px;font-weight:700}
.muscleActivationPanel{position:absolute;inset:40px 10px 10px 10px;background:rgba(0,0,0,0.92);border-radius:12px;padding:8px;z-index:60;display:none;flex-direction:column;gap:4px;overflow-y:auto}
.goalSettingPanel{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:10px;margin-top:10px;display:none}
.goalSettingPanel.visible{display:block}
.goalSettingPanel .panelTitle{color:#fff;font-size:12px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.goalSettingRow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.goalSettingRow .partLabel{color:#d1d5db;font-size:11px;width:55px;flex-shrink:0}
.goalSettingRow input[type="range"]{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,0.2);border-radius:3px;outline:none}
.goalSettingRow input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:#3b82f6;border-radius:50%;cursor:pointer}
.goalSettingRow .goalValue{color:#fff;font-size:11px;width:40px;text-align:right;flex-shrink:0}
.goalSettingPanel.readonly input[type="range"]{pointer-events:none;opacity:0.6}
.goalMiniOverlay{position:fixed;top:200px;left:10px;bottom:auto;right:auto;background:rgba(0,0,0,0.85);border-radius:10px;padding:12px 14px;z-index:10001;display:none;min-width:140px;min-height:80px;max-width:500px;max-height:700px;width:180px;height:auto;cursor:move;user-select:none;border:1px solid rgba(255,255,255,0.2);box-shadow:0 4px 12px rgba(0,0,0,0.4);transition:box-shadow 0.2s;overflow:hidden;--mini-scale:1}
.goalMiniOverlay:hover{box-shadow:0 6px 20px rgba(0,0,0,0.5);border-color:rgba(255,255,255,0.3)}
.goalMiniOverlay.dragging{opacity:0.9;box-shadow:0 8px 25px rgba(0,0,0,0.6)}
.goalMiniOverlay.visible{display:block}
.goalMiniOverlay .resize-handle{position:absolute;bottom:0;right:0;width:18px;height:18px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,rgba(255,255,255,0.4) 50%);border-radius:0 0 10px 0}
.goalMiniOverlay .resize-handle:hover{background:linear-gradient(135deg,transparent 50%,rgba(255,255,255,0.7) 50%)}
.goalMiniOverlay .resize-handle-e{position:absolute;top:20%;right:0;width:6px;height:60%;cursor:ew-resize;background:rgba(255,255,255,0.2);border-radius:0 10px 10px 0}
.goalMiniOverlay .resize-handle-e:hover{background:rgba(255,255,255,0.5)}
.goalMiniOverlay .resize-handle-s{position:absolute;bottom:0;left:20%;width:60%;height:6px;cursor:ns-resize;background:rgba(255,255,255,0.2);border-radius:0 0 10px 10px}
.goalMiniOverlay .resize-handle-s:hover{background:rgba(255,255,255,0.5)}
.goalMiniOverlay .mini-content{transform-origin:top left}
.goalMiniRow{display:flex;align-items:center;gap:calc(6px * var(--mini-scale));margin-bottom:calc(5px * var(--mini-scale))}
.goalMiniRow:last-child{margin-bottom:0}
.goalMiniRow .miniLabel{color:#d1d5db;font-size:calc(10px * var(--mini-scale));width:calc(45px * var(--mini-scale));flex-shrink:0}
.goalMiniRow .miniBarBg{flex:1;height:calc(10px * var(--mini-scale));background:rgba(255,255,255,0.15);border-radius:calc(3px * var(--mini-scale));overflow:hidden;position:relative}
.goalMiniRow .miniBarFill{height:100%;border-radius:calc(3px * var(--mini-scale));transition:width 0.3s ease;position:absolute;left:0;top:0;z-index:1}
.miniBarRealtime{position:absolute;z-index:2;left:0;top:0;height:100%;width:0%;opacity:0.75;transition:width 0.1s ease-out;pointer-events:none;border-radius:3px}
.miniBarRealtime.flexor{background:rgba(239,68,68,0.8);box-shadow:0 0 6px rgba(239,68,68,0.5)}
.miniBarRealtime.extensor{background:rgba(59,130,246,0.8);box-shadow:0 0 6px rgba(59,130,246,0.5)}
.miniBarRealtime.inactive{width:0% !important;opacity:0}
.miniHrRow{display:flex;align-items:center;justify-content:center;gap:calc(6px * var(--mini-scale));padding:calc(6px * var(--mini-scale)) calc(10px * var(--mini-scale));background:rgba(239,68,68,0.15);border-radius:calc(6px * var(--mini-scale));margin-top:calc(8px * var(--mini-scale));border:1px solid rgba(239,68,68,0.2)}
.miniHrIcon{font-size:calc(16px * var(--mini-scale))}
.miniHrValue{font-size:calc(20px * var(--mini-scale));font-weight:700;color:#ef4444;min-width:calc(36px * var(--mini-scale));text-align:center}
.miniHrUnit{font-size:calc(11px * var(--mini-scale));color:#9ca3af}
.miniHrRow.warning .miniHrValue{color:#f97316}
.miniHrRow.danger .miniHrValue{color:#dc2626}
.goalMiniRow .miniBarFill.shoulder{background:linear-gradient(90deg,#ef4444,#f87171)}
.goalMiniRow .miniBarFill.elbow{background:linear-gradient(90deg,#eab308,#facc15)}
.goalMiniRow .miniBarFill.hip{background:linear-gradient(90deg,#22c55e,#4ade80)}
.goalMiniRow .miniBarFill.knee{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.goalMiniRow .miniPercent{color:#fff;font-size:calc(10px * var(--mini-scale));font-weight:600;width:calc(32px * var(--mini-scale));text-align:right;flex-shrink:0}
.goalMiniRow.complete .miniBarFill{background:linear-gradient(90deg,#10b981,#34d399)}
.goalMiniRow.complete .miniPercent{color:#34d399}
.cumulativeUsagePanel{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.15)}
.cumulativeUsagePanel .panelHeader{color:#fff;font-size:13px;font-weight:600;text-align:center;padding:6px 0 8px;display:flex;justify-content:space-between;align-items:center}
.cumulativeUsagePanel .panelHeader .badge{background:rgba(255,255,255,0.15);padding:3px 10px;border-radius:10px;font-size:11px;font-weight:normal}
.cumulativeSection{margin-bottom:8px}
.cumulativeSectionTitle{color:#9ca3af;font-size:11px;font-weight:600;text-transform:uppercase;padding:4px 0 3px;border-bottom:1px solid rgba(255,255,255,0.08);text-align:center}
.cumulativeGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.cumulativeSide{display:flex;flex-direction:column;gap:3px}
.cumulativeSideLabel{color:#9ca3af;font-size:10px;font-weight:600;text-align:center;margin-bottom:2px}
.cumulativeRow{display:flex;align-items:center;gap:4px;padding:4px 0}
.cumulativeRow .partName{color:#d1d5db;font-size:11px;width:55px;flex-shrink:0}
.cumulativeRow.left .partName{text-align:right}
.cumulativeRow.right .partName{text-align:left}
.cumulativeRow .barContainer{flex:1;height:14px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden;position:relative}
.cumulativeRow.left .barContainer{transform:scaleX(-1)}
.cumulativeRow .barFill{height:100%;border-radius:4px;transition:width 0.3s ease;min-width:0}
.cumulativeRow .percentLabel{color:#fff;font-size:11px;font-weight:600;min-width:40px;flex-shrink:0}
.cumulativeRow.left .percentLabel{text-align:left}
.cumulativeRow.right .percentLabel{text-align:right}
.barFill.shoulder-left{background:linear-gradient(90deg,#ef4444,#f87171)}
.barFill.shoulder-right{background:linear-gradient(90deg,#f97316,#fb923c)}
.barFill.elbow-left{background:linear-gradient(90deg,#eab308,#facc15)}
.barFill.elbow-right{background:linear-gradient(90deg,#84cc16,#a3e635)}
.barFill.hip-left{background:linear-gradient(90deg,#22c55e,#4ade80)}
.barFill.hip-right{background:linear-gradient(90deg,#14b8a6,#2dd4bf)}
.barFill.knee-left{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.barFill.knee-right{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.muscleActivationPanel .panelHeader{color:#fff;font-size:14px;font-weight:600;text-align:center;padding:6px 0 8px;border-bottom:1px solid rgba(255,255,255,0.15);display:flex;justify-content:space-between;align-items:center}
.muscleActivationPanel .panelHeader .badge{background:rgba(255,255,255,0.15);padding:3px 10px;border-radius:10px;font-size:11px;font-weight:normal}
.muscleSection{margin-bottom:2px}
.muscleSectionTitle{color:#9ca3af;font-size:11px;font-weight:600;text-transform:uppercase;padding:5px 0 3px;border-bottom:1px solid rgba(255,255,255,0.08)}
.muscleRow{display:flex;align-items:center;gap:4px;padding:4px 0}
.muscleRow .muscleName{color:#d1d5db;font-size:11px;width:100px;text-align:right;flex-shrink:0}
.muscleRow .barContainer{flex:1;display:flex;align-items:center;gap:2px}
.muscleRow .barLeft{flex:1;height:12px;background:rgba(255,255,255,0.1);border-radius:2px 0 0 2px;overflow:hidden;display:flex;justify-content:flex-end}
.muscleRow .barRight{flex:1;height:12px;background:rgba(255,255,255,0.1);border-radius:0 2px 2px 0;overflow:hidden}
.muscleRow .barFill{height:100%;transition:width 0.2s ease}
.muscleRow .barLeft .barFill{border-radius:2px 0 0 2px}
.muscleRow .barRight .barFill{border-radius:0 2px 2px 0}
.muscleRow .barDivider{width:2px;height:16px;background:#6b7280;flex-shrink:0}
.muscleRow .valueLeft{color:#fff;font-size:11px;width:32px;text-align:right;flex-shrink:0}
.muscleRow .valueRight{color:#fff;font-size:11px;width:32px;text-align:left;flex-shrink:0}
.barFill.flexor{background:linear-gradient(90deg,#ef4444,#f87171)}
.barFill.extensor{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.barFill.abductor{background:linear-gradient(90deg,#10b981,#34d399)}
.barFill.adductor{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.barFill.dorsiflexor{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.barFill.plantarflexor{background:linear-gradient(90deg,#ec4899,#f472b6)}
.muscleLegend{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0;border-top:1px solid rgba(255,255,255,0.1);justify-content:center}
.legendItem{display:flex;align-items:center;gap:3px;font-size:8px;color:#9ca3af}
.legendDot{width:8px;height:8px;border-radius:2px}
.legendDot.flexor{background:#ef4444}
.legendDot.extensor{background:#3b82f6}
.legendDot.abductor{background:#10b981}
.legendDot.adductor{background:#8b5cf6}
.usageSection{flex:1;display:flex;flex-direction:column;min-height:0}
.usageSectionTitle{color:#fff;font-size:11px;font-weight:600;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;gap:6px}
.usageSection.recent .usageSectionTitle{color:#10b981}
.usageSection.total .usageSectionTitle{color:#3b82f6}
.usageSectionTitle .badge{background:rgba(255,255,255,0.15);padding:2px 6px;border-radius:8px;font-size:9px;font-weight:normal;color:#d1d5db}
.usageGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}
.usageSide{display:flex;flex-direction:column;gap:2px}
.usageSideLabel{color:#9ca3af;font-size:9px;font-weight:600;text-align:center;margin-bottom:2px}
.usageRow{display:flex;align-items:center;gap:3px;height:16px}
.usagePartName{color:#d1d5db;font-size:8px;min-width:28px}
.usageRow.left .usagePartName{text-align:right}
.usageRow.right .usagePartName{text-align:left}
.usageBarContainer{flex:1;height:10px;background:rgba(255,255,255,0.1);border-radius:5px;overflow:hidden;position:relative}
.usageRow.left .usageBarContainer{transform:scaleX(-1)}
.usageBarFill{height:100%;border-radius:5px;transition:width 0.3s ease;min-width:0;width:0}
.usageBarFill.shoulder{background:linear-gradient(90deg,#ef4444,#f87171)}
.usageBarFill.elbow{background:linear-gradient(90deg,#f97316,#fb923c)}
.usageBarFill.wrist{background:linear-gradient(90deg,#eab308,#facc15)}
.usageBarFill.hip{background:linear-gradient(90deg,#22c55e,#4ade80)}
.usageBarFill.knee{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.usageBarFill.ankle{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.usagePercent{color:#fff;font-size:8px;font-weight:600;min-width:24px;text-align:center}
.usageDivider{height:1px;background:rgba(255,255,255,0.1);margin:2px 0}
.pill{background:#111;color:#fff;padding:6px 10px;border-radius:999px;font-size:12px}
.tabButtons{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;align-items:center}
.tabButtons::before{content:'▼ Share';display:block;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;padding:5px 18px;border-radius:0 0 10px 10px;font-size:11px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(249,115,22,0.5);margin-bottom:2px;letter-spacing:0.5px}
.tabButtonsInner{display:flex;gap:4px;background:rgba(0,0,0,0.85);padding:6px 8px;border-radius:0 0 8px 8px;transform:translateY(-100%);transition:transform 0.3s ease;opacity:0;pointer-events:none}
.tabButtons.open .tabButtonsInner{transform:translateY(0);opacity:1;pointer-events:auto}
.tabBtn{padding:8px 16px;font-size:12px;background:rgba(100,100,100,0.3);color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.2);cursor:pointer;border-radius:6px;transition:all 0.3s;font-weight:500}
.tabBtn:hover{background:rgba(150,150,150,0.4);color:rgba(255,255,255,0.8)}
.tabBtn.active{background:#f97316;color:#fff;border-color:#f97316;box-shadow:0 2px 8px rgba(249,115,22,0.4)}
.tabContent{display:none;position:absolute;inset:0;width:100%;height:100%}
.tabContent.active{display:block}
#pdfViewer{position:absolute;inset:0;width:100%;height:100%;background:#2a2a2a;display:flex;align-items:center;justify-content:center;overflow:hidden}
#pdfCanvas{max-width:100%;max-height:100%;object-fit:contain}
.pdfControlsTab{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:32px;background:rgba(0,0,0,0.8);border-top-left-radius:12px;border-top-right-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:200;padding:0 20px;transition:all 0.3s ease;box-shadow:0 -2px 10px rgba(0,0,0,0.3)}
.pdfControlsTab:hover{background:rgba(59,130,246,0.9)}
.pdfControlsTab .tabHandle{color:#fff;font-size:13px;font-weight:600;user-select:none}
.pdfControlsPanel{position:absolute;bottom:-70px;left:50%;transform:translateX(-50%);z-index:199;transition:bottom 0.3s ease-out}
.pdfControlsPanel.open{bottom:32px}
.pdfControls{display:flex;gap:8px;background:rgba(0,0,0,0.85);padding:10px 16px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.3);border:2px solid rgba(255,255,255,0.1);pointer-events:auto}
.tile.fullscreen{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100vw !important;height:100vh !important;z-index:9999 !important;border-radius:0 !important;grid-column:auto !important;grid-row:auto !important}
.tile.fullscreen video,.tile.fullscreen canvas{object-fit:contain !important}
.tile.fullscreen .label{font-size:16px;padding:10px 16px}
.fullscreen-hint{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);color:#fff;padding:8px 16px;border-radius:8px;font-size:12px;z-index:10000;animation:fadeOut 2s forwards;pointer-events:none}
@keyframes fadeOut{0%,70%{opacity:1}100%{opacity:0}}
.pdfControls button{padding:8px 16px;background:#3b82f6;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;transition:all 0.2s;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.pdfControls button:hover:not(:disabled){background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.3)}
.pdfControls button:disabled{opacity:0.4;cursor:not-allowed;background:#6b7280}
.pdfInfo{color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;padding:0 12px;background:rgba(255,255,255,0.1);border-radius:6px;min-width:100px;justify-content:center}
.pdfInfo{color:#fff;padding:6px 12px;font-size:12px}
#pdfFileInput{display:none}
.emptyPdf{color:#888;font-size:14px;text-align:center}
#reviewVideo{position:absolute;top:0;left:0;right:0;bottom:120px;width:100%;height:calc(100% - 120px);object-fit:contain;background:#000}
#drawingCanvas{position:absolute;top:0;left:0;right:0;bottom:120px;width:100%;height:100%;pointer-events:none;z-index:5}
#drawingCanvas.drawing-active{pointer-events:auto;touch-action:none}
#videoReviewContainer{display:flex;width:100%;height:100%;position:relative}
.videoMainArea{flex:1;position:relative;min-width:0}
.videoListSidebar{width:0;background:rgba(0,0,0,0.9);border-left:1px solid #333;overflow:hidden;display:flex;flex-direction:column;z-index:10;transition:width 0.3s ease}
.videoListSidebar.open{width:200px;overflow-y:auto}
.videoListTab{position:absolute;right:0;top:50%;transform:translateY(-50%);width:28px;height:80px;background:linear-gradient(180deg,#f97316 0%,#ea580c 100%);color:#fff;display:none;align-items:center;justify-content:center;writing-mode:vertical-rl;text-orientation:mixed;font-size:11px;font-weight:600;cursor:pointer;border-radius:8px 0 0 8px;box-shadow:-2px 0 8px rgba(0,0,0,0.3);user-select:none;z-index:15;transition:right 0.3s ease}
.videoListTab:active{background:linear-gradient(180deg,#fb923c 0%,#f97316 100%)}
.videoListTab.shifted{right:200px}
.videoListHeader{padding:12px;font-weight:600;font-size:13px;color:#fff;background:rgba(249,115,22,0.8);border-bottom:1px solid #444;text-align:center}
.videoListItems{flex:1;overflow-y:auto}
.videoListItem{padding:10px;cursor:pointer;border-bottom:1px solid #333;transition:background 0.2s;display:flex;flex-direction:column;gap:6px}
.videoListItem:hover{background:rgba(255,255,255,0.1)}
.videoListItem.active{background:rgba(249,115,22,0.3);border-left:3px solid #f97316}
.videoThumb{font-size:11px;color:#ccc;margin-bottom:4px}
.videoFileName{font-size:10px;color:#888;word-break:break-all}
.videoItemButtons{display:flex;gap:4px;margin-top:4px}
.videoDownloadBtn,.videoDeleteBtn{padding:4px 8px;font-size:11px;border:1px solid #555;background:#333;color:#fff;border-radius:4px;cursor:pointer;transition:background 0.2s;flex:1}
.videoDownloadBtn:hover{background:#f97316;border-color:#f97316}
.videoDeleteBtn:hover{background:#dc2626;border-color:#dc2626}
.member-stats{display:none !important}
.videoControls{position:absolute;bottom:10px;left:10px;right:10px;z-index:30;display:flex;gap:6px;align-items:center;background:rgba(0,0,0,0.8);padding:8px;border-radius:8px;flex-wrap:wrap;opacity:0.3;transition:opacity 0.3s ease;pointer-events:auto}
.videoControls:hover{opacity:1}
.videoControls.always-visible{opacity:1}
.videoControls .playbackBtns{display:flex;gap:4px}
.videoControls button{padding:6px 12px;background:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;white-space:nowrap;min-width:32px;min-height:32px;touch-action:manipulation;user-select:none}
.videoControls button:disabled{opacity:.5;cursor:not-allowed}
.frameControls{position:relative;z-index:35 !important;display:flex;gap:5px;align-items:center}
.frameControls button{pointer-events:auto !important;position:relative;z-index:36 !important;cursor:pointer !important;min-width:40px;min-height:36px}
.videoControlsTab{position:absolute;bottom:0;left:0;right:0;height:32px;background:rgba(0,0,0,0.8);border-top-left-radius:12px;border-top-right-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:40;transition:all 0.3s ease;box-shadow:0 -2px 10px rgba(0,0,0,0.3)}
.videoControlsTab:hover{background:rgba(249,115,22,0.9)}
.tabHandle{color:#fff;font-size:13px;font-weight:600;user-select:none;text-transform:uppercase;letter-spacing:0.5px}
.videoControlsPanel{position:absolute;bottom:-150px;left:0;right:0;height:150px;background:rgba(0,0,0,0.95);border-top-left-radius:12px;border-top-right-radius:12px;padding:12px;z-index:39;transition:bottom 0.3s ease-out;overflow-y:auto;box-shadow:0 -4px 20px rgba(0,0,0,0.5)}
.videoControlsPanel.open{bottom:32px}
@media (max-width:768px){.videoControlsPanel{height:180px;bottom:-180px}}
@media (max-width:480px){.videoControlsPanel{height:200px;bottom:-200px;font-size:11px}.videoControlsTab{height:28px}.tabHandle{font-size:11px}}
.videoControls .timeline{flex:1;min-width:100px;height:6px;background:#555;border-radius:3px;position:relative;cursor:pointer}
.timelineContainer{flex:1;min-width:200px;height:40px;position:relative;background:rgba(0,0,0,0.4);border-radius:6px;padding:4px 8px;display:flex;align-items:center}
.timelineProgress{position:absolute;bottom:8px;left:8px;right:8px;height:4px;background:#555;border-radius:2px;overflow:hidden}
.timelineProgress .fill{height:100%;background:#f97316;border-radius:2px;transition:width 0.1s linear}
.timelineTicks{position:absolute;top:0;left:8px;right:8px;height:20px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
.timelineTick{width:1px;height:6px;background:#888}
.timelineTick.major{height:10px;background:#aaa}
.timelineLabel{position:absolute;top:-2px;font-size:9px;color:#aaa;transform:translateX(-50%)}
.timelineSlider{width:100%;height:8px;-webkit-appearance:none;appearance:none;background:transparent;outline:none;cursor:pointer;position:relative;z-index:2}
.timelineSlider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#f97316;border-radius:50%;cursor:pointer;transition:transform 0.1s;box-shadow:0 2px 6px rgba(0,0,0,0.3)}
.timelineSlider::-webkit-slider-thumb:hover{transform:scale(1.3)}
.timelineSlider::-moz-range-thumb{width:16px;height:16px;background:#f97316;border-radius:50%;cursor:pointer;border:none;transition:transform 0.1s;box-shadow:0 2px 6px rgba(0,0,0,0.3)}
.timelineSlider::-moz-range-thumb:hover{transform:scale(1.3)}
.frameInfo{color:#fff;font-size:11px;padding:4px 8px;background:rgba(0,0,0,0.6);border-radius:6px;white-space:nowrap;min-width:120px;text-align:center}
@media (max-width:480px){.frameInfo{font-size:10px;padding:3px 6px;min-width:100px}}
.videoControls .timeline .progress{height:100%;background:#f97316;border-radius:3px;pointer-events:none}
.videoControls .speedBtns{display:flex;gap:4px}
.videoControls .speedBtn.active{background:#f97316;color:#fff}
.remoteControlIndicator{position:absolute;top:80px;left:50%;transform:translateX(-50%);z-index:25;background:rgba(249,115,22,0.9);color:#fff;padding:8px 16px;border-radius:999px;font-size:12px;font-weight:600;animation:fadeInOut 2s}
@keyframes fadeInOut{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}
input[type="range"]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
input[type="range"]::-webkit-slider-track{background:#555;height:8px;border-radius:4px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#f97316;cursor:grab;margin-top:-5px}
input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing;background:#ea580c}
input[type="range"]::-moz-range-track{background:#555;height:8px;border-radius:4px}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#f97316;cursor:grab;border:none}
input[type="range"]::-moz-range-thumb:active{cursor:grabbing;background:#ea580c}
.clip-controls{display:flex;gap:8px;align-items:center}
.duration-selector{display:flex;gap:4px;background:rgba(0,0,0,0.1);padding:2px;border-radius:8px}
.duration-btn{padding:6px 10px;font-size:12px;border:1px solid #d1d5db;background:#fff;border-radius:6px;cursor:pointer;transition:all 0.2s}
.duration-btn.active{background:#f97316;color:#fff;border-color:#f97316}
.duration-btn:hover:not(.active){background:#f3f4f6}
.btn.clipping{background:#3b82f6;color:#fff;border-color:#3b82f6;animation:pulse 1.5s infinite}
.clip-countdown{font-size:14px;font-weight:600;color:#3b82f6;min-width:40px;text-align:center}
#btnStopClip{background:#dc2626;color:#fff;border-color:#dc2626}
.session-panel-container{position:fixed;top:0;right:0;height:100vh;z-index:500;display:flex;align-items:stretch}
.session-panel-tab{width:28px;background:linear-gradient(180deg,#f97316 0%,#ea580c 100%);color:#fff;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;text-orientation:mixed;font-size:12px;font-weight:600;cursor:pointer;border-radius:8px 0 0 8px;box-shadow:-2px 0 8px rgba(0,0,0,0.2);transition:all 0.2s ease;user-select:none}
.session-panel-tab:hover{width:32px;background:linear-gradient(180deg,#fb923c 0%,#f97316 100%)}
.session-panel{width:0;max-height:calc(100vh - 20px);background:#fff;border-left:1px solid #e5e7eb;box-shadow:-4px 0 20px rgba(0,0,0,0.15);overflow:hidden;transition:width 0.3s ease;display:flex;flex-direction:column}
.session-panel-container.open .session-panel{width:340px;overflow-y:auto}
.session-panel-header{padding:12px 14px;background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);color:#fff;flex-shrink:0}
.session-panel-header h3{margin:0 0 4px 0;font-size:14px;font-weight:700}
.session-panel-header .session-timer{font-size:20px;font-weight:700;font-family:'SF Mono','Consolas',monospace}
.session-load-btn{width:100%;padding:8px 12px;background:#fff;border:1px dashed #d1d5db;border-radius:6px;font-size:12px;cursor:pointer;transition:all 0.2s;margin-bottom:8px}
.session-load-btn:hover{background:#f9fafb;border-color:#f97316;color:#f97316}
.participant-inputs{padding:8px 12px;background:#fafafa;border-bottom:1px solid #e5e7eb;flex-shrink:0}
.participant-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.participant-row:last-child{margin-bottom:0}
.participant-row label{width:45px;font-size:11px;font-weight:600;color:#6b7280}
.participant-row input{flex:1;padding:4px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:11px}
.session-control{padding:10px 12px;background:#fff;border-bottom:1px solid #e5e7eb;flex-shrink:0}
.session-control-label{font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px}
.playlist-container{max-height:180px;overflow-y:auto;border:1px solid #e5e7eb;border-radius:6px;margin-bottom:8px}
.playlist-item{display:flex;align-items:center;gap:4px;padding:6px 8px;cursor:pointer;border-bottom:1px solid #f3f4f6;font-size:11px;transition:background 0.15s}
.playlist-item:last-child{border-bottom:none}
.playlist-item:hover{background:#f9fafb}
.playlist-item.playlist-selected{background:#f0fdf4;border-left:3px solid #10b981}
.playlist-item.playlist-active{background:#ecfdf5;animation:playlist-pulse 2s infinite}
.playlist-item.playlist-done{background:#f9fafb;color:#9ca3af}
.playlist-item.playlist-waiting{color:#374151}
.playlist-icon{font-size:12px;width:18px;text-align:center;flex-shrink:0}
.playlist-num{color:#9ca3af;font-size:10px;width:18px;flex-shrink:0}
.playlist-name{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playlist-time{font-family:'SF Mono','Consolas',monospace;font-size:10px;color:#6b7280;flex-shrink:0}
.playlist-timer{font-family:'SF Mono','Consolas',monospace;font-size:10px;color:#10b981;font-weight:700;flex-shrink:0}
.playlist-nav{display:flex;gap:4px;margin-bottom:6px}
.playlist-nav button{flex:1;padding:6px;border:none;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;color:#fff;transition:all 0.15s}
.playlist-nav button:disabled{opacity:0.35;cursor:not-allowed}
.playlist-nav .btn-pl-prev{background:#64748b}
.playlist-nav .btn-pl-play{background:#3b82f6}
.playlist-nav .btn-pl-stop{background:#ef4444}
.playlist-nav .btn-pl-next{background:#64748b}
@keyframes playlist-pulse{0%,100%{border-left-color:#10b981}50%{border-left-color:#6ee7b7}}
.pl-actions{display:flex;gap:2px;flex-shrink:0;opacity:0;transition:opacity 0.15s}
.playlist-item:hover .pl-actions{opacity:1}
.pl-btn{padding:2px 5px;font-size:9px;border:1px solid #d1d5db;background:#fff;border-radius:3px;cursor:pointer;line-height:1}
.pl-btn:hover{background:#f3f4f6}
.pl-play{color:#10b981;border-color:#a7f3d0}
.pl-play:hover{background:#ecfdf5}
.pl-del{color:#ef4444;border-color:#fecaca}
.pl-del:hover{background:#fef2f2}
.pl-stop{color:#ef4444;border-color:#fecaca}
.pl-stop:hover{background:#fef2f2}
.session-item-del{padding:1px 4px;font-size:9px;border:1px solid #e5e7eb;background:#fff;color:#9ca3af;border-radius:3px;cursor:pointer;line-height:1}
.session-item-del:hover{background:#fef2f2;color:#ef4444;border-color:#fecaca}
.session-input-row{display:flex;gap:6px;margin-bottom:8px}
.session-input-row input{flex:1;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:12px}
.session-input-row input:focus{outline:none;border-color:#f97316;box-shadow:0 0 0 2px rgba(249,115,22,0.1)}
.session-input-row input:disabled{background:#f3f4f6;color:#6b7280}
.session-buttons{display:flex;gap:6px}
.session-buttons button{flex:1;padding:8px 12px;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s}
.btn-session-start{background:#3b82f6;color:#fff}
.btn-session-start:hover:not(:disabled){background:#2563eb}
.btn-session-complete{background:#ef4444;color:#fff}
.btn-session-complete:hover:not(:disabled){background:#dc2626}
.btn-session-start:disabled,.btn-session-complete:disabled{opacity:0.4;cursor:not-allowed}
.current-session-status{margin-top:8px;padding:8px 10px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;display:none}
.current-session-status.active{display:block;animation:session-pulse 2s infinite}
@keyframes session-pulse{0%,100%{border-color:#bbf7d0}50%{border-color:#10b981}}
.session-status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.session-status-name{font-weight:600;font-size:12px;color:#166534}
.session-status-timer{font-family:'SF Mono','Consolas',monospace;font-size:14px;font-weight:700;color:#10b981}
.session-status-info{font-size:10px;color:#6b7280;margin-bottom:4px}
.session-note-input textarea{width:100%;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:10px;resize:none;height:36px}
.session-history{flex:1;overflow-y:auto;padding:8px 12px;min-height:0}
.session-history-title{font-size:11px;font-weight:600;color:#6b7280;margin-bottom:6px;display:flex;justify-content:space-between}
.session-history-item{background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:8px 10px;margin-bottom:6px;border-left:3px solid #10b981}
.session-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.session-item-name{font-weight:600;font-size:11px;color:#111}
.session-item-duration{font-size:10px;color:#6b7280;font-family:'SF Mono','Consolas',monospace}
.session-item-details{font-size:9px;color:#9ca3af}
.session-item-details span{margin-right:6px}
.session-item-note{margin-top:4px;padding-top:4px;border-top:1px dashed #e5e7eb;font-size:9px;color:#6b7280;font-style:italic;cursor:pointer;padding:4px 6px;border-radius:4px;transition:background 0.2s}
.session-item-note:hover{background:rgba(249,115,22,0.15)}
.session-item-note.empty{color:#9ca3af;font-style:italic}
.note-edit-textarea{width:100%;min-height:50px;padding:6px;border:2px solid #f97316;border-radius:4px;font-size:10px;resize:vertical;box-sizing:border-box}
.note-edit-buttons{display:flex;gap:4px;margin-top:4px}
.note-save-btn,.note-cancel-btn{padding:4px 10px;font-size:10px;border:none;border-radius:4px;cursor:pointer;font-weight:600}
.note-save-btn{background:#10b981;color:#fff}
.note-save-btn:hover{background:#059669}
.note-cancel-btn{background:#6b7280;color:#fff}
.note-cancel-btn:hover{background:#4b5563}
.general-notes{padding:8px 12px;border-top:1px solid #e5e7eb;flex-shrink:0}
.general-notes label{display:block;font-size:10px;font-weight:600;color:#6b7280;margin-bottom:4px}
.general-notes textarea{width:100%;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:10px;resize:none;height:45px}
.session-panel-footer{padding:10px 12px;border-top:1px solid #e5e7eb;flex-shrink:0}
.btn-generate-report{width:100%;padding:10px 12px;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s}
.btn-generate-report:hover:not(:disabled){background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,0.3)}
.btn-generate-report:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.report-hint{font-size:9px;color:#9ca3af;text-align:center;margin-top:4px}
@media (max-width:768px){.session-panel-container.open .session-panel{width:300px;overflow-y:auto}}
.hr-status{position:absolute;top:8px;left:60px;cursor:move;user-select:none;width:fit-content;background:rgba(107,114,128,0.9);color:#fff;padding:6px 12px;border-radius:16px;font-size:12px;font-weight:600;z-index:10006;display:none;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(0,0,0,0.3);pointer-events:auto}
.hr-status.active{display:flex}
.hr-status.connecting{background:rgba(245,158,11,0.9)}
.hr-status.connected{background:rgba(16,185,129,0.9)}
.hr-status.no-signal{background:rgba(239,68,68,0.9)}
.hr-status.disconnected{background:rgba(107,114,128,0.9)}
.hr-display{position:fixed;top:140px;left:10px;bottom:auto;right:auto;background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);cursor:move;user-select:none;color:#fff;padding:14px 20px;border-radius:20px;font-weight:700;z-index:10002;display:none;flex-direction:column;gap:8px;box-shadow:0 4px 12px rgba(220,38,38,0.4);pointer-events:auto !important;min-width:130px}
.hr-display.active{display:flex}
.hr-row{display:flex;align-items:center;gap:10px}
.hr-display .hr-icon{font-size:26px;animation:heartbeat-hr 1s ease-in-out infinite}
.hr-display .hr-value{font-size:38px;font-family:'SF Mono','Consolas',monospace;min-width:54px;text-align:center;line-height:1}
.hr-display .hr-unit{font-size:16px;opacity:0.9}
.hr-divider{height:1px;background:rgba(255,255,255,0.35)}
.hr-kcal-row{display:none;align-items:center;gap:10px}
.hr-kcal-row.active{display:flex}
.hr-kcal-icon{font-size:24px}
.hr-kcal-value{font-size:32px;font-family:'SF Mono','Consolas',monospace;min-width:54px;text-align:center;line-height:1}
.hr-kcal-unit{font-size:15px;opacity:0.9}
@keyframes heartbeat-hr{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
#pdfDrawingCanvas{position:absolute;pointer-events:none;z-index:150 !important;background:transparent}
#pdfDrawingCanvas.drawing-active{pointer-events:auto;touch-action:none;cursor:crosshair}
body.role-member .pdfControls,body.role-member .pdfControlsTab{display:none !important}
.pdfControls .btn-pdf-draw{padding:8px 12px;background:#fff;color:#111;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:13px;transition:all 0.2s}
.pdfControls .btn-pdf-draw:hover{background:#f3f4f6}
.pdfControls .btn-pdf-draw.active{background:#f97316;color:#fff;border-color:#f97316}
.pdfControls .btn-pdf-clear{padding:8px 12px;background:#fff;color:#111;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:13px;transition:all 0.2s}
.pdfControls .btn-pdf-clear:hover{background:#fee2e2;border-color:#fca5a5}
.btn-hr-connect{background:linear-gradient(135deg,#ec4899 0%,#db2777 100%);color:#fff;border-color:#db2777}
.btn-hr-connect.connected{background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-color:#059669}
.btn-hr-display{background:#fff;color:#6b7280;border-color:#d1d5db}
.btn-hr-display.active{background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);color:#fff;border-color:#b91c1c}
.btn-hr-display:disabled{opacity:0.4;cursor:not-allowed}
.hr-zone-badge{font-size:11px;font-weight:600;text-align:center;opacity:.9;min-height:14px;margin-top:2px}
.hr-display.zone1{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 12px rgba(59,130,246,.45)}
.hr-display.zone2{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 12px rgba(16,185,129,.45)}
.hr-display.zone3{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 12px rgba(245,158,11,.45)}
.hr-display.zone4{background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 4px 12px rgba(249,115,22,.45)}
.hr-display.zone5{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 12px rgba(220,38,38,.55);animation:zone5-pulse 1.2s ease-in-out infinite}
@keyframes zone5-pulse{0%,100%{box-shadow:0 4px 12px rgba(220,38,38,.55)}50%{box-shadow:0 4px 24px rgba(220,38,38,.85)}}
.kcal-display{position:fixed;top:310px;left:10px;background:linear-gradient(135deg,#6b7280,#4b5563);cursor:move;user-select:none;color:#fff;padding:12px 16px;border-radius:18px;font-weight:700;z-index:10003;display:none;flex-direction:column;gap:8px;box-shadow:0 4px 14px rgba(0,0,0,.35);pointer-events:auto !important;min-width:155px;transition:background .5s ease,box-shadow .5s ease}
.kcal-display.active{display:flex}
.kcal-display.level0{background:linear-gradient(135deg,#6b7280,#4b5563);box-shadow:0 4px 14px rgba(107,114,128,.4)}
.kcal-display.level1{background:linear-gradient(135deg,#38bdf8,#0284c7);box-shadow:0 4px 14px rgba(56,189,248,.45)}
.kcal-display.level2{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 14px rgba(16,185,129,.45)}
.kcal-display.level3{background:linear-gradient(135deg,#84cc16,#65a30d);box-shadow:0 4px 14px rgba(132,204,22,.45)}
.kcal-display.level4{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 14px rgba(245,158,11,.45)}
.kcal-display.level5{background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 4px 14px rgba(249,115,22,.45)}
.kcal-display.level6{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 14px rgba(239,68,68,.5)}
.kcal-display.level7{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 14px rgba(220,38,38,.55)}
.kcal-display.level8{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 4px 14px rgba(139,92,246,.55)}
.kcal-display.level9{background:linear-gradient(135deg,#d97706,#b45309);box-shadow:0 4px 16px rgba(217,119,6,.65);animation:kcal-gold-glow 1.4s ease-in-out infinite}
@keyframes kcal-gold-glow{0%,100%{box-shadow:0 4px 16px rgba(217,119,6,.65)}50%{box-shadow:0 4px 28px rgba(251,191,36,.95)}}
.kcal-header{font-size:13px;font-weight:700;text-align:center;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:6px}
.kcal-section{display:flex;flex-direction:column;gap:4px}
.kcal-label{font-size:10px;opacity:.82;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.kcal-value-row{display:flex;align-items:baseline;gap:4px}
.kcal-value{font-size:28px;font-family:'SF Mono','Consolas',monospace;min-width:56px;line-height:1}
.kcal-unit{font-size:13px;opacity:.88}
.kcal-bar-bg{width:100%;height:5px;background:rgba(255,255,255,.25);border-radius:3px;overflow:hidden}
.kcal-bar-fill{height:100%;background:rgba(255,255,255,.9);border-radius:3px;transition:width .6s ease}
.kcal-divider{height:1px;background:rgba(255,255,255,.28)}
.tile.layout-selected{border:3px solid #3b82f6 !important;box-shadow:0 0 15px rgba(59,130,246,0.5) !important;transition:border 0.2s,box-shadow 0.2s}
.tile.layout-hidden{display:none !important}
.gridChat.layout-1x2{grid-template-columns:1fr 1fr !important;grid-template-rows:1fr !important}
.gridChat.layout-1x2 > .tile:not(.layout-hidden){grid-row:1 !important}
.gridChat.layout-1x2 > .tile.layout-pos-1{grid-column:1 !important}
.gridChat.layout-1x2 > .tile.layout-pos-2{grid-column:2 !important}
.gridChat.layout-1x1{grid-template-columns:1fr !important;grid-template-rows:1fr !important}
.gridChat.layout-1x1 > .tile:not(.layout-hidden){grid-row:1 !important;grid-column:1 !important}
.layout-reset-btn{position:fixed;top:16px;right:56px;z-index:10000;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);color:#fff;border:none;padding:12px 20px;border-radius:25px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 15px rgba(59,130,246,0.4);display:none;align-items:center;gap:8px}
.layout-reset-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,0.5)}
.layout-reset-btn.visible{display:flex}
.selection-hint{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.85);color:#fff;padding:12px 24px;border-radius:25px;font-size:13px;z-index:10000;display:none;align-items:center;gap:10px}
.selection-hint.visible{display:flex}
.selection-hint .count{background:#3b82f6;padding:2px 10px;border-radius:12px;font-weight:600}
#youtubeContainer{background:#000;position:relative}
#youtubePlayerWrapper{position:absolute;inset:50px 0 56px 0;display:block}
#youtubePlayerDiv{position:absolute;inset:0;width:100%;height:100%}
#youtubePlayerWrapper iframe{position:absolute;inset:0;width:100% !important;height:100% !important}
body.role-member #youtubePlayerWrapper{inset:0 !important}
#youtubeEmpty{color:#888;font-size:14px;text-align:center;line-height:2;pointer-events:none}
#youtubeInstructorCtrl{position:absolute;top:8px;right:40px;left:auto;transform:none;z-index:200;background:rgba(0,0,0,.85);padding:8px 12px;border-radius:10px;display:flex;gap:8px;align-items:center;min-width:260px;max-width:55vw}
#youtubeUrlInput{flex:1;padding:6px 10px;border-radius:6px;border:none;font-size:12px;background:#fff;color:#111;min-width:0}
#btnYoutubeLoad{padding:6px 14px;background:#ef4444;color:#fff;border:none;border-radius:6px;font-size:12px;cursor:pointer;font-weight:600;white-space:nowrap;flex-shrink:0}
#btnYoutubeLoad:hover{background:#dc2626}
#youtubeSyncBar{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.9);padding:10px 16px;display:flex;gap:8px;align-items:center;z-index:200;border-top:1px solid rgba(255,255,255,.1)}
#ytSeekSlider{flex:1;height:6px;cursor:pointer}
#ytTimeInfo{color:#fff;font-size:12px;min-width:90px;text-align:center}
#ytSyncStatus{font-size:11px;color:#10b981;font-weight:600;flex-shrink:0}
.btn-yt-ctrl{padding:8px 14px;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600}
.btn-yt-ctrl.play{background:#10b981}
.btn-yt-ctrl.play:hover{background:#059669}
.btn-yt-ctrl.pause{background:#f59e0b}
.btn-yt-ctrl.pause:hover{background:#d97706}
body.role-member #youtubeInstructorCtrl,body.role-member #youtubeSyncBar{display:none !important}
body.role-member #youtubePlayerWrapper{inset:0 !important}