/* Karaoke V7 V15.5 — Remote Karaoke Skin
   Scope: HP interface only. No Firebase, OAuth, queue, playback, player, or TV logic. */
body.route-hp{
  --remote-blue:#2387ff;
  --remote-cyan:#19e3dc;
  --remote-purple:#8a4dff;
  --remote-magenta:#ee4ad9;
  background:
    radial-gradient(520px 430px at 100% 2%,rgba(25,227,220,.11),transparent 58%),
    radial-gradient(500px 460px at -8% 20%,rgba(138,77,255,.18),transparent 62%),
    linear-gradient(165deg,#050814 0%,#071022 46%,#060b18 100%);
}
body.route-hp .app{max-width:560px}
body.route-hp .app-header{
  width:min(560px,100%);
  background:linear-gradient(180deg,rgba(4,8,19,.985),rgba(6,12,27,.955));
  border-bottom:1px solid rgba(91,135,255,.15);
  box-shadow:0 16px 38px rgba(0,0,0,.32);
}
body.route-hp .logo{
  border-radius:15px;
  box-shadow:0 0 0 1px rgba(70,224,255,.22),0 0 24px rgba(111,72,255,.22);
}
body.route-hp .brand h1{font-size:18px;letter-spacing:-.02em}
body.route-hp .brand p{color:#92c8ff;font-size:10.5px;font-weight:750}
body.route-hp .status-pill{
  position:relative;padding:9px 13px 9px 30px;
  color:#c9fffa;border-color:rgba(25,227,220,.42);
  background:linear-gradient(180deg,rgba(9,51,66,.96),rgba(8,28,48,.96));
  box-shadow:0 0 0 1px rgba(25,227,220,.08),0 8px 24px rgba(11,225,213,.12);
}
body.route-hp .status-pill:before{
  content:"";position:absolute;left:12px;top:50%;width:9px;height:9px;
  transform:translateY(-50%);border-radius:50%;background:#7c8aa8;
  box-shadow:0 0 0 4px rgba(124,138,168,.10)
}
body.route-hp .status-pill.connected:before{background:#03342c;box-shadow:0 0 0 4px rgba(3,52,44,.14)}
body.route-hp .page{padding:15px 16px 18px}

/* Shared glass treatment */
body.route-hp .card,
body.route-hp .quick,
body.route-hp .status-box,
body.route-hp .category-note,
body.route-hp .library-tabs{
  border-color:rgba(113,149,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 44px rgba(0,0,0,.24);
}
body.route-hp .input{
  min-height:55px;border-radius:17px;
  background:linear-gradient(180deg,rgba(10,21,45,.98),rgba(8,17,37,.98));
  border-color:rgba(111,145,230,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
body.route-hp .input:focus{
  border-color:rgba(38,167,255,.72);
  box-shadow:0 0 0 4px rgba(35,135,255,.10),0 0 24px rgba(49,112,255,.10);
}
body.route-hp .btn{min-height:52px;border-radius:17px;letter-spacing:-.01em}
body.route-hp .btn.primary{
  background:linear-gradient(105deg,#9a43ff 0%,#773fff 45%,#2a78ff 100%);
  box-shadow:0 14px 30px rgba(109,59,255,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
body.route-hp .btn.dark{
  background:linear-gradient(180deg,#18294b,#101d37);
  border:1px solid rgba(112,152,240,.18);
}
body.route-hp .btn.cyan,
body.route-hp .hp-fake-fullscreen-btn{
  background:linear-gradient(100deg,#12d9ca,#1d9fda)!important;color:#021a22!important;
  box-shadow:0 12px 28px rgba(16,203,204,.18)!important;
}

/* Home hero — unmistakable remote-karaoke positioning */
body.route-hp .remote-hero{
  padding:21px 20px 18px;
  border-radius:26px;
  background:
    linear-gradient(135deg,rgba(21,21,54,.96),rgba(9,28,54,.96) 58%,rgba(10,18,43,.98)),
    #0a1329;
  border:1px solid rgba(113,89,255,.30);
  overflow:hidden;
}
body.route-hp .remote-hero:before{
  content:"";position:absolute;inset:-1px;border-radius:26px;padding:1px;
  background:linear-gradient(130deg,rgba(120,77,255,.72),rgba(31,151,255,.20),rgba(239,72,211,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
body.route-hp .remote-hero:after{
  content:"";position:absolute;width:280px;height:280px;right:-130px;top:-110px;
  background:radial-gradient(circle,rgba(32,158,255,.23),transparent 67%);pointer-events:none
}
body.route-hp .remote-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(118px,.8fr);gap:12px;align-items:center;position:relative;z-index:1}
body.route-hp .remote-hero .eyebrow{color:#b497ff;font-size:10px;letter-spacing:.16em}
body.route-hp .remote-hero h2{margin:8px 0 9px;max-width:none;font-size:clamp(29px,8vw,38px);line-height:.96;letter-spacing:-.045em}
body.route-hp .remote-hero h2 .remote-main{display:block;color:#fff}
body.route-hp .remote-hero h2 .remote-youtube{
  display:block;margin-top:5px;
  background:linear-gradient(90deg,#3aa7ff,#8b58ff 48%,#f64dca 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.route-hp .remote-hero p{font-size:13px;line-height:1.48;color:#c0c9df;max-width:330px}
body.route-hp .remote-hero p strong{color:#fff}
body.route-hp .remote-link-visual{position:relative;min-height:145px;display:grid;place-items:center}
body.route-hp .remote-link-visual svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 16px rgba(84,106,255,.23))}
body.route-hp .remote-flow-label{
  grid-column:1/-1;margin-top:14px;padding:10px 12px;border-radius:15px;
  display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
  background:rgba(5,15,34,.72);border:1px solid rgba(72,190,255,.14);
  color:#bdc9e4;font-size:10.5px;font-weight:800
}
body.route-hp .remote-flow-label b{color:#5be9e1}
body.route-hp .remote-flow-dot{width:4px;height:4px;border-radius:50%;background:#7866ff}
body.route-hp .remote-hero .hero-actions{position:relative;z-index:1;margin-top:13px}
body.route-hp .remote-hero .hero-actions .btn{min-height:53px}
body.route-hp .remote-hero .btn span{display:inline-flex;align-items:center;gap:7px}
body.route-hp .remote-hero .btn svg{width:18px;height:18px}

body.route-hp .quick-grid{gap:11px;margin-top:12px}
body.route-hp .quick{
  min-height:140px;padding:15px;border-radius:21px;
  background:
    radial-gradient(110px 90px at 110% 110%,rgba(104,67,255,.20),transparent 65%),
    linear-gradient(155deg,rgba(17,32,63,.98),rgba(10,21,44,.98));
}
body.route-hp .quick:nth-child(2){background:radial-gradient(110px 90px at 110% 110%,rgba(16,223,194,.14),transparent 65%),linear-gradient(155deg,rgba(17,32,63,.98),rgba(10,21,44,.98))}
body.route-hp .quick:nth-child(3){background:radial-gradient(110px 90px at 110% 110%,rgba(30,139,255,.17),transparent 65%),linear-gradient(155deg,rgba(17,32,63,.98),rgba(10,21,44,.98))}
body.route-hp .quick:nth-child(4){background:radial-gradient(110px 90px at 110% 110%,rgba(239,72,211,.17),transparent 65%),linear-gradient(155deg,rgba(17,32,63,.98),rgba(10,21,44,.98))}
body.route-hp .quick .icon{margin-bottom:11px}
body.route-hp .quick:nth-child(1) .svgicon{color:#c372ff}
body.route-hp .quick:nth-child(2) .svgicon{color:#2ce6d8}
body.route-hp .quick:nth-child(3) .svgicon{color:#42a5ff}
body.route-hp .quick:nth-child(4) .svgicon{color:#ff5ecb}
body.route-hp .quick b{font-size:15px}
body.route-hp .quick small{font-size:11.5px;color:#b7c3dc}

body.route-hp .room-card{padding:17px;margin-top:13px;border-radius:24px;background:linear-gradient(180deg,rgba(14,29,58,.98),rgba(8,19,40,.98))}
body.route-hp .room-card .section-title{margin-bottom:13px}
body.route-hp .room-card .section-title h2{font-size:23px}
body.route-hp .room-card .section-title span{color:#75dcd6}
body.route-hp .room-card .section-title h2:before{content:"↗";display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:9px;background:rgba(53,135,255,.12);color:#68bcff;font-size:15px;vertical-align:2px}
body.route-hp #roomInput{font-size:21px;font-weight:900;letter-spacing:.12em}
body.route-hp #roomStatus{border-color:rgba(20,223,194,.13)}
body.route-hp .remote-purpose-strip{
  margin-top:13px;padding:13px 14px;border-radius:19px;
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;
  background:linear-gradient(100deg,rgba(14,31,61,.97),rgba(7,35,56,.98));
  border:1px solid rgba(25,227,220,.38);
  box-shadow:0 0 26px rgba(25,227,220,.07),inset 0 1px 0 rgba(255,255,255,.04)
}
body.route-hp .remote-purpose-icons{display:flex;align-items:center;gap:5px;color:#59e9e0;font-size:18px}
body.route-hp .remote-purpose-icons svg{width:28px;height:28px}
body.route-hp .remote-purpose-strip b{display:block;color:#70f1e8;font-size:13px;margin-bottom:3px}
body.route-hp .remote-purpose-strip span{display:block;color:#aebbd3;font-size:10.5px;line-height:1.4}

/* Search page remote banner */
body.route-hp .remote-search-banner{
  position:relative;overflow:hidden;margin-bottom:16px;padding:16px 17px;border-radius:23px;
  display:grid;grid-template-columns:minmax(0,1fr) 126px;gap:10px;align-items:center;
  background:
    radial-gradient(180px 140px at 92% 38%,rgba(54,151,255,.20),transparent 68%),
    linear-gradient(135deg,rgba(17,26,62,.98),rgba(8,29,55,.98));
  border:1px solid rgba(91,91,255,.32)
}
body.route-hp .remote-search-banner:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,#1bded2,#7b50ff,#ef4ad6)}
body.route-hp .remote-search-banner .kicker{font-size:9px;letter-spacing:.18em;color:#4fe9e1;font-weight:1000}
body.route-hp .remote-search-banner h2{margin:6px 0 4px;font-size:25px;line-height:1.02;letter-spacing:-.035em}
body.route-hp .remote-search-banner h2 span{display:block;background:linear-gradient(90deg,#fff,#9f82ff 55%,#ff72d8);-webkit-background-clip:text;background-clip:text;color:transparent}
body.route-hp .remote-search-banner p{margin:0;color:#b6c3dc;font-size:11.5px;line-height:1.45}
body.route-hp .remote-search-banner svg{width:100%;filter:drop-shadow(0 0 15px rgba(81,92,255,.26))}
body.route-hp #page-search>.section-title{margin-top:0}
body.route-hp #page-search>.section-title h2{font-size:27px;letter-spacing:-.035em}
body.route-hp #page-search>.section-title span{color:#b87bff;font-weight:800}
body.route-hp .api-ready-badge{padding:8px 11px;color:#62f0df;border-color:rgba(25,227,220,.30);background:rgba(10,75,73,.18)}
body.route-hp .search-wrap{margin-top:11px}
body.route-hp .search-icon{font-size:22px;color:#7ca7da}
body.route-hp #searchBtn{font-size:16px}
body.route-hp .chips{gap:9px;padding-top:13px}
body.route-hp .chip{padding:10px 14px;background:#101c36;border-color:rgba(112,145,226,.18)}
body.route-hp .chip.active{background:linear-gradient(105deg,#e448e2,#8849ff);box-shadow:0 0 0 2px rgba(226,88,255,.13),0 10px 25px rgba(131,62,255,.20)}
body.route-hp .category-note{background:rgba(91,65,177,.10);border-color:rgba(137,87,255,.16);padding:11px 13px}
body.route-hp .yt-account-card{border-radius:23px!important;border-color:rgba(65,161,255,.25)!important;box-shadow:0 0 0 1px rgba(232,65,216,.10),0 20px 45px rgba(0,0,0,.27)!important}
body.route-hp .yt-connect-button{border-radius:17px!important;min-height:55px!important}
body.route-hp .library-tabs{border-radius:19px;padding:6px;background:rgba(9,18,39,.96)}
body.route-hp .library-tab{min-height:43px;border-radius:14px}
body.route-hp .library-tab.active{background:linear-gradient(110deg,#bc43e7,#714cff 60%,#2a77ff);box-shadow:0 11px 25px rgba(95,58,212,.23)}
body.route-hp .results>.empty{
  min-height:120px;border:1px dashed rgba(114,129,190,.27);border-radius:22px;
  display:grid;place-items:center;text-align:center;padding:22px;color:#aab6cf;
  background:linear-gradient(180deg,rgba(14,24,49,.62),rgba(9,17,35,.52));
}

/* Bottom nav */
body.route-hp .bottom-nav{width:min(560px,100%);padding:10px 13px calc(10px + var(--safe-bottom));background:linear-gradient(180deg,rgba(5,10,23,.12),rgba(5,10,23,.99) 31%)}
body.route-hp .nav-inner{border-radius:22px;padding:7px;background:linear-gradient(180deg,#0d1932,#091328);border-color:rgba(102,132,214,.15)}
body.route-hp .nav-btn{min-height:58px;border-radius:16px;font-size:10px}
body.route-hp .nav-btn.active{background:linear-gradient(145deg,rgba(134,68,255,.40),rgba(37,92,211,.18));box-shadow:inset 0 0 0 1px rgba(151,103,255,.37),0 0 21px rgba(121,72,255,.12)}

@media(max-width:390px){
  body.route-hp .remote-hero{padding:18px 16px 16px}
  body.route-hp .remote-hero-grid{grid-template-columns:minmax(0,1.25fr) 104px;gap:7px}
  body.route-hp .remote-link-visual{min-height:125px}
  body.route-hp .remote-hero h2{font-size:29px}
  body.route-hp .remote-search-banner{grid-template-columns:minmax(0,1fr) 105px;padding:15px}
  body.route-hp .quick{min-height:137px;padding:14px}
}
@media(max-width:345px){
  body.route-hp .remote-hero-grid{grid-template-columns:1fr}
  body.route-hp .remote-link-visual{display:none}
  body.route-hp .remote-search-banner{grid-template-columns:1fr}
  body.route-hp .remote-search-banner svg{display:none}
}


/* V15.6 — larger text, title/artist search mode, results guidance, visual control feedback */
body.route-hp .brand h1{font-size:23px}
body.route-hp .brand p{font-size:12.5px}
body.route-hp .status-pill{font-size:13px}
body.route-hp .remote-search-banner .kicker{font-size:10.5px}
body.route-hp .remote-search-banner h2{font-size:29px}
body.route-hp .remote-search-banner p{font-size:13.5px;line-height:1.5}
body.route-hp #page-search>.section-title h2{font-size:31px}
body.route-hp #page-search>.section-title span{font-size:14px}
body.route-hp .api-ready-badge{font-size:13px;font-weight:900}
body.route-hp .requester-box label,
body.route-hp .search-field-label{display:block;margin:0 0 8px 4px;color:#c3cce0;font-size:13.5px;font-weight:1000}
body.route-hp .input{font-size:17px;min-height:58px}
body.route-hp #searchBtn{font-size:18px;min-height:60px}
body.route-hp .chip{font-size:13.5px;padding:11px 16px}
body.route-hp .category-note{font-size:13px;line-height:1.55}
body.route-hp .library-tab{font-size:13px}
body.route-hp .song-title{font-size:16px}
body.route-hp .song-meta{font-size:12.5px}
body.route-hp .song-actions .btn{font-size:13.5px}
body.route-hp .nav-btn{font-size:11.5px}
body.route-hp .now-label{font-size:12.5px}
body.route-hp .now-title{font-size:25px}
body.route-hp .now-channel{font-size:14px}
body.route-hp .big-controls .btn{font-size:18px;min-height:58px}

body.route-hp .search-mode-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:13px 0 14px;padding:5px;
  border-radius:19px;background:linear-gradient(180deg,#0d1931,#091329);
  border:1px solid rgba(112,145,226,.23);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)
}
body.route-hp .search-mode-btn{
  min-width:0;min-height:51px;padding:10px 8px;border-radius:15px;background:transparent;
  color:#aeb8d0;font-size:13.5px;font-weight:950;display:flex;align-items:center;justify-content:center;gap:7px;
  transition:transform .16s ease,background .2s ease,color .2s ease,box-shadow .2s ease
}
body.route-hp .search-mode-btn:active{transform:scale(.97)}
body.route-hp .search-mode-btn.active{
  color:#fff;background:linear-gradient(105deg,#b72fff,#7250ff 55%,#1687ff);
  box-shadow:0 10px 26px rgba(99,58,230,.28),inset 0 0 0 1px rgba(255,255,255,.15)
}
body.route-hp .search-mode-icon{width:21px;height:21px;display:grid;place-items:center;color:#80b8ff}
body.route-hp .search-mode-icon svg{width:100%;height:100%}
body.route-hp .search-mode-btn.active .search-mode-icon{color:#fff}
body.route-hp .search-mode-hint{margin:7px 4px 0;color:#92a2c2;font-size:12.5px;line-height:1.45}
body.route-hp .search-loading b{color:#fff}
body.route-hp .search-loading span,
body.route-hp .results>.empty span{display:inline-block;margin-top:6px;color:#92a2c2;font-size:12px}
body.route-hp #results{scroll-margin-top:14px}
body.route-hp #results.results-arrived{animation:resultsArrivedV156 .9s ease}
@keyframes resultsArrivedV156{
  0%{filter:brightness(1);transform:translateY(0)}
  35%{filter:brightness(1.22);transform:translateY(-3px)}
  100%{filter:brightness(1);transform:translateY(0)}
}

body.route-hp #remotePlayBtn,
body.route-hp #remotePauseBtn,
body.route-hp #remoteNextBtn{
  transition:transform .16s ease,background .18s ease,box-shadow .18s ease,color .18s ease,filter .18s ease
}
body.route-hp #remotePlayBtn.feedback-play{
  background:linear-gradient(105deg,#00d9ad,#18b9f3)!important;color:#02191b!important;
  box-shadow:0 0 0 2px rgba(62,255,220,.22),0 0 26px rgba(23,218,200,.45)!important;
  transform:scale(.96);filter:brightness(1.08)
}
body.route-hp #remotePauseBtn.feedback-pause{
  background:linear-gradient(105deg,#ffb02e,#ff6f4a)!important;color:#211000!important;
  box-shadow:0 0 0 2px rgba(255,183,55,.22),0 0 26px rgba(255,119,65,.42)!important;
  transform:scale(.96);filter:brightness(1.08)
}
body.route-hp #remoteNextBtn.feedback-next{
  background:linear-gradient(105deg,#f044c7,#7951ff)!important;color:#fff!important;
  box-shadow:0 0 0 2px rgba(241,76,209,.22),0 0 26px rgba(125,78,255,.42)!important;
  transform:scale(.96);filter:brightness(1.08)
}

@media(max-width:390px){
  body.route-hp .remote-search-banner h2{font-size:27px}
  body.route-hp #page-search>.section-title h2{font-size:29px}
  body.route-hp .search-mode-btn{font-size:12.5px;gap:5px}
  body.route-hp .search-mode-icon{width:19px;height:19px}
}


/* === Karaoke V7 V15.9.1 - Jelajah YouTube + Trial Server Search === */
body.route-hp .content-search-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:11px 0 13px;padding:5px;
  border-radius:20px;background:linear-gradient(180deg,#10192f,#091126);
  border:1px solid rgba(111,145,226,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)
}
body.route-hp .content-search-btn{
  appearance:none;border:0;min-width:0;min-height:61px;padding:9px 8px;border-radius:16px;
  background:transparent;color:#aab6ce;display:flex;align-items:center;justify-content:center;gap:9px;
  text-align:left;transition:transform .16s ease,background .2s ease,color .2s ease,box-shadow .2s ease
}
body.route-hp .content-search-btn:active{transform:scale(.97)}
body.route-hp .content-search-btn.active{
  color:#fff;background:linear-gradient(108deg,#ff294f,#8b3fff 52%,#168dff);
  box-shadow:0 11px 28px rgba(101,51,229,.28),inset 0 0 0 1px rgba(255,255,255,.16)
}
body.route-hp .content-search-btn[data-content-mode="karaoke"].active{
  background:linear-gradient(108deg,#b82fff,#7450ff 54%,#15b5df)
}
body.route-hp .content-search-icon{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;font-size:19px;color:#80b8ff}
body.route-hp .content-search-btn.active .content-search-icon{color:#fff;filter:drop-shadow(0 0 9px rgba(255,255,255,.35))}
body.route-hp .content-search-btn b{display:block;font-size:13.5px;line-height:1.15;font-weight:1000}
body.route-hp .content-search-btn small{display:block;margin-top:3px;color:#8998b9;font-size:9.5px;line-height:1.2;font-weight:800}
body.route-hp .content-search-btn.active small{color:rgba(255,255,255,.78)}
body.route-hp .karaoke-only-search[hidden]{display:none!important}
body.route-hp .search-more-btn{width:100%;margin:12px 0 2px;min-height:48px;font-size:13px}
body.route-hp .search-more-btn[hidden]{display:none!important}
body.route-hp .search-more-btn:disabled{opacity:.6;cursor:wait}
@media(max-width:390px){
  body.route-hp .content-search-btn{gap:6px;padding:8px 6px}
  body.route-hp .content-search-icon{width:24px;height:24px;font-size:17px}
  body.route-hp .content-search-btn b{font-size:12.5px}
  body.route-hp .content-search-btn small{font-size:8.8px}
}