/* Automatic viewport adaptation for desktop and laptop displays. */
html,body{min-width:0;max-width:100%;overflow-x:hidden}
.deck-head #timeA,.deck-head #timeB{
  display:inline-flex!important;align-items:center;justify-content:center;
  min-width:112px;height:31px;padding:0 9px;box-sizing:border-box;
  border:1px solid color-mix(in srgb,var(--deck) 72%,#6f7a8a);
  border-radius:5px;background:#03070b;color:#f5fbff!important;
  font:800 13px/1 Orbitron,monospace!important;letter-spacing:.4px;
  text-shadow:0 0 8px var(--deck);box-shadow:inset 0 0 10px #000,0 0 8px color-mix(in srgb,var(--deck) 30%,transparent);
  opacity:1!important;visibility:visible!important;white-space:nowrap!important;
}
.deck-a-appearance,.deck-b-height-box{flex-wrap:nowrap!important;overflow:visible!important}
.zoom-controls span{min-width:68px}
.auto-transition{border-color:#ff334f!important;background:linear-gradient(#701526,#26070e)!important;color:#fff!important;box-shadow:0 0 12px #ff234777,inset 0 1px #ff9aaa66!important;animation:transition-ready 1s ease-in-out infinite}
.auto-transition.transition-active{border-color:#5cff86!important;background:linear-gradient(#28f06b,#086e2e)!important;color:#021b0a!important;box-shadow:0 0 20px #37ff78,inset 0 1px #d8ffe2!important;animation:none}
.transport .cue.cue-command{background:#ff9b24!important;color:#140900!important;box-shadow:0 0 18px #ff9b24!important}
.transport .cue.cue-double-ready{border-color:#fff36a!important;box-shadow:0 0 16px #ffe63e!important;filter:brightness(1.3)}
.hardware-layout .deck.fx-pads-visible>.performance{display:grid!important}
.hardware-layout .deck.fx-pads-visible>.performance button{animation:fx-pad-ready 1.4s ease-in-out infinite alternate}
.hardware-layout .deck.fx-pads-visible>.performance button.pad-fired{background:var(--deck)!important;color:#05070a!important;box-shadow:0 0 20px var(--deck)!important;animation:none}
@keyframes transition-ready{50%{filter:brightness(1.65);box-shadow:0 0 22px #ff2347cc,inset 0 1px #ffc3cc88}}
@keyframes fx-pad-ready{to{filter:brightness(1.35);box-shadow:0 0 10px color-mix(in srgb,var(--deck) 65%,transparent)}}

@media(max-width:1600px){
  .topbar{padding-inline:10px}.top-actions{min-width:0;overflow-x:auto;scrollbar-width:none}.top-actions::-webkit-scrollbar{display:none}
  .hardware-layout{grid-template-columns:minmax(330px,1fr) 270px minmax(330px,1fr)!important}
}
@media(max-width:1250px){
  .hardware-layout{grid-template-columns:minmax(280px,1fr) 220px minmax(280px,1fr)!important}
  .hardware-layout .deck-body{grid-template-columns:50px minmax(130px,1fr) 82px}.hardware-layout .deck-b .deck-body{grid-template-columns:82px minmax(130px,1fr) 50px}
  .library{min-width:0}.library-head{gap:8px}.library-actions{flex-wrap:wrap;justify-content:flex-end}
}
@media(max-width:1250px){.deck-head #timeA,.deck-head #timeB{min-width:96px;font-size:11px!important;padding-inline:5px}}
@media(max-width:980px){
  .topbar{position:relative;height:auto;min-height:58px;flex-wrap:wrap;gap:7px;padding-block:7px}.top-actions{width:100%;padding-bottom:3px}
  .hardware-layout{grid-template-columns:1fr!important}.hardware-layout>.deck,.hardware-layout>.pro-center-mixer{width:100%!important;zoom:1!important}
  .hardware-layout>.pro-center-mixer{order:3;max-height:720px}.browser{grid-template-columns:120px minmax(0,1fr)}
  .studio-grid{grid-template-columns:1fr}.fx-editor{order:3}
}
@media(max-height:720px) and (min-width:981px){
  .controller-grille{height:34px!important}.controller-grille strong{font-size:13px!important}.controller-grille small{display:none}
  .hardware-layout .deck-head{min-height:36px!important}.deck-lcd,.deck-lcd canvas{height:30px!important;min-height:30px!important}
}
@media(prefers-reduced-motion:reduce){.auto-transition{animation-duration:2.2s}}
/* YouTube search per deck: result is cued, never auto-started. */
.youtube-loader.open{display:grid!important;gap:6px}
.youtube-search-row,.youtube-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;width:100%}
.youtube-search-row input,.youtube-link-row input{min-width:0;width:100%}
.youtube-search-button{min-width:92px;background:#d9163d!important;color:#fff!important;box-shadow:0 0 8px #ff174d66;transition:background .2s,box-shadow .2s,transform .2s}
.youtube-search-button.searching{background:#e10e36!important;box-shadow:0 0 8px #ff174d,0 0 22px #ff174dcc;animation:youtubeSearchPulse .65s ease-in-out infinite alternate}
.youtube-search-button.found{background:#20e46b!important;color:#03150a!important;box-shadow:0 0 10px #20e46b,0 0 25px #20e46baa}
.youtube-search-button.failed{background:#ff173f!important;box-shadow:0 0 16px #ff173f}
@keyframes youtubeSearchPulse{to{transform:translateY(-1px);filter:brightness(1.35);box-shadow:0 0 14px #ff174d,0 0 34px #ff174d}}
@media(max-width:900px){.youtube-search-row,.youtube-link-row{grid-template-columns:minmax(0,1fr) 82px}.youtube-search-button{min-width:82px}}