/* KPOP3 v1.6.5 — Global Fan UX: independently flowing discovery and sidebar.
   Existing player, playlist IDs and event wiring are preserved. */
:root{--brand-lime:#c5ed62}
html{scroll-padding-top:94px}
.site-header{position:relative;z-index:10}
.header-inner{max-width:1480px}
.shell{max-width:1480px}
.quick-nav{display:flex;align-items:center;justify-content:center;gap:5px;margin-inline:auto}
.quick-nav a{font-size:11px;font-weight:700;color:#b8c7d6;padding:10px 13px;border:1px solid transparent;border-radius:25px;white-space:nowrap;transition:.15s ease}
.quick-nav a:hover,.quick-nav a:focus-visible{background:#1d2b37;color:#e9f9c8;border-color:#334b43}
.primary-layout{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:24px;align-items:start}
.left-flow{min-width:0;display:flex;flex-direction:column;gap:0}
.primary-layout .aside{min-width:0;display:flex;flex-direction:column;gap:14px;align-self:start}
.aside .queue-panel,.aside .news-coming,.aside .ad-box,.aside .my-playlist-section{margin:0;min-width:0}
.aside .my-playlist-section{background:linear-gradient(148deg,#1a3440,#111d2b 76%);border-color:#385b52}
.aside .my-playlist-items{max-height:350px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin;scrollbar-color:#45685b transparent}
.aside .my-playlist-section .my-playlist-headings h2{font-size:25px}
.aside .my-list-action{min-width:36px}
.aside .queue-list{max-height:410px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.left-flow .browse{padding-top:42px;scroll-margin-top:24px}
.browse-heading{margin-bottom:15px}
.browse-heading h2{font-size:clamp(24px,2.7vw,32px)}
.discover-panel{border:1px solid rgba(174,208,231,.14);background:linear-gradient(135deg,#131f2e,#101a27);border-radius:17px;padding:15px;margin:0 0 20px}
.discover-search-wrap{display:flex;align-items:center;gap:10px;padding:0 15px;border-radius:11px;background:#0c1521;border:1px solid #355063;min-height:47px;margin-bottom:13px}
.discover-search-wrap:focus-within{border-color:#bce96a;box-shadow:0 0 0 2px #bce96a26}
.discover-search-wrap span{font-size:27px;color:#bddb8e;line-height:1}
.discover-search-wrap input{min-width:0;flex:1;height:46px;color:#edf5fc;border:0;background:transparent;outline:0;font-size:13px}
.discover-search-wrap input::placeholder{color:#8799ad}
.discover-panel .filter-panel{margin-bottom:0;align-items:start;gap:12px}
.discover-panel .segmented{gap:6px}
.discover-panel .chip{border-radius:20px;font-size:10px;padding:10px 12px;min-height:39px;white-space:nowrap}
.discover-panel .filters-right{gap:7px}
.discover-panel .filters-right select{max-width:159px;min-height:39px;border-radius:9px;padding:8px 20px 8px 10px;font-size:10px;background-color:#0e1b29;color:#d8e8f4;border:1px solid #35485a}
.reset-filters{border:1px solid #394b5a;background:transparent;color:#90a4b7;border-radius:9px;min-height:39px;padding:0 11px;font-size:10px;font-weight:700}
.reset-filters:hover{color:#e8f9c0;border-color:#bce96a}
.left-flow .video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 15px;min-height:100px}
.left-flow .video-card{min-width:0}
.left-flow .thumb-btn{border-radius:12px}
.left-flow .thumb-btn:focus-visible{outline:2px solid var(--brand-lime);outline-offset:3px}
.left-flow .card-title{line-height:1.45}
.left-flow .my-card-footer{gap:7px;flex-wrap:wrap}
.left-flow .my-card-save{min-height:35px}
.left-flow .where-section{margin:42px 0 10px}
.where-section .where-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.my-playlist-section{scroll-margin-top:28px}
#explore{scroll-margin-top:25px}
/* Page content keeps flowing even when a long playlist expands in the rail. */
@media (min-width:901px) and (max-width:1199px){
 .primary-layout{grid-template-columns:minmax(0,1fr) 298px;gap:19px}
 .left-flow .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .quick-nav a{padding:9px 9px}
 .header-tag{display:none}
}
/* On mobile use display:contents so the playlist rail follows the player,
   while Discover remains after the rail. No moving/rebuilding the YouTube iframe. */
@media(max-width:900px){
 .primary-layout{display:flex;flex-direction:column;gap:0}
 .left-flow{display:contents}
 .primary-layout .main-player{order:1;width:100%}
 .primary-layout .aside{order:2;width:100%;margin-top:21px;display:flex;flex-direction:column;gap:12px}
 .primary-layout .browse{order:3;width:100%;padding-top:40px}
 .primary-layout .where-section{order:4;width:100%;margin-top:32px}
 .primary-layout .aside .my-playlist-section{order:-1}
 .primary-layout .aside .queue-panel{order:1}
 .primary-layout .aside .news-coming{order:2}
 .primary-layout .aside .ad-box{order:3}
 .aside .my-playlist-items{max-height:325px}
 .left-flow .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 13px}
 .site-header{height:auto}
 .header-inner{height:auto;min-height:76px;flex-wrap:wrap;gap:5px 12px;padding:12px 20px}
 .quick-nav{order:3;width:100%;justify-content:flex-start;overflow-x:auto;gap:7px;scrollbar-width:none}
 .quick-nav a{background:#121c29;border:1px solid #29394b;min-height:38px;padding:9px 13px}
 .header-tag{display:none}
 .header-right{margin-left:auto}
 .aside .my-playlist-section .my-playlist-headings h2{font-size:26px}
 .browse-heading{margin-bottom:14px}
}
@media(max-width:620px){
 .shell{padding:0 17px}
 .title-row{padding:28px 0 22px}
 .title-row h1{font-size:clamp(26px,7.6vw,36px)}
 .intro{font-size:12px;line-height:1.5;max-width:30ch}
 .primary-layout .aside{margin-top:18px;gap:12px}
 .primary-layout .aside .my-playlist-section{padding:19px 15px}
 .primary-layout .browse{padding-top:35px}
 .left-flow .video-grid{grid-template-columns:minmax(0,1fr);gap:21px}
 .video-card{width:100%}
 .discover-panel{padding:12px}
 .discover-panel .filter-panel{flex-direction:column;gap:12px}
 .discover-panel .segmented{flex-wrap:nowrap;max-width:100%;overflow-x:auto;padding-bottom:3px;scrollbar-width:thin}
 .discover-panel .filters-right{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
 .discover-panel .filters-right select{max-width:none;width:100%;font-size:11px}
 .discover-panel .filters-right #sortFilter{grid-column:1}
 .discover-panel .filters-right .reset-filters{grid-column:2}
 .left-flow .where-section .where-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .footer-banner{margin-top:32px}
}
@media(prefers-reduced-motion:reduce){.quick-nav a,.thumb-btn img{transition:none}}

/* On small screens: playlist, Up Next and discovery BEFORE promotional modules. */
@media(max-width:900px){
 .primary-layout .aside{display:contents}
 .primary-layout .aside > .my-playlist-section{order:2;width:100%;margin-top:20px}
 .primary-layout .aside > .queue-panel{order:3;width:100%;margin-top:12px}
 .primary-layout .browse{order:4}
 .primary-layout .where-section{order:5}
 .primary-layout .aside > .news-coming{order:6;width:100%;margin-top:22px}
 .primary-layout .aside > .ad-box{order:7;width:100%;margin-top:12px}
}