*{box-sizing:border-box}
:root{
  --bg:#0b0b0c; --panel:#111; --muted:#9aa0a6; --text:#eaeaea; --pri:#F97316;
}
html,body,#app{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif}
#app{display:flex;flex-direction:column;min-height:100%}
/* Topbar no longer used */
.topbar{display:none}

.middle{display:flex;align-items:center;gap:10px;min-width:460px}
.seek-wrap{position:relative;display:flex;align-items:center;width:min(92vw, 900px)}
#seek{appearance:none;width:100%;height:6px;background:#27272a;border-radius:3px;outline:none}
#seek::-webkit-slider-thumb{appearance:none;width:12px;height:12px;margin-top:-3px;border-radius:6px;background:var(--pri);border:2px solid #d36110}
#tag-markers{position:absolute;left:0;right:0;top:-8px;height:22px;pointer-events:none}
#tag-markers .mark{position:absolute;top:2px;width:6px;height:14px;background:var(--pri);border-radius:3px;cursor:pointer;pointer-events:auto}

#player-area{display:flex;align-items:stretch;justify-content:center;flex:1 1 auto;min-height:0}
#video-stack{position:relative;flex:1 1 auto;width:100%;height:100%;max-width:100vw;background:#000;border:1px solid #1f1f1f;border-radius:8px;overflow:hidden}
#video{position:absolute;inset:0;width:100%;height:100%;background:#000;z-index:0;object-fit:contain}
#yt-container{position:absolute;inset:0;display:none;z-index:1}
#yt-frame{position:absolute;inset:0}
#yt-mask{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none;transition:opacity .12s ease}
#overlay,#fade-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#overlay{pointer-events:auto;z-index:3;touch-action:none;cursor:crosshair}
#fade-layer{z-index:4}
#snapshot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none;background:#000;z-index:2;pointer-events:none}

/* Language switch (top-right) */
.lang-switch{position:absolute;top:8px;right:8px;z-index:6;display:flex;gap:6px;pointer-events:auto}
.lang-switch .lang-btn{background:#1a1a1b;border:1px solid #2a2a2d;color:#fff;padding:4px 8px;border-radius:6px;cursor:pointer;font-size:12px}
.lang-switch .lang-btn:hover{background:#232325}
.lang-switch .lang-btn.active{background:var(--pri);border-color:#d36110;color:#000}

/* Bottom-right language dropdown */
.lang-menu{position:absolute;right:10px;bottom:56px;z-index:11;background:#111;border:1px solid #2a2a2d;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.45);padding:6px;display:flex;flex-direction:column;gap:6px}
.lang-menu[hidden]{display:none}
.lang-item{background:#1a1a1b;border:1px solid #2a2a2d;color:#fff;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px;text-align:left}
.lang-item:hover{background:#232325}
.lang-item.active{background:var(--pri);border-color:#d36110;color:#000}

.status{padding:8px 12px;color:var(--muted);font-size:12px;border-top:1px solid #1f1f1f}

.help{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:9999}
.help.hidden{display:none}
.help .panel{width:min(900px, 92vw);background:#111;border:1px solid #2a2a2a;border-radius:8px}
.help .hdr{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #222;justify-content:space-between}
.help .hdr button{margin-left:auto;background:transparent;border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:4px 8px}
.help .hdr button:hover{opacity:.85}
.help .title{font-weight:700}
.help .content{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}
.help .content h3{margin:.5rem 0}
.help .content p{margin:.25rem 0;color:#cfcfcf}
.help .content input[type=text]{width:100%;background:#141415;border:1px solid #232327;color:#eaeaea;padding:8px 10px;border-radius:6px}
.help .content button{background:#1a1a1b;border:1px solid #2a2a2d;color:#eaeaea;padding:6px 10px;border-radius:6px;cursor:pointer}
.help .content button:hover{background:#232325}

/* YT Recent list */
.yt-history{display:grid;gap:6px;margin-top:6px}
.yt-history .item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#151516;border:1px solid #2a2a2d;color:#eaeaea;padding:8px 10px;border-radius:6px;cursor:pointer;text-align:left}
.yt-history .item:hover{background:#1d1d1f}
.yt-history .title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yt-history .meta{flex:0 0 auto;color:#9aa0a6;font-size:12px}

/* Bottom controls overlay similar to desktop app */
.controls-bottom{position:absolute;left:0;right:0;bottom:0;z-index:10;pointer-events:none}
.controls-bottom .bar{display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center;padding:10px 12px;background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.35), rgba(0,0,0,0));border-top:1px solid rgba(255,255,255,0.05);pointer-events:auto}
.controls-bottom .row{display:flex;gap:8px;align-items:center;justify-content:center;width:100%}
.controls-bottom .row-seek{justify-content:space-between}
.controls-bottom .row-seek .seek-wrap{flex:1; margin:0 10px}
#controls-bottom .row-controls{justify-content:flex-start}
.flex-spacer{flex:1 1 auto}
#cur-time,#dur-time{font-variant-numeric:tabular-nums;min-width:56px;text-align:center}
.controls-bottom .bar button{background:#1a1a1b;border:1px solid #2a2a2d;color:var(--text);padding:6px 10px;border-radius:6px;cursor:pointer}
.controls-bottom .bar button:hover{background:#232325}
.controls-bottom input[type=text]{min-width:min(60vw, 520px);max-width:92vw;background:#141415;border:1px solid #232327;color:var(--text);padding:6px 8px;border-radius:6px}

/* Keep center controls stable: fixed widths */
#controls-bottom .row-controls #btn-play{width:44px;text-align:center;padding-left:0;padding-right:0}
#controls-bottom .row-controls #btn-back10,#controls-bottom .row-controls #btn-fwd30{width:68px}

/* Helpers */
.muted{color:var(--muted)}
.small{font-size:12px}