/* ═══════════════════════════════════════════════
   КиноГО FM — main.css
   Palette: #222 bg / #333 cards / #e6c35c accent
   No borders. No shadows. Clean modern UI.
═══════════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
    --bg:        #222222;
    --bg2:       #2a2a2a;
    --bg3:       #333333;
    --bg4:       #3d3d3d;
    --text:      #e0e0e0;
    --text2:     #aaaaaa;
    --text3:     #666666;
    --accent:    #e6c35c;
    --accent2:   #d4a832;
    --accent-dim:rgba(230,195,92,.1);
    --kp-color:  #ff6600;
    --imdb-color:#f5c518;
    --green:     #4caf50;
    --red:       #e53935;
    --header-h:  56px;
    --sidebar-w: 270px;
    --page-max:  1400px;
    --radius:    6px;
    --trans:     .15s;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; line-height:1.5; }
a { text-decoration:none; color:inherit; transition:color var(--trans); }
ul { list-style:none; }
img { max-width:100%; display:block; }
input,select,textarea,button { font-family:inherit; }
button { cursor:pointer; }
::selection { background:var(--accent); color:#111; }

/* ── CONTAINER ── */
.container { max-width:var(--page-max); margin:0 auto; padding:0 20px; }

/* ── SCROLLBARS ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:3px; }

/* ════════════════════════════════════
   HEADER
════════════════════════════════════ */
.site-header {
    background:var(--bg2);
    height:var(--header-h);
    position:sticky;
    top:0;
    z-index:200;
}
.header-inner { display:flex; align-items:center; height:100%; gap:20px; }
.logo { display:flex; align-items:baseline; gap:2px; font-size:22px; font-weight:900; flex-shrink:0; }
.logo-text { color:#fff; }
.logo-kino { color:#fff; }
.logo-go   { color:var(--accent); }
.logo-badge { background:var(--accent); color:#111; font-size:9px; font-weight:900; padding:1px 5px; border-radius:3px; margin-left:4px; letter-spacing:.04em; vertical-align:middle; }
.header-nav { display:flex; align-items:center; gap:2px; }
.header-nav a { padding:6px 12px; font-size:13px; font-weight:600; color:var(--text2); border-radius:4px; }
.header-nav a:hover, .header-nav a.active { color:var(--text); background:var(--bg3); }
.header-right { display:flex; align-items:center; gap:10px; margin-left:auto; }
.btn-hdr { padding:7px 16px; border-radius:4px; background:var(--accent); color:#111; font-size:12px; font-weight:700; }
.btn-hdr:hover { background:var(--accent2); color:#111; }
.btn-hdr-outline { background:var(--bg3); color:var(--text2); }
.btn-hdr-outline:hover { background:var(--bg4); color:var(--text); }
.btn-header-login { padding:7px 16px; border-radius:4px; background:var(--accent); color:#111; font-size:12px; font-weight:700; }
.btn-header-login:hover { background:var(--accent2); color:#111; }

/* Search */
.search-wrap { position:relative; }
.search-input-wrap { display:flex; align-items:center; background:var(--bg3); border-radius:4px; padding:0 12px; height:34px; gap:8px; width:260px; transition:background var(--trans); }
.search-input-wrap:focus-within { background:var(--bg4); }
.search-icon { color:var(--text3); flex-shrink:0; display:flex; align-items:center; }
#search-input { background:none; border:none; outline:none; color:var(--text); font-size:13px; width:100%; }
#search-input::placeholder { color:var(--text3); }

/* Search dropdown */
.search-dropdown { position:absolute; top:calc(100% + 6px); right:0; width:480px; background:var(--bg3); border-radius:var(--radius); z-index:999; display:none; overflow:hidden; }
.search-dropdown.active { display:block; }
.sdrop-results { }
.search-result-item { display:flex; gap:12px; padding:10px 14px; color:var(--text); align-items:flex-start; }
.search-result-item:hover { background:var(--bg4); }
.search-result-poster { width:46px; height:65px; object-fit:cover; border-radius:4px; flex-shrink:0; background:var(--bg2); }
.search-result-info { flex:1; min-width:0; }
.sri-title { font-size:14px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sri-orig { font-size:11px; color:var(--text3); }
.sri-meta { font-size:11px; color:var(--text2); margin-top:2px; }
.sri-ratings { display:flex; gap:5px; margin-top:3px; }
.sdrop-kp   { font-size:11px; font-weight:700; color:#fff; background:var(--kp-color); padding:2px 6px; border-radius:3px; }
.sdrop-imdb { font-size:11px; font-weight:700; color:#000; background:var(--imdb-color); padding:2px 6px; border-radius:3px; }
.search-all-link { display:block; padding:10px 14px; font-size:13px; font-weight:600; color:var(--accent); background:var(--bg2); text-align:center; }
.search-all-link:hover { color:#fff; }
.search-category-links { padding:8px 14px; background:var(--bg2); display:flex; flex-wrap:wrap; gap:6px; }
.search-category-links a { font-size:12px; color:var(--text2); background:var(--bg3); padding:3px 8px; border-radius:3px; }
.search-category-links a:hover { color:var(--accent); }

/* User menu */
.user-menu { position:relative; }
.user-avatar { width:34px; height:34px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#111; cursor:pointer; overflow:hidden; flex-shrink:0; }
.user-avatar img { width:100%; height:100%; object-fit:cover; }
.user-dropdown { position:absolute; top:calc(100% + 8px); right:0; background:var(--bg3); border-radius:var(--radius); overflow:hidden; min-width:160px; display:none; z-index:999; }
.user-dropdown.open { display:block; }
.user-dropdown a { display:block; padding:10px 16px; font-size:13px; color:var(--text2); }
.user-dropdown a:hover { background:var(--bg4); color:var(--text); }

/* ════════════════════════════════════
   SUB-NAV
════════════════════════════════════ */
.sub-nav { background:var(--bg2); position:sticky; top:var(--header-h); z-index:199; }
.sub-nav-inner { display:flex; align-items:stretch; overflow-x:auto; scrollbar-width:none; gap:2px; padding:0 4px; }
.sub-nav-inner::-webkit-scrollbar { display:none; }
.sn-link { padding:10px 18px; font-size:12px; font-weight:700; color:var(--text3); white-space:nowrap; text-transform:uppercase; letter-spacing:.05em; position:relative; transition:color var(--trans); }
.sn-link::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transition:transform .2s; }
.sn-link:hover { color:var(--text); }
.sn-link:hover::after, .sn-link.active::after { transform:scaleX(1); }
.sn-link.active { color:var(--accent); }

/* ════════════════════════════════════
   LAYOUT
════════════════════════════════════ */
.site-layout { display:flex; align-items:flex-start; }
.main-content { flex:1; min-width:0; padding:16px 20px; }
.main-feed { flex:1; min-width:0; }
.content-wrap { flex:1; min-width:0; }

/* ════════════════════════════════════
   SIDEBAR
════════════════════════════════════ */
.sidebar { width:var(--sidebar-w); flex-shrink:0; background:var(--bg2); position:sticky; top:calc(var(--header-h) + 38px); max-height:calc(100vh - var(--header-h) - 38px); overflow-y:auto; scrollbar-width:none; }
.sidebar::-webkit-scrollbar { display:none; }
.nav-panel-header { background:var(--accent); color:#111; font-size:11px; font-weight:900; letter-spacing:.08em; padding:9px 14px; display:flex; align-items:center; gap:6px; position:sticky; top:0; z-index:1; }
.nav-panel-body { padding:8px 0 20px; }
.nav-panel-grid { display:grid; grid-template-columns:1fr 1fr; padding-bottom:8px; }
.nav-panel-col { padding:6px 0 0 10px; }
.nav-col-title { font-size:10px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; padding:4px 0 5px; margin-bottom:3px; margin-right:8px; }
.nav-link { display:block; font-size:12px; color:var(--text2); padding:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-right:6px; }
.nav-link:hover { color:var(--accent); }
.nav-random-btn { display:flex; align-items:center; justify-content:center; gap:6px; background:var(--accent); color:#111; font-size:10px; font-weight:900; letter-spacing:.05em; padding:8px 10px; margin:8px 10px 10px; border-radius:4px; }
.nav-random-btn:hover { background:var(--accent2); color:#111; }
.nav-updates-header { display:flex; align-items:center; gap:6px; background:var(--bg3); font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--text2); padding:7px 10px; margin-bottom:4px; }
.nav-updates { padding:0 6px 8px; }
.nav-update-item { display:flex; gap:8px; padding:5px 4px; border-radius:4px; text-decoration:none; }
.nav-update-item:hover { background:var(--bg3); }
.nu-poster { flex-shrink:0; width:42px; position:relative; }
.nu-poster img { width:42px; height:58px; object-fit:cover; border-radius:3px; background:var(--bg3); }
.nu-season { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:8px; font-weight:700; color:#fff; background:rgba(0,0,0,.75); padding:1px; }
.nu-info { flex:1; min-width:0; }
.nu-title { font-size:11px; font-weight:600; color:var(--text); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nu-ep { font-size:10px; color:var(--accent); margin-top:2px; }
.nu-badge { display:inline-block; background:var(--red); color:#fff; font-size:8px; font-weight:800; padding:1px 4px; border-radius:2px; margin-top:2px; }

/* Sidebar genres/countries chips (old style pages) */
.sidebar-section { padding:12px 14px; }
.sidebar-section-title { font-size:10px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.sidebar-link { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px; color:var(--text2); }
.sidebar-link:hover, .sidebar-link.active { color:var(--accent); }
.sidebar-link .count { margin-left:auto; font-size:11px; color:var(--text3); }
.sidebar-link .icon { width:16px; text-align:center; flex-shrink:0; }
.sidebar-genres { display:flex; flex-wrap:wrap; gap:6px; }
.genre-tag { background:var(--bg3); color:var(--text2); padding:4px 10px; border-radius:20px; font-size:12px; font-weight:500; transition:.15s; }
.genre-tag:hover { background:var(--accent); color:#111; }
.nav-svg-icon { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; }
.nav-svg-icon svg { width:14px; height:14px; }
.icon.svg-icon { display:inline-flex; align-items:center; justify-content:center; }
.icon.svg-icon svg { width:14px; height:14px; }

/* ════════════════════════════════════
   POSTER CAROUSEL
════════════════════════════════════ */
.poster-slider { margin-bottom:18px; position:relative; }
.ps-track { display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth; padding:4px 0 10px; scrollbar-width:none; }
.ps-track::-webkit-scrollbar { display:none; }
.ps-item { flex-shrink:0; width:145px; border-radius:6px; overflow:hidden; position:relative; }
.ps-item img { width:145px; height:210px; object-fit:cover; display:block; background:var(--bg3); }
.ps-overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent 30%,rgba(0,0,0,.9)); padding:28px 8px 8px; }
.ps-title { font-size:12px; font-weight:700; color:#fff; line-height:1.3; margin-bottom:2px; }
.ps-meta { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text2); }
.ps-star { color:var(--imdb-color); }
.ps-dots { display:flex; justify-content:center; gap:5px; padding:4px 0 2px; }
.ps-dot { width:7px; height:7px; border-radius:50%; background:var(--bg4); cursor:pointer; transition:.2s; }
.ps-dot.active { background:var(--accent); width:18px; border-radius:4px; }

/* ════════════════════════════════════
   MAIN HEADING
════════════════════════════════════ */
.main-heading { font-size:16px; font-weight:800; color:var(--text); padding:0 0 12px; margin-bottom:14px; background:linear-gradient(90deg,var(--bg3),transparent) no-repeat 0 100%/100% 1px; }

/* ════════════════════════════════════
   FILTER AREA (home)
════════════════════════════════════ */
.filter-area { margin-bottom:16px; }
.filter-row1 { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px; flex-wrap:wrap; }
.filter-sort-wrap { display:flex; align-items:center; gap:10px; }
.filter-sort-label { font-size:12px; color:var(--text3); font-weight:600; }
.filter-sort-select { background:var(--bg3); color:var(--text); padding:6px 30px 6px 10px; border-radius:4px; font-size:13px; font-weight:600; border:none; outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; }
.filter-sort-select:focus { outline:1px solid var(--accent); }
.filter-total { font-size:13px; color:var(--text2); font-weight:600; }
.filter-total strong { color:var(--text); }
.filter-row2 { display:flex; gap:6px; flex-wrap:wrap; }
.flt-btn { display:flex; align-items:center; gap:6px; background:var(--bg3); color:var(--text2); padding:7px 14px; border-radius:4px; font-size:12px; font-weight:600; cursor:pointer; border:none; transition:background var(--trans),color var(--trans); white-space:nowrap; }
.flt-btn svg { width:10px; height:10px; flex-shrink:0; transition:transform .2s; }
.flt-btn:hover { background:var(--bg4); color:var(--text); }
.flt-btn.active { background:var(--accent); color:#111; }
.flt-btn.has-value { color:var(--accent); }
.flt-count { background:var(--accent); color:#111; font-size:9px; font-weight:800; padding:1px 4px; border-radius:2px; }

/* Filter dropdown panel */
.flt-panel-wrap { position:relative; }
.flt-panel { position:absolute; top:calc(100% + 6px); left:0; background:var(--bg3); border-radius:6px; z-index:500; min-width:400px; max-width:700px; overflow:hidden; display:none; }
.flt-panel.open { display:block; }
.flt-panel-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--bg2); }
.flt-panel-title { font-size:12px; font-weight:900; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.flt-panel-search { background:var(--bg3); border:none; color:var(--text); padding:4px 10px; border-radius:3px; font-size:12px; outline:none; width:120px; }
.flt-panel-search::placeholder { color:var(--text3); }
.flt-panel-close { background:none; border:none; color:var(--text3); font-size:16px; cursor:pointer; padding:0 4px; line-height:1; }
.flt-panel-close:hover { color:var(--text); }
.flt-panel-body { padding:10px 16px 12px; max-height:320px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--bg4) transparent; }
.flt-checkbox-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px 12px; }
.flt-checkbox-grid.cols3 { grid-template-columns:repeat(3,1fr); }
.flt-checkbox-grid.cols2 { grid-template-columns:repeat(2,1fr); }
.flt-check-item { display:flex; align-items:center; gap:7px; cursor:pointer; }
.flt-check-item input[type=checkbox] { width:14px; height:14px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.flt-check-label { font-size:12px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flt-check-item:hover .flt-check-label { color:var(--text); }
.flt-panel-foot { display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--bg2); }
.flt-apply { background:var(--green); color:#fff; padding:7px 20px; border-radius:4px; font-size:12px; font-weight:700; border:none; cursor:pointer; }
.flt-apply:hover { background:#43a047; }
.flt-cancel { background:var(--bg4); color:var(--text2); padding:7px 16px; border-radius:4px; font-size:12px; font-weight:600; border:none; cursor:pointer; }
.flt-cancel:hover { color:var(--text); }

/* Simple filter bar (category pages) */
.filter-bar { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.filter-select { background:var(--bg3); border:none; color:var(--text); padding:7px 10px; border-radius:4px; font-size:13px; outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; padding-right:24px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 7px center; }
.filter-select:focus { outline:1px solid var(--accent); }
.filter-select.search-input { max-width:260px; padding-right:10px; background-image:none; }

/* Page titles / sort tabs */
.page-title { font-size:20px; font-weight:800; color:var(--text); margin-bottom:6px; }
.page-desc { font-size:13px; color:var(--text3); margin-bottom:14px; }
.top-filter { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.tf-btn { padding:7px 16px; border-radius:4px; background:var(--bg3); color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; border:none; transition:.15s; }
.tf-btn:hover { background:var(--bg4); color:var(--text); }
.tf-btn.active { background:var(--accent); color:#111; }
.top-desc { font-size:13px; color:var(--text3); margin-bottom:14px; }
.top-info { margin-bottom:6px; }
.search-type-filter { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:16px; }
.no-results { padding:40px 0; text-align:center; color:var(--text3); font-size:14px; }

/* ════════════════════════════════════
   MOVIE LIST CARDS (mi-*)
════════════════════════════════════ */
.movie-list { display:flex; flex-direction:column; }
.mi { padding:16px 0; }
.mi + .mi { background:linear-gradient(90deg,var(--bg3),transparent) no-repeat 0 0/100% 1px; }
.mi-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.mi-title { font-size:17px; font-weight:800; flex:1; min-width:0; }
.mi-title a { color:var(--text); }
.mi-title a:hover { color:var(--accent); }
.mi-ratings { display:flex; gap:6px; flex-shrink:0; align-items:center; }
.mi-r-site { font-size:12px; font-weight:700; color:var(--accent); background:var(--accent-dim); padding:3px 8px; border-radius:3px; }
.mi-r-kp   { font-size:12px; font-weight:700; color:var(--kp-color); background:rgba(255,102,0,.1); padding:3px 8px; border-radius:3px; }
.mi-r-imdb { font-size:12px; font-weight:700; color:var(--imdb-color); background:rgba(245,197,24,.1); padding:3px 8px; border-radius:3px; }
.mi-body { display:flex; gap:16px; margin-bottom:12px; }
.mi-poster { flex-shrink:0; width:130px; border-radius:5px; overflow:hidden; position:relative; display:block; }
.mi-poster img { width:130px; height:185px; object-fit:cover; display:block; background:var(--bg3); }
.mi-age { position:absolute; top:6px; right:6px; background:rgba(0,0,0,.8); color:#fff; font-size:10px; font-weight:700; padding:2px 5px; border-radius:3px; }
.mi-ep-info { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.75); color:var(--accent); font-size:10px; font-weight:600; padding:3px 6px; text-align:center; }
.mi-right { flex:1; min-width:0; }
.mi-desc { font-size:13px; line-height:1.7; color:var(--text2); margin-bottom:10px; }
.mi-meta { font-size:13px; line-height:1.9; }
.mi-meta-row { display:flex; gap:8px; }
.mi-meta-key { color:var(--text3); font-weight:600; white-space:nowrap; min-width:110px; }
.mi-meta-val { color:var(--text); }
.mi-meta-val a { color:var(--text2); }
.mi-meta-val a:hover { color:var(--accent); }
.mi-footer { display:flex; align-items:center; gap:12px; padding-top:10px; }
.mi-watch { display:inline-flex; align-items:center; gap:7px; background:var(--bg3); color:var(--text); padding:8px 18px; border-radius:4px; font-size:13px; font-weight:700; transition:.15s; }
.mi-watch svg { width:13px; height:13px; }
.mi-watch:hover { background:var(--accent); color:#111; }
.mi-date { font-size:11px; color:var(--text3); flex:1; }
.mi-bookmark { background:none; border:none; color:var(--text3); width:32px; height:32px; border-radius:4px; display:flex; align-items:center; justify-content:center; cursor:pointer; margin-left:auto; transition:.15s; }
.mi-bookmark:hover, .mi-bookmark.active { color:var(--accent); background:var(--accent-dim); }

/* Old card styles for compatibility */
.movie-card-list { display:flex; gap:0; background:transparent; }
.movie-card-list:hover { }
.mcl-poster { flex-shrink:0; width:130px; position:relative; display:block; background:var(--bg3); border-radius:5px; overflow:hidden; }
.mcl-poster img { width:130px; height:185px; object-fit:cover; display:block; }
.mcl-quality { position:absolute; bottom:5px; left:5px; background:rgba(230,195,92,.9); color:#111; font-size:9px; font-weight:800; padding:2px 6px; border-radius:3px; text-transform:uppercase; }
.mcl-type-badge { position:absolute; top:5px; left:5px; background:var(--green); color:#fff; font-size:9px; font-weight:700; padding:2px 6px; border-radius:3px; }
.mcl-body { flex:1; min-width:0; padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.mcl-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mcl-ratings { display:flex; gap:5px; }
.badge-kp   { font-size:11px; font-weight:700; color:var(--kp-color); background:rgba(255,102,0,.1); padding:2px 7px; border-radius:3px; }
.badge-imdb { font-size:11px; font-weight:700; color:var(--imdb-color); background:rgba(245,197,24,.1); padding:2px 7px; border-radius:3px; }
.mcl-time { font-size:11px; color:var(--text3); }
.mcl-title { font-size:15px; font-weight:700; }
.mcl-title a { color:var(--text); }
.mcl-title a:hover { color:var(--accent); }
.mcl-orig { font-size:12px; color:var(--text3); }
.mcl-meta { font-size:12px; color:var(--text2); }
.mcl-meta span { margin-right:12px; }
.mcl-meta a { color:var(--text2); }
.mcl-meta a:hover { color:var(--accent); }
.mcl-desc { font-size:13px; color:var(--text2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mcl-actions { display:flex; align-items:center; gap:8px; margin-top:auto; }
.btn-watch { display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#111; padding:7px 16px; border-radius:4px; font-size:13px; font-weight:700; }
.btn-watch:hover { background:var(--accent2); color:#111; }
.btn-bookmark { background:none; border:none; color:var(--text3); width:32px; height:32px; border-radius:4px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s; }
.btn-bookmark:hover, .btn-bookmark.active { color:var(--accent); background:var(--accent-dim); }

/* ════════════════════════════════════
   TOP PAGE
════════════════════════════════════ */
.top-list { display:flex; flex-direction:column; gap:0; }
.top-item { display:flex; align-items:center; gap:12px; padding:10px 0; }
.top-item + .top-item { background:linear-gradient(90deg,var(--bg3),transparent) no-repeat 0 0/100% 1px; }
.top-rank { font-size:22px; font-weight:900; color:var(--text3); width:36px; text-align:center; flex-shrink:0; }
.top-rank.gold   { color:#ffd700; }
.top-rank.silver { color:#c0c0c0; }
.top-rank.bronze { color:#cd7f32; }
.rank-num { font-size:20px; font-weight:900; color:var(--text3); }
.top-item img { width:60px; height:85px; object-fit:cover; border-radius:4px; flex-shrink:0; background:var(--bg3); }
.top-item-info { flex:1; min-width:0; }
.top-item-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:3px; }
.top-item-title:hover { color:var(--accent); }
.top-item-meta { font-size:12px; color:var(--text3); }
.top-ratings { display:flex; gap:6px; flex-shrink:0; align-items:center; }
.fi-num   { font-size:22px; font-weight:900; color:var(--text3); width:40px; text-align:right; flex-shrink:0; }
.fi-play  { flex-shrink:0; }
.fi-title { font-size:15px; font-weight:700; color:var(--text); }
.fi-type  { font-size:11px; color:var(--text3); }
.fi-year  { font-size:12px; color:var(--text3); }
.fi-rating { font-size:12px; color:var(--accent); font-weight:700; }
.fi-imdb  { font-size:12px; color:var(--imdb-color); font-weight:700; }

/* ════════════════════════════════════
   MOVIE PAGE
════════════════════════════════════ */
.movie-wrap { width:100%; }
.movie-detail-page { }
.breadcrumb-nav { font-size:12px; color:var(--text3); display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-bottom:14px; }
.breadcrumb-nav a { color:var(--text3); }
.breadcrumb-nav a:hover { color:var(--accent); }
.bc-sep { color:var(--text3); }
.movie-info-card { display:flex; gap:24px; margin-bottom:24px; }
.movie-poster-col { flex-shrink:0; width:200px; }
.movie-poster-wrap { position:relative; }
.movie-poster-img { width:200px; height:300px; object-fit:cover; border-radius:6px; display:block; background:var(--bg3); }
.poster-badge { position:absolute; padding:3px 8px; border-radius:3px; font-size:11px; font-weight:700; bottom:8px; }
.poster-badge.kp   { background:var(--kp-color); color:#fff; left:8px; }
.poster-badge.imdb { background:var(--imdb-color); color:#000; right:8px; }
.movie-meta-col { flex:1; min-width:0; }
.movie-title-main { font-size:24px; font-weight:900; color:var(--text); margin-bottom:4px; line-height:1.2; }
.movie-year-head { color:var(--text3); font-weight:400; }
.movie-orig-title { font-size:14px; color:var(--text3); margin-bottom:12px; }
.movie-site-rating { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.stars-display { display:flex; gap:3px; align-items:center; cursor:pointer; }
.star { font-size:20px; color:var(--bg4); transition:color .1s; }
.star.filled { color:var(--imdb-color); }
.star-icon { font-size:16px; color:var(--imdb-color); }
.rating-text { font-size:12px; color:var(--text3); margin-left:4px; }
.btn-bookmark-detail { display:inline-flex; align-items:center; gap:6px; background:var(--bg3); color:var(--text2); padding:8px 16px; border-radius:4px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:.15s; }
.btn-bookmark-detail svg { width:14px; height:14px; }
.btn-bookmark-detail:hover, .btn-bookmark-detail.active { color:var(--accent); background:var(--accent-dim); }
.movie-meta-table { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:14px; line-height:1.9; }
.movie-meta-table th { text-align:right; padding-right:14px; color:var(--text3); font-weight:600; white-space:nowrap; vertical-align:top; width:1%; }
.movie-meta-table td { color:var(--text); vertical-align:top; }
.movie-meta-table td a { color:var(--accent); margin-right:4px; }
.movie-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.btn-watch-main { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#111; padding:10px 24px; border-radius:4px; font-size:14px; font-weight:800; transition:.15s; }
.btn-watch-main svg { width:14px; height:14px; }
.btn-watch-main:hover { background:var(--accent2); color:#111; }
.btn-watch-sm { display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#111; padding:6px 14px; border-radius:4px; font-size:12px; font-weight:700; }
.btn-watch-sm:hover { background:var(--accent2); }
.btn-comments-link { display:inline-flex; align-items:center; gap:6px; background:var(--bg3); color:var(--text2); padding:10px 18px; border-radius:4px; font-size:13px; font-weight:600; transition:.15s; }
.btn-comments-link svg { width:15px; height:15px; }
.btn-comments-link:hover { color:var(--text); }
.btn-back { display:inline-flex; align-items:center; gap:6px; background:var(--bg3); color:var(--text2); padding:7px 14px; border-radius:4px; font-size:13px; font-weight:600; }
.btn-back:hover { color:var(--text); }
.btn-show-more { background:var(--bg3); color:var(--text2); padding:8px 20px; border-radius:4px; font-size:13px; font-weight:600; border:none; cursor:pointer; display:block; margin:16px auto 0; transition:.15s; }
.btn-show-more:hover { color:var(--text); }
.movie-collections-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; font-size:13px; color:var(--text3); }
.movie-collections-bar a { background:var(--bg3); color:var(--text2); padding:3px 10px; border-radius:20px; font-size:12px; }
.movie-collections-bar a:hover { color:var(--accent); }
.voices-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }
.voices-label { font-size:12px; color:var(--text3); }
.voice-tag { background:var(--bg3); color:var(--text2); padding:3px 10px; border-radius:3px; font-size:11px; }
.voice-select-bar { margin-bottom:10px; }
.voice-select { background:var(--bg3); border:none; color:var(--text); padding:7px 12px; border-radius:4px; font-size:13px; outline:none; }

/* Player */
.player-section { margin-bottom:24px; }
.player-section h2 { font-size:17px; font-weight:700; margin-bottom:12px; color:var(--text); }
.player-header h2 { font-size:17px; font-weight:700; margin-bottom:12px; }
.player-tabs-bar { display:flex; gap:4px; margin-bottom:10px; flex-wrap:wrap; }
.player-tab { padding:7px 16px; border-radius:4px; background:var(--bg3); color:var(--text2); font-size:13px; font-weight:600; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:6px; transition:.15s; }
.player-tab svg { width:12px; height:12px; }
.player-tab:hover, .player-tab.active { background:var(--accent); color:#111; }
.player-wrap { position:relative; width:100%; aspect-ratio:16/9; max-height:550px; background:#000; border-radius:6px; overflow:hidden; display:none; }
.player-wrap.active { display:block; }
.player-iframe, .lazy-player { width:100%; height:100%; border:none; position:absolute; inset:0; }
.player-overlay { position:absolute; inset:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.player-overlay.loaded { display:none; }
.player-preview-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.play-btn-big { position:relative; z-index:2; width:72px; height:72px; border-radius:50%; background:rgba(230,195,92,.9); display:flex; align-items:center; justify-content:center; transition:.2s; }
.player-overlay:hover .play-btn-big { background:var(--accent); transform:scale(1.08); }
.play-btn-big svg { width:28px; height:28px; color:#111; margin-left:4px; }
.player-no-video { padding:48px 24px; text-align:center; background:var(--bg3); border-radius:6px; color:var(--text3); font-size:14px; }
.movie-backdrop { position:relative; }
.backdrop-overlay { position:absolute; inset:0; }
.promo-text { font-size:13px; color:var(--text3); margin-bottom:14px; font-style:italic; }

/* Section titles */
.section-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:14px; padding-bottom:8px; background:linear-gradient(90deg,var(--bg3),transparent) no-repeat 0 100%/100% 1px; }

/* Movie description */
.movie-description { margin-bottom:20px; }
.movie-desc-text { font-size:14px; line-height:1.75; color:var(--text2); }
.movie-slogan { font-style:italic; color:var(--text3); font-size:13px; margin-top:8px; }
.description-text.collapsed { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* Cast */
.movie-cast { margin-bottom:24px; }
.cast-scroll { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; }
.cast-scroll::-webkit-scrollbar { display:none; }
.cast-card { flex-shrink:0; width:86px; text-decoration:none; }
.cast-card img { width:86px; height:116px; object-fit:cover; border-radius:4px; background:var(--bg3); margin-bottom:5px; }
.cast-name, .cast-role { font-size:11px; color:var(--text2); line-height:1.3; display:block; }
.cast-role { color:var(--text3); margin-top:1px; }
.cast-card:hover .cast-name { color:var(--accent); }
.cast-char { font-size:10px; color:var(--text3); display:block; }

/* Watch status */
.watch-status-wrap { display:flex; gap:6px; flex-wrap:wrap; margin:14px 0; }
.status-btn { padding:7px 14px; border-radius:4px; background:var(--bg3); color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; border:none; transition:.15s; }
.status-btn:hover { color:var(--text); }
.status-btn.active { background:var(--accent-dim); color:var(--accent); }

/* Comments */
.comments-section { margin-bottom:28px; }
.comments-header { font-size:16px; font-weight:700; margin-bottom:12px; color:var(--text); }
.comments-filter, .comments-tabs { display:flex; gap:16px; margin-bottom:14px; padding-bottom:8px; background:linear-gradient(90deg,var(--bg3),transparent) no-repeat 0 100%/100% 1px; }
.comments-tab { font-size:13px; font-weight:600; color:var(--text3); cursor:pointer; background:none; border:none; padding-bottom:6px; transition:.15s; }
.comments-tab:hover, .comments-tab.active { color:var(--accent); }
.comment-form-wrap { margin-bottom:16px; }
.comment-form { display:flex; gap:10px; }
.comment-input { flex:1; background:var(--bg3); border:none; border-radius:4px; color:var(--text); padding:10px 14px; font-size:13px; resize:vertical; min-height:80px; outline:none; font-family:inherit; }
.comment-input:focus { background:var(--bg4); }
textarea.form-control { background:var(--bg3); border:none; color:var(--text); padding:10px 14px; border-radius:4px; font-size:13px; resize:vertical; min-height:80px; outline:none; font-family:inherit; width:100%; }
.btn-comment-submit { padding:10px 18px; background:var(--accent); color:#111; border:none; border-radius:4px; font-size:13px; font-weight:700; cursor:pointer; align-self:flex-end; white-space:nowrap; }
.comments-list { display:flex; flex-direction:column; gap:0; }
.comment-list { display:flex; flex-direction:column; gap:0; }
.comment-item { padding:12px 0; }
.comment-item + .comment-item { background:linear-gradient(90deg,var(--bg3),transparent) no-repeat 0 0/100% 1px; }
.comment-header { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.comment-avatar { width:30px; height:30px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; color:#111; font-weight:700; font-size:12px; flex-shrink:0; }
.comment-author { font-size:13px; font-weight:600; color:var(--text); }
.comment-date { font-size:11px; color:var(--text3); margin-left:auto; }
.comment-text { font-size:13px; color:var(--text2); line-height:1.6; }

/* ════════════════════════════════════
   SEASONS & EPISODES
════════════════════════════════════ */
.episodes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-top:16px; }
.episode-card { background:var(--bg3); border-radius:6px; overflow:hidden; position:relative; }
.episode-card img, .ep-no-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--bg2); }
.ep-info { padding:8px; }
.ep-num { font-size:10px; font-weight:700; color:var(--accent); margin-bottom:2px; }
.ep-title { font-size:12px; font-weight:600; color:var(--text); line-height:1.3; }
.ep-date { font-size:10px; color:var(--text3); margin-top:2px; }
.ep-desc { font-size:12px; color:var(--text2); line-height:1.5; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.episode-airdate { font-size:11px; color:var(--text3); }
.episode-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.ep-nav-btn { display:inline-flex; align-items:center; gap:6px; background:var(--bg3); color:var(--text2); padding:8px 16px; border-radius:4px; font-size:13px; font-weight:600; transition:.15s; }
.ep-nav-btn:hover { color:var(--text); }
.ep-nav-center { text-align:center; font-size:13px; color:var(--text2); }

/* ════════════════════════════════════
   FRANCHISE / PARTS
════════════════════════════════════ */
.franchise-section { margin-bottom:24px; }
.franchise-page-header { margin-bottom:16px; }
.franchise-desc-block { font-size:13px; color:var(--text2); margin-bottom:16px; line-height:1.7; }
.franchise-list, .franchise-parts-list { display:flex; flex-direction:column; gap:0; }
.franchise-item, .franchise-part-item { display:flex; align-items:center; gap:12px; padding:10px 0; }
.franchise-item + .franchise-item, .franchise-part-item + .franchise-part-item { background:linear-gradient(90deg,var(--bg3),transparent) no-repeat 0 0/100% 1px; }
.franchise-item img, .franchise-part-item img { width:54px; height:78px; object-fit:cover; border-radius:4px; flex-shrink:0; background:var(--bg3); }
.fp-info { flex:1; min-width:0; }
.fp-title { font-size:15px; font-weight:700; color:var(--text); }
.fp-title:hover { color:var(--accent); }
.fp-num { font-size:20px; font-weight:900; color:var(--text3); width:32px; flex-shrink:0; }
.fp-type, .fp-year { font-size:12px; color:var(--text3); }
.fp-ratings { display:flex; gap:6px; }
.fp-kp  { font-size:12px; font-weight:700; color:var(--kp-color); background:rgba(255,102,0,.1); padding:2px 7px; border-radius:3px; }
.fp-imdb { font-size:12px; font-weight:700; color:var(--imdb-color); background:rgba(245,197,24,.1); padding:2px 7px; border-radius:3px; }
.franchise-rating { font-size:13px; font-weight:700; color:var(--accent); }
.fi-num, .fi-play, .fi-title, .fi-type, .fi-year, .fi-rating { }

/* ════════════════════════════════════
   COLLECTIONS
════════════════════════════════════ */
.collections-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.collection-card { background:var(--bg3); border-radius:6px; overflow:hidden; text-decoration:none; transition:.15s; }
.collection-card:hover { background:var(--bg4); }
.collection-header { position:relative; height:120px; background:var(--bg2); overflow:hidden; }
.collection-header img { width:100%; height:100%; object-fit:cover; }
.col-no-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:30px; }
.col-card-info { padding:10px; }
.col-name { font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
.col-count { font-size:12px; color:var(--text3); }
.collection-desc { font-size:13px; color:var(--text2); margin-bottom:12px; line-height:1.6; }
.collection-rating { font-size:12px; color:var(--accent); }
.collections-search { background:var(--bg3); border:none; color:var(--text); padding:8px 14px; border-radius:4px; font-size:13px; outline:none; width:100%; max-width:320px; margin-bottom:16px; }
.collections-search::placeholder { color:var(--text3); }

/* ════════════════════════════════════
   PERSON PAGE
════════════════════════════════════ */
.person-page { }
.person-header { display:flex; gap:24px; margin-bottom:24px; }
.person-photo-block { flex-shrink:0; }
.person-photo { width:160px; height:210px; object-fit:cover; border-radius:6px; background:var(--bg3); }
.person-info-block { flex:1; min-width:0; }
.person-name { font-size:24px; font-weight:900; color:var(--text); margin-bottom:6px; }
.role-badge { display:inline-block; background:var(--accent); color:#111; font-size:11px; font-weight:700; padding:2px 8px; border-radius:3px; margin-bottom:12px; }
.person-meta-table { font-size:13px; line-height:1.9; }
.person-meta-table td:first-child { color:var(--text3); font-weight:600; padding-right:12px; white-space:nowrap; }
.person-meta-table td:last-child { color:var(--text); }
.person-roles { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.person-best { margin-top:6px; font-size:13px; color:var(--text2); }

/* ════════════════════════════════════
   BOOKMARKS
════════════════════════════════════ */
.bookmarks-filter { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:16px; }
.bookmarks-grid { display:flex; flex-direction:column; gap:0; }
.bookmark-item { display:flex; gap:12px; align-items:flex-start; padding:10px 0; }
.bookmark-item + .bookmark-item { background:linear-gradient(90deg,var(--bg3),transparent) no-repeat 0 0/100% 1px; }
.bookmark-item img { width:52px; height:74px; object-fit:cover; border-radius:4px; flex-shrink:0; background:var(--bg3); }
.bk-info { flex:1; min-width:0; }
.bk-title { font-size:14px; font-weight:700; color:var(--text); }
.bk-title:hover { color:var(--accent); }
.bk-status { font-size:11px; color:var(--accent); margin-top:3px; }
.bk-date { font-size:11px; color:var(--text3); }

/* ════════════════════════════════════
   PROFILE
════════════════════════════════════ */
.profile-box { background:var(--bg3); border-radius:6px; padding:24px; margin-bottom:16px; }
.profile-stats { display:flex; gap:24px; flex-wrap:wrap; margin-top:16px; }
.pstat { text-align:center; }
.pstat-num { font-size:28px; font-weight:900; color:var(--accent); }
.pstat-label { font-size:12px; color:var(--text3); margin-top:2px; }
.profile-links { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

/* ════════════════════════════════════
   AUTH PAGES
════════════════════════════════════ */
.auth-page { max-width:400px; margin:40px auto; padding:0 20px; }
.auth-form { background:var(--bg3); border-radius:6px; padding:32px; }
.auth-form h1 { font-size:22px; font-weight:800; margin-bottom:20px; }
.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:12px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.form-control { width:100%; background:var(--bg2); border:none; color:var(--text); padding:9px 12px; border-radius:4px; font-size:13px; outline:none; }
.form-control:focus { background:var(--bg4); }
.form-hint { font-size:11px; color:var(--text3); margin-top:4px; }
.form-error { font-size:12px; color:var(--red); margin-top:4px; }

/* ════════════════════════════════════
   BUTTONS (generic)
════════════════════════════════════ */
.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:4px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:.15s; }
.btn-primary { background:var(--accent); color:#111; }
.btn-primary:hover { background:var(--accent2); color:#111; }
.btn-secondary { background:var(--bg3); color:var(--text2); }
.btn-secondary:hover { background:var(--bg4); color:var(--text); }
.btn-danger { background:var(--red); color:#fff; }
.btn-danger:hover { background:#c62828; }
.btn-success { background:var(--green); color:#fff; }
.btn-outline { background:transparent; color:var(--accent); }
.btn-outline:hover { background:var(--accent); color:#111; }
.btn-sm { padding:4px 10px; font-size:11px; }
.btn-lg { padding:10px 22px; font-size:14px; }
.btn-icon { width:30px; height:30px; padding:0; justify-content:center; }
.btn-icon.btn-sm { width:26px; height:26px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; pointer-events:none; }

/* ════════════════════════════════════
   PAGINATION
════════════════════════════════════ */
.pagination { display:flex; align-items:center; justify-content:center; gap:4px; padding:20px 0; flex-wrap:wrap; }
.pg-btn { width:34px; height:34px; border-radius:4px; background:var(--bg3); color:var(--text2); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; transition:.15s; }
.pg-btn:hover { background:var(--bg4); color:var(--text); }
.pg-btn.active { background:var(--accent); color:#111; }
.pg-btn.dots { background:none; cursor:default; }
.ap-btn { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 8px; border-radius:4px; background:var(--bg3); color:var(--text2); font-size:12px; font-weight:600; }
.ap-btn.active { background:var(--accent); color:#111; }
.ap-btn:hover { color:var(--text); }

/* ════════════════════════════════════
   MISC / UTILITY
════════════════════════════════════ */
.badge-site { font-size:12px; font-weight:700; color:var(--accent); background:var(--accent-dim); padding:2px 8px; border-radius:3px; }
.badge-kp   { font-size:12px; font-weight:700; color:var(--kp-color); background:rgba(255,102,0,.1); padding:2px 8px; border-radius:3px; }
.badge-imdb { font-size:12px; font-weight:700; color:var(--imdb-color); background:rgba(245,197,24,.1); padding:2px 8px; border-radius:3px; }
.kp   { color:var(--kp-color); }
.imdb { color:var(--imdb-color); }
.empty-result { padding:60px 20px; text-align:center; color:var(--text3); font-size:14px; }
.empty-result a { color:var(--accent); }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:999; display:none; }
.modal-overlay.open { display:block; }
.modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--bg3); border-radius:8px; z-index:1000; max-width:90vw; max-height:90vh; overflow-y:auto; }
.modal-box { padding:24px; min-width:300px; }
.modal-close { position:absolute; top:12px; right:12px; background:none; border:none; color:var(--text3); font-size:18px; cursor:pointer; }
.modal-tabs { display:flex; gap:4px; margin-bottom:16px; }
.modal-tab { padding:7px 16px; border-radius:4px; background:var(--bg2); color:var(--text2); font-size:13px; font-weight:600; cursor:pointer; border:none; transition:.15s; }
.modal-tab.active { background:var(--accent); color:#111; }

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
.site-footer { background:var(--bg2); margin-top:40px; }
.footer-inner { max-width:var(--page-max); margin:0 auto; padding:0 20px; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding:40px 0 32px; }
.footer-brand .footer-logo { font-size:18px; font-weight:900; display:block; margin-bottom:10px; color:var(--text); }
.footer-brand .footer-logo .logo-go { color:var(--accent); }
.footer-desc { font-size:13px; color:var(--text3); line-height:1.6; margin-bottom:16px; }
.footer-social { display:flex; gap:10px; }
.social-btn { width:36px; height:36px; border-radius:6px; display:flex; align-items:center; justify-content:center; transition:opacity .2s; }
.social-btn:hover { opacity:.8; }
.social-btn.tg { background:#2aabee; }
.social-btn.vk { background:#4a76a8; }
.social-btn svg { width:17px; height:17px; fill:#fff; }
.footer-nav-group h4 { font-size:11px; font-weight:800; color:var(--text); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
.footer-nav-group ul { display:flex; flex-direction:column; gap:7px; }
.footer-nav-group li a { font-size:13px; color:var(--text3); transition:color .15s; }
.footer-nav-group li a:hover { color:var(--accent); }
.footer-bottom { padding:16px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; background:linear-gradient(90deg,var(--bg3),transparent) no-repeat 0 0/100% 1px; }
.footer-copy, .footer-disclaimer { font-size:11px; color:var(--text3); }

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media (max-width:1200px) { :root { --sidebar-w:230px; } }
@media (max-width:1024px) { :root { --sidebar-w:200px; } .header-nav { display:none; } }
@media (max-width:860px) {
    .sidebar { display:none; }
    .main-content { padding:12px 14px; }
    .mi-body { flex-direction:column; }
    .mi-poster { width:100%; }
    .mi-poster img { width:100%; height:auto; max-height:280px; }
    .movie-info-card { flex-direction:column; }
    .movie-poster-col { width:100%; display:flex; justify-content:center; }
    .footer-top { grid-template-columns:1fr 1fr; gap:24px; }
}
@media (max-width:600px) {
    .container { padding:0 12px; }
    .sub-nav { display:none; }
    .footer-top { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; text-align:center; }
    .search-input-wrap { width:200px; }
    .search-dropdown { width:calc(100vw - 24px); right:auto; left:-80px; }
    .flt-panel { min-width:calc(100vw - 40px); }
}

/* ── CUSTOM SORT DROPDOWN ── */
.sort-custom-wrap { position:relative; }
.sort-custom-btn {
    display:flex; align-items:center; gap:8px;
    background:var(--bg3); color:var(--text);
    padding:7px 14px; border-radius:4px; font-size:13px; font-weight:600;
    border:none; cursor:pointer; white-space:nowrap; transition:.15s;
    min-width:160px; justify-content:space-between;
}
.sort-custom-btn:hover { background:var(--bg4); }
.sort-custom-btn svg { flex-shrink:0; opacity:.6; }
.sort-custom-panel {
    position:absolute; top:calc(100% + 6px); left:0;
    background:var(--bg3); border-radius:6px;
    min-width:220px; z-index:600; display:none; overflow:hidden;
    padding:4px 0;
}
.sort-custom-panel.open { display:block; }
.sort-opt {
    display:flex; align-items:center; gap:10px;
    padding:9px 14px; font-size:13px; color:var(--text2);
    cursor:pointer; transition:background .12s;
}
.sort-opt:hover { background:var(--bg4); color:var(--text); }
.sort-opt.active { color:var(--accent); }
.sort-dot { width:4px; height:4px; border-radius:50%; background:var(--text3); display:inline-block; margin-left:4px; }

/* ═══ NEW SIDEBAR SECTIONS (sb-*) ═══ */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bg2);
    overflow-y: auto;
    scrollbar-width: none;
    position: sticky;
    top: calc(var(--header-h) + 38px);
    max-height: calc(100vh - var(--header-h) - 38px);
    align-self: flex-start;
}
.sidebar::-webkit-scrollbar { display:none; }

.sb-section { margin-bottom:2px; }

.sb-head {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--accent);
    color: #111;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    padding: 8px 12px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Nav section */
.sb-nav-grid { display:grid; grid-template-columns:1fr 1fr; padding:8px 0 4px; }
.sb-nav-grid > div { padding:0 4px 0 10px; }
.sb-nav-title { font-size:10px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; padding:5px 0 4px; margin-bottom:2px; margin-right:6px; background:linear-gradient(90deg,var(--bg3),transparent) no-repeat 0 100%/100% 1px; }
.sb-nav-link { display:block; font-size:11.5px; color:var(--text2); padding:2px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:4px; transition:color .12s; }
.sb-nav-link:hover { color:var(--accent); }

.sb-random-btn { display:flex; align-items:center; justify-content:center; gap:6px; background:var(--bg3); color:var(--text2); font-size:10px; font-weight:800; letter-spacing:.05em; padding:8px 10px; margin:8px 10px 4px; border-radius:4px; transition:.15s; }
.sb-random-btn:hover { background:var(--accent); color:#111; }

/* Item rows (serials, anime, doramas, soon) */
.sb-item { display:flex; align-items:center; gap:9px; padding:6px 10px; text-decoration:none; transition:background .12s; }
.sb-item:hover { background:var(--bg3); }
.sb-item-poster { flex-shrink:0; width:38px; position:relative; }
.sb-item img, .sb-item-poster img { width:38px; height:52px; object-fit:cover; border-radius:3px; background:var(--bg3); display:block; }
.sb-item-season { position:absolute; bottom:0; left:0; right:0; text-align:center; background:rgba(0,0,0,.8); color:var(--accent); font-size:8px; font-weight:700; padding:1px 0; }
.sb-item-info { flex:1; min-width:0; }
.sb-item-title { font-size:11.5px; font-weight:600; color:var(--text); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-item-sub { font-size:10px; color:var(--text3); margin-top:2px; }
.sb-item-sub.sb-new { color:var(--accent); }
.sb-item:hover .sb-item-title { color:var(--accent); }

/* Comments */
.sb-comment { display:block; padding:7px 10px; text-decoration:none; transition:background .12s; }
.sb-comment:hover { background:var(--bg3); }
.sb-comment + .sb-comment { background:linear-gradient(90deg,var(--bg3),transparent) no-repeat 0 0/100% 1px; }
.sb-comment:hover { background:var(--bg3); }
.sb-comment-meta { display:flex; align-items:center; gap:6px; margin-bottom:3px; flex-wrap:wrap; }
.sb-comment-user { font-size:11px; font-weight:700; color:var(--accent); }
.sb-comment-movie { font-size:10px; color:var(--text3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-comment-text { font-size:11.5px; color:var(--text2); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sb-comment:hover .sb-comment-text { color:var(--text); }

/* ═══ GLOBAL INPUT RESET (dark theme) ═══ */
/* Dark theme for ALL form elements */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
textarea, select {
    background: var(--bg3);
    color: var(--text);
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    padding: 9px 12px;
    transition: background var(--trans);
    -webkit-appearance: none;
    appearance: none;
}
input:not([type=checkbox]):not([type=radio]):focus,
textarea:focus, select:focus { background: var(--bg4); }
/* Full width only for specific containers */
.auth-card input, .auth-card select, .auth-card textarea,
.form-group input, .form-group select, .form-group textarea,
.comment-input, textarea.form-control, input.form-control { width: 100%; }
/* Filter selects: auto width */
.page-filter-select, .filter-select { width: auto; min-width: 100px; }

/* Autofill override (Chrome/Safari fill white background fix) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 40px #333 inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
    background-color: var(--bg3) !important;
}

/* ═══ AUTH PAGES ═══ */
.auth-page-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 40px 20px;
}
.auth-card {
    background: var(--bg3);
    border-radius: 8px;
    padding: 36px 40px;
    width: 100%;
    max-width: 420px;
}
.auth-card h1 {
    font-size: 24px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 24px;
}
.auth-card .form-group { margin-bottom: 14px; }
.auth-card .form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}
.auth-card .form-group input {
    background: var(--bg2);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    border: none;
    outline: none;
}
.auth-card .form-group input:focus { background: var(--bg4); }
.auth-card .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text2);
    margin-bottom: 18px;
    cursor: pointer;
}
.auth-card .form-check input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    padding: 0;
    border-radius: 3px;
    flex-shrink: 0;
}
.btn-full {
    width: 100%;
    justify-content: center;
    padding: 11px;
    font-size: 14px;
    font-weight: 800;
    border-radius: 4px;
    background: var(--accent);
    color: #111;
    border: none;
    cursor: pointer;
    transition: background var(--trans);
}
.btn-full:hover { background: var(--accent2); }
.auth-switch {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text3);
    text-align: center;
}
.auth-switch a { color: var(--accent); }
.alert-error {
    background: rgba(229,57,53,.15);
    color: #ef9a9a;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 16px;
}
.alert-success {
    background: rgba(76,175,80,.15);
    color: #a5d6a7;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* ═══ CONSISTENT CATEGORY FILTER ═══ */
.page-filter-area { margin-bottom: 16px; }
.page-filter-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
    flex-wrap: wrap;
}
.page-filter-row2 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sort-wrap { position: relative; display: inline-block; }
.sort-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg3);
    color: var(--text);
    padding: 7px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    min-width: 160px;
    justify-content: space-between;
    transition: background var(--trans);
}
.sort-btn:hover { background: var(--bg4); }
.sort-btn svg { opacity: .5; flex-shrink: 0; }
.sort-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--bg3);
    border-radius: 5px;
    min-width: 200px;
    z-index: 500;
    overflow: hidden;
    display: none;
    padding: 4px 0;
}
.sort-list.open { display: block; }
.sort-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--text2);
    cursor: pointer;
    transition: background .12s;
    text-decoration: none;
}
.sort-item:hover { background: var(--bg4); color: var(--text); }
.sort-item.active { color: var(--accent); }
.sort-item .check-icon { width: 14px; flex-shrink: 0; }
.sort-item .empty-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text3); margin-left: 5px; }
.page-filter-select {
    background: var(--bg3);
    color: var(--text);
    padding: 7px 28px 7px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 100px;
}
.page-filter-select:focus { background-color: var(--bg4); }

/* ═══ STICKY HEADER FIX ═══ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 300;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.sub-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 299;
}

/* ═══ ERROR / 404 PAGE ═══ */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    min-height: 400px;
}
.error-code {
    font-size: 120px;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 16px;
    opacity: .8;
}
.error-page h1 { font-size: 28px; font-weight: 800; margin-bottom: 10px; }
.error-page p  { font-size: 15px; color: var(--text2); margin-bottom: 28px; }
.error-page .btn-primary { padding: 12px 32px; font-size: 14px; font-weight: 800; border-radius: 4px; background: var(--accent); color: #111; }
.error-page .btn-primary:hover { background: var(--accent2); }

/* ═══ COLLECTIONS PAGE ═══ */
.collections-wrap { }
.collections-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.collections-search-input {
    background: var(--bg3);
    color: var(--text);
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 13px;
    border: none;
    outline: none;
    width: 260px;
    max-width: 100%;
}
.collections-search-input::placeholder { color: var(--text3); }
.collections-search-input:focus { background: var(--bg4); }
.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.collection-card {
    background: var(--bg3);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    transition: background .15s;
    display: block;
}
.collection-card:hover { background: var(--bg4); }
.collection-header { height: 110px; overflow: hidden; background: var(--bg2); position: relative; }
.collection-header img, .collection-header .col-no-img { width: 100%; height: 100%; object-fit: cover; }
.col-no-img { display: flex; gap: 2px; }
.col-no-img img { width: 33.33%; height: 110px; object-fit: cover; flex-shrink: 0; }
.col-card-info { padding: 10px 12px; }
.col-name { font-size: 13px; font-weight: 700; color: var(--text); display: block; line-height: 1.4; }
.col-count { font-size: 11px; color: var(--text3); display: block; margin-top: 3px; }
.collections-empty { text-align: center; color: var(--text3); padding: 40px; }

/* ═══ TOP PAGE ═══ */
.top-page-header { margin-bottom: 16px; }
.top-type-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.top-type-tab { padding: 7px 18px; border-radius: 4px; background: var(--bg3); color: var(--text2); font-size: 13px; font-weight: 600; transition: .15s; }
.top-type-tab:hover { background: var(--bg4); color: var(--text); }
.top-type-tab.active { background: var(--accent); color: #111; }
.top-list { display: flex; flex-direction: column; }
.top-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
.top-item + .top-item { background: linear-gradient(90deg, var(--bg3), transparent) no-repeat 0 0 / 100% 1px; }
.top-rank { flex-shrink: 0; width: 50px; text-align: center; }
.rank-num { font-size: 13px; font-weight: 800; color: var(--text3); display: block; margin-top: 4px; }
.top-rank-icon { display: block; }
.top-poster { flex-shrink: 0; }
.top-poster img { width: 70px; height: 100px; object-fit: cover; border-radius: 4px; background: var(--bg3); display: block; }
.top-info { flex: 1; min-width: 0; }
.top-info h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.top-info h3 a { color: var(--text); }
.top-info h3 a:hover { color: var(--accent); }
.top-desc { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.top-watch { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #111; padding: 7px 16px; border-radius: 4px; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.top-watch:hover { background: var(--accent2); color: #111; }
.top-ratings { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* ═══ AUTH in standard layout ═══ */
.auth-in-layout {
    max-width: 440px;
    margin: 40px auto;
}
.auth-in-layout .auth-card { width: 100%; }

/* ═══ MOVIE PAGE — COMPLETE STYLES ═══ */

/* Player toolbar */
.player-toolbar { margin-top: 12px; }
.watch-status-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.status-btn {
    padding: 7px 16px; border-radius: 4px; background: var(--bg3);
    color: var(--text2); font-size: 12px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s;
}
.status-btn:hover { background: var(--bg4); color: var(--text); }
.status-btn.active { background: var(--accent); color: #111; }
.player-note { font-size: 12px; color: var(--text3); margin: 6px 0 0; }

/* Comments */
.comments-section { margin-top: 28px; }
.comments-section .section-title { margin-bottom: 10px; }
.comments-filter { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.cf-btn {
    padding: 6px 16px; border-radius: 4px; background: var(--bg3);
    color: var(--text2); font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: .15s;
}
.cf-btn:hover { background: var(--bg4); color: var(--text); }
.cf-btn.active { background: var(--accent); color: #111; }
.comment-form-wrap { margin-bottom: 16px; }
.comment-input {
    width: 100%; background: var(--bg3); border: none; border-radius: 4px;
    color: var(--text); padding: 12px 14px; font-size: 13px; font-family: inherit;
    resize: vertical; min-height: 90px; outline: none; display: block;
    transition: background .15s;
}
.comment-input:focus { background: var(--bg4); }
.comment-input::placeholder { color: var(--text3); }
.btn-comment-submit {
    margin-top: 8px; padding: 9px 22px; background: var(--accent); color: #111;
    border: none; border-radius: 4px; font-size: 13px; font-weight: 800;
    cursor: pointer; transition: .15s;
}
.btn-comment-submit:hover { background: var(--accent2); }

/* Seasons accordion */
.seasons-section { margin-bottom: 28px; }
.seasons-accordion { display: flex; flex-direction: column; gap: 6px; }
.season-item { background: var(--bg3); border-radius: 6px; overflow: hidden; }
.season-head {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--bg3); border: none; cursor: pointer;
    color: var(--text); font-size: 14px; font-weight: 700; text-align: left;
    transition: background .15s;
}
.season-head:hover { background: var(--bg4); }
.season-num { color: var(--accent); }
.season-name { color: var(--text2); font-weight: 500; }
.season-year { color: var(--text3); font-size: 12px; }
.season-count { color: var(--text3); font-size: 12px; margin-left: auto; }
.season-arrow { width: 16px; height: 16px; flex-shrink: 0; transition: transform .2s; color: var(--text3); }
.season-item.open .season-arrow { transform: rotate(180deg); }
.season-body { display: none; padding: 0 14px 14px; }
.season-item.open .season-body { display: block; }
.season-desc { font-size: 13px; color: var(--text2); margin-bottom: 12px; padding-top: 8px; }

/* Schedule */
.schedule-section { margin-bottom: 28px; }
.schedule-season-block { margin-bottom: 8px; background: var(--bg3); border-radius: 6px; overflow: hidden; }
.schedule-season-head {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: none; border: none; cursor: pointer;
    color: var(--text); font-size: 13px; font-weight: 700; text-align: left;
}
.schedule-season-body { display: none; padding: 0 14px 12px; }
.schedule-season-head.open + .schedule-season-body { display: block; }
.schedule-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.schedule-table tr { }
.schedule-table tr + tr { background: linear-gradient(90deg,var(--bg4),transparent) no-repeat 0 0/100% 1px; }
.schedule-table td { padding: 7px 10px 7px 0; vertical-align: middle; }
.sch-label { color: var(--text3); width: 140px; }
.sch-title { color: var(--text); font-weight: 600; }
.sch-date { color: var(--text2); width: 110px; }
.sch-status { width: 30px; text-align: center; }

/* Franchise list */
.franchise-section { margin-bottom: 28px; }
.franchise-list { display: flex; flex-direction: column; }
.franchise-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 4px; transition: background .15s; }
.franchise-item:hover { background: var(--bg3); }
.franchise-item.current { background: var(--accent-dim); }
.fi-num { font-size: 18px; font-weight: 900; color: var(--text3); width: 28px; flex-shrink: 0; text-align: center; }
.fi-play { width: 28px; flex-shrink: 0; color: var(--accent); }
.fi-title { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
.fi-type { font-size: 11px; color: var(--text3); }
.fi-year { font-size: 12px; color: var(--text3); width: 40px; }
.fi-rating { font-size: 12px; font-weight: 700; color: var(--imdb-color); width: 36px; text-align: right; }

/* Related movies grid */
.related-section { margin-bottom: 28px; }
.related-grid { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.related-grid::-webkit-scrollbar { display: none; }
.related-card { flex-shrink: 0; width: 120px; text-decoration: none; position: relative; }
.related-card img { width: 120px; height: 180px; object-fit: cover; border-radius: 5px; background: var(--bg3); display: block; }
.rc-season { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.8); color: var(--accent); font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 3px; }
.rc-info { padding: 6px 2px; }
.rc-title { display: block; font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.3; }
.rc-year { display: block; font-size: 10px; color: var(--text3); margin-top: 2px; }
.related-card:hover .rc-title { color: var(--accent); }

/* Movie info card responsive */
@media (max-width: 768px) {
    .movie-info-card { flex-direction: column; }
    .movie-poster-col { width: 100%; display: flex; justify-content: center; }
    .movie-poster-img { width: 160px; height: 240px; }
    .movie-title-main { font-size: 20px; }
}

/* ═══════════════════════════════════════
   MOVIE PAGE — NEW COMPLETE STYLES (mv-*)
═══════════════════════════════════════ */
.movie-page { display: flex; flex-direction: column; gap: 0; }

/* TOP BLOCK */
.mv-top { display: flex; gap: 24px; margin-bottom: 28px; }
.mv-poster-col { flex-shrink: 0; width: 200px; }
.mv-poster-img { width: 200px; height: 295px; object-fit: cover; border-radius: 6px; display: block; background: var(--bg3); }
.mv-bookmark-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 8px; background: var(--bg3); color: var(--text2); border: none; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; transition: .15s; }
.mv-bookmark-btn:hover, .mv-bookmark-btn.active { background: var(--accent); color: #111; }
.mv-info-col { flex: 1; min-width: 0; }
.mv-title { font-size: 22px; font-weight: 900; color: var(--text); margin-bottom: 3px; line-height: 1.25; }
.mv-year { color: var(--text3); font-weight: 500; }
.mv-orig { font-size: 14px; color: var(--text3); margin-bottom: 12px; }

/* Ratings row */
.mv-ratings-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.mv-rating-block { text-align: center; min-width: 60px; }
.mv-rating-val { font-size: 22px; font-weight: 900; line-height: 1.1; }
.mv-rating-lbl { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.mv-rating-block.kp .mv-rating-val { color: var(--kp-color); }
.mv-rating-block.imdb .mv-rating-val { color: var(--imdb-color); }
.mv-rating-block.site .mv-rating-val { color: var(--accent); }
.mv-star-rate { display: flex; align-items: center; gap: 4px; margin-left: 4px; }
.mv-star { font-size: 20px; color: var(--bg4); cursor: pointer; transition: color .1s; }
.mv-star.on, .mv-star:hover { color: var(--imdb-color); }
.mv-rate-text { font-size: 12px; color: var(--text3); margin-left: 5px; }

/* Info grid (2 columns) */
.mv-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin-bottom: 14px; background: var(--bg3); border-radius: 6px; padding: 14px 16px; }
.mv-info-left, .mv-info-right { display: flex; flex-direction: column; gap: 5px; }
.mv-ig-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.5; }
.mv-ig-key { color: var(--text3); white-space: nowrap; min-width: 95px; flex-shrink: 0; }
.mv-ig-val { color: var(--text); flex: 1; }
.mv-ig-val a { color: var(--text2); }
.mv-ig-val a:hover { color: var(--accent); }
.kp-text { color: var(--kp-color); font-weight: 700; }
.imdb-text { color: var(--imdb-color); font-weight: 700; }
.quality-text { color: var(--accent); font-weight: 700; }
.mv-slogan { font-style: italic; color: var(--text2); }

/* Description */
.mv-desc { margin-bottom: 14px; }
.mv-desc-text { font-size: 14px; line-height: 1.75; color: var(--text2); }
.mv-desc-text.collapsed { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mv-desc-more { background: none; border: none; color: var(--accent); font-size: 13px; cursor: pointer; padding: 4px 0; }
.mv-desc-more:hover { color: var(--text); }

/* Action buttons */
.mv-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mv-btn-watch { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #111; padding: 10px 24px; border-radius: 4px; font-size: 14px; font-weight: 800; transition: .15s; }
.mv-btn-watch:hover { background: var(--accent2); color: #111; }
.mv-btn-comments { display: inline-flex; align-items: center; gap: 6px; background: var(--bg3); color: var(--text2); padding: 10px 18px; border-radius: 4px; font-size: 13px; font-weight: 600; transition: .15s; }
.mv-btn-comments:hover { color: var(--text); }

/* Section titles */
.mv-section { margin-bottom: 28px; }
.mv-section-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 14px; padding-bottom: 8px; background: linear-gradient(90deg,var(--bg3),transparent) no-repeat 0 100%/100% 1px; }

/* Cast */
.mv-cast-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.mv-cast-scroll::-webkit-scrollbar { display: none; }
.mv-cast-card { flex-shrink: 0; width: 88px; text-decoration: none; text-align: center; }
.mv-cast-card img { width: 88px; height: 116px; object-fit: cover; border-radius: 4px; background: var(--bg3); margin-bottom: 5px; display: block; }
.mv-cast-name { display: block; font-size: 11px; font-weight: 600; color: var(--text2); line-height: 1.3; }
.mv-cast-char { display: block; font-size: 10px; color: var(--text3); margin-top: 1px; }
.mv-cast-card:hover .mv-cast-name { color: var(--accent); }

/* Player section */
.mv-player-section { }
.mv-player-tabs { display: flex; gap: 0; margin-bottom: 0; background: var(--bg3); border-radius: 4px 4px 0 0; overflow: hidden; }
.mv-ptab { padding: 10px 20px; background: none; color: var(--text2); border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s; display: flex; align-items: center; gap: 6px; }
.mv-ptab:hover { color: var(--text); background: var(--bg4); }
.mv-ptab.active { background: var(--accent); color: #111; }

.mv-player-selectors { display: flex; align-items: center; gap: 8px; padding: 10px 0; flex-wrap: wrap; }
.mv-psel-wrap { position: relative; display: inline-flex; align-items: center; }
.mv-psel { background: var(--bg3); color: var(--text); border: none; border-radius: 4px; padding: 8px 32px 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; }
.mv-psel:focus { background: var(--bg4); }
.mv-psel-wrap svg { position: absolute; right: 8px; pointer-events: none; color: var(--text3); }
.mv-share-btn { background: var(--bg3); border: none; color: var(--text2); width: 36px; height: 36px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: auto; transition: .15s; }
.mv-share-btn:hover { color: var(--accent); }

.mv-player-frame { display: none; position: relative; width: 100%; aspect-ratio: 16/9; max-height: 560px; background: #000; border-radius: 0 0 4px 4px; overflow: hidden; }
.mv-player-frame.active { display: block; }
.mv-iframe { width: 100%; height: 100%; border: none; position: absolute; inset: 0; display: block; }
.mv-player-overlay { position: absolute; inset: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mv-player-overlay.hidden { display: none; }
.mv-overlay-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.mv-play-btn { position: relative; z-index: 2; width: 76px; height: 76px; border-radius: 50%; background: rgba(230,195,92,.9); display: flex; align-items: center; justify-content: center; transition: .2s; }
.mv-play-btn svg { color: #111; margin-left: 5px; }
.mv-player-overlay:hover .mv-play-btn { transform: scale(1.08); background: var(--accent); }

/* Status bar */
.mv-status-bar { display: flex; width: 100%; margin-top: 10px; border-radius: 4px; overflow: hidden; background: var(--bg3); }
.mv-status-btn { flex: 1; padding: 12px 8px; background: none; border: none; color: var(--text3); font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: .04em; text-transform: uppercase; transition: .15s; position: relative; }
.mv-status-btn + .mv-status-btn::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--bg4); }
.mv-status-btn:hover { color: var(--text); background: var(--bg4); }
.mv-status-btn.active { background: var(--accent); color: #111; }
.mv-status-btn.active + .mv-status-btn::before { display: none; }
.mv-promo-note { font-size: 12px; color: var(--text3); margin-top: 8px; }

/* Seasons */
.mv-seasons { display: flex; flex-direction: column; gap: 4px; }
.mv-season { background: var(--bg3); border-radius: 5px; overflow: hidden; }
.mv-season-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: none; border: none; cursor: pointer; color: var(--text); font-size: 13px; text-align: left; transition: background .15s; }
.mv-season-head:hover { background: var(--bg4); }
.mv-sn-num { font-weight: 800; color: var(--accent); }
.mv-sn-title { color: var(--text2); font-weight: 500; font-size: 12px; }
.mv-sn-count { color: var(--text3); font-size: 11px; margin-left: auto; }
.mv-sn-arrow { color: var(--text3); transition: transform .2s; flex-shrink: 0; }
.mv-season.open .mv-sn-arrow { transform: rotate(180deg); }
.mv-season-body { display: none; padding: 8px 12px 12px; }
.mv-season.open .mv-season-body { display: block; }
.mv-episodes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.mv-ep-card { background: var(--bg2); border-radius: 4px; overflow: hidden; text-decoration: none; transition: background .15s; }
.mv-ep-card:hover { background: var(--bg4); }
.mv-ep-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--bg3); }
.mv-ep-thumb-ph { width: 100%; aspect-ratio: 16/9; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 24px; font-weight: 900; }
.mv-ep-info { padding: 7px 8px; }
.mv-ep-num { display: block; font-size: 10px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.mv-ep-title { display: block; font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-ep-date { display: block; font-size: 10px; color: var(--text3); margin-top: 2px; }

/* Collections grid (visual) */
.mv-collections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.mv-col-card { background: var(--bg3); border-radius: 6px; overflow: hidden; text-decoration: none; transition: background .15s; display: flex; flex-direction: column; }
.mv-col-card:hover { background: var(--bg4); }
.mv-col-poster { height: 110px; overflow: hidden; background: var(--bg2); }
.mv-col-poster-grid { display: grid; grid-template-columns: repeat(2, 1fr); height: 100%; }
.mv-col-poster-grid img { width: 100%; height: 110px; object-fit: cover; }
.mv-col-poster-ph { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text3); }
.mv-col-info { padding: 10px 12px; }
.mv-col-name { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.mv-col-desc { display: block; font-size: 11px; color: var(--text3); line-height: 1.4; }
.mv-col-card:hover .mv-col-name { color: var(--accent); }

/* Franchise */
.mv-franchise { display: flex; flex-direction: column; gap: 2px; }
.mv-fr-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 5px; text-decoration: none; transition: background .15s; }
.mv-fr-item:hover { background: var(--bg3); }
.mv-fr-item.current { background: var(--bg3); }
.mv-fr-num { font-size: 16px; font-weight: 900; color: var(--text3); width: 28px; flex-shrink: 0; text-align: right; }
.mv-fr-poster { width: 48px; height: 68px; object-fit: cover; border-radius: 3px; flex-shrink: 0; background: var(--bg3); }
.mv-fr-info { flex: 1; min-width: 0; }
.mv-fr-title { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.mv-fr-item:hover .mv-fr-title { color: var(--accent); }
.mv-fr-item.current .mv-fr-title { color: var(--accent); }
.mv-fr-meta { display: block; font-size: 12px; color: var(--text3); }
.mv-fr-current { flex-shrink: 0; background: var(--accent); color: #111; font-size: 9px; font-weight: 800; padding: 3px 7px; border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

/* Related */
.mv-related { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.mv-related::-webkit-scrollbar { display: none; }
.mv-rel-card { flex-shrink: 0; width: 130px; position: relative; border-radius: 5px; overflow: hidden; display: block; }
.mv-rel-card img { width: 130px; height: 190px; object-fit: cover; display: block; background: var(--bg3); }
.mv-rel-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.9)); padding: 20px 8px 8px; }
.mv-rel-title { display: block; font-size: 12px; font-weight: 700; color: #fff; line-height: 1.3; }
.mv-rel-year { display: block; font-size: 10px; color: var(--text2); margin-top: 2px; }

/* Comments */
.mv-comment-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.mv-ctab { padding: 7px 16px; background: var(--bg3); color: var(--text2); border: none; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s; }
.mv-ctab:hover { color: var(--text); }
.mv-ctab.active { background: var(--accent); color: #111; }
.mv-comment-form { margin-bottom: 16px; }
.mv-comment-input { width: 100%; background: var(--bg3); border: none; border-radius: 4px; color: var(--text); padding: 12px 14px; font-size: 13px; font-family: inherit; resize: vertical; min-height: 90px; outline: none; display: block; transition: background .15s; }
.mv-comment-input:focus { background: var(--bg4); }
.mv-comment-input::placeholder { color: var(--text3); }
.mv-comment-submit { margin-top: 8px; padding: 9px 22px; background: var(--accent); color: #111; border: none; border-radius: 4px; font-size: 13px; font-weight: 800; cursor: pointer; transition: .15s; }
.mv-comment-submit:hover { background: var(--accent2); }
.mv-comment-login { font-size: 13px; color: var(--text3); margin-bottom: 14px; }
.mv-comment-login a { color: var(--accent); }
.mv-load-more { width: 100%; padding: 10px; background: var(--bg3); color: var(--text2); border: none; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 12px; transition: .15s; }
.mv-load-more:hover { color: var(--text); }
.mv-comments-list { display: flex; flex-direction: column; }

/* Responsive */
@media (max-width: 760px) {
    .mv-top { flex-direction: column; }
    .mv-poster-col { width: 100%; display: flex; gap: 12px; }
    .mv-poster-img { width: 140px; height: 208px; }
    .mv-bookmark-btn { width: auto; }
    .mv-info-grid { grid-template-columns: 1fr; }
    .mv-status-btn { font-size: 10px; padding: 10px 4px; }
    .mv-episodes-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ─── AJAX loading states ─── */
.movie-list.loading { opacity: .4; pointer-events: none; transition: opacity .2s; }
.ajax-loading { display: flex; justify-content: center; padding: 60px 0; }
.ajax-spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid var(--bg4);
    border-top-color: var(--accent);
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sort-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; font-size: 13px; color: var(--text2);
    cursor: pointer; background: none; border: none; width: 100%;
    text-align: left; transition: background .12s;
}
.sort-opt:hover { background: var(--bg4); color: var(--text); }
.sort-opt.active { color: var(--accent); }