/* ================= Choose Your Playlist ================= */
.pl-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60rem 40rem at 15% 20%, rgba(30, 197, 234, .18), transparent 70%),
        radial-gradient(70rem 50rem at 90% 85%, rgba(10, 32, 88, .55), transparent 70%),
        linear-gradient(160deg, #050b16 0%, #000 60%);
}

.pl-screen {
    position: relative;
    height: 100%;
    padding: 3.4rem 4rem 0;
    display: flex;
    flex-direction: column;
}

.pl-body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 3rem;
    margin-top: 2rem;
}

.pl-list-wrap {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: .4rem;
}

.pl-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.pl-row {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.pl-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: .8rem 1.2rem;
    border-radius: 1.2rem;
    border: .2rem solid transparent;
    background: rgba(29, 29, 29, .7);
}

.pl-main.focused {
    border-color: #fff;
    box-shadow: 0 0 1.4rem rgba(30, 197, 234, .45);
}

.pl-tile {
    width: 7.6rem;
    height: 7.6rem;
    border-radius: 1rem;
    background: var(--card-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    flex-shrink: 0;
}

.pl-info {
    min-width: 0;
}

.pl-name {
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pl-name > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-sub {
    color: var(--text-3);
    font-size: 1.5rem;
    margin-top: .4rem;
}

.pl-icon-btn {
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    background: var(--pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    border: .2rem solid transparent;
    flex-shrink: 0;
}

.pl-icon-btn.focused {
    border-color: #fff;
}

.pl-icon-btn.disabled {
    opacity: .25;
}

.pl-actions {
    width: 40rem;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding-bottom: 1rem;
}

.pl-footer {
    padding: 1rem 0 1.4rem;
    text-align: center;
    font-size: 1.25rem;
    color: var(--text-3);
    border-top: .1rem solid #222;
}

.pl-device {
    display: flex;
    gap: 3rem;
    margin-bottom: .6rem;
    font-size: 1.5rem;
}

.pl-device b {
    color: var(--text-2);
}

/* ================= Add / Edit Playlist ================= */
.edit-layout {
    position: relative;
    height: 100%;
    display: flex;
}

.edit-osk-space {
    width: 52rem;
    flex-shrink: 0;
}

.edit-panel {
    flex: 1;
    margin: 3rem 4rem 3rem 0;
    padding: 2.4rem 3rem;
    background: rgba(24, 24, 24, .96);
    border-radius: 2.4rem;
    overflow: hidden;
}

.edit-tabs {
    display: flex;
    gap: .6rem;
    margin-bottom: 1.4rem;
}

.edit-tab {
    padding: .9rem 3rem;
    border-radius: .8rem;
    background: #262626;
    font-size: 1.8rem;
    border: .2rem solid transparent;
}

.edit-tab.active {
    background: var(--accent);
}

.edit-tab.focused {
    border-color: #fff;
}

.edit-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.field {
    height: 5rem;
    padding: 0 1.4rem;
    display: flex;
    align-items: center;
    background: #111;
    border: .2rem solid #3a3a3a;
    border-radius: .9rem;
    font-size: 1.8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.field .ph {
    color: #666;
}

.field.focused {
    border-color: #fff;
}

.edit-actions {
    margin-top: 1rem;
}

.or-line {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    color: var(--text-3);
    margin: 1.4rem 0;
    font-size: 1.6rem;
}

.or-line::before,
.or-line::after {
    content: '';
    flex: 1;
    height: .1rem;
    background: #444;
}

.edit-qr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.edit-qr h3 {
    font-size: 2.1rem;
    margin-bottom: .6rem;
}

.edit-qr p {
    font-size: 1.35rem;
    line-height: 1.4;
}

/* ================= Home ================= */
.home-top {
    height: 12rem;
    padding: 2.4rem 4rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.home-info {
    width: 44rem;
    padding: 1.1rem 2.2rem;
    border: .15rem solid #3a3a3a;
    border-radius: 1.8rem;
    background: rgba(20, 20, 20, .85);
    position: relative;
    top: -.4rem;
}

.hi-place {
    font-size: 2.1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.4rem;
}

.hi-date {
    font-size: 1.6rem;
    color: var(--text-3);
    margin: .2rem 0 .4rem;
}

.hi-row {
    display: flex;
    justify-content: space-between;
    font-size: 2.4rem;
    color: var(--text-2);
}

.hi-weather {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 2rem;
}

.home-top-actions {
    display: flex;
    gap: 1.2rem;
}

.menu-cards {
    position: absolute;
    top: 12rem;
    left: 4rem;
    right: 4rem;
    height: 43rem;
    display: flex;
    gap: 2.6rem;
    justify-content: center;
}

.menu-card {
    position: relative;
    flex: 0 0 34rem;
    border-radius: var(--r-lg);
    overflow: hidden;
    background-color: #0b0b10;
}

.menu-card .art {
    position: absolute;
    inset: 0;
}

.art-live {
    background:
        radial-gradient(18rem 14rem at 80% 25%, rgba(30, 197, 234, .45), transparent 70%),
        radial-gradient(20rem 16rem at 60% 85%, rgba(38, 80, 210, .5), transparent 70%),
        linear-gradient(180deg, #0a1428, #050810);
}

.art-movies {
    background:
        repeating-linear-gradient(90deg, rgba(222, 60, 40, .55) 0 2.4rem, rgba(250, 190, 60, .55) 2.4rem 4.8rem),
        linear-gradient(180deg, #2a0d08, #120504);
    background-blend-mode: multiply;
}

.art-series {
    background:
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 4.2rem 4.2rem,
        linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 4.2rem 4.2rem,
        conic-gradient(from 200deg at 70% 40%, #d93f8a, #6d3fd9, #1ec5ea, #d9a03f, #d93f8a);
    background-blend-mode: normal, normal, multiply;
    opacity: .9;
}

.menu-panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    background: var(--card-gradient);
    opacity: .8;
    border: .3rem solid transparent;
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    transition: width .25s ease, opacity .25s ease;
}

.menu-panel .ic {
    font-size: 7.6rem;
    stroke-width: 1.5;
}

.menu-panel .menu-label {
    font-size: 2.6rem;
    font-weight: 700;
}

.menu-card.focused .menu-panel {
    width: 100%;
    opacity: 1;
    border-color: var(--accent-bright);
}

.menu-card.disabled .menu-panel {
    filter: grayscale(1);
    opacity: .5;
}

.home-status {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 2rem;
}

.home-divider {
    position: absolute;
    left: 0;
    right: 0;
    top: 57.4rem;
    height: .1rem;
    background: #aaa;
}

.bottom-bar {
    position: absolute;
    left: 31rem;
    right: 3rem;
    top: 59rem;
    display: flex;
    gap: 2.4rem;
}

.bar-btn {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 5.2rem;
    display: flex;
    align-items: center;
    padding-left: 6.8rem;
    border-radius: 1.4rem;
    background: rgba(40, 39, 40, .81);
    border: .15rem solid #444;
    font-size: 1.85rem;
    white-space: nowrap;
}

.bar-btn .bar-ic {
    position: absolute;
    left: -.6rem;
    top: -.5rem;
    width: 6rem;
    height: 6rem;
    border-radius: 1.4rem;
    background: var(--card-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
}

.bar-btn.focused {
    border-color: #fff;
    box-shadow: 0 0 1.6rem rgba(30, 197, 234, .5);
}

.home-device-info {
    position: absolute;
    left: 1.6rem;
    bottom: .8rem;
    width: 28rem;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--text-2);
    pointer-events: none;
}

/* ================= Split screens (Live / VOD) ================= */
.split {
    display: flex;
    height: calc(100% - 5rem);
}

.split-side {
    width: 31rem;
    flex-shrink: 0;
    padding: 1.6rem 0 0 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.split-side .screen-title {
    margin: 0 0 1.4rem .8rem;
    font-size: 2.6rem;
}

.side-list {
    flex: 1;
    min-height: 0;
}

/* ================= Live ================= */
.live-main {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 2.4rem;
    padding: 6.2rem 3rem 0 2rem;
}

.live-list {
    width: 44rem;
    flex-shrink: 0;
    height: 100%;
}

.live-list .list-row {
    background: var(--accent);
    border-radius: 1rem;
    margin-bottom: 0;
    opacity: .95;
}

.live-list .vitem .list-row {
    background: #171717;
}

.live-list .vitem.focused .list-row {
    background: var(--accent);
}

.live-list .lr-num {
    width: 5rem;
    color: var(--text-2);
    font-weight: 700;
    flex-shrink: 0;
}

.live-list .lr-name {
    flex: 1;
}

.live-list .lr-star {
    color: var(--warn);
    font-size: 1.8rem;
}

.live-list .lr-star .ic {
    fill: currentColor;
}

.live-preview {
    flex: 1;
    min-width: 0;
    height: 100%;
    max-height: 46rem;
    border-radius: 2rem;
    border: .15rem solid #2c2c2c;
    background: linear-gradient(160deg, rgba(10, 32, 88, .5), rgba(0, 0, 0, .3));
    padding: 2.4rem 2.8rem;
    overflow: hidden;
}

.pv-head {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.pv-logo {
    width: 9rem;
    height: 9rem;
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pv-logo img {
    max-width: 85%;
    max-height: 85%;
}

.pv-name {
    font-size: 2.6rem;
    font-weight: 700;
}

.pv-cat {
    color: var(--text-3);
    font-size: 1.5rem;
    margin-top: .4rem;
}

.pv-epg {
    margin-top: 1.4rem;
}

.pv-epg .pv-label {
    font-size: 1.2rem;
    color: var(--accent-bright);
    letter-spacing: .1rem;
    text-transform: uppercase;
}

.pv-epg .pv-title {
    font-size: 2rem;
    margin-top: .2rem;
}

.pv-epg .pv-time {
    color: var(--text-3);
    font-size: 1.4rem;
    margin-top: .2rem;
}

.pv-bar {
    height: .5rem;
    border-radius: .3rem;
    background: #333;
    margin-top: .8rem;
    overflow: hidden;
}

.pv-bar > i {
    display: block;
    height: 100%;
    background: var(--accent-bright);
}

.pv-hint {
    margin-top: 2rem;
    color: var(--text-3);
    font-size: 1.4rem;
}

/* ================= Movies / Series ================= */
.vod-bg {
    position: absolute;
    inset: 0;
    background: #050510 center / cover no-repeat;
}

.vod-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 8, .78) 40%, rgba(0, 0, 8, .9) 100%);
}

.vod-bg.has-image {
    filter: blur(.4rem);
}

.split, .vod-legend {
    position: relative;
}

.vod-side {
    width: 34rem;
}

.vod-side .list-row {
    border-left: .4rem solid transparent;
}

.vod-main {
    flex: 1;
    min-width: 0;
    padding: 1.2rem 2rem 0 1.6rem;
    display: flex;
    flex-direction: column;
}

.hero {
    height: 26rem;
    border-radius: 2rem;
    border: .15rem solid #3a3a3a;
    background: rgba(0, 0, 0, .55);
    padding: 2rem 2.6rem;
    overflow: hidden;
    position: relative;
}

.hero-title {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20rem;
}

.hero-meta {
    display: flex;
    gap: 2.4rem;
    align-items: center;
    font-size: 1.9rem;
    margin-bottom: 1rem;
    color: var(--text-2);
}

.hero-meta .imdb {
    background: #f5c518;
    color: #000;
    padding: .1rem .7rem;
    border-radius: .5rem;
    font-weight: 700;
    font-size: 1.5rem;
    margin-right: .8rem;
}

.hero-line {
    font-size: 1.6rem;
    color: var(--text-2);
    margin-top: .5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-line b {
    color: var(--text-3);
    font-weight: 400;
    margin-right: .6rem;
}

.hero-plot {
    margin-top: .9rem;
    font-size: 1.5rem;
    line-height: 1.45;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carousel-title {
    font-size: 2.6rem;
    font-weight: 700;
    margin: 1.6rem 0 1rem .4rem;
    min-height: 3rem;
}

.carousel {
    flex: 1;
    min-height: 0;
    margin-bottom: 4rem;
}

.poster {
    height: 100%;
    padding: .5rem 1rem 0 .5rem;
}

.poster-img {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 22rem;
    border-radius: 1rem;
    overflow: hidden;
    background: #14142a center / cover no-repeat;
    border: .25rem solid transparent;
    display: flex;
    align-items: flex-end;
}

.poster-name {
    width: 100%;
    padding: .6rem .8rem;
    font-size: 1.25rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poster-prog {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: .4rem;
    background: rgba(255, 255, 255, .25);
}

.poster-prog > i {
    display: block;
    height: 100%;
    background: #e5252a;
}

.vitem.focused .poster-img {
    border-color: var(--accent-bright);
    box-shadow: 0 0 1.6rem rgba(30, 197, 234, .55);
    transform: scale(1.04);
}

.vod-legend {
    right: 2.4rem;
    top: 1.6rem;
    bottom: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: .9rem;
    position: absolute;
}

/* ================= Detail ================= */
.detail-layout {
    position: relative;
    height: 100%;
    display: flex;
    gap: 4rem;
    padding: 5rem 6rem;
}

.detail-poster {
    width: 28rem;
    height: 42rem;
    object-fit: cover;
    border-radius: 1.6rem;
    background: #14142a;
    flex-shrink: 0;
}

.detail-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.detail-title {
    font-size: 4rem;
    margin-bottom: 1.2rem;
}

.detail-meta {
    display: flex;
    gap: 2.4rem;
    font-size: 1.9rem;
    color: var(--text-2);
    margin-bottom: 1.4rem;
}

.detail-plot {
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--text-2);
    max-height: 10rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

.detail-people {
    font-size: 1.5rem;
    color: var(--text-2);
    line-height: 1.6;
    margin-bottom: 1.6rem;
}

.detail-people b {
    color: var(--text-3);
    font-weight: 400;
    margin-right: .6rem;
}

.detail-actions {
    display: flex;
    gap: 1.4rem;
    width: 70rem;
}

.detail-actions .wide-btn {
    width: auto;
    flex: 1;
}

.progress-btn .pb-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .28);
    width: 0;
}

.progress-btn .pb-label {
    position: relative;
}

.season-tabs {
    display: flex;
    gap: .8rem;
    margin-top: 1.8rem;
    flex-wrap: wrap;
}

.season-tab {
    padding: .7rem 2rem;
    border-radius: var(--r-pill);
    background: #262626;
    font-size: 1.5rem;
    border: .2rem solid transparent;
}

.season-tab.active {
    background: var(--accent);
}

.season-tab.focused {
    border-color: #fff;
}

.episode-list {
    flex: 1;
    min-height: 0;
    margin-top: 1.2rem;
    max-width: 90rem;
}

.episode-list .list-row {
    background: #171717;
    border-radius: .9rem;
    font-weight: 400;
}

.episode-list .vitem.focused .list-row {
    background: var(--accent);
}

/* ================= Settings ================= */
.settings-layout {
    display: flex;
    gap: 2.4rem;
    height: 100%;
    padding: 4rem 4rem 4rem 5rem;
}

.settings-nav {
    width: 42rem;
    flex-shrink: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.nav-row {
    padding: 1.7rem 2.2rem;
    border-radius: 1.4rem;
    background: #141414;
    font-size: 2rem;
    border: .2rem solid transparent;
}

.nav-row.active {
    background: var(--accent);
}

.nav-row.focused {
    border-color: #fff;
}

.settings-panel {
    flex: 1;
    min-width: 0;
    background: #111;
    border-radius: 2rem;
    padding: 3rem 4rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-title {
    text-align: center;
    font-size: 3.4rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.panel-title::before,
.panel-title::after {
    content: '';
    flex: 1;
    height: .2rem;
    background: linear-gradient(90deg, transparent, #777);
}

.panel-title::after {
    background: linear-gradient(270deg, transparent, #777);
}

.panel-sub {
    text-align: center;
    color: var(--text-3);
    font-size: 1.6rem;
    margin: 1.4rem 0 2rem;
}

.panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #0c0c0c;
    border-radius: 1.6rem;
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.opt-row {
    padding: 1.5rem 2rem;
    border-radius: 1.2rem;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: .2rem solid transparent;
    flex-shrink: 0;
}

.opt-row.selected {
    background: var(--accent);
}

.opt-row.focused {
    border-color: #fff;
}

.opt-note {
    color: var(--text-3);
    font-size: 1.6rem;
    padding: .6rem 1rem;
}

/* ================= Account ================= */
.account-layout {
    padding: 4rem 6rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.account-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
    margin: 2.4rem 0;
}

.acct-card {
    background: #111;
    border-radius: 2rem;
    padding: 1.6rem 2rem 2rem;
}

.acct-card.full {
    grid-column: 1 / -1;
}

.acct-head {
    text-align: center;
    background: var(--accent);
    border-radius: var(--r-pill);
    padding: .8rem;
    font-weight: 700;
    letter-spacing: .1rem;
    margin-bottom: 1rem;
}

.acct-row {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    font-size: 1.8rem;
    border-radius: .8rem;
}

.acct-row:nth-child(even) {
    background: #1a1a1a;
}

.acct-row span:first-child {
    color: var(--text-3);
}

.account-actions {
    width: 30rem;
}


/* ================= Activation ================= */
.act-layout {
    position: relative;
    height: 100%;
    padding: 5rem 7rem;
    display: flex;
    gap: 6rem;
    align-items: center;
}

.act-main {
    flex: 1;
    min-width: 0;
}

.act-main .brand {
    margin-bottom: 3rem;
}

.act-message {
    font-size: 2rem;
    line-height: 1.45;
    color: var(--text-2);
    margin: 1.2rem 0 2.6rem;
    max-width: 60rem;
}

.act-ids {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.act-ids > div {
    background: var(--bg-raised);
    border: .15rem solid var(--border);
    border-radius: var(--r-sm);
    padding: 1.2rem 2.2rem;
}

.act-ids span {
    display: block;
    font-size: 1.3rem;
    color: var(--text-3);
    margin-bottom: .4rem;
}

.act-ids b {
    font-size: 3.2rem;
    letter-spacing: .15rem;
    color: var(--accent-bright);
    font-weight: 700;
}

.act-contact {
    font-size: 1.8rem;
    line-height: 1.5;
    color: var(--text-2);
    margin-bottom: 1.4rem;
}

.act-contact-name {
    font-weight: 700;
    color: var(--text);
}

.act-hint {
    font-size: 1.5rem;
}

.act-side {
    width: 34rem;
    flex-shrink: 0;
    text-align: center;
}

.act-qr-note {
    font-size: 1.3rem;
    margin: 1rem 0 2.2rem;
}

.act-actions {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

/* ---- Home: trial / expiry notice + announcement ----
   One line in the gap between the menu cards (end at 55rem) and the divider (57.4rem). */
.home-banner {
    position: absolute;
    left: 4rem;
    right: 4rem;
    top: 55.2rem;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: center;
    font-size: 1.4rem;
    color: var(--warn);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}