: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)}
.flash{position:relative; margin:16px 0; padding:16px 54px 16px 18px; border-radius:12px; font-weight:900; border:1px solid #253149}.flash.success{color:#bbf7d0; background:rgba(22,101,52,.62); border-color:rgba(74,222,128,.72); box-shadow:0 0 0 1px rgba(74,222,128,.14), 0 0 18px rgba(34,197,94,.16)}.flash.error{color:#fecaca; background:rgba(127,29,29,.56); border-color:rgba(248,113,113,.72)}.flash-close{position:absolute; top:50%; right:14px; transform:translateY(-50%); width:30px; height:30px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(4,8,16,.22); color:currentColor; font-size:20px; font-weight:900; line-height:1; cursor:pointer; display:grid; place-items:center}.flash-close:hover{background:rgba(4,8,16,.38)}
.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-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{position:relative; 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}
.detail-availability{display:inline-flex; align-items:center; min-height:46px; padding:0 18px; border:1px solid #2c3a59; border-radius:12px; background:#101a2c; font-weight:900; color:#dce6ff}
.episode-list.season-availability-wrap{max-width:none; border:0; border-radius:0; overflow:visible}

@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:flex-start;
    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;
    white-space:nowrap;
    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;
}

body[data-page="library"] .detail-header-bar{
    gap:16px;
    flex-wrap:wrap;
}

body[data-page="library"] .detail-header-bar.library-header-stacked{
    justify-content:center;
}

body[data-page="library"] .detail-header-bar.library-header-stacked .back-button{
    flex:0 0 auto;
}

body[data-page="library"] .detail-header-bar.library-header-stacked .userbar{
    flex:0 0 100%;
    justify-content:center;
}

body[data-page="library"] .detail-header-bar.library-header-stacked .userbar-actions{
    flex-basis:100%;
}

body[data-page="details"] .detail-header-bar{
    gap:16px;
    flex-wrap:wrap;
}

body[data-page="details"] .detail-header-bar.detail-header-stacked{
    justify-content:center;
}

body[data-page="details"] .detail-header-bar.detail-header-stacked .back-button{
    flex:0 0 auto;
}

body[data-page="details"] .detail-header-bar.detail-header-stacked .userbar{
    flex:0 0 100%;
    justify-content:center;
}

body[data-page="details"] .detail-header-bar.detail-header-stacked .userbar-actions{
    flex-basis:100%;
}

body[data-page="admin"] .detail-header-bar{
    gap:16px;
    flex-wrap:wrap;
}

.admin-header-links{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.admin-header-links .userbar-link{
    white-space:nowrap;
}

body[data-page="admin"] .detail-header-bar.admin-header-stacked{
    justify-content:center;
}

body[data-page="admin"] .detail-header-bar.admin-header-stacked .admin-header-links{
    flex:0 0 100%;
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    justify-content:center;
}

body[data-page="admin"] .detail-header-bar.admin-header-stacked .userbar{
    flex:0 0 100%;
    display:grid;
    grid-template-columns:1fr;
    justify-content:center;
    justify-items:center;
    gap:10px;
}

body[data-page="admin"] .detail-header-bar.admin-header-stacked .userbar-actions{
    grid-column:1;
    flex-basis:100%;
}

body[data-page="library"] .detail-header-bar.library-header-stacked .userbar,
body[data-page="details"] .detail-header-bar.detail-header-stacked .userbar,
body[data-page="admin"] .detail-header-bar.admin-header-stacked .userbar,
body[data-page="send-to-player"] .send-header.send-header-stacked .userbar,
body[data-page="index"] .top-header.header-user-below .userbar,
body[data-page="index"] .top-header.header-stacked .userbar{
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    justify-content:center;
    row-gap:10px;
}

body[data-page="library"] .detail-header-bar.library-header-stacked .userbar-actions,
body[data-page="details"] .detail-header-bar.detail-header-stacked .userbar-actions,
body[data-page="admin"] .detail-header-bar.admin-header-stacked .userbar-actions,
body[data-page="send-to-player"] .send-header.send-header-stacked .userbar-actions,
body[data-page="index"] .top-header.header-user-below .userbar-actions,
body[data-page="index"] .top-header.header-stacked .userbar-actions{
    grid-column:1;
    flex-basis:auto;
}
.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:clamp(16px, calc(16px + 8 * ((100vw - 320px) / 1380)), 24px);
    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-height: 100dvh;
    min-height: var(--vv-height);
    display: flex;
    flex-direction: column;
    background: #090a0f;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 42px max(17px, calc((100vw - 1760px) / 2)) 28px;
}

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 {
    width: min(calc(100vw - 32px), 440px);
    max-width: 100%;
    margin: auto;
    overflow: visible;
    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"] .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"] .send-code-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 152px;
    align-items:stretch;
    gap:10px;
}

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"],
body[data-page="send-to-player"] input[type="password"],
body[data-page="send-to-player"] input[name="code"] {
    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,
body[data-page="send-to-player"] input[type="password"]:focus,
body[data-page="send-to-player"] input[name="code"]: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"] .send-code-row .btn{
    min-height:58px;
    white-space:nowrap;
    padding-inline:10px;
    overflow:hidden;
}

@media (max-width:420px){
    body[data-page="send-to-player"] .send-code-row{
        grid-template-columns:1fr;
    }
}

body[data-page="send-to-player"] .send-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 0 22px;
    flex: 0 0 auto;
}

body[data-page="send-to-player"] .send-header.send-header-stacked {
    justify-content: center;
}

body[data-page="send-to-player"] .send-header.send-header-stacked .back-link {
    flex: 0 0 auto;
}

body[data-page="send-to-player"] .send-header.send-header-stacked .userbar {
    flex: 0 0 100%;
    justify-content: center;
}

body[data-page="send-to-player"] .send-header.send-header-stacked .userbar-actions {
    flex-basis: 100%;
}

body[data-page="send-to-player"] .back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    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-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex:0 1 auto;
    flex-wrap:wrap;
    min-width:0;
}

.userbar-greeting{
    white-space:nowrap;
}

.userbar-subscription{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:nowrap;
}

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

.userbar-link-counted{
    padding-right:8px;
}

.userbar-link-counted:has(.userbar-link-badge[hidden]){
    padding-right:14px;
}

.userbar-link-badge{
    display:inline-grid;
    place-items:center;
    min-width:24px;
    height:24px;
    padding:0 7px;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    border:1px solid rgba(255,255,255,.24);
    font-size:12px;
    font-weight:900;
    line-height:1;
}

.userbar-link-badge[hidden]{
    display:none;
}

.userbar-expiry{
    display:inline-grid;
    place-items:center;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    border:1px solid rgba(255,255,255,.24);
    font-size:14px;
    font-weight:800;
    line-height:1;
}

.userbar-stream-badge,
.stream-limit-badge{
    display:inline-grid;
    place-items:center;
    min-width:28px;
    height:28px;
    padding:0 8px;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    border:1px solid rgba(255,255,255,.24);
    font-size:14px;
    font-weight:900;
    line-height:1;
}

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

.login-shell{
    --login-viewport-top:0px;
    --login-viewport-height:100vh;
    min-height:var(--login-viewport-height);
    display:grid;
    place-items:center;
    padding:24px;
    transform:translateY(var(--login-viewport-top));
}

.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;
}

@media (max-height:620px){
    .login-shell{
        padding:14px;
    }

    .login-card{
        padding:20px;
    }

    .login-brand{
        margin-bottom:16px;
    }
}

.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-password-field{
    position:relative;
}

.login-password-field input{
    padding-right:52px;
}

.login-visibility-toggle{
    position:absolute;
    top:50%;
    right:12px;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#aab4cb;
    cursor:pointer;
}

.login-visibility-toggle:hover,
.login-visibility-toggle:focus-visible{
    color:#fff;
    background:#121b2e;
    outline:none;
}

.login-visibility-toggle svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.login-visibility-toggle[aria-pressed="true"]{
    color:#fff;
}

.login-visibility-toggle[aria-pressed="true"]::after{
    content:"";
    position:absolute;
    width:24px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transform:rotate(-38deg);
}

.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;
    grid-template-columns:repeat(5, 1fr);
    gap:24px;
}

.library-row{
    position:relative;
    display:block;
    border:1px solid #253149;
    border-radius:12px;
    background:#0a1120;
    padding:0;
    overflow:hidden;
}

.library-row-actions{
    grid-template-columns:auto 1fr auto auto;
}

.library-open-link{
    display:block;
    min-width:0;
    color:inherit;
}

.library-delete-btn{
    position:absolute;
    top:10px;
    right:10px;
    z-index:2;
    width:42px;
    height:42px;
    border:1px solid rgba(248,113,113,.72);
    border-radius:999px;
    color:#fecdd3;
    background:rgba(127,29,29,.72);
    font-size:28px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
    display:grid;
    place-items:center;
}

.library-delete-btn:hover{
    color:#fff;
    background:#dc2626;
    border-color:#fecaca;
}

.library-row img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:0;
    display:block;
}

.library-cover{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#111;
    overflow:hidden;
}

.library-poster-placeholder{
    width:100%;
    aspect-ratio:16/9;
    border:1px solid rgba(255,255,255,.12);
    border-radius:0;
    background:#111a2b;
    color:#aab4cb;
    display:grid;
    place-items:center;
    font-size:22px;
    font-weight:900;
}

.library-info{
    padding:14px;
    display:grid;
    gap:10px;
}

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

.library-row p + p{
    margin-top:0;
}

.library-progress{
    color:#dbe6ff;
}

.library-progress-bar{
    width:100%;
    margin-top:0;
}

.library-resume-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    padding:0 14px 14px;
}

.library-action-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 12px;
    border:1px solid #253149;
    border-radius:10px;
    color:#dfe7ff;
    background:#0d1628;
    font-size:13px;
    font-weight:900;
    text-align:center;
}

.library-action-btn.primary{
    border-color:rgba(255,255,255,.2);
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
}

.library-action-btn.danger{
    border-color:rgba(225,29,72,.58);
    background:rgba(127,29,29,.42);
    color:#fecdd3;
}

.library-action-btn.danger:hover{
    border-color:#fecaca;
    background:#dc2626;
    color:#fff;
}

.library-action-btn:hover{
    border-color:#5264ff;
    color:#fff;
}

@media (max-width:560px){
    .library-action-btn{
        width:100%;
    }
}

@media (max-width:1200px){
    .library-list{
        grid-template-columns:repeat(4, 1fr);
    }
}

@media (max-width:980px){
    .library-list{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width:860px){
    .library-list{
        gap:14px;
    }
}

@media (max-width:700px){
    .library-list{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width:430px){
    .library-list{
        grid-template-columns:1fr;
    }
}

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

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

.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-section-side{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:wrap;
}

.admin-section-head span a{
    color:#dfe7ff;
    font-weight:900;
}

.admin-section-head span a:hover{
    color:#fff;
}

.admin-database-backup{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin:0 0 24px;
    padding:16px 18px;
    border:1px solid #263754;
    border-radius:14px;
    background:#101a2b;
}

.admin-database-backup > div{
    display:grid;
    gap:5px;
}

.admin-database-backup small{
    color:#aab4cb;
}

.admin-backup-buttons{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.admin-backup-buttons form{
    flex:0 0 auto;
}

.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-stream-create{
    max-width:210px;
}

.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;
}

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

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

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

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

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

.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-progress-label{
    display:block;
    white-space:nowrap;
}

.admin-progress-bar{
    width:160px;
    max-width:100%;
}

.admin-muted{
    color:#7f8aa3;
}

.admin-genre-summary{
    display:block;
    max-width:360px;
    line-height:1.35;
}

.admin-inline-toggle{
    margin-left:6px;
    padding:3px 8px;
    border:1px solid #253149;
    border-radius:999px;
    color:#dfe7ff;
    background:#0a1120;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
}

.admin-inline-toggle:hover{
    border-color:#5264ff;
    background:#121b2e;
}

.admin-genre-modal-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.admin-genre-modal .admin-modal-form{
    padding:24px 26px 26px;
}

.admin-genre-modal .admin-modal-head{
    align-items:flex-start;
    margin-bottom:8px;
}

.admin-genre-modal .admin-modal-head h3{
    padding-top:4px;
}

.admin-genre-modal .admin-modal-head button{
    width:42px;
    min-height:42px;
    margin:-2px -2px 0 0;
}

.admin-genre-modal-list span{
    padding:8px 11px;
    border:1px solid #253149;
    border-radius:999px;
    color:#dfe7ff;
    background:#0a1120;
    font-size:13px;
    font-weight:900;
}

.admin-username-presence{
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}

.admin-username-presence .presence-count{
    display:inline;
    margin:0;
    color:#aab4cb;
    font-size:12px;
    font-weight:800;
}

.presence-dot{
    width:11px;
    height:11px;
    flex:0 0 11px;
    border-radius:50%;
    border:1px solid rgba(223,231,255,.38);
    background:#6b7280;
    box-shadow:0 0 0 3px rgba(107,114,128,.16);
}

.presence-dot.is-online{
    border-color:rgba(74,222,128,.75);
    background:#22c55e;
    box-shadow:0 0 0 3px rgba(34,197,94,.2), 0 0 14px rgba(34,197,94,.42);
}

.presence-dot.is-offline{
    border-color:rgba(148,163,184,.55);
    background:#64748b;
}

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

.admin-ip-cell small{
    display:block;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
}

.admin-ip-cell small span{
    display:block;
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
}

.admin-user-links{
    display:grid;
    grid-template-columns:repeat(3, minmax(104px, 1fr));
    gap:8px;
    min-width:336px;
}

.admin-user-links a{
    height:var(--admin-badge-height);
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:7px 10px;
    border:1px solid #253149;
    border-radius:9px;
    background:#0a1120;
    color:#dfe7ff;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
}

.admin-user-links a span{
    display:block;
    line-height:1.05;
}

.admin-user-links a strong{
    display:block;
    color:#aab4cb;
    font-size:13px;
    line-height:1;
    text-align:center;
}

.admin-user-links a:hover{
    border-color:#5264ff;
    background:#121b2e;
}

.admin-live-user-badge{
    width:104px;
    height:var(--admin-badge-height);
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:7px 10px;
    border:1px solid #253149;
    border-radius:9px;
    background:#0a1120;
    color:#dfe7ff;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
}

.admin-live-user-badge strong{
    color:#aab4cb;
    font-size:13px;
    line-height:1;
    text-align:center;
}

.admin-live-user-badge:hover{
    border-color:#5264ff;
    background:#121b2e;
}

.admin-bug-user-badge.needs-attention,
.admin-bug-report-link.needs-attention{
    border-color:rgba(248,113,113,.9);
    background:rgba(127,29,29,.28);
    box-shadow:0 0 0 1px rgba(248,113,113,.24), 0 0 18px rgba(248,113,113,.24);
}

.admin-bug-user-badge.needs-attention strong,
.admin-bug-report-link.needs-attention strong{
    color:#fecaca;
}

.admin-note-badge{
    width:372px;
    height:calc((var(--admin-badge-height) * 4) + (8px * 3));
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:3px;
    padding:7px 10px;
    border:1px solid #253149;
    border-radius:9px;
    background:#0a1120;
    color:#dfe7ff;
    font-size:13px;
    font-weight:900;
    white-space:normal;
    cursor:pointer;
}

.admin-note-badge span{
    display:block;
    line-height:1.05;
    margin-bottom:1.28em;
}

.admin-note-badge strong{
    display:block;
    width:100%;
    max-width:100%;
    flex:1 1 auto;
    min-height:0;
    color:#aab4cb;
    font-size:12px;
    line-height:1.28;
    text-align:center;
    white-space:pre-wrap;
    overflow:auto;
    overflow-wrap:break-word;
    padding-right:4px;
}

.admin-note-badge:hover{
    border-color:#5264ff;
    background:#121b2e;
}

.admin-action-links{
    display:grid;
    grid-template-columns:repeat(2, minmax(124px, 1fr));
    gap:8px;
    min-width:264px;
}

.admin-action-links button{
    height:var(--admin-badge-height);
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:7px 10px;
    border:1px solid #253149;
    border-radius:9px;
    color:#dfe7ff;
    background:#0a1120;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
}

.admin-action-links button span{
    display:block;
    line-height:1.05;
}

.admin-action-links button strong{
    display:block;
    width:100%;
    max-width:100%;
    color:#aab4cb;
    font-size:12px;
    line-height:1;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
}

.admin-action-links button:hover{
    border-color:#5264ff;
    background:#121b2e;
}

.admin-action-links .admin-action-danger{
    color:#fecdd3;
    border-color:rgba(225,29,72,.48);
}

.admin-action-modal{
    width:min(560px, calc(100vw - 28px));
    max-height:calc(100vh - 48px);
    padding:0;
    border:1px solid #253149;
    border-radius:14px;
    color:#dfe7ff;
    background:#101827;
    box-shadow:0 24px 80px rgba(0,0,0,.52);
}

.admin-notes-modal{
    width:min(720px, calc(100vw - 28px));
}

.admin-action-modal::backdrop{
    background:rgba(2,6,23,.74);
}

.admin-actions .admin-modal-form{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    min-width:0;
    padding:18px;
}

.admin-modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.admin-modal-head h3{
    margin:0;
    font-size:22px;
    line-height:1.15;
}

.admin-modal-head button{
    width:36px;
    min-height:36px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    color:#dfe7ff;
    background:rgba(10,17,32,.86);
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.admin-modal-form p{
    margin:0;
    color:#aab4cb;
    font-weight:800;
    line-height:1.4;
}

.admin-modal-form label{
    display:grid;
    gap:8px;
    color:#aab4cb;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

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

.admin-modal-form textarea{
    min-height:136px;
    padding:12px 14px;
    resize:vertical;
}

.admin-notes-modal .admin-modal-form textarea{
    min-height:min(360px, calc(100vh - 260px));
}

.admin-modal-form small{
    margin:0;
    color:#aab4cb;
    font-size:13px;
    font-weight:800;
}

.admin-block-summary{
    display:grid;
    gap:8px;
}

.admin-block-summary span{
    display:flex;
    align-items:center;
    min-height:34px;
    padding:0 12px;
    border:1px solid rgba(251,191,36,.34);
    border-radius:9px;
    color:#fde68a;
    background:rgba(251,191,36,.12);
    font-weight:900;
}

.admin-modal-grid,
.admin-modal-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.admin-modal-grid button,
.admin-modal-actions button{
    min-height:40px;
    border:1px solid #253149;
    border-radius:9px;
    color:#dfe7ff;
    background:#0a1120;
    font-weight:900;
    padding:0 12px;
    cursor:pointer;
}

.admin-modal-grid button:hover,
.admin-modal-actions button:hover,
.admin-modal-head button:hover{
    border-color:#5264ff;
}

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

.admin-live-table{
    min-width:960px;
}

.live-device-code,
.live-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    border-radius:999px;
    padding:0 10px;
    font-weight:900;
    white-space:nowrap;
}

.live-device-code{
    color:#dfe7ff;
    background:#0a1120;
    border:1px solid #253149;
}

.live-status{
    color:#fff;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    border:1px solid rgba(255,255,255,.22);
}

.live-status-pending{
    background:rgba(251,191,36,.18);
    color:#fde68a;
    border-color:rgba(251,191,36,.36);
}

.live-status-paused{
    background:rgba(96,165,250,.18);
    color:#bfdbfe;
    border-color:rgba(96,165,250,.36);
}

.live-progress-bar{
    display:block;
    width:min(180px, 100%);
    height:9px;
    margin-top:8px;
    border:1px solid #253149;
    border-radius:999px;
    background:#0a1120;
    overflow:hidden;
}

.live-progress-bar span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
}

.library-info .library-progress-bar{
    width:100%;
}

.admin-state-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    border-radius:999px;
    padding:0 10px;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

.admin-state-visible{
    color:#bbf7d0;
    background:rgba(34,197,94,.16);
    border:1px solid rgba(34,197,94,.34);
}

.admin-state-hidden{
    color:#fecdd3;
    background:rgba(225,29,72,.16);
    border:1px solid rgba(225,29,72,.34);
}

.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-report-grid{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}

.admin-report-link{
    min-width:128px;
    height:var(--admin-badge-height);
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:0 14px;
    border:1px solid #253149;
    border-radius:12px;
    background:#0a1120;
    color:#dfe7ff;
    text-align:center;
}

.admin-report-link:hover{
    border-color:#5264ff;
    background:#121b2e;
}

.admin-report-link span{
    font-size:18px;
    font-weight:900;
    line-height:1.15;
}

.admin-report-link strong{
    display:block;
    color:#aab4cb;
    font-size:13px;
    line-height:1;
    text-align:center;
}

.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;
}

.bug-page-panel{
    display:grid;
    gap:18px;
}

.bug-form [hidden]{
    display:none !important;
}

.bug-page-panel h1{
    margin-bottom:0;
}

.bug-form,
.bug-reply-form,
.bug-admin-reply{
    display:grid;
    gap:16px;
}

.bug-form{
    max-width:980px;
}

.bug-form label,
.bug-reply-form label,
.bug-admin-reply label{
    display:grid;
    gap:8px;
    color:#c4ccdd;
    font-weight:900;
}

.bug-form input,
.bug-form select,
.bug-form textarea,
.bug-reply-form textarea,
.bug-admin-reply textarea,
.admin-filter-form input,
.admin-filter-form select{
    width:100%;
    box-sizing:border-box;
    border:1px solid #253149;
    border-radius:12px;
    background:#081020;
    color:#f5f7ff;
    padding:12px 14px;
    font:inherit;
    font-weight:800;
}

.bug-form select{
    appearance:none;
    min-height:58px;
    padding-right:48px;
    background-image:linear-gradient(45deg, transparent 50%, #dfe7ff 50%), linear-gradient(135deg, #dfe7ff 50%, transparent 50%);
    background-position:calc(100% - 20px) 50%, calc(100% - 13px) 50%;
    background-size:7px 7px, 7px 7px;
    background-repeat:no-repeat;
}

.bug-form-grid{
    display:grid;
    grid-template-columns:minmax(220px, 320px) 1fr;
    gap:14px;
}

.bug-form textarea,
.bug-reply-form textarea,
.bug-admin-reply textarea{
    resize:vertical;
    line-height:1.35;
}

.bug-context-choice{
    display:grid;
    gap:14px;
    padding:16px;
    border:1px solid #253149;
    border-radius:14px;
    background:#0a1120;
}

.bug-context-head{
    display:grid;
    gap:6px;
}

.bug-context-head strong{
    color:#dfe7ff;
    font-size:18px;
    font-weight:900;
}

.bug-context-head a{
    width:max-content;
    max-width:100%;
    padding:8px 12px;
    border:1px solid #253149;
    border-radius:999px;
    background:#081020;
    font-weight:800;
}

.bug-context-options{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.bug-context-choice a,
.bug-context-line a,
.bug-meta-grid a{
    color:#dce6ff;
    overflow-wrap:anywhere;
}

.bug-choice-card{
    display:flex;
    align-items:flex-start;
    gap:12px;
    min-height:86px;
    box-sizing:border-box;
    padding:14px;
    border:1px solid #253149;
    border-radius:14px;
    background:#081020;
    cursor:pointer;
}

.bug-choice-card:has(input:checked){
    border-color:#5264ff;
    background:#121b2e;
    box-shadow:0 0 0 1px rgba(82,100,255,.18);
}

.bug-choice-card input{
    width:auto;
    margin-top:4px;
    padding:0;
}

.bug-choice-card span{
    display:grid;
    gap:5px;
}

.bug-choice-card strong{
    color:#f5f7ff;
    font-size:16px;
}

.bug-choice-card small{
    color:#aab4cb;
    line-height:1.3;
}

.bug-ticket-list{
    display:grid;
    gap:14px;
}

.bug-ticket{
    display:grid;
    gap:14px;
    border:1px solid #253149;
    border-radius:14px;
    background:rgba(8,16,30,.55);
    padding:18px;
}

.bug-ticket.needs-attention{
    border-color:rgba(248,113,113,.9);
    box-shadow:0 0 0 1px rgba(248,113,113,.2), 0 0 20px rgba(248,113,113,.16);
}

.bug-ticket-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.bug-ticket-head h2,
.bug-ticket-head h3{
    margin:0 0 4px;
}

.bug-ticket-head small,
.bug-message small{
    color:#aab4cb;
    font-weight:800;
}

.bug-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 14px;
    border:1px solid #2c3a59;
    border-radius:999px;
    background:#111c30;
    color:#dce6ff;
    font-weight:900;
    white-space:nowrap;
}

.bug-status-new{
    border-color:rgba(96,165,250,.8);
    background:rgba(37,99,235,.24);
}

.bug-status-progress{
    border-color:rgba(129,140,248,.8);
    background:rgba(79,70,229,.24);
}

.bug-status-waiting{
    border-color:rgba(251,191,36,.8);
    background:rgba(146,64,14,.24);
}

.bug-status-resolved{
    border-color:rgba(74,222,128,.72);
    background:rgba(22,101,52,.24);
}

.bug-admin-alert,
.bug-waiting-notice{
    padding:12px 14px;
    border:1px solid rgba(248,113,113,.55);
    border-radius:12px;
    background:rgba(127,29,29,.22);
    color:#fecaca;
    font-weight:900;
}

.bug-waiting-notice{
    border-color:rgba(251,191,36,.6);
    background:rgba(146,64,14,.22);
    color:#fde68a;
}

.bug-context-line{
    margin:0;
    color:#c4ccdd;
    font-weight:800;
}

.bug-meta-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(140px, 1fr));
    gap:10px;
}

.bug-report-fields{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
}

.bug-report-fields div{
    display:grid;
    gap:8px;
    padding:14px;
    border:1px solid #253149;
    border-radius:12px;
    background:#0a1120;
}

.bug-report-fields b{
    color:#aab4cb;
    font-size:12px;
    text-transform:uppercase;
}

.bug-report-fields p{
    margin:0;
    color:#dfe7ff;
    line-height:1.45;
    white-space:normal;
    overflow-wrap:anywhere;
}

.bug-meta-grid div{
    display:grid;
    gap:4px;
    padding:10px;
    border:1px solid #253149;
    border-radius:10px;
    background:#0a1120;
}

.bug-meta-grid b{
    color:#aab4cb;
    font-size:12px;
    text-transform:uppercase;
}

.bug-meta-wide{
    grid-column:span 2;
}

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

.bug-message{
    display:grid;
    gap:5px;
    padding:12px;
    border:1px solid #253149;
    border-radius:12px;
    background:#0a1120;
}

.bug-message p{
    margin:0;
    color:#dfe7ff;
    line-height:1.45;
}

.bug-message-user strong{
    color:#facc15;
}

.bug-message-admin strong{
    color:#f87171;
}

.bug-message-summary{
    border-color:rgba(45,212,191,.42);
    background:rgba(13,95,92,.24);
}

.bug-message-admin{
    background:#101a2c;
}

.bug-message-system{
    background:rgba(22,101,52,.18);
}

.bug-message.is-internal{
    border-color:rgba(251,191,36,.45);
    background:rgba(146,64,14,.16);
}

.bug-close-actions,
.bug-admin-actions,
.admin-filter-form{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.bug-reply-form button,
.bug-close-actions button,
.bug-admin-actions button,
.bug-admin-reply button,
.admin-filter-form button,
.admin-filter-form .utility-btn{
    min-height:42px;
    border:1px solid #253149;
    border-radius:10px;
    background:#0a1120;
    color:#dfe7ff;
    padding:0 16px;
    font-weight:900;
    cursor:pointer;
}

.bug-reply-form button:hover,
.bug-close-actions button:hover,
.bug-admin-actions button:hover,
.bug-admin-reply button:hover,
.admin-filter-form button:hover,
.admin-filter-form .utility-btn:hover{
    border-color:#5264ff;
    background:#121b2e;
}

.bug-close-actions .bug-resolved-btn{
    border-color:rgba(74,222,128,.55);
    background:rgba(22,101,52,.45);
    color:#bbf7d0;
}

.bug-close-actions .bug-resolved-btn:hover{
    border-color:rgba(74,222,128,.8);
    background:rgba(22,101,52,.68);
}

.bug-reply-form .bug-reply-btn{
    min-height:48px;
    border-color:rgba(255,255,255,.18);
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    box-shadow:0 10px 24px rgba(82,100,255,.22);
}

.bug-reply-form .bug-reply-btn:hover{
    border-color:rgba(255,255,255,.34);
    background:linear-gradient(135deg,#6d5cff,#3f7cff);
}

@media (max-width:900px){
    .bug-ticket-head{
        flex-direction:column;
    }

    .bug-form-grid,
    .bug-context-options{
        grid-template-columns:1fr;
    }

    .bug-meta-grid{
        grid-template-columns:1fr;
    }

    .bug-report-fields{
        grid-template-columns:1fr;
    }

    .bug-meta-wide{
        grid-column:auto;
    }
}

.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;
}

@media (max-width: 480px) {
    body[data-page="send-to-player"] .card {
        padding: 9px 22px;
        border-radius: 16px;
    }
}

@media (max-width: 860px){
    .admin-database-backup{
        align-items:stretch;
        flex-direction:column;
    }

    .admin-backup-buttons{
        align-items:stretch;
        flex-direction:column;
    }

    .admin-backup-buttons .secondary-btn{
        width:100%;
    }

    .admin-create-form,
    .status-grid,
    .admin-grid,
    .admin-report-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-section-side{
        justify-content:flex-start;
        margin-top:6px;
    }

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

}

body[data-page="index"] .top-header{
    display:grid;
    grid-template-columns:max-content minmax(max-content, 1fr) max-content;
    grid-template-areas:"brand total user";
    align-items:start;
    padding:20px 0 34px;
}

body[data-page="index"] .top-header > div:first-child{
    grid-area:brand;
}

body[data-page="index"] .total-titles{
    grid-area:total;
    justify-self:center;
    align-self:center;
}

body[data-page="index"] .userbar{
    grid-area:user;
    justify-self:end;
    align-self:start;
    gap:10px;
}

.scroll-top-btn{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:20;
    width:62px;
    height:62px;
    border:2px solid rgba(255,255,255,.72);
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow:0 16px 42px rgba(99,102,241,.48), 0 0 0 6px rgba(99,102,241,.16);
    font-size:34px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transform:translateY(12px);
    transition:opacity .2s, transform .2s, border-color .2s, background .2s;
}

.scroll-top-btn.show{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}

.scroll-top-btn:hover{
    border-color:#fff;
    background:linear-gradient(135deg,#7c83ff,#a855f7);
    box-shadow:0 18px 48px rgba(99,102,241,.62), 0 0 0 8px rgba(99,102,241,.2);
}

@media (max-width:860px){
    .scroll-top-btn{
        right:16px;
        bottom:16px;
        width:56px;
        height:56px;
        font-size:30px;
    }
}

body[data-page="index"] .top-header.header-user-below{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    column-gap:18px;
    row-gap:16px;
}

body[data-page="index"] .top-header.header-user-below > div:first-child,
body[data-page="index"] .top-header.header-user-below .total-titles{
    flex:0 0 auto;
}

body[data-page="index"] .top-header.header-user-below .total-titles{
    justify-self:auto;
}

body[data-page="index"] .top-header.header-user-below .userbar{
    flex:0 0 100%;
    justify-self:auto;
    justify-content:center;
    min-width:0;
}

body[data-page="index"] .top-header.header-user-below .userbar-actions{
    flex-basis:100%;
}

body[data-page="index"] .top-header.header-stacked{
    grid-template-columns:1fr;
    grid-template-areas:
        "brand"
        "total"
        "user";
    row-gap:14px;
    justify-items:start;
}

body[data-page="index"] .top-header.header-stacked > div:first-child,
body[data-page="index"] .top-header.header-stacked .total-titles,
body[data-page="index"] .top-header.header-stacked .userbar{
    justify-self:start;
}

body[data-page="index"] .top-header.header-stacked .userbar{
    justify-content:flex-start;
    width:100%;
}

body[data-page="library"] .detail-header-bar.library-header-stacked .userbar,
body[data-page="details"] .detail-header-bar.detail-header-stacked .userbar,
body[data-page="admin"] .detail-header-bar.admin-header-stacked .userbar,
body[data-page="send-to-player"] .send-header.send-header-stacked .userbar,
body[data-page="index"] .top-header.header-user-below .userbar,
body[data-page="index"] .top-header.header-stacked .userbar{
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    justify-content:center;
    row-gap:10px;
}

body[data-page="library"] .detail-header-bar.library-header-stacked .userbar-actions,
body[data-page="details"] .detail-header-bar.detail-header-stacked .userbar-actions,
body[data-page="admin"] .detail-header-bar.admin-header-stacked .userbar-actions,
body[data-page="send-to-player"] .send-header.send-header-stacked .userbar-actions,
body[data-page="index"] .top-header.header-user-below .userbar-actions,
body[data-page="index"] .top-header.header-stacked .userbar-actions{
    grid-column:1;
    flex-basis:auto;
}