/* === Base === */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0f0f1a;color:#e0e0e0;font-family:system-ui,-apple-system,'Hiragino Kaku Gothic ProN',sans-serif;
  overflow:hidden;height:100vh;display:flex;flex-direction:column}

/* === Tab Bar === */
#tabBar{display:flex;flex-wrap:nowrap;gap:2px;padding:6px 8px;background:#14141f;flex-shrink:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{background:#1e1e30;border:none;color:#888;font-size:12px;font-weight:600;padding:7px 12px;
  border-radius:8px;cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0}
.tab:hover{color:#bbb;background:#282840}
.tab.active{background:#06b6d4;color:#0f0f1a}

/* === FPS === */
#fps{position:fixed;top:8px;right:12px;z-index:100;font-size:12px;font-family:monospace;
  color:#06b6d4;background:rgba(15,15,26,.8);padding:3px 8px;border-radius:6px}

/* === Stage === */
#stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  background:#000;overflow:hidden;min-height:0}
#video{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
#canvas{max-width:100%;max-height:100%;object-fit:contain}
#loadingOverlay{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:rgba(15,15,26,.9);z-index:10}
#loadingOverlay .spinner{width:40px;height:40px;border:3px solid #1e1e30;
  border-top-color:#06b6d4;border-radius:50%;animation:spin .8s linear infinite}
#loadingOverlay p{margin-top:12px;color:#888;font-size:14px}
@keyframes spin{to{transform:rotate(360deg)}}
#errorOverlay{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:rgba(15,15,26,.95);z-index:10;gap:12px}
#errorOverlay p{color:#ef4444;font-size:14px;text-align:center;padding:0 20px}
#errorOverlay button{background:#06b6d4;color:#0f0f1a;border:none;padding:8px 20px;
  border-radius:8px;font-weight:600;cursor:pointer}

/* === Controls === */
#controls{flex-shrink:0;background:#14141f;border-top:1px solid #1e1e30;padding:8px 12px;
  display:flex;align-items:flex-start;gap:12px;min-height:56px;overflow-x:auto}
#globalControls{display:flex;gap:6px;flex-shrink:0}
#globalControls button{background:#1e1e30;border:1px solid #2a2a40;color:#ccc;font-size:18px;
  width:40px;height:40px;border-radius:8px;cursor:pointer;transition:all .15s}
#globalControls button:hover{background:#282840;border-color:#06b6d4}
#effectControls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1}

/* === Effect Control Components === */
.ctrl-group{display:flex;align-items:center;gap:6px;background:#1a1a2e;padding:4px 10px;border-radius:8px}
.ctrl-label{font-size:11px;color:#888;white-space:nowrap}
.ctrl-btn{background:#252540;border:1px solid #333;color:#ccc;font-size:12px;padding:4px 10px;
  border-radius:6px;cursor:pointer;transition:all .15s;white-space:nowrap}
.ctrl-btn:hover{border-color:#06b6d4;color:#06b6d4}
.ctrl-btn.active{background:#06b6d4;color:#0f0f1a;border-color:#06b6d4}
.ctrl-slider{-webkit-appearance:none;width:80px;height:4px;background:#252540;border-radius:2px;outline:none}
.ctrl-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:#06b6d4;cursor:pointer}
.ctrl-toggle{width:36px;height:20px;background:#252540;border-radius:10px;border:none;
  cursor:pointer;position:relative;transition:background .2s}
.ctrl-toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#666;transition:all .2s}
.ctrl-toggle.on{background:#06b6d4}
.ctrl-toggle.on::after{left:18px;background:#0f0f1a}

/* === Meter (emotion) === */
.meter-bar{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;
  height:60%;background:#1a1a2e;border-radius:12px;border:1px solid #2a2a40;overflow:hidden;z-index:5}
.meter-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,#3b82f6,#eab308,#ef4444);
  border-radius:0 0 12px 12px;transition:height .15s}
.meter-label{position:absolute;right:48px;top:50%;transform:translateY(-50%);
  font-size:32px;font-weight:800;color:#06b6d4;z-index:5;font-family:monospace}

/* === History Graph === */
.history-graph{position:absolute;bottom:60px;left:16px;right:16px;height:60px;z-index:5}

/* === Responsive === */
@media(max-width:640px){
  .tab{font-size:11px;padding:6px 10px}
  #controls{padding:6px 8px}
  .ctrl-group{padding:3px 6px}
  .ctrl-slider{width:60px}
}

/* === Highlight clips (Task 3) === */
.hl-clip-list{position:absolute;bottom:0;left:0;right:0;max-height:120px;overflow-x:auto;overflow-y:hidden;
  display:flex;gap:6px;padding:6px 8px;background:rgba(15,15,26,.85);z-index:6;-webkit-overflow-scrolling:touch}
.hl-clip{flex-shrink:0;width:130px;background:#1a1a2e;border-radius:8px;border:1px solid #2a2a40;
  overflow:hidden;cursor:pointer;transition:border-color .15s}
.hl-clip:hover{border-color:#06b6d4}
.hl-clip img{width:100%;height:60px;object-fit:cover;display:block}
.hl-clip-info{padding:3px 6px;font-size:10px;color:#888;display:flex;justify-content:space-between;align-items:center}
.hl-clip-info .ts{color:#06b6d4;font-weight:600}
.hl-clip-btns{display:flex;gap:3px;padding:2px 6px 4px}
.hl-clip-btns button{flex:1;background:#252540;border:1px solid #333;color:#ccc;font-size:10px;
  padding:2px;border-radius:4px;cursor:pointer}
.hl-clip-btns button:hover{border-color:#06b6d4;color:#06b6d4}
.hl-replay-label{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  background:rgba(239,68,68,.85);color:#fff;font-size:14px;font-weight:700;
  padding:4px 16px;border-radius:8px;z-index:8}

/* Fullscreen */
body:fullscreen #tabBar,body:fullscreen #controls,body:fullscreen #fps{display:none}
body:fullscreen #stage{height:100vh}
body:-webkit-full-screen #tabBar,body:-webkit-full-screen #controls,body:-webkit-full-screen #fps{display:none}
body:-webkit-full-screen #stage{height:100vh}