:root{
    --bg:#050b16;
    --panel:#111827cc;
    --panel-solid:#121a2a;
    --panel-soft:#0d1422;
    --border:#253149;
    --text:#f4f7ff;
    --muted:#aab4cb;
    --accent:#6548f5;
    --accent2:#3768d8;
    --danger:#e11d48;
    --radius:18px;
}
*{box-sizing:border-box}
button,
a,
.tab,
.type-btn,
.genres-toggle,
.genre-item,
.primary-btn,
.secondary-btn,
.title-card,
.episode,
.season-btn{
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    touch-action:manipulation;
}
input,
textarea{
    -webkit-user-select:text;
    user-select:text;
    -webkit-touch-callout:default;
}
body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at top left, #162849 0, transparent 38%),
        linear-gradient(180deg,#07101e 0%,#030812 100%);
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit}
.page-shell{width:min(1760px, calc(100% - 34px)); margin:0 auto; padding:22px 0 60px}
.top-header{display:flex; justify-content:space-between; align-items:center; padding:24px 10px 34px}
.brand-icon{width:42px; height:42px; display:inline-block; margin-right:18px; vertical-align:middle; object-fit:contain}
h1{display:inline-block; font-size:54px; margin:0; letter-spacing:-1px}
.tabs{display:flex; justify-content:center; gap:34px; background:rgba(17,24,39,.82); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:22px; position:sticky; top:0; z-index:5; backdrop-filter:blur(12px)}
.tab{background:transparent; color:#dbe4ff; border:none; font-weight:700; font-size:16px; padding:10px 16px; cursor:pointer; position:relative}
.tab.active::after{content:""; position:absolute; left:14px; right:14px; bottom:-18px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--accent2))}
.filter-box{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; background:rgba(17,24,39,.72); border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; margin-bottom:18px}
.search-wrap{justify-self:start; width:min(420px,100%); display:flex; align-items:center; gap:12px; background:#0a1120; border:1px solid #1d2840; border-radius:16px; padding:0 18px}
.search-wrap input{height:52px; width:100%; color:var(--text); background:transparent; border:none; outline:none; font-size:15px}
.type-filter{justify-self:center; display:flex; gap:8px; background:#0a1120; border:1px solid #1d2840; border-radius:999px; padding:5px}
.type-btn{min-width:115px; border:none; border-radius:999px; padding:14px 24px; color:var(--text); background:transparent; font-weight:700; cursor:pointer}
.type-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 8px 30px #6548f544}
.genres-toggle{justify-self:end; min-width:245px; height:52px; color:var(--text); background:#0a1120; border:1px solid #2a3b60; border-radius:999px; font-weight:700; cursor:pointer}
.genres-panel{background:rgba(17,24,39,.9); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:24px}
.genres-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.genre-item{display:flex; align-items:center; gap:14px; background:#0b1220; border:1px solid #1d2840; border-radius:14px; padding:16px; font-weight:700; color:#dfe6fa; cursor:pointer}
.genre-item input{width:22px; height:22px; accent-color:var(--accent)}
.genres-actions{display:flex; justify-content:flex-end; gap:12px; margin-top:22px}.primary-btn,.secondary-btn{border:none; border-radius:12px; padding:13px 20px; color:var(--text); font-weight:800; cursor:pointer}.primary-btn{background:linear-gradient(135deg,var(--accent),var(--accent2))}.secondary-btn{background:#1a2436}.full{width:100%; margin-top:12px}
.status-box{margin:18px 0; color:var(--muted)}
.cards-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:24px}
.title-card{background:linear-gradient(180deg,#111b2b,#0c1320); border:1px solid #23304a; border-radius:16px; overflow:hidden; cursor:pointer; transition:.18s transform,.18s border-color}.title-card:hover{transform:translateY(-4px); border-color:#5264ff}.thumb{aspect-ratio:16/9; background:#111; overflow:hidden}.thumb img{width:100%; height:100%; object-fit:cover; display:block}.card-body{padding:14px}.card-title{font-size:17px; font-weight:900; margin-bottom:12px}.badge{display:inline-block; padding:7px 12px; border-radius:999px; background:#284c93; color:#fff; font-size:12px; font-weight:900}.badge.tv{background:#5a3bb0}.hidden{display:none!important}
.title-card{position:relative}
.favorite-btn{position:absolute; top:10px; right:10px; z-index:2; width:40px; height:40px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#fff; background:rgba(5,11,22,.74); font-size:24px; font-weight:900; cursor:pointer; line-height:1; display:grid; place-items:center}
.favorite-btn.active{color:#ff6b9a; border-color:rgba(255,107,154,.6); background:rgba(42,10,24,.82)}
.detail-title-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.detail-title-row h1{margin-bottom:0}
.detail-favorite{position:static; flex:0 0 auto}
.detail-header-bar{display:flex; justify-content:space-between; align-items:center; margin:20px 0}.back-link{color:#dce6ff}.detail-page{background:rgba(8,16,30,.5); border:1px solid var(--border); border-radius:var(--radius); padding:28px}.detail-main{display:grid; grid-template-columns:minmax(340px,520px) 1fr; gap:34px}.detail-cover{aspect-ratio:16/9; background:#111; border-radius:14px; overflow:hidden}.detail-cover img{width:100%; height:100%; object-fit:cover; display:block}.detail-info h1{display:block; font-size:42px; margin-bottom:12px}.meta-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px}.meta-pill{background:#172236; border:1px solid #26334e; padding:8px 12px; border-radius:8px; font-weight:700}.plot{max-width:850px; color:#e7ecfb; line-height:1.65; font-size:17px}.info-list{margin-top:24px; display:grid; gap:14px}.info-list div{display:grid; grid-template-columns:95px 1fr; gap:18px}.info-list b{color:#fff}.play-main{margin-top:22px; width:250px; font-size:17px}.seasons-area{margin-top:30px}.season-tabs{display:flex; flex-wrap:wrap; gap:14px; margin:12px 0 22px}.season-btn{min-width:70px; height:44px; border:1px solid #26334e; border-radius:8px; color:var(--text); background:#0a1120; font-weight:800; cursor:pointer}.season-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2))}.episode-list{max-width:1100px; border:1px solid #1f2a42; border-radius:14px; overflow:hidden}.episode{display:grid; grid-template-columns:120px 1fr 80px; gap:20px; align-items:center; padding:12px 18px; background:rgba(13,20,34,.88); border-bottom:1px solid #1e2940; cursor:pointer}.episode:last-child{border-bottom:none}.episode:hover{background:#142037}.episode img{width:110px; height:62px; border-radius:8px; object-fit:cover}.episode-title{font-weight:900}.episode-plot{color:#c4ccdd; font-size:14px; margin-top:4px}.episode-duration{text-align:right; color:#e8eefc}

@media (max-width:1200px){.cards-grid{grid-template-columns:repeat(4,1fr)}.genres-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:980px){.cards-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.page-shell{width:calc(100% - 34px)}h1{font-size:34px}.top-header{align-items:flex-start; gap:16px; flex-direction:column}.tabs{justify-content:flex-start; overflow:auto; gap:14px}.filter-box{grid-template-columns:1fr; gap:14px}.search-wrap,.genres-toggle,.type-filter{justify-self:stretch; width:100%}.type-btn{min-width:0; flex:1}.cards-grid{gap:14px}.genres-grid{grid-template-columns:1fr}.detail-main{grid-template-columns:1fr}.episode{grid-template-columns:92px 1fr; gap:12px}.episode img{width:88px;height:52px}.episode-duration{grid-column:2; text-align:left}.detail-info h1{font-size:34px}}
@media (max-width:700px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.cards-grid{grid-template-columns:1fr}}

/* --- Correzioni layout richieste --- */
.top-header > div{
    display:flex;
    align-items:center;
    gap:18px;
}
.brand-icon{
    margin-right:0;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}
.top-header h1{
    line-height:1;
}
.total-titles{
    background:rgba(255,255,255,.06);
    border:1px solid var(--border);
    padding:12px 18px;
    border-radius:999px;
    color:#dfe7ff;
    font-weight:800;
    white-space:nowrap;
}
.tabs{
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    gap:14px;
    flex-wrap:wrap;
    backdrop-filter:none;
    position:static;
}
.tab{
    background:rgba(17,24,39,.82);
    border:1px solid var(--border);
    border-radius:999px;
    padding:14px 20px;
    transition:.18s background,.18s border-color,.18s transform;
}
.tab:hover{transform:translateY(-1px); border-color:#5264ff}
.tab.active{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow:0 8px 30px #6548f544;
}
.tab.active::after{display:none}
.detail-header-bar .back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 18px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#0a1120;
    color:#dfe7ff;
    font-weight:800;
    line-height:1;
    transition:.18s background,.18s border-color,.18s transform;
}
.detail-header-bar .back-button:hover{
    transform:translateY(-1px);
    border-color:#5264ff;
    background:#121b2e;
}
.type-filter{
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    gap:12px;
}
.type-btn{
    background:#0a1120;
    border:1px solid #1d2840;
    border-radius:999px;
    padding:14px 26px;
    transition:.18s background,.18s border-color,.18s transform;
}
.type-btn:hover{transform:translateY(-1px); border-color:#5264ff}
.search-wrap span{
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}
.genres-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}
#genresArrow{
    display:inline-block;
    min-width:16px;
    text-align:center;
}
.genres-actions{
    justify-content:flex-end;
}
.card-body{
    text-align:center;
}
.card-title{
    text-align:center;
}
.badge{
    margin-left:auto;
    margin-right:auto;
}
@media (max-width:860px){
    .top-header > div{gap:12px}
    .tabs{gap:10px}
    .tab{white-space:nowrap}
    .type-filter{justify-content:center}
}


/* --- Ultime correzioni richieste: filtro tipo sempre centrato e un solo messaggio loading --- */
.filter-box{
    grid-template-columns:minmax(260px,420px) minmax(24px,1fr) auto minmax(24px,1fr) minmax(245px,420px);
    column-gap:0;
    row-gap:24px;
}
.search-wrap{grid-column:1;}
.type-filter{grid-column:3; justify-self:center;}
.genres-toggle{grid-column:5; justify-self:stretch; width:100%;}
@media (min-width:861px) and (max-width:1020px){
    .filter-box{
        grid-template-columns:1fr;
        row-gap:14px;
    }
    .search-wrap{
        grid-column:1;
        justify-self:stretch;
        width:100%;
    }
    .type-filter{
        grid-column:1;
        justify-self:stretch;
        justify-content:center;
        width:100%;
    }
    .type-btn{
        min-width:0;
        flex:1;
    }
    .genres-toggle{
        grid-column:1;
        justify-self:stretch;
        width:100%;
    }
}
@media (max-width:860px){
    .filter-box{grid-template-columns:1fr;}
    .search-wrap,.type-filter,.genres-toggle{grid-column:1; justify-self:stretch;}
    .type-filter{justify-content:center;}
}


/* --- Correzione card: badge Film/Serie TV sempre in basso --- */

.cards-grid{
    align-items:stretch;
}

.title-card{
    display:flex;
    flex-direction:column;
    height:100%;
}

.thumb{
    flex:0 0 auto;
}

.card-body{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:1;
    min-height:0;
    padding:20px 14px 22px;
}

.card-title{
    width:100%;
    line-height:1.28;
    margin-bottom:15px;
    word-break:normal;
    overflow-wrap:anywhere;
}

.badge{
    margin-top:auto;
    margin-bottom:0;
}

@media (max-width:860px){
    .card-body{
        min-height:0;
        padding:16px 12px 18px;
    }
}

/* --- Header index sempre su una sola riga --- */
.top-header{
    flex-direction:row;
    flex-wrap:nowrap;
    gap:16px;
}
.top-header > div:first-child{
    min-width:0;
    white-space:nowrap;
}
.total-titles{
    flex:0 0 auto;
    white-space:nowrap;
}
@media (max-width:860px){
    .top-header{
        align-items:center;
        flex-direction:row;
        gap:10px;
        padding:18px 4px 24px;
    }
    .brand-icon{
        width:clamp(22px, 7vw, 34px);
        height:clamp(22px, 7vw, 34px);
        margin-right:8px;
    }
    .top-header h1{
        font-size:clamp(22px, 7vw, 34px);
        white-space:nowrap;
    }
    .total-titles{
        font-size:clamp(11px, 3.4vw, 14px);
    }
}
@media (max-width:520px){
    .page-shell{
        width:calc(100% - 10px);
    }
    .top-header{
        gap:6px;
        padding:14px 0 20px;
    }
    .brand-icon{
        width:20px;
        height:20px;
        margin-right:4px;
    }
    .top-header h1{
        font-size:20px;
    }
    .total-titles{
        font-size:11px;
    }
}

/* --- Scala fluida header index: 320px/15px -> 1700px/50px --- */
.top-header{
    --header-title-size:clamp(20px, calc(20px + 30 * ((100vw - 320px) / 1380)), 50px);
    gap:clamp(4px, calc(4px + 12 * ((100vw - 320px) / 1380)), 16px);
    padding-inline:clamp(0px, calc(0px + 10 * ((100vw - 320px) / 1380)), 10px);
}
.top-header > div:first-child{
    gap:clamp(4px, calc(4px + 14 * ((100vw - 320px) / 1380)), 18px);
}
.brand-icon,
.top-header h1{
    line-height:1;
}
.brand-icon{
    width:var(--header-title-size);
    height:var(--header-title-size);
}
.total-titles{
    font-size:calc(var(--header-title-size) * .8);
    line-height:1;
}
.total-titles strong{
    font-size:1em;
    line-height:1;
}
.brand-icon{
    margin-right:0;
}
.top-header h1,
.total-titles,
.total-titles strong{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:700;
    letter-spacing:-1px;
}
.total-titles{
    padding-block:clamp(4px, calc(4px + 8 * ((100vw - 320px) / 1380)), 12px);
    padding-inline:clamp(6px, calc(6px + 12 * ((100vw - 320px) / 1380)), 18px);
}

/* --- Evita salti layout a 860px: sopra le card resta stabile --- */
@media (min-width:361px) and (max-width:860px){
    .tabs{
        justify-content:center;
        overflow:visible;
        gap:14px;
        flex-wrap:wrap;
    }
    .tabs::before{
        content:"";
        flex-basis:100%;
        height:0;
        order:2;
    }
    .tab:nth-child(-n+2){
        order:1;
    }
    .tab:nth-child(n+3){
        order:3;
    }
    .filter-box{
        grid-template-columns:1fr;
        column-gap:0;
        row-gap:14px;
    }
    .search-wrap,
    .type-filter,
    .genres-toggle{
        grid-column:1;
        justify-self:stretch;
        width:100%;
    }
    .type-filter{
        justify-content:center;
    }
    .type-btn{
        min-width:0;
        flex:1;
    }
}

@media (max-width:480px){
    .tabs{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        width:100%;
    }
    .tabs::before{
        display:none;
    }
    .tab{
        order:0!important;
        width:100%;
        text-align:center;
    }
}

/* --- Rifinitura smartphone molto piccoli --- */
@media (max-width:360px){
    .page-shell{
        width:calc(100% - 14px);
        padding-top:14px;
    }
    .top-header{
        gap:5px;
        padding:10px 0 18px;
    }
    .top-header > div:first-child{
        gap:4px;
        flex:1 1 auto;
        overflow:hidden;
    }
    .top-header h1{
        text-overflow:clip;
        overflow:hidden;
    }
    .top-header{
        --header-title-size:18px;
    }
    .total-titles{
        font-size:calc(var(--header-title-size) * .72);
        padding:4px 6px;
        letter-spacing:-.6px;
    }
    .tabs{
        gap:8px;
        margin-bottom:18px;
    }
    .tabs::before{
        content:"";
        flex-basis:100%;
        height:0;
        order:2;
    }
    .tab:nth-child(-n+2){
        order:1;
    }
    .tab:nth-child(n+3){
        order:3;
    }
    .tab{
        padding:10px 16px;
        font-size:16px;
    }
    .filter-box{
        padding:26px 16px;
        gap:12px;
    }
    .search-wrap{
        padding:0 12px;
        gap:8px;
    }
    .search-wrap input{
        height:48px;
        min-width:0;
        font-size:15px;
    }
    .type-filter{
        gap:8px;
        width:100%;
    }
    .type-btn{
        min-width:0;
        padding:12px 10px;
        font-size:clamp(14px, 5.6vw, 18px);
        line-height:1.05;
    }
    .genres-toggle{
        min-width:0;
        width:100%;
        padding:0 12px;
        font-size:clamp(13px, 5vw, 16px);
    }
}

body[data-page="send-to-player"] {
    --vv-center-x: 50vw;
    --vv-center-y: 50vh;
    --vv-height: 100dvh;
    --content-area-height: 100dvh;
    min-height: 100dvh;
    background: #090a0f;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}

body[data-page="send-to-player"] button,
body[data-page="send-to-player"] a,
body[data-page="send-to-player"] .btn,
body[data-page="send-to-player"] .back-link {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

body[data-page="send-to-player"] input {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

body[data-page="send-to-player"] .card {
    position: fixed;
    left: var(--vv-center-x);
    top: var(--vv-center-y);
    transform: translate(-50%, -50%);
    width: min(calc(100vw - 32px), 440px);
    max-height: calc(var(--content-area-height) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: #11131d;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    padding: 9px 30px;
    box-shadow: 0 24px 80px rgba(0,0,0,.38);
}

body[data-page="send-to-player"] .card::-webkit-scrollbar {
    display: none;
}

body[data-page="send-to-player"] .brand {
    display: grid;
    gap: 12px;
    text-align: center;
    margin-bottom: 30px;
}

body[data-page="send-to-player"] h1 {
    font-size: clamp(18px, calc(18px + 10 * ((100vw - 320px) / 160)), 28px);
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
}

body[data-page="send-to-player"] .content-title {
    display: grid;
    gap: 6px;
    justify-content: center;
    max-width: 100%;
    font-size: clamp(14px, calc(14px + 2 * ((100vw - 320px) / 160)), 16px);
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body[data-page="send-to-player"] .content-title-row {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 5px;
    justify-content: start;
    max-width: 100%;
    color: rgba(255,255,255,.86);
}

body[data-page="send-to-player"] .content-title-label {
    color: #8ea2ff;
    font-weight: 900;
    text-align: right;
}

body[data-page="send-to-player"] .content-title-value {
    color: #f4f7ff;
    text-align: left;
}

body[data-page="send-to-player"] .field { margin-bottom: 12px; }

body[data-page="send-to-player"] label {
    display: block;
    color: rgba(255,255,255,.66);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 9px;
}

body[data-page="send-to-player"] input[type="tel"] {
    width: 100%;
    height: 58px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: #fff;
    outline: none;
    text-align: center;
    letter-spacing: .38em;
    font: 800 24px ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 0 14px 0 calc(14px + .38em);
    transition: border-color .2s, background .2s;
}

body[data-page="send-to-player"] input[type="tel"]:focus {
    border-color: #7c83ff;
    background: rgba(255,255,255,.08);
}

body[data-page="send-to-player"] .code-status {
    min-height: 18px;
    margin-top: 6px;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
}

body[data-page="send-to-player"] .code-status.ready { color: #4ade80; }
body[data-page="send-to-player"] .code-status.expired,
body[data-page="send-to-player"] .code-status.used,
body[data-page="send-to-player"] .code-status.not_found,
body[data-page="send-to-player"] .code-status.error { color: #fb7185; }
body[data-page="send-to-player"] .code-status.pending { color: #fbbf24; }
body[data-page="send-to-player"] .code-status.checking { color: rgba(255,255,255,.52); }

body[data-page="send-to-player"] .btn {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 13px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}

body[data-page="send-to-player"] .btn:enabled {
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 10px 34px rgba(99,102,241,.32);
}

body[data-page="send-to-player"] .btn:enabled:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 42px rgba(99,102,241,.42);
}

body[data-page="send-to-player"] .btn:disabled {
    color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.07);
    cursor: not-allowed;
}

body[data-page="send-to-player"] .back-link {
    position: fixed;
    left: max(17px, calc((100vw - 1760px) / 2));
    top: 42px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    color: #dfe7ff;
    background: #0a1120;
    border: 1px solid #253149;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform .18s, border-color .18s, background .18s, color .18s;
}

body[data-page="send-to-player"] .back-link:hover {
    transform: translateY(-1px);
    border-color: #5264ff;
    background: #121b2e;
    color: #fff;
}

body[data-page="send-to-player"] .toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    max-width: calc(100% - 32px);
    transform: translateX(-50%) translateY(80px);
    background: #1a1d2a;
    border: 1px solid rgba(255,255,255,.13);
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    transition: transform .3s ease, opacity .3s ease;
}

body[data-page="send-to-player"] .toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.userbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
    color:#dfe7ff;
    font-weight:800;
}

.userbar-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 14px;
    background:#0a1120;
    border:1px solid #253149;
    border-radius:10px;
    color:#dfe7ff;
}

.userbar-expiry{
    color:#aab4cb;
    font-size:14px;
    font-weight:800;
}

.userbar-link:hover{
    border-color:#5264ff;
    color:#fff;
}

.login-shell{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
}

.login-card,
.admin-panel{
    background:rgba(17,24,39,.86);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.login-card{
    width:min(420px, 100%);
    padding:28px;
}

.login-brand{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:24px;
}

.login-brand .brand-icon{
    width:56px;
    height:56px;
    margin:0;
    display:block;
    flex:0 0 56px;
}

.login-brand h1{
    font-size:42px;
}

.login-form{
    display:grid;
    gap:12px;
}

.login-form label,
.admin-create-form label{
    color:#dfe7ff;
    font-weight:800;
}

.login-form input,
.admin-create-form input,
.admin-create-form textarea,
.admin-actions input,
.admin-actions textarea{
    width:100%;
    min-height:48px;
    color:var(--text);
    background:#0a1120;
    border:1px solid #253149;
    border-radius:10px;
    padding:0 14px;
    outline:none;
}

.login-form input:focus,
.admin-create-form input:focus,
.admin-create-form textarea:focus,
.admin-actions input:focus,
.admin-actions textarea:focus{
    border-color:#5264ff;
}

.admin-create-form textarea,
.admin-actions textarea{
    min-height:78px;
    padding:12px 14px;
    resize:vertical;
}

.login-error,
.admin-message{
    position:relative;
    border-radius:10px;
    padding:12px 46px 12px 14px;
    font-weight:800;
}

.admin-message{
    margin:0 0 24px;
}

.admin-message-close{
    position:absolute;
    top:8px;
    right:10px;
    width:28px;
    height:28px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    color:inherit;
    background:rgba(0,0,0,.16);
    font-size:20px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
}

.admin-message-close:hover{
    background:rgba(255,255,255,.08);
}

.login-error,
.admin-message.error{
    color:#fecdd3;
    background:rgba(225,29,72,.14);
    border:1px solid rgba(225,29,72,.38);
}

.admin-message.ok{
    color:#bbf7d0;
    background:rgba(34,197,94,.14);
    border:1px solid rgba(34,197,94,.38);
}

.library-panel{
    background:rgba(17,24,39,.86);
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px;
}

.library-panel h1{
    display:block;
    margin:0 0 18px;
    font-size:38px;
    letter-spacing:0;
}

.library-list{
    display:grid;
    gap:12px;
}

.library-row{
    display:grid;
    grid-template-columns:auto 1fr auto auto;
    align-items:center;
    gap:14px;
    border:1px solid #253149;
    border-radius:12px;
    background:#0a1120;
    padding:14px;
}

.library-row img{
    width:116px;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:8px;
}

.library-row h2{
    margin:0 0 6px;
    font-size:18px;
}

.library-row p{
    margin:0;
    color:#aab4cb;
    font-weight:700;
    overflow-wrap:anywhere;
}

.detail-info .detail-title-row h1{
    margin-bottom:0;
}

.admin-shell{
    max-width:1760px;
}

.admin-panel{
    padding:22px;
    margin-bottom:18px;
}

.admin-panel h1,
.admin-panel h2{
    display:block;
    margin:0 0 16px;
    letter-spacing:0;
}

.admin-panel h1{
    font-size:38px;
}

.admin-panel h2{
    font-size:24px;
}

.admin-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
}

.admin-section-head h2{
    margin-bottom:0;
}

.admin-section-head span{
    color:#aab4cb;
    font-size:14px;
    white-space:nowrap;
}

.admin-create-form{
    display:flex;
    align-items:flex-end;
    gap:14px;
    flex-wrap:wrap;
}

.admin-create-fields{
    display:flex;
    align-items:flex-end;
    gap:14px;
    flex-wrap:wrap;
    flex:1 1 720px;
}

.admin-field{
    display:grid;
    gap:7px;
    min-width:210px;
    flex:1 1 230px;
}

.admin-notes-create{
    flex:1 1 360px;
}

.admin-field label{
    white-space:nowrap;
}

.generated-field{
    display:flex;
    align-items:center;
    gap:8px;
}

.generated-field input{
    min-width:0;
    flex:1 1 auto;
}

.utility-btn{
    min-height:36px;
    border:1px solid #253149;
    border-radius:9px;
    color:#dfe7ff;
    background:#0a1120;
    font-weight:800;
    padding:0 10px;
    cursor:pointer;
    white-space:nowrap;
}

.utility-btn:hover{
    border-color:#5264ff;
}

.admin-check{
    min-height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
}

.admin-check input{
    width:20px;
    min-height:20px;
}

.datetime-label{
    min-height:0;
    display:inline-flex;
    align-items:center;
    color:#dfe7ff;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
}

.datetime-group{
    width:auto;
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
}

.datetime-picker{
    width:240px;
    min-width:190px;
    cursor:pointer;
}

.password-field{
    width:220px;
    min-height:36px;
    color:var(--text);
    background:#0a1120;
    border:1px solid #253149;
    border-radius:9px;
    padding:0 12px;
    outline:none;
}

.password-field:focus{
    border-color:#5264ff;
}

.admin-table-wrap{
    overflow:auto;
}

.admin-table{
    width:100%;
    border-collapse:collapse;
    min-width:1220px;
}

.admin-table th,
.admin-table td{
    padding:12px;
    border-bottom:1px solid #253149;
    vertical-align:top;
    text-align:left;
}

.admin-table th{
    color:#aab4cb;
    font-size:13px;
    text-transform:uppercase;
}

.admin-table small{
    display:block;
    margin-top:5px;
    color:#aab4cb;
    overflow-wrap:anywhere;
}

.admin-status-cell{
    white-space:nowrap;
}

.admin-ip-cell small{
    white-space:nowrap;
}

.admin-notes-cell{
    min-width:220px;
    max-width:320px;
    color:#dfe7ff;
    line-height:1.45;
    overflow-wrap:anywhere;
}

.admin-actions form{
    display:grid;
    grid-template-columns:repeat(2, minmax(260px, 1fr));
    gap:10px;
    min-width:720px;
}

.admin-actions button,
.danger-btn{
    min-height:36px;
    border:1px solid #253149;
    border-radius:9px;
    color:#dfe7ff;
    background:#0a1120;
    font-weight:800;
    cursor:pointer;
}

.admin-actions button{
    padding:0 10px;
}

.admin-actions .danger-btn{
    border-color:rgba(225,29,72,.55);
    color:#fecdd3;
}

.action-group{
    display:grid;
    gap:7px;
    align-content:start;
    padding:10px;
    border:1px solid #253149;
    border-radius:10px;
    background:rgba(10,17,32,.55);
}

.action-group-inline{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.action-group-wide{
    grid-column:1 / -1;
}

.action-title{
    color:#aab4cb;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    white-space:nowrap;
}

.action-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.action-group small{
    margin:0;
    color:#aab4cb;
    font-size:12px;
}

.action-danger{
    border-color:rgba(225,29,72,.32);
}

.admin-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.admin-list{
    display:grid;
    gap:10px;
}

.admin-list div{
    display:grid;
    grid-template-columns:120px 130px 1fr;
    gap:12px;
    align-items:start;
    padding:10px 0;
    border-bottom:1px solid #253149;
}

.admin-list div:last-child{
    border-bottom:none;
}

.admin-list span,
.admin-list small{
    color:#aab4cb;
    overflow-wrap:anywhere;
}

.status-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}

.status-card{
    border:1px solid #253149;
    border-radius:12px;
    background:#0a1120;
    padding:16px;
}

.status-card.wide{
    grid-column:1 / -1;
}

.status-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:10px 0;
    border-bottom:1px solid #253149;
}

.status-row:last-child{
    border-bottom:none;
}

.status-label{
    color:#aab4cb;
}

.status-value{
    text-align:right;
    overflow-wrap:anywhere;
}

.status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:48px;
    border-radius:999px;
    padding:4px 10px;
    font-weight:900;
    font-size:13px;
}

.status-badge.ok{
    background:rgba(57,201,120,.16);
    color:#39c978;
}

.status-badge.ko{
    background:rgba(255,98,98,.16);
    color:#ff6262;
}

body[data-page="send-to-player"] .userbar{
    position:fixed;
    right:max(17px, calc((100vw - 1760px) / 2));
    top:42px;
    z-index:5;
}

@media (max-width: 480px) {
    body[data-page="send-to-player"] .back-link {
        left: 17px;
        top: 42px;
    }

    body[data-page="send-to-player"] .card {
        padding: 9px 22px;
        border-radius: 16px;
    }
}

@media (max-width: 860px){
    .admin-create-form,
    .status-grid,
    .admin-grid{
        grid-template-columns:1fr;
    }

    .datetime-group{
        width:100%;
        display:flex;
        align-items:flex-start;
        flex-direction:column;
        gap:6px;
    }

    .admin-section-head,
    .status-row{
        display:block;
    }

    .admin-section-head span,
    .status-value{
        display:block;
        margin-top:6px;
        text-align:left;
    }

    .admin-list div{
        grid-template-columns:1fr;
    }

    body[data-page="send-to-player"] .userbar{
        right:17px;
        top:96px;
    }
}