:root{
    --accent:#58a6ff;
    --accent-glow:rgba(88,166,255,.5);
    --accent-soft:#8cc2ff;
    --ctrl-bg:rgba(16,16,22,.55);
    --text:#f4f4f7;
    --text-dim:rgba(244,244,247,.65);
    --track:rgba(255,255,255,.22);
    --buffered:rgba(255,255,255,.42);
    --radius:10px;
    --shadow:0 20px 60px -12px rgba(0,0,0,.7);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
        
  /* ---------- Player shell ---------- */
  .lumen{
    position:relative;width:100%;aspect-ratio:16/9;
    background:#000;border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow);cursor:none;--controls:1;user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .lumen.paused,.lumen.show-ui,.lumen.loading{cursor:default}
  .lumen video{position:absolute;inset:0;width:100%;height:100%;display:block;
    object-fit:contain;background:#000;transition:transform .35s cubic-bezier(.2,.7,.2,1)}

  /* ---------- Loading skin ---------- */
  .loader{position:absolute;inset:0;z-index:9;display:none;place-items:center;
    background:radial-gradient(600px 400px at 50% 45%,rgba(24,22,34,.55),rgba(0,0,0,.82))}
  .lumen.loading .loader{display:grid}
  .loader-core{display:flex;flex-direction:column;align-items:center;gap:18px}
  .ring{position:relative;width:66px;height:66px}
  .ring::before,.ring::after{content:"";position:absolute;inset:0;border-radius:50%}
  .ring::before{border:3px solid rgba(255,255,255,.12)}
  .ring::after{border:3px solid transparent;border-top-color:var(--accent);
    border-right-color:var(--accent-soft);animation:spin .85s cubic-bezier(.5,.1,.5,.9) infinite;
    filter:drop-shadow(0 0 6px var(--accent-glow))}
  .ring i{position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:50%;
    background:var(--accent);box-shadow:0 0 16px var(--accent-glow);animation:pulse 1.4s ease-in-out infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes pulse{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.25);opacity:1}}
  .loader-text{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
  .loader-text.err{color:#ff8b9c;text-transform:none;letter-spacing:.02em;text-align:center;max-width:80%}
  .retry{margin-top:4px;background:var(--accent);color:#0a0a0c;border:none;font-weight:600;
    padding:8px 18px;border-radius:99px;cursor:pointer;font-size:13px;display:none}
  .lumen.error .retry{display:inline-block}
  .lumen.error .ring{display:none}

  /* ---------- Center big play ---------- */
  .center-play{position:absolute;inset:0;display:grid;place-items:center;z-index:6;
    pointer-events:none;opacity:0;transition:opacity .25s ease}
  .lumen.paused:not(.loading):not(.error) .center-play{opacity:1;pointer-events:auto}
  .center-play button{width:82px;height:82px;border:none;border-radius:50%;cursor:pointer;
    background:var(--ctrl-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    display:grid;place-items:center;color:#fff;
    box-shadow:0 0 0 1px rgba(255,255,255,.09),0 8px 30px rgba(0,0,0,.5);
    transition:transform .2s ease,box-shadow .2s ease}
  .center-play button:hover{transform:scale(1.08);box-shadow:0 0 0 1px var(--accent),0 0 36px var(--accent-glow)}
  .center-play svg{width:34px;height:34px;margin-left:4px}

  /* ---------- Skip feedback ---------- */
  .skip-hint{position:absolute;top:50%;transform:translateY(-50%);z-index:6;pointer-events:none;
    display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-size:13px;font-weight:600;opacity:0}
  .skip-hint.left{left:12%}.skip-hint.right{right:12%}
  .skip-hint svg{width:34px;height:34px}
  .skip-hint.go{animation:skipPop .6s ease}
  @keyframes skipPop{0%{opacity:0;transform:translateY(-50%) scale(.7)}
    30%{opacity:1;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-50%) scale(1)}}

  /* ---------- Controls ---------- */
  .controls{position:absolute;left:0;right:0;bottom:0;z-index:8;padding:0 14px 12px;
    background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 55%,transparent 100%);
    opacity:var(--controls);transition:opacity .28s ease,transform .28s ease}
  .lumen:not(.show-ui):not(.paused) .controls,
  .lumen.loading .controls{opacity:0;transform:translateY(10px);pointer-events:none}

  /* ---------- Scrub: tall hit-area for easy grabbing ---------- */
  .scrub{position:relative;height:28px;display:flex;align-items:center;cursor:pointer;
    margin:0 -2px 2px;padding:0 2px;touch-action:none}
  .scrub .rail{position:relative;width:100%;height:4px;border-radius:99px;background:var(--track);transition:height .12s ease}
  .scrub:hover .rail,.scrub.dragging .rail{height:7px}
  .rail .buffered{position:absolute;left:0;top:0;height:100%;border-radius:99px;background:var(--buffered);width:0}
  .rail .played{position:absolute;left:0;top:0;height:100%;border-radius:99px;
    background:linear-gradient(90deg,var(--accent-soft),var(--accent));width:0;box-shadow:0 0 10px var(--accent-glow)}
  .rail .thumb{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:#fff;
    transform:translate(-50%,-50%) scale(0);transition:transform .12s ease;box-shadow:0 0 0 4px var(--accent-glow)}
  .scrub:hover .thumb,.scrub.dragging .thumb{transform:translate(-50%,-50%) scale(1)}

  /* ---------- Hover preview: sprite thumbnail + time ---------- */
  .preview{position:absolute;bottom:30px;left:0;transform:translateX(-50%);
    background:rgba(10,10,14,.94);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);
    border-radius:10px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .12s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.55)}
  .scrub:hover .preview,.scrub.dragging .preview{opacity:1}
  .preview .pic{display:none;background-repeat:no-repeat;background-color:#000}
  .preview .t{display:block;padding:4px 9px;text-align:center;font-size:12px;color:#fff;
    font-variant-numeric:tabular-nums;white-space:nowrap}

  .row{display:flex;align-items:center;gap:6px}
  .btn{position:relative;background:none;border:none;color:var(--text);cursor:pointer;width:38px;height:38px;
    border-radius:10px;display:grid;place-items:center;transition:background .15s ease,color .15s ease,transform .1s ease}
  .btn:hover{background:rgba(255,255,255,.12)}
  .btn:active{transform:scale(.92)}
  .btn svg{width:21px;height:21px}
  .btn.small svg{width:19px;height:19px}
  .time{font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums;padding:0 8px;white-space:nowrap;letter-spacing:.02em}
  .time b{color:var(--text);font-weight:500}
  .spacer{flex:1}
  .qbadge{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--accent-soft);
    border:1px solid rgba(139,124,255,.4);border-radius:6px;padding:2px 6px}

  .vol{display:flex;align-items:center}
  .vol .slider{width:0;overflow:hidden;transition:width .22s ease;display:flex;align-items:center}
  .vol:hover .slider,.vol.open .slider{width:80px}
  .vslider{-webkit-appearance:none;appearance:none;width:72px;height:4px;border-radius:99px;
    background:var(--track);outline:none;cursor:pointer;margin:0 6px}
  .vslider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
    background:#fff;box-shadow:0 0 8px var(--accent-glow);cursor:pointer}
  .vslider::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:#fff;cursor:pointer}

  .menu-wrap{position:relative}
  .menu{position:absolute;bottom:46px;right:0;min-width:180px;background:rgba(14,14,20,.94);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);
    border-radius:14px;padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.6);opacity:0;
    transform:translateY(8px) scale(.97);transform-origin:bottom right;pointer-events:none;transition:.18s ease;
    max-height:290px;overflow-y:auto}
  .menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  .menu .head{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim);padding:8px 12px 6px}
  .menu .head.sep{border-top:1px solid rgba(255,255,255,.08);margin-top:4px}
  .menu button{width:100%;text-align:left;background:none;border:none;color:var(--text);cursor:pointer;
    padding:9px 12px;border-radius:9px;font-size:14px;display:flex;align-items:center;justify-content:space-between;
    gap:10px;transition:background .12s ease}
  .menu button:hover{background:rgba(255,255,255,.09)}
  .menu button.active{color:var(--accent-soft)}
  .menu button .check{width:16px;opacity:0}
  .menu button.active .check{opacity:1}

  .btn.on{color:var(--accent-soft)}
  .lumen :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  @media (max-width:560px){
    .time{font-size:11px;padding:0 4px}.btn{width:34px;height:34px}
    .vol .slider{display:none}.hide-sm{display:none}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important}}