/* Shared visual system. Library home stays a compact list. */
:root{--bg:#0c1019;--bg2:#111722;--bg3:#17202f;--card:#171f2e;--card-hover:#202d40;--text:#e9edf5;--text2:#a0aec2;--text3:#7f90aa;--accent:#91a7ff;--accent2:#bcacff;--accent-glow:rgba(126,150,255,.18);--accent-gradient:linear-gradient(125deg,#687deb,#9574db);--glass-border:rgba(171,190,221,.1);--space-3xl:48px;--radius:12px;--radius-lg:18px;--shadow-lg:0 16px 42px #0005;--header-height:68px;color-scheme:dark}
body{background:radial-gradient(ellipse at 75% 0,rgba(62,84,137,.12),transparent 55%),var(--bg)}
button,input,select,textarea,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
button,a,input,select{touch-action:manipulation}
input,select,textarea{max-width:100%;min-width:0;font-family:inherit}
button:disabled{cursor:not-allowed}
.navbar{height:var(--header-height);padding:0 32px;background:rgba(12,16,25,.93);gap:20px}
.navbar .logo{font-size:23px;letter-spacing:-1px;background:none;-webkit-text-fill-color:var(--text);color:var(--text)}
.navbar .logo::after{content:'.';color:var(--accent);-webkit-text-fill-color:var(--accent)}
.navbar .search-box{max-width:480px;min-width:0}
.navbar .search-box input{min-height:42px;border-radius:12px;background:#ffffff05}
.navbar .search-box .icon{display:flex}
.navbar .user-btn{min-height:42px;max-width:180px;border-radius:12px}
.navbar .user-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar{top:var(--header-height);background:rgba(17,23,34,.85);padding:24px 10px}
.sidebar .nav-item{min-height:44px;padding:10px 16px;margin:4px 0;border-radius:10px;font-size:14px}
.sidebar .nav-item.lib{padding-left:18px;font-size:13px}
.sidebar .nav-item.active{color:#c9d3ff;background:linear-gradient(90deg,#839bff25,#839bff09);box-shadow:inset 3px 0 var(--accent)}
.sidebar .nav-section-label{padding:12px 16px 8px;font-size:10px;letter-spacing:2px}
.main{margin-top:var(--header-height);padding:32px 40px 56px;min-width:0;min-height:calc(100dvh - var(--header-height))}
.main>*{min-width:0}
.section-header{gap:16px;flex-wrap:wrap;margin-bottom:20px}
.section-title{font-size:23px;letter-spacing:-.6px}
.home-welcome{position:relative;overflow:hidden;padding:36px;margin-bottom:32px;border-radius:20px;background:radial-gradient(ellipse at 100% 0,#667bd332,transparent 65%),linear-gradient(120deg,#1a263c,#131b2a);border:1px solid var(--glass-border)}
.home-welcome .eyebrow{font-size:10px;font-weight:600;letter-spacing:3px;color:#aebeff;margin-bottom:14px}
.home-welcome h1{font-size:clamp(25px,3vw,38px);letter-spacing:-1px;line-height:1.3;margin-bottom:12px}
.home-welcome p{color:var(--text2);font-size:14px;max-width:520px}
.library-count{display:inline-block;margin-top:24px;color:#bcc8e6;font-size:12px;border:1px solid #a4b8e522;padding:5px 12px;border-radius:20px;background:#ffffff04}
.main .vl-list{max-width:none;gap:12px;margin-top:20px}
.main .vl-row{border-radius:14px;background:linear-gradient(110deg,#182130,#141d2b);border-color:var(--glass-border);padding:18px 20px}
.main .library-entry{flex-wrap:nowrap;transition:border-color .2s,background .2s}
.library-entry:hover{border-color:#91a7ff55;background:var(--card-hover)}
.library-symbol{display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;border-radius:13px;background:#90aaff14;border:1px solid #90aaff20;color:#acbdff;font-size:25px}
.library-symbol.virtual{color:#c8afff;background:#b294ff12}
.main .vl-name{overflow-wrap:anywhere}
.main .vl-row small{margin-top:3px;font-size:12px}
.main .library-entry .btn-primary{background:#96acff12;color:#c4d1ff;border:1px solid #96acff25;box-shadow:none;white-space:nowrap}
.card-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:24px 18px;justify-content:stretch}
.card{border:1px solid #b3c8ff0d;box-shadow:0 6px 18px #0003}
.card-wrap .card-info{padding:10px 2px 0}
.card-wrap .card-info .ci-title{line-height:1.5;font-weight:600;font-size:14px}
.card-wrap .card-info .ci-sub{margin-top:3px;color:var(--text3);font-size:12px}
.filter-bar{padding:14px;background:#ffffff03;border:1px solid var(--glass-border);border-radius:14px;gap:10px}
.filter-bar select,.filter-bar input[type=text]{min-height:42px;border-radius:9px}
.pagination{flex-wrap:wrap;gap:6px}
.pagination button{min-height:42px;min-width:40px;padding:8px 12px}
.detail-hero{height:440px;border:1px solid var(--glass-border)}
.detail-hero .hero-title{line-height:1.25;overflow-wrap:anywhere}
.detail-info,.ep-info{min-width:0;overflow-wrap:anywhere}
.admin-page .mgmt-section{background:#141c2a;border-color:var(--glass-border)}
.stat-card{text-align:left;background:linear-gradient(135deg,#1d2940,#151d2c)}
.stat-card .stat-label{color:var(--text2)}
.data-table th{color:var(--text2)}
.table-scroll{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain;border-radius:10px}
.table-scroll .data-table{min-width:640px}
.modal-overlay{padding:20px;overflow-y:auto;overscroll-behavior:contain}
.modal{width:100%;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}
.modal .modal-btns{flex-wrap:wrap}
.modal input[type=checkbox]{width:auto}
.login-page{padding:24px;min-height:100dvh;background:radial-gradient(ellipse at 25% 0,#506ac633,transparent 55%),radial-gradient(ellipse at 90% 100%,#7260b922,transparent 50%),var(--bg)}
.login-box{padding:44px 36px;max-width:420px;background:#141c2be8;border:1px solid #a4b8e51c;text-align:left;box-shadow:0 24px 90px #0005}
.login-box h1{letter-spacing:-1.5px;margin-bottom:10px}
.login-box input{min-height:50px;background:#0b111b70;border-color:#a4b8e51c}
.login-box button{margin-top:8px;min-height:50px}
.menu-toggle,.nav-backdrop,.mobile-nav{display:none}
@media(min-width:1600px){.main{padding-left:56px;padding-right:56px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
@media(max-width:1024px){
 .navbar{padding:0 20px;gap:14px}.menu-toggle{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;background:transparent;color:var(--text);border:1px solid var(--glass-border);border-radius:11px}.menu-toggle svg{width:21px;height:21px}
 .sidebar{width:min(300px,85vw);transform:translateX(-100%);visibility:hidden;z-index:120;top:var(--header-height);bottom:0;padding-bottom:calc(24px + env(safe-area-inset-bottom));background:#111722}.sidebar.open{visibility:visible;transform:translateX(0)}
 .nav-backdrop{position:fixed;inset:var(--header-height) 0 0;z-index:115;border:0;background:#030712aa;backdrop-filter:blur(4px)}
 body.nav-open{overflow:hidden}body.nav-open .nav-backdrop{display:block}.main{padding:28px 24px 40px}
}
@media(max-width:600px){
 :root{--header-height:calc(112px + env(safe-area-inset-top))}
 .navbar{padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));display:grid;grid-template-columns:40px 1fr 42px;grid-template-rows:38px 40px;gap:10px 12px}
 .navbar .logo{font-size:22px}.navbar .menu-toggle{width:38px;height:38px}.navbar .user-btn{width:40px;min-height:38px;padding:0;justify-content:center}.navbar .user-btn span{display:none}
 .navbar .search-box{grid-column:1/-1;grid-row:2;max-width:none;width:100%;margin:0}.navbar .search-box input{min-height:40px;font-size:16px}
 .main{padding:22px max(16px,env(safe-area-inset-right)) calc(94px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 .mobile-nav{position:fixed;display:flex;bottom:0;left:0;right:0;z-index:100;padding:6px max(12px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#111722f5;backdrop-filter:blur(16px);border-top:1px solid var(--glass-border)}
 .mobile-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:50px;font-size:11px;color:var(--text3);border-radius:12px}.mobile-nav a span{font-size:24px;line-height:25px}.mobile-nav a.active{color:#c3ceff;background:#91a7ff12}
 .home-welcome{padding:24px 20px;margin-bottom:26px;border-radius:16px}.home-welcome h1{font-size:27px}.home-welcome p{font-size:13px;line-height:1.8}.library-count{margin-top:20px}
 .section-title{font-size:20px}.section-header{gap:12px;margin-bottom:14px}.section-header .btn-sm{font-size:12px}
 .main .vl-row{padding:14px 12px;gap:10px}.main .library-entry .vl-name{min-width:0}.library-symbol{width:38px;height:42px;font-size:23px;border-radius:10px}.library-entry strong{font-size:14px}.library-entry .btn-sm{padding:8px 10px}
 .card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}.card-wrap .card-info .ci-title{font-size:12px}.card-wrap .card-info .ci-sub{font-size:11px}.card .card-rating{right:5px;top:5px;padding:2px 6px;font-size:10px}.scroll-row .card-wrap{width:130px}
 .filter-bar{gap:8px;padding:10px}.filter-bar select{flex:1 1 42%;width:0;min-width:0}.filter-bar input[type=text]{width:100%}
 input:not([type=checkbox]):not([type=radio]),select,textarea,.modal input,.modal select,.login-box input,.vl-form input:not([type=checkbox]),.vl-form select{font-size:16px}
 .btn-sm,.admin-page .btn-sm,button.btn-fav,.filter-bar button{min-height:44px}.vl-toolbar>*{max-width:100%}.vl-toolbar label{width:100%}.vl-charts{grid-template-columns:minmax(0,1fr)!important}
 .detail-hero{height:auto;min-height:380px}.detail-hero .backdrop{position:absolute;inset:0}.detail-hero .hero-content{position:relative;padding:130px 18px 22px}.detail-hero .hero-title{font-size:27px}.detail-hero .hero-meta{font-size:12px}.detail-hero .btn-group{gap:8px}.detail-hero .btn-fav{padding:10px 14px}.detail-body{grid-template-columns:minmax(0,1fr);gap:20px}.detail-body .poster{display:none}.detail-info p{font-size:14px}
 .episode-item{gap:12px;padding:10px}.episode-item .ep-thumb{width:104px;height:65px}.episode-item .ep-title{font-size:13px}.season-tabs{flex-wrap:nowrap;overflow-x:auto;padding:4px 0 10px}.season-tab{white-space:nowrap;min-height:44px}
 .admin-page .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat-card{padding:16px}.admin-page .mgmt-section{padding:16px}.responsive-columns{grid-template-columns:minmax(0,1fr)!important}.data-table th,.data-table td{padding:12px}.table-scroll{border:1px solid var(--glass-border)}
 .modal-overlay{padding:12px}.modal{max-height:calc(100dvh - 24px);padding:22px 18px;border-radius:18px}.modal .modal-btns button{flex:1;min-height:46px}.toast{top:calc(var(--header-height) + 12px);right:16px;left:16px;overflow-wrap:anywhere}
 .login-page{padding:20px}.login-box{padding:32px 24px}.login-box h1{font-size:34px}.pagination button{padding:7px 10px}
}
@media(max-width:359px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-symbol{display:none}.section-header{align-items:flex-start}.home-welcome h1{font-size:24px}}
@media(hover:none){.card:hover,.person-card:hover,.btn-sm:hover{transform:none}.card .card-overlay{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.mobile-nav a svg{margin-bottom:3px;flex-shrink:0}
.detail-body:not(:has(.poster)){grid-template-columns:minmax(0,1fr)}
/* Keep the document as the only page scroller, including long mobile lists. */
html,body{height:auto;min-height:100%;overflow-x:clip}
.table-scroll .data-table th{white-space:nowrap}
.admin-page .table-scroll .data-table{min-width:820px}
html:has(body.nav-open){overflow:hidden}
.main .btn-sm.btn-primary{background:linear-gradient(125deg,#5268ce,#7853b5);border-color:transparent;color:#fff}
.main .library-entry .btn-primary{background:#96acff12;color:#c4d1ff;border-color:#96acff25}

/* Clear action hierarchy and touch-friendly disclosure controls. */
.account-menu{position:relative;margin-left:auto;flex-shrink:0}
.account-menu summary{list-style:none}.account-menu summary::-webkit-details-marker{display:none}
.account-panel{position:absolute;right:0;top:calc(100% + 12px);width:210px;padding:10px;background:var(--bg2);border:1px solid var(--glass-border);border-radius:14px;box-shadow:0 14px 40px #0008;z-index:220}
.account-name{padding:10px;color:var(--text2);overflow-wrap:anywhere}
.account-panel a,.account-panel button{display:block;width:100%;padding:12px;border:0;border-radius:8px;background:transparent;text-align:left;color:var(--text);font:inherit;cursor:pointer}
.account-panel a:hover,.account-panel button:hover{background:var(--glass)}
.account-panel button{color:#ff9999}
.library-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.action-help{font-size:13px;color:var(--text2);line-height:1.7;margin:8px 0 16px}
.action-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;margin:12px 0}
.action-toolbar button,.library-heading button,.row-actions button{white-space:nowrap}
.action-disclosure>summary,.scan-settings>summary{cursor:pointer;min-height:44px;padding:11px 14px;color:var(--text);border:1px solid var(--glass-border);border-radius:10px;box-sizing:border-box}
.action-disclosure>summary:hover,.scan-settings>summary:hover{background:var(--glass)}
.action-disclosure[open]>summary{margin-bottom:10px}
.action-options{display:flex;flex-direction:column;align-items:stretch;gap:8px;max-width:100%;padding:10px;border:1px solid var(--glass-border);border-radius:10px}
.action-options .action-help{white-space:normal;max-width:300px;margin:0}
.action-options .btn-danger{margin-top:8px;border-top:1px solid #ef444466!important}
.row-actions{display:inline-block;vertical-align:top;margin:4px;min-width:100px}
.row-actions .action-options{min-width:140px}.row-actions button{text-align:left}
.scan-settings>summary{font-weight:600}.scan-settings[open]>summary{margin-bottom:20px}
.library-list .data-table td:nth-child(4){max-width:280px;overflow-wrap:anywhere}
@media(max-width:600px){.action-toolbar>.action-disclosure{flex:1 1 100%}.library-list .data-table{min-width:620px}.library-heading .section-title{font-size:20px}.action-toolbar .btn-sm{flex:1 1 auto}.scan-settings{padding:16px}}