*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{
    font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    background:#0A0A0F;
    color:#E8E8EE;
    user-select:none;
    -webkit-user-select:none;
}

/* Screens */
.screen{display:none;position:absolute;top:0;left:0;width:100vw;height:100vh;background:#0A0A0F}
.screen.active{display:block}

/* Top bar */
.topbar{
    display:flex;
    align-items:center;
    height:7.5vh;
    padding:0 2.5vw;
    background:#14141F;
    border-bottom:2px solid #1E1E2E;
    position:relative;
    z-index:20;
}
.topbar-title{
    font-size:3vh;
    font-weight:700;
    color:#FFF;
    flex:1;
    text-align:center;
    letter-spacing:0.5px;
}
.topbar-back{
    font-size:2.6vh;
    color:#448AFF;
    cursor:pointer;
    padding:0.6vh 1.2vh;
    border-radius:0.8vh;
    border:2px solid transparent;
}
.topbar-back.focused{
    border-color:#FFF;
    background:rgba(68,138,255,0.25);
    outline:none;
}
.topbar-info{font-size:2.1vh;color:#AAA}
.msx-badge{
    font-size:1.6vh;
    background:#2979FF;
    color:#FFF;
    padding:0.3vh 0.8vh;
    border-radius:0.5vh;
    margin-left:1vw;
    font-weight:600;
    letter-spacing:1px;
}

/* Inputs */
.input{
    width:100%;
    height:5.8vh;
    padding:0 1.2vw;
    font-size:2.5vh;
    border:2px solid #333366;
    border-radius:1.1vh;
    background:#14142A;
    color:#FFF;
    outline:none;
    transition:border-color .2s,box-shadow .2s;
}
.input:focus, .input.focused{
    border-color:#448AFF;
    box-shadow:0 0 1.5vh rgba(68,138,255,0.4);
    outline:none;
}

/* Buttons */
.btn{
    height:5.4vh;
    padding:0 2.2vw;
    font-size:2.5vh;
    border:none;
    border-radius:1.2vh;
    cursor:pointer;
    font-weight:600;
    transition:all .15s ease;
}
.btn-primary{
    background:#448AFF;
    color:#FFF;
    box-shadow:0 0.4vh 1.2vh rgba(68,138,255,0.3);
}
.btn-primary:disabled{background:#444;color:#888;box-shadow:none}
.btn-primary:not(:disabled):hover, .btn-primary.focused{
    background:#2979FF;
    outline:3px solid #FFF;
    transform:scale(1.02);
}
.btn-danger{background:#FF5252;color:#FFF}
.btn-danger.focused{outline:3px solid #FFF;background:#D32F2F}
.btn-secondary{background:#26263B;color:#DDD}
.btn-secondary.focused{outline:3px solid #FFF;background:#3A3A55}

/* Login Screen */
#screen-login{
    background:radial-gradient(circle at 50% 30%, #171738 0%, #0A0A10 70%, #050508 100%);
}
.login-card{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:35vw;
    max-width:640px;
    min-width:440px;
    padding:4.8vh 2.5vw;
    background:rgba(20,20,38,0.95);
    border-radius:2.2vh;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:1.8vh;
    border:1px solid rgba(68,138,255,0.25);
    box-shadow:0 2vh 6vh rgba(0,0,0,0.8);
    backdrop-filter:blur(8px);
}
.login-logo-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.2vw;
}
.login-logo{
    font-size:5vh;
    font-weight:800;
    color:#448AFF;
    letter-spacing:1px;
}
.login-subtitle{
    font-size:2.2vh;
    color:#99A;
    margin-bottom:0.5vh;
}
.error-text{
    color:#FF5252;
    font-size:2vh;
    min-height:2.6vh;
    font-weight:500;
}
.loading-dots{
    font-size:2vh;
    color:#448AFF;
    min-height:2.6vh;
}

/* Login Tabs */
.login-tabs{
    display:flex;
    background:#101020;
    border-radius:1.1vh;
    padding:0.4vh;
    gap:0.6vh;
    border:1px solid #282845;
}
.login-tab{
    flex:1;
    padding:1.1vh;
    font-size:2vh;
    font-weight:600;
    color:#8888AA;
    background:transparent;
    border:none;
    border-radius:0.9vh;
    cursor:pointer;
    transition:all .2s;
}
.login-tab.active{
    background:#448AFF;
    color:#FFF;
}
.login-tab.focused{
    outline:2px solid #FFF;
    outline-offset:1px;
}

/* Password wrap */
.password-wrap{position:relative;width:100%}
.password-wrap .input{padding-right:5.5vh}
.password-toggle{
    position:absolute;
    right:1.2vh;
    top:50%;
    transform:translateY(-50%);
    font-size:2.6vh;
    cursor:pointer;
    z-index:2;
    color:#999;
}
.password-toggle:hover, .password-toggle.focused{color:#448AFF}

/* Grid 2x2 Dashboard */
.grid-2x2{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:3.5vh 2.5vw;
    padding:6vh 10vw;
    height:calc(100vh - 7.5vh);
}
.grid-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:2vh;
    border:3px solid transparent;
    transition:all .2s ease;
    cursor:pointer;
    position:relative;
    overflow:hidden;
}
.grid-card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    opacity:0.9;
    border-radius:1.8vh;
    z-index:0;
}
.grid-card .grid-icon, .grid-card .grid-label, .grid-card .grid-desc{
    position:relative;
    z-index:1;
}
.grid-card:nth-child(1){background:linear-gradient(135deg,#1E88E5,#1565C0)}
.grid-card:nth-child(2){background:linear-gradient(135deg,#FB8C00,#E65100)}
.grid-card:nth-child(3){background:linear-gradient(135deg,#43A047,#2E7D32)}
.grid-card:nth-child(4){background:linear-gradient(135deg,#8E24AA,#6A1B9A)}
.grid-card.focused{
    border-color:#FFF;
    transform:scale(1.05);
    box-shadow:0 1vh 3vh rgba(0,0,0,0.6), 0 0 2vh rgba(68,138,255,0.5);
}
.grid-icon{font-size:7.5vh;margin-bottom:1vh}
.grid-label{
    font-size:3.4vh;
    font-weight:700;
    color:#FFF;
    text-shadow:0 0.2vh 0.4vh rgba(0,0,0,0.5);
}
.grid-desc{
    font-size:1.8vh;
    color:rgba(255,255,255,0.75);
    margin-top:0.5vh;
}

/* Master-Detail / List Layouts */
.content-layout{
    display:flex;
    height:calc(100vh - 7.5vh);
}
.sidebar-pane{
    width:28vw;
    border-right:2px solid #1E1E2E;
    background:#10101C;
    display:flex;
    flex-direction:column;
}
.main-pane{
    flex:1;
    display:flex;
    flex-direction:column;
    background:#0A0A0F;
    overflow:hidden;
}

/* Search bar */
.search-bar{
    padding:1.4vh 1.6vw;
    background:#141422;
    border-bottom:1px solid #1E1E30;
}
.search-bar .input{
    height:5vh;
    font-size:2.2vh;
}

/* List view */
.list-view{
    overflow-y:auto;
    height:calc(100vh - 13.5vh);
    padding:1vh 1.5vw;
}
.list-item{
    display:flex;
    align-items:center;
    padding:1.6vh 1.8vh;
    margin:0.5vh 0;
    border-radius:1.1vh;
    border:2px solid transparent;
    cursor:pointer;
    gap:1.5vh;
    background:#141424;
    transition:background .15s, border-color .15s, transform .15s;
}
.list-item.focused{
    border-color:#448AFF;
    background:#1D2345;
    transform:translateX(0.5vw);
    box-shadow:0 0 1.5vh rgba(68,138,255,0.3);
}
.list-item-icon{
    width:5.5vh;
    height:5.5vh;
    object-fit:contain;
    border-radius:0.8vh;
    background:#1E1E2E;
    padding:0.4vh;
}
.list-item-info{flex:1;min-width:0}
.list-item-title{
    font-size:2.3vh;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.list-item-sub{
    font-size:1.8vh;
    color:#448AFF;
    margin-top:0.3vh;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.list-item-sub2{
    font-size:1.6vh;
    color:#889;
    margin-top:0.2vh;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.list-item-count{
    font-size:1.8vh;
    color:#889;
    background:#1E1E35;
    padding:0.4vh 1vh;
    border-radius:1vh;
}

/* Grid view */
.grid-view{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(21vh,1fr));
    gap:2.2vh 1.5vw;
    overflow-y:auto;
    height:calc(100vh - 13.5vh);
    padding:2vh 2vw;
}
.grid-item{
    text-align:center;
    padding:1vh;
    border-radius:1.4vh;
    border:2px solid transparent;
    cursor:pointer;
    transition:all .2s ease;
    background:#141424;
    display:flex;
    flex-direction:column;
}
.grid-item.focused{
    border-color:#448AFF;
    transform:scale(1.08);
    background:#1C2142;
    box-shadow:0 1vh 2.5vh rgba(0,0,0,0.6), 0 0 1.8vh rgba(68,138,255,0.4);
    z-index:2;
}
.grid-item-poster{
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
    border-radius:1vh;
    background:#1A1A2E;
}
.grid-item-title{
    font-size:2.1vh;
    font-weight:600;
    margin-top:1vh;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:left;
}
.grid-item-rating{
    font-size:1.7vh;
    color:#FFCA28;
    margin-top:0.4vh;
    text-align:left;
}

/* Detail View Modal */
.detail-view{
    padding:4vh 4vw;
    overflow-y:auto;
    height:calc(100vh - 7.5vh);
    background:radial-gradient(circle at 15% 30%, #151833 0%, #0A0A10 70%);
}
.detail-header{
    display:flex;
    gap:3.5vw;
    align-items:flex-start;
}
.detail-poster{
    width:28vh;
    aspect-ratio:2/3;
    object-fit:cover;
    border-radius:1.4vh;
    box-shadow:0 1.5vh 4vh rgba(0,0,0,0.8);
    border:1px solid rgba(255,255,255,0.1);
}
.detail-info{
    flex:1;
}
.detail-title{
    font-size:4vh;
    font-weight:800;
    margin-bottom:1.2vh;
    line-height:1.2;
}
.detail-meta{
    font-size:2.1vh;
    color:#99A;
    margin-bottom:2vh;
    display:flex;
    gap:1.5vw;
    align-items:center;
}
.detail-badge{
    background:#1E2749;
    color:#448AFF;
    padding:0.4vh 1vh;
    border-radius:0.6vh;
    font-weight:600;
    font-size:1.8vh;
}
.detail-section{
    font-size:2.6vh;
    font-weight:700;
    margin-top:2.2vh;
    margin-bottom:0.8vh;
    color:#448AFF;
}
.detail-text{
    font-size:2.1vh;
    line-height:1.6;
    color:#CCD;
    max-width:65vw;
}
.detail-btn{
    display:inline-flex;
    align-items:center;
    gap:1vh;
    padding:1.6vh 4.5vh;
    font-size:2.6vh;
    background:#448AFF;
    color:#FFF;
    border:none;
    border-radius:1.3vh;
    cursor:pointer;
    margin-top:2.5vh;
    font-weight:700;
    box-shadow:0 0.5vh 1.5vh rgba(68,138,255,0.3);
    transition:all .15s ease;
}
.detail-btn.focused{
    outline:3px solid #FFF;
    background:#2979FF;
    transform:scale(1.05);
}

/* Series Seasons & Episodes */
.seasons-bar{
    display:flex;
    gap:1vw;
    padding:1.5vh 2vw;
    background:#10101C;
    border-bottom:1px solid #1E1E30;
    overflow-x:auto;
}
.season-tab{
    padding:1vh 2vh;
    background:#1A1A2E;
    color:#AAA;
    border-radius:0.9vh;
    cursor:pointer;
    font-size:2vh;
    font-weight:600;
    border:2px solid transparent;
    white-space:nowrap;
}
.season-tab.active{
    background:#448AFF;
    color:#FFF;
}
.season-tab.focused{
    border-color:#FFF;
    outline:none;
}
.episodes-list{
    overflow-y:auto;
    height:calc(100vh - 22vh);
    padding:1.5vh 2vw;
}

/* Settings */
.settings-container{
    padding:4vh 8vw;
    overflow-y:auto;
    height:calc(100vh - 7.5vh);
}
.settings-section{
    background:#141424;
    border-radius:1.8vh;
    padding:3vh 2.5vw;
    margin-bottom:3vh;
    border:1px solid #202038;
}
.settings-section-title{
    font-size:2.8vh;
    font-weight:700;
    color:#448AFF;
    margin-bottom:2vh;
}
.settings-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.4vh 0;
    border-bottom:1px solid #1E1E32;
    font-size:2.2vh;
}
.settings-row:last-child{border-bottom:none}
.settings-label{color:#889}
.settings-val{font-weight:600;color:#FFF}

/* Player Screen */
.screen-player{
    background:#000!important;
}
#video-player{
    width:100%;
    height:100%;
    background:#000;
    object-fit:contain;
}
.player-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    transition:opacity .3s ease;
    z-index:30;
}
.player-overlay>*{pointer-events:auto}
.player-top{
    display:flex;
    align-items:center;
    padding:3vh 3vw;
    background:linear-gradient(180deg,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.5) 60%,transparent 100%);
}
.player-back{
    font-size:2.7vh;
    color:#FFF;
    cursor:pointer;
    padding:0.6vh 1.4vh;
    border-radius:0.8vh;
    border:2px solid transparent;
}
.player-back.focused{
    border-color:#FFF;
    background:rgba(68,138,255,0.3);
}
.player-title{
    font-size:2.8vh;
    color:#FFF;
    margin-left:2vh;
    font-weight:700;
    text-shadow:0 0.2vh 0.4vh rgba(0,0,0,0.7);
}
.player-channel-num{
    font-size:2vh;
    background:#448AFF;
    padding:0.4vh 1vh;
    border-radius:0.6vh;
    margin-left:1.5vw;
}

.player-center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2.5vh;
}
.player-btn{
    width:7vh;
    height:7vh;
    border-radius:50%;
    border:2px solid transparent;
    background:rgba(255,255,255,0.15);
    color:#FFF;
    font-size:2.7vh;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .15s ease;
    backdrop-filter:blur(6px);
}
.player-btn.focused{
    background:rgba(68,138,255,0.9);
    border-color:#FFF;
    transform:scale(1.15);
    box-shadow:0 0 3vh rgba(68,138,255,0.6);
}
.player-btn-play{
    width:9.5vh;
    height:9.5vh;
    font-size:3.8vh;
    background:rgba(255,255,255,0.9);
    color:#000;
}
.player-btn-play.focused{
    background:#448AFF;
    color:#FFF;
}
.player-nav-btn{
    width:6vh;
    height:6vh;
    font-size:2.3vh;
}

.player-bottom{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:0 3vw 4vh;
    background:linear-gradient(0deg,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.6) 60%,transparent 100%);
}
.player-progress-wrap{
    display:flex;
    align-items:center;
    gap:1.8vh;
    width:100%;
}
.player-time{
    font-size:2vh;
    color:#DDD;
    min-width:6vh;
    font-variant-numeric:tabular-nums;
}
.player-time:last-child{text-align:right}
.player-progress-bar{
    flex:1;
    height:0.7vh;
    background:rgba(255,255,255,0.25);
    border-radius:0.4vh;
    cursor:pointer;
    position:relative;
    transition:height .15s;
}
.player-progress-bar:hover, .player-progress-bar.focused{
    height:1vh;
}
.player-progress-fill{
    height:100%;
    background:#448AFF;
    border-radius:0.4vh;
    width:0%;
}
.player-progress-thumb{
    position:absolute;
    top:50%;
    transform:translate(-50%,-50%);
    width:2vh;
    height:2vh;
    background:#FFF;
    border-radius:50%;
    display:none;
    box-shadow:0 0 8px rgba(0,0,0,0.6);
}
.player-progress-bar:hover .player-progress-thumb,
.player-progress-bar.focused .player-progress-thumb{
    display:block;
}

.player-buffering{
    display:none;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:40;
}
.spinner{
    width:6.5vh;
    height:6.5vh;
    border:0.5vh solid rgba(255,255,255,0.2);
    border-top-color:#448AFF;
    border-radius:50%;
    animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Modal overlay */
.modal-overlay{
    display:none;
    position:fixed;
    top:0;left:0;width:100vw;height:100vh;
    background:rgba(0,0,0,0.85);
    z-index:9999;
    align-items:center;
    justify-content:center;
}
.modal-overlay.active{display:flex}
.modal-box{
    background:#141426;
    border:2px solid #33335A;
    border-radius:2.2vh;
    padding:4.5vh 3.5vw;
    max-width:55vw;
    min-width:440px;
    text-align:center;
    box-shadow:0 2vh 6vh rgba(0,0,0,0.85);
}
.modal-title{
    font-size:3.5vh;
    font-weight:700;
    color:#FFF;
    margin-bottom:2vh;
}
.modal-body{
    font-size:2.2vh;
    line-height:1.6;
    color:#CCD;
    margin-bottom:3.5vh;
    text-align:left;
}
.modal-actions{
    display:flex;
    justify-content:center;
    gap:2vh;
}
.modal-btn{
    min-width:180px;
    height:5.6vh;
    font-size:2.2vh;
    border-radius:1.1vh;
    border:none;
    cursor:pointer;
    font-weight:600;
}
.modal-btn-primary{background:#448AFF;color:#FFF}
.modal-btn-secondary{background:#303048;color:#FFF}
.modal-btn.focused{outline:3px solid #FFF;outline-offset:2px}

/* Toast */
#toast{
    position:fixed;
    bottom:4vh;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:rgba(20,20,35,0.95);
    color:#FFF;
    padding:1.4vh 3vw;
    border-radius:1vh;
    font-size:2.2vh;
    border:1px solid #448AFF;
    box-shadow:0 1vh 3vh rgba(0,0,0,0.7);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s, transform .3s;
    z-index:99999;
}
#toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

.hidden{display:none!important}
.loading{display:none;text-align:center;padding:4vh;font-size:2.5vh;color:#889}
.loading.visible{display:block}

::-webkit-scrollbar{width:0.8vh}
::-webkit-scrollbar-track{background:#10101C}
::-webkit-scrollbar-thumb{background:#2A2A44;border-radius:0.4vh}