:root{
    --accent:#f0d978;
    --panel:rgba(6,25,16,.88);
}

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    min-height:100%;
    margin:0;
    overflow:hidden;
    background:#020604;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    color:#fff;
}

#globalTvBackground {
    display: block !important;

    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    background-color: #050505;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    pointer-events: none !important;

    z-index: 0 !important;
}

#tvApp {
    position: relative !important;
    z-index: 1 !important;

    width: 100%;
    min-height: 100vh;

    background: transparent !important;
}

#bootScreen,
#pairScreen,
#waitingScreen,
#expiredScreen {
    background: transparent !important;
    background-image: none !important;
}

.waiting-backdrop {
    background: transparent !important;
    background-image: none !important;
}

.waiting-content,
.expired-content,
.pair-screen > *,
.boot-screen > * {
    position: relative;
    z-index: 2;
}
.tv-app{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;
    background:#020604;
}

.screen-0{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    min-height:100%;
    display:none;
    align-items:center;
    justify-content:center;
    padding:32px;
    overflow:hidden;
    text-align:center;
    background:radial-gradient(circle at 50% 15%,#17452f 0,#071b11 44%,#020604 100%);
}

.screen.active-0{
    display:flex;
}
.screen{
     position:absolute;
    
    top:0;
    right:0;
    bottom:0;
    left:0;

    display:flex;

    align-items:center;
    justify-content:center;

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .25s ease,
        visibility .25s ease;

}

.screen.active{

    opacity:1;
    visibility:visible;

    pointer-events:auto;

}
.boot-screen,
.pair-screen{
    flex-direction:column;
}

/* Chrome 68 belum mendukung flex gap secara konsisten */
.boot-screen > *,
.pair-screen > *{
    margin-top:9px;
    margin-bottom:9px;
}

.boot-screen h1,
.pair-screen h1{
    margin:0;
    font-size:56px;
    line-height:1.05;
    letter-spacing:.05em;
}

.boot-screen p,
.pair-screen p{
    margin:0;
    max-width:900px;
    color:#c8d4cd;
    font-size:24px;
}

.loader{
    width:86px;
    height:86px;
    border:7px solid rgba(255,255,255,.16);
    border-top-color:var(--primary,#28c879);
    border-radius:50%;
    animation:tv-spin .85s linear infinite;
}

@keyframes tv-spin{
    to{transform:rotate(360deg)}
}

.brand-icon{
    width:112px;
    height:112px;
    display:grid;
    place-items:center;
    border:2px solid var(--gold,#d8c875);
    border-radius:50%;
    color:var(--gold,#d8c875);
    font-size:54px;
    background:rgba(0,0,0,.25);
}

.pair-code{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:84vw;
    max-width:760px;
    padding:26px 44px;
    border:2px solid var(--gold,#d8c875);
    border-radius:22px;
    background:rgba(0,0,0,.35);
    color:var(--gold,#d8c875);
    font-size:88px;
    font-weight:900;
    letter-spacing:.18em;
    line-height:1;
    font-variant-numeric:tabular-nums;
}

.pair-screen small{
    color:#aebbb3;
    font-size:20px;
}

/* QR khusus Chrome 68 / Android TV lama */
.qr-box,
#roomQr,
#expiredQr{
    width:334px !important;
    height:334px !important;
    min-width:334px !important;
    min-height:334px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:20px auto !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:12px !important;
    background:#000 !important;
    box-shadow:
        0 0 0 3px rgba(255,215,90,.75),
        0 20px 60px rgba(0,0,0,.45);
}

/* qrcode.js menggambar QR pada canvas */
.qr-box canvas,
#roomQr canvas,
#expiredQr canvas{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:334px !important;
    height:334px !important;
    min-width:334px !important;
    min-height:334px !important;
    max-width:none !important;
    max-height:none !important;
    position:relative !important;
    z-index:10 !important;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
}

/* Hindari gambar duplikat dari qrcode.js */
.qr-box img,
#roomQr img,
#expiredQr img{
    display:none !important;
}

.tv-app.theme-modern{--accent:#f0d978}
.tv-app.theme-classic{--accent:#ffef8f}

.theme-classic .screen{
    background:linear-gradient(rgba(0,34,19,.82),rgba(0,13,8,.94)),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 70px),#04150d;
}
.theme-classic.qr-frame{
    border-radius:10px;
    border-width:4px;
    box-shadow:inset 0 0 0 3px #473c14,0 0 25px rgba(255,239,143,.2);
}

.theme-classic .tv-countdown,
.theme-classic .now-playing-card{
    border-radius:7px;
    border-color:#e1d177;
    background:linear-gradient(#24211d,#050505);
}

.tv-time-warning{
    position:fixed;
    z-index:9999;
    top:24px;
    left:50%;
    transform:translate(-50%,-140%);
    display:flex;
    align-items:center;
    gap:18px;
    padding:14px 22px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:16px;
    /*background:rgba(140,29,42,.94);*/
    background:linear-gradient(
        90deg,
        var(--primary-dark, #2b0d5c),
        var(--primary, #015d35),
        var(--accent, #0aa86a)
    );
    box-shadow:0 18px 45px rgba(0,0,0,.42);
    opacity:0;
    transition:.25s ease;
}
.tv-time-warning.show{transform:translate(-50%,0);opacity:1}

/* Center alignment fix */
button,.header-icon,.player-strip button,.duration-button,.stop-session-button,
.search-form button,.preview-footer button,.source-tabs button,.primary-button,.secondary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.15;
}
button i,.header-icon i,.player-strip button i,.search-form button i{line-height:1;pointer-events:none}

@media screen and (max-width:1024px){
    .screen{padding:24px}
    .boot-screen h1,
    .pair-screen h1{font-size:42px}
    .boot-screen p,
    .pair-screen p{font-size:18px}
    .pair-code{
        width:90%;
        max-width:700px;
        font-size:64px;
    }
}
@media screen and (min-width:1920px){
    .screen{padding:24px}
    .boot-screen h1,
    .pair-screen h1{font-size:42px}
    .boot-screen p,
    .pair-screen p{font-size:18px}
    .pair-code{
        width:90%;
        max-width:700px;
        font-size:64px;
    }
}
@media screen and (max-height:600px){
    .screen{padding:16px}
    .boot-screen h1,
    .pair-screen h1{font-size:32px}
    .boot-screen p,
    .pair-screen p{font-size:15px}
    .brand-icon{
        width:76px;
        height:76px;
        font-size:36px;
    }
    .qr-box,
    #roomQr,
    #expiredQr{
        width:280px !important;
        height:280px !important;
        min-width:280px !important;
        min-height:280px !important;
    }
    .qr-box canvas,
    #roomQr canvas,
    #expiredQr canvas{
        width:280px !important;
        height:280px !important;
        min-width:280px !important;
        min-height:280px !important;
    }
}
.screen-dim-overlay {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 100%;

    z-index: 214748;

    display: block;
    visibility: hidden;
    opacity: 0;

    background: #000;

    pointer-events: none;

    transition:
        opacity .18s ease,
        visibility .18s ease;
}

.screen-dim-overlay.show {
    visibility: visible;
    opacity: 1;
}

.tv-mic-status {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;

    padding: 12px 18px;
    border-radius: 30px;

    color: #fff;
    background: rgba(0, 0, 0, .78);
    border: 1px solid rgba(255,255,255,.25);

    font-size: 16px;
    font-weight: 600;

    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;

    transition: .25s ease;
}

.tv-mic-status.show {
    opacity: 1;
    transform: translateY(0);
}