:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#f3f5f7;background:#0b0d10;line-height:1.45
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#151920 0,#0b0d10 38rem);color:#f4f5f6}
button,textarea,select,input{font:inherit}
button,select,textarea{border:1px solid #292e36;background:#15191f;color:#f4f5f6}
button{cursor:pointer;border-radius:10px;padding:.65rem .9rem;font-weight:700}
button:hover{background:#20252d}button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:#fff;color:#0b0d10;border-color:#fff}button.primary:hover{background:#dfe3e8}
button.round{min-width:3rem;font-size:1.1rem}
button.ghost{background:transparent;border-color:transparent}.danger{color:#ff8b8b}
textarea{width:100%;resize:vertical;min-height:3.1rem;padding:.8rem;border-radius:10px;outline:none}
textarea:focus,select:focus{border-color:#596272;box-shadow:0 0 0 2px #59627233}
.app{width:min(1320px,calc(100% - 28px));margin:0 auto;padding:22px 0 28px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:18px}
.title-line{display:flex;align-items:center;gap:9px;margin-bottom:5px}
h1{font-size:clamp(1.35rem,3vw,2rem);line-height:1.1;margin:0}
.version-badge{display:inline-flex;align-items:center;border:1px solid #303740;background:#151a20;color:#93a0af;border-radius:999px;padding:.2rem .48rem;font-size:.68rem;font-weight:800;letter-spacing:.03em;white-space:nowrap}
p{margin:0}.muted{color:#8e98a6}
.card{background:#101318;border:1px solid #20252c;border-radius:14px;box-shadow:0 12px 34px #0003}
.memory-pill{display:flex;align-items:center;gap:.45rem;color:#abb5c2;background:#11151a;border:1px solid #252b33;border-radius:999px;padding:.48rem .7rem;font-size:.82rem;white-space:nowrap}
.dot{width:.48rem;height:.48rem;border-radius:50%;background:#56d888;box-shadow:0 0 12px #56d888aa}
.input-card{padding:14px;margin-bottom:14px}.input-card label{display:block;font-weight:700;margin-bottom:7px}
.input-row{display:grid;grid-template-columns:1fr auto;gap:10px}.input-actions{display:flex;gap:8px;align-items:stretch;flex-direction:column}
.message{min-height:1.2em;margin-top:7px;color:#8f9aa8;font-size:.88rem}.message.error{color:#ff8b8b}.message.ok{color:#63dd91}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px}
.player-column{min-width:0;display:flex;flex-direction:column;gap:14px}
.player-shell{overflow:hidden}.aspect{aspect-ratio:16/9;background:#000}.aspect iframe{width:100%;height:100%;display:block}
.now-playing{padding:12px 14px;min-height:74px;display:flex;align-items:center}.now-text{min-width:0;display:grid;gap:2px}
#nowTitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eyebrow{font-size:.67rem;letter-spacing:.12em;color:#737f8f;font-weight:800}
.controls{padding:10px 12px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 12px;overflow:visible}
.transport{display:flex;gap:8px;flex:none}
.quick-settings{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.setting{display:flex;align-items:center;gap:7px;background:#15191f;border:1px solid #252b33;border-radius:10px;padding:.46rem .62rem;font-size:.82rem;color:#aeb7c2}
.compact-setting{white-space:nowrap}
.more-settings{position:relative}
.more-settings summary{list-style:none;cursor:pointer;user-select:none;background:#15191f;border:1px solid #252b33;border-radius:10px;padding:.46rem .7rem;font-size:.82rem;color:#c1c8d1;font-weight:700}
.more-settings summary::-webkit-details-marker{display:none}
.more-settings summary::after{content:" ▾";color:#727e8d}
.more-settings[open] summary::after{content:" ▴"}
.more-settings-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:280px;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#0f1318;border:1px solid #29313a;border-radius:12px;box-shadow:0 18px 48px #000b}
.more-settings-panel .setting{justify-content:space-between}
.more-settings-panel .setting:last-child{grid-column:1/-1}
.setting input{accent-color:#fff}.setting select{border:0;padding:0;background:transparent;color:#e9ebee;outline:0}
.tips-inline{grid-column:1/-1;border-top:1px solid #20252c;margin:0 -12px -10px;padding:8px 12px;display:flex;flex-wrap:wrap;gap:14px;color:#7f8a99;font-size:.76rem}
kbd{border:1px solid #343b45;background:#171b21;border-radius:5px;padding:.08rem .3rem;color:#bec6d0}
.queue{min-height:480px;max-height:calc(100vh - 160px);display:flex;flex-direction:column;overflow:hidden;position:sticky;top:14px}
.queue-head{padding:13px 12px;border-bottom:1px solid #20252c;display:flex;justify-content:space-between;align-items:center}.queue-head>div{display:grid}
#queueList{list-style:none;padding:8px;margin:0;overflow:auto;flex:1;counter-reset:q}
.queue-item{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 7px;border-radius:9px;border:1px solid transparent}
.queue-item:hover{background:#15191f}.queue-item.active{background:#1b2027;border-color:#303741}.queue-item.dragging{opacity:.45}
.queue-index{font-variant-numeric:tabular-nums;color:#667181;text-align:center;font-size:.78rem}
.queue-title{min-width:0}.queue-title strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.88rem}.queue-title span{display:block;color:#687485;font-size:.7rem}
.item-actions{display:flex;gap:3px}.item-actions button{padding:.32rem .42rem;font-size:.73rem;background:transparent;border-color:transparent}
.empty{padding:40px 15px;text-align:center;color:#687485}.hidden{display:none!important}
.playlist-mode{margin:10px;padding:10px;border:1px solid #28303a;background:#151a20;border-radius:9px;font-size:.82rem;color:#a9b3bf}
footer{display:flex;justify-content:space-between;gap:10px;margin-top:17px;color:#626d7b;font-size:.72rem}
@media(max-width:900px){
  .layout{grid-template-columns:1fr}.queue{position:static;max-height:460px;min-height:260px}
  .controls{grid-template-columns:1fr}.transport{justify-content:flex-start}.quick-settings{justify-content:flex-start;flex-wrap:wrap}
  .tips-inline{grid-column:1}
}
@media(max-width:600px){
  .app{width:min(100% - 16px,1320px);padding-top:12px}.topbar{align-items:flex-start}.memory-pill{font-size:0;padding:.58rem}
  .input-row{grid-template-columns:1fr}.input-actions{flex-direction:row}.input-actions button{flex:1}
  .controls{display:grid;grid-template-columns:1fr}.transport{justify-content:center}
  .quick-settings{display:grid;grid-template-columns:1fr 1fr auto;width:100%}.compact-setting{justify-content:space-between}
  .tips-inline{display:none}
  .more-settings-panel{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;grid-template-columns:1fr 1fr}
  footer{flex-direction:column}.queue{max-height:390px}
}

.profile-card{padding:13px 14px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.profile-copy{min-width:0;display:grid;gap:2px}.profile-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.profile-actions button{white-space:nowrap}
@media(max-width:760px){
  .profile-card{align-items:stretch;flex-direction:column}.profile-copy strong{white-space:normal}
  .profile-actions{justify-content:stretch}.profile-actions button{flex:1}
}


/* Cinema mode: CSS-only, so it does not create another player or keep extra video state in RAM. */
body.cinema .app{
  width:min(1700px,calc(100% - 24px));
}
body.cinema .layout{
  grid-template-columns:1fr;
}
body.cinema .player-shell{
  background:#050607;
}
body.cinema .aspect{
  width:100%;
  aspect-ratio:16/9;
  max-height:82vh;
  margin-inline:auto;
}
body.cinema .controls{
  position:relative;
}
body.cinema .queue{
  position:static;
  min-height:0;
  max-height:340px;
}
body.cinema #queueList{
  max-height:250px;
}
@media(min-width:1100px){
  body.cinema .player-column{
    width:100%;
  }
  body.cinema .now-playing{
    min-height:64px;
  }
}

.top-links{display:flex;align-items:center;gap:8px}
.deploy-link{color:#aeb7c2;text-decoration:none;background:#11151a;border:1px solid #252b33;border-radius:999px;padding:.48rem .7rem;font-size:.82rem;font-weight:700;white-space:nowrap}
.deploy-link:hover{color:#fff;background:#171c22}
@media(max-width:600px){.top-links{gap:5px}.deploy-link{font-size:.72rem;padding:.45rem .58rem}}


/* Startup video gate */
body.startup-locked{overflow:hidden}
body.startup-locked .app{filter:blur(3px);pointer-events:none;user-select:none}
.startup-gate{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px;
  background:#05070ad9;backdrop-filter:blur(8px)
}
.startup-gate.hidden{display:none}
.startup-card{
  width:min(560px,100%);display:grid;gap:12px;padding:22px;
  background:#101318;border:1px solid #2a313b;border-radius:16px;
  box-shadow:0 28px 80px #000b
}
.startup-card h2{margin:0;font-size:clamp(1.35rem,4vw,1.9rem)}
.startup-card p{color:#929dab;font-size:.9rem}
.startup-card input{
  width:100%;border:1px solid #323a45;background:#0d1014;color:#fff;
  border-radius:11px;padding:.82rem .9rem;outline:none
}
.startup-card input:focus{border-color:#687585;box-shadow:0 0 0 3px #68758526}
.startup-card .primary{width:100%;padding:.76rem 1rem}

.startup-skip{
  width:100%;padding:.7rem 1rem;border:1px solid #2d3440;
  background:transparent;color:#8f99a7;font-weight:700
}
.startup-skip:hover{background:#151920;color:#f3f5f7;border-color:#3a4350}
.startup-error{min-height:1.1em;color:#ff8b8b;font-size:.8rem}
.startup-card small{color:#687483;font-size:.72rem;text-align:center}


/* Persistent local video history */
.history-card{overflow:hidden}
.history-head{
  padding:11px 12px;border-bottom:1px solid #20252c;
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.history-head>div{display:grid;gap:1px}
.history-head button{padding:.38rem .55rem;font-size:.75rem}
.history-list{
  list-style:none;margin:0;padding:6px;display:grid;gap:2px;
  max-height:290px;overflow:auto
}
.history-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px;border-radius:9px;border:1px solid transparent
}
.history-item:hover{background:#15191f;border-color:#222a33}
.history-copy{min-width:0;display:grid;gap:2px}
.history-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.84rem}
.history-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#6f7b8a;font-size:.69rem}
.history-play{padding:.34rem .48rem!important;font-size:.72rem!important}
.history-empty{padding:22px 12px;text-align:center;color:#687485;font-size:.8rem}
@media(max-width:600px){
  .history-list{max-height:220px}
  .history-item{padding:7px}
}


/* Resume last playlist inside the startup gate */
.resume-playlist{
  margin-top:2px;padding:11px;border:1px solid #2b333d;border-radius:11px;
  background:#0c1015;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:12px
}
.resume-playlist-copy{min-width:0;display:grid;gap:2px}
.resume-playlist-copy strong{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.86rem
}
#resumePlaylistMeta{
  color:#6f7b89;font-size:.69rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.resume-playlist button{white-space:nowrap;padding:.55rem .7rem}
@media(max-width:600px){
  .resume-playlist{grid-template-columns:1fr}
  .resume-playlist button{width:100%}
}


.resume-options{display:grid;gap:8px}
#resumeVideoMeta{
  color:#6f7b89;font-size:.69rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}


/* Aero × IVE — lightweight fan-edition branding.
   Pure CSS: no image payload, animation, or extra runtime cost. */
:root{
  --aero-lilac:#d9d0ff;
  --aero-pink:#ff9bc5;
  --aero-ice:#98eaff;
}
body{
  background:
    radial-gradient(circle at 12% -10%,#5b3b6d22 0,transparent 28rem),
    radial-gradient(circle at 88% -18%,#20536a18 0,transparent 30rem),
    radial-gradient(circle at top,#17141c 0,#0b0d10 40rem);
}
.brand-block{min-width:0}
.brand-lockup{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:6px}
.brand-lockup--gate{margin:-2px 0 2px}
.aero-mark{
  position:relative;display:inline-block;flex:0 0 auto;width:35px;height:35px;
  border:1px solid #ffffff1f;border-radius:11px;
  background:linear-gradient(145deg,#ffffff12,#ffffff04);
  box-shadow:inset 0 1px 0 #ffffff12,0 8px 24px #0005;
  overflow:hidden
}
.aero-mark::before{
  content:"";position:absolute;inset:7px 6px 6px 7px;
  background:linear-gradient(135deg,var(--aero-lilac),var(--aero-pink) 56%,var(--aero-ice));
  clip-path:polygon(0 100%,40% 0,57% 0,35% 45%,76% 45%,100% 100%,73% 100%,63% 72%,23% 72%,15% 100%)
}
.aero-mark-core{
  position:absolute;left:14px;top:13px;width:0;height:0;z-index:2;
  border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #0d0b12;
  opacity:.9
}
.brand-wordmark{display:inline-flex;align-items:center;gap:.3em;font-weight:850;line-height:1;white-space:nowrap}
.brand-aero{
  font-size:clamp(1.45rem,3vw,2.05rem);letter-spacing:-.055em;
  background:linear-gradient(100deg,#fff 0,var(--aero-lilac) 48%,var(--aero-ice) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.brand-x{color:#6f7580;font-size:.86rem;font-weight:700}
.brand-ive-logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.45rem;height:1.78rem;line-height:1;flex:0 0 auto;
  margin-left:.02rem
}
.brand-ive-logo svg{display:block;width:100%;height:100%;overflow:visible}
.ive-logo-letters>*{fill:#f8edf5}
.brand-lockup--gate .brand-ive-logo{width:1.55rem;height:1.9rem}
.fan-badge{
  border:1px solid #a985a72e;background:#a985a710;color:#bba8bd;
  border-radius:999px;padding:.18rem .42rem;font-size:.58rem;font-weight:800;letter-spacing:.08em;white-space:nowrap
}
.brand-lockup .version-badge{margin-left:-2px}
.startup-card{border-color:#3b3140}
.startup-card::before{
  content:"";display:block;height:1px;margin:-22px -22px 8px;
  background:linear-gradient(90deg,transparent,var(--aero-pink),var(--aero-lilac),var(--aero-ice),transparent);
  opacity:.72
}
button.primary{
  background:linear-gradient(100deg,#fff 0,#f7f0ff 52%,#ebfbff 100%);
  color:#0b0d10;border-color:#fff
}
textarea:focus,select:focus{border-color:#8d7ca0;box-shadow:0 0 0 2px #9f86b526}
.dot{background:#b8a5ff;box-shadow:0 0 12px #b8a5ffaa}
.fan-note{color:#746a77}
@media(max-width:600px){
  .brand-lockup{gap:7px;flex-wrap:wrap}
  .brand-lockup .fan-badge{display:none}
  .brand-lockup--gate .fan-badge{display:inline-flex}
  .brand-aero{font-size:1.5rem}
  .brand-ive-logo{width:1.25rem;height:1.55rem}
}


/* Clean pre-play landing */
.input-card{margin-top:2px}