:root{
  --bg:#111; --panel:#1a1a1a; --border:#333; --text:#eee; --muted:#aaa;
  --gold:#c79b3b; --green:#5c5; --red:#a33;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}
a{color:var(--text);text-decoration:none;}
button,.btn{padding:8px 14px;background:var(--gold);border:none;border-radius:4px;color:#111;font-weight:bold;cursor:pointer;font-size:.95em;}
button.secondary,.btn.secondary{background:#333;color:var(--text);}
button.danger{background:var(--red);color:#fff;}
button:disabled{opacity:.5;cursor:default;}
input,select{background:#222;border:1px solid #444;color:var(--text);padding:8px;border-radius:4px;width:100%;}
label{display:block;margin:10px 0 4px;font-size:.85em;color:var(--muted);}

.topbar{display:flex;align-items:center;gap:16px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;flex-wrap:wrap;}
.brand{font-weight:800;font-size:1.3em;}
.brand span{color:var(--gold);}
.topnav{display:flex;gap:14px;flex:1;flex-wrap:wrap;}
.topnav a{color:var(--gold);font-weight:600;}
.gear{font-size:1.3em;}

#app{max-width:1300px;margin:0 auto;padding:16px;}

.section-title{font-size:1.1em;margin:22px 0 10px;color:var(--gold);}
.menu-list{display:flex;flex-direction:column;gap:8px;max-width:520px;}
.menu-list a{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px 16px;font-weight:600;}
.menu-list a:hover{border-color:var(--gold);}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.card{background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .1s;}
.card:hover{transform:translateY(-2px);border-color:var(--gold);}
.card img{width:100%;aspect-ratio:2/3;object-fit:cover;background:#000;display:block;}
.card .noimg{width:100%;aspect-ratio:2/3;background:#222;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.8em;padding:6px;text-align:center;}
.card .meta{padding:8px;font-size:.85em;flex:1;}
.card .meta .t{font-weight:600;display:block;}
.card .meta .y{color:var(--muted);font-size:.85em;}
.card .watched-badge{position:absolute;background:var(--gold);color:#111;font-size:.7em;padding:2px 5px;border-radius:3px;margin:4px;}
.card .rating-badge{position:absolute;top:0;right:0;background:rgba(0,0,0,.75);color:var(--gold);font-size:.7em;padding:2px 5px;border-radius:3px;margin:4px;}
.ratings-line{color:var(--gold);font-size:.9em;margin:4px 0;}
.card-wrap{position:relative;}

.letters{display:flex;flex-wrap:wrap;gap:6px;max-width:640px;}
.letters a{background:var(--panel);border:1px solid var(--border);border-radius:6px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.letters a:hover{border-color:var(--gold);}

.list-rows{display:flex;flex-direction:column;gap:6px;}
.row-item{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;}
.row-item:hover{border-color:var(--gold);}
.row-item .badge{color:var(--gold);font-weight:700;}
.row-item .star{color:var(--gold);margin-right:6px;}
.row-item .sub{color:var(--muted);font-size:.85em;}
.row-item .rt{display:flex;gap:8px;align-items:center;}

.pager{margin:18px 0;}

.loading{padding:40px;text-align:center;color:var(--muted);}
.error-box{padding:16px;background:#2a1414;border:1px solid var(--red);border-radius:6px;color:#f88;margin:16px 0;}

.detail-hero{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:20px;}
.detail-hero img{width:220px;border-radius:8px;flex-shrink:0;}
.detail-hero .info{flex:1;min-width:260px;}
.detail-hero h1{margin:0 0 8px;}
.detail-hero .plot{color:#ccc;line-height:1.5;}
.detail-hero .genres{color:var(--muted);margin-top:8px;}
.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}

body.modal-open{overflow:hidden;}
.trailer-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:18px;}
.trailer-panel{width:min(1100px,100%);max-height:calc(100vh - 36px);overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.55);}
.trailer-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);}
.trailer-header h2{font-size:1.15rem;margin:0;}
.trailer-close{font-size:1.5rem;line-height:1;padding:5px 11px;}
.trailer-content{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;padding:14px;}
.trailer-content.single{grid-template-columns:1fr;}
.trailer-player iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:8px;background:#000;}
.trailer-youtube-link{display:inline-block;margin-top:10px;}
.trailer-picker{display:flex;flex-direction:column;gap:7px;max-height:65vh;overflow:auto;}
.trailer-choice{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.trailer-choice.active{outline:2px solid var(--gold);background:#444;}
.trailer-choice-name{color:var(--text);}
.trailer-choice-meta{font-size:.78em;color:var(--muted);font-weight:normal;}
.trailer-mobile-prompt{padding:20px;text-align:center;}
.trailer-mobile-prompt .btn{display:inline-block;margin-top:8px;}

.player-wrap{max-width:1000px;margin:0 auto;}
.player-wrap video{width:100%;border-radius:8px;background:#000;}
.player-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}

.settings-form{max-width:560px;}
.settings-form fieldset{border:1px solid var(--border);border-radius:8px;margin-bottom:20px;padding:14px;}
.settings-form legend{color:var(--gold);font-weight:700;padding:0 6px;}
.status-line{display:flex;justify-content:space-between;align-items:center;margin:8px 0;}
.status-ok{color:var(--green);font-weight:600;}
.status-off{color:var(--muted);}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--gold);color:var(--text);
  padding:10px 18px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:50;max-width:90vw;}
#toast.show{opacity:1;}

@media (max-width:700px){
  .topnav{gap:10px;font-size:.9em;}
  .detail-hero img{width:140px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
  .trailer-modal{padding:8px;align-items:flex-end;}
  .trailer-panel{max-height:92vh;border-radius:12px 12px 0 0;}
  .trailer-content{grid-template-columns:1fr;padding:10px;}
  .trailer-picker{max-height:55vh;}
  .trailer-choice{padding:12px;}
}