:root{--bg:#f8f4ed;--surface:#ffffff;--surface2:#fffbeb;--ink:#292524;--muted:#57534e;--line:#e7e5e4;--accent:#d97706;--accent2:#92400e;--on:#ffffff;--soft:#fef3c7;--r:18px;--maxw:1280px;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img,video{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
h1,h2,h3,h4{line-height:1.3;letter-spacing:normal;font-weight:800}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mirror-raw{display:contents}
.app-shell{display:flex;flex-direction:column;min-height:100vh}
.app-shell main{flex:1 0 auto;width:100%}
.wrap{width:100%;max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.is-filter-hide{display:none!important}
.main-nav{display:flex;align-items:center;gap:4px;min-width:0}
.main-nav a{white-space:nowrap}
.hd-tools{display:flex;align-items:center;flex:none;margin-left:auto}
.hd-search{position:relative;flex:0 0 256px;width:256px;height:38px;margin:0}
.hd-search input{width:100%;height:38px;padding:0 40px 0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface2);color:var(--ink);font-size:14px;outline:none;-webkit-appearance:none;appearance:none}
.hd-search input:focus{border-color:var(--accent)}
.hd-search button{position:absolute;top:4px;right:4px;width:30px;height:30px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:16px}
.hd-auth{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap}
.hd-search+.hd-auth{margin-left:20px}
.hd-auth+.hd-auth{margin-left:12px}
.hd-reg{background:var(--accent);border-color:var(--accent);color:var(--on)}
.hd-menu{display:none;flex:none;width:42px;height:40px;margin-left:auto;padding:0;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;font-size:20px;line-height:1}
.mobile-panel{display:none}
@media (max-width:1023px){.main-nav,.hd-tools{display:none!important}
.hd-menu{display:grid;place-items:center}
.mobile-panel.is-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:calc(100vh - 58px);overflow-y:auto;padding:12px 16px 16px;border-top:1px solid var(--line);background:var(--surface);color:var(--ink)}}
.mobile-panel a{display:block;padding:10px 12px;border-radius:10px;background:var(--surface2);font-size:14px;text-align:center}
.mobile-panel a[aria-current=page],.mobile-panel .m-reg{background:var(--accent);color:var(--on)}
.m-search{display:flex;grid-column:1/-1;gap:8px;margin:0 0 4px}
.m-search input{flex:1 1 auto;min-width:0;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface2);color:var(--ink);font-size:16px;-webkit-appearance:none;appearance:none}
.m-search button{flex:none;height:42px;padding:0 18px;border:0;border-radius:999px;background:var(--accent);color:var(--on);font-weight:700}
.sec{margin-top:36px}
.movie-card{position:relative;min-width:0}
.movie-line{margin-top:4px;color:var(--muted);font-size:13px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.v2-pick{display:flex;flex-wrap:wrap;gap:8px}
.v2-pick button{height:34px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:14px;line-height:1;-webkit-appearance:none;appearance:none}
.v2-pick button.on{background:var(--accent);border-color:var(--accent);color:var(--on);font-weight:700}
select[data-v2-chips]{display:none}
.player-stage{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}
.player-stage video{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;background:#000}
.player-overlay{position:absolute;top:50%;left:50%;z-index:2;display:grid;place-items:center;width:72px;height:72px;margin:-36px 0 0 -36px;padding:0;border:0;border-radius:999px;background:var(--accent);color:var(--on);font-size:26px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.play-error{position:absolute;right:0;bottom:0;left:0;z-index:3;margin:0;padding:10px;background:rgba(0,0,0,.72);color:#fff;font-size:14px;text-align:center}
[data-v2-dots]{display:flex;gap:8px}
[data-v2-dots] button{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.45)}
[data-v2-dots] button.is-active{width:26px;background:#fff}
[data-v2-rail]{display:grid;grid-auto-flow:column;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
[data-v2-rail]::-webkit-scrollbar{display:none}
[data-v2-rail]>*{scroll-snap-align:start}
.page-shell{width:100%;max-width:var(--maxw);margin:0 auto;padding:20px 24px 0}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.breadcrumb a{color:var(--accent)}
.page-shell>.page-hero{margin:14px 0 18px}
.page-shell>.page-hero h1{font-size:clamp(24px,3vw,34px)}
.page-shell>.page-hero p{margin-top:6px;color:var(--muted)}
.search-panel{display:flex;gap:10px;margin-bottom:22px}
.search-input{flex:1 1 auto;min-width:0;height:48px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:16px;outline:none;-webkit-appearance:none;appearance:none}
.search-input:focus{border-color:var(--accent)}
.primary-btn,.ghost-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px;border-radius:999px;font-weight:800;white-space:nowrap}
.primary-btn{border:0;background:var(--accent);color:var(--on)}
.ghost-btn{border:1px solid var(--line);background:transparent;color:var(--ink)}
.section-block{margin-bottom:24px}
.section-block>p{color:var(--muted)}
.section-block>p a{color:var(--accent);font-weight:700}
.content-card{padding:clamp(18px,3vw,32px);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.about-copy h2{margin:26px 0 8px;font-size:20px}
.about-copy h2:first-child{margin-top:0}
.about-copy p{color:var(--muted);line-height:1.85}
.stack-actions-row{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}
.detail-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:8px}
.detail-info-grid>div{display:flex;gap:10px;padding:12px 14px;border-radius:10px;background:var(--surface2)}
.detail-info-grid>div>span{flex:none;color:var(--muted)}
.filter-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.filter-row a{display:inline-flex;align-items:center;height:36px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface2)}
.auth-page{display:grid;place-items:center;min-height:calc(100vh - 300px);padding:48px 16px}
.auth-form{display:grid;gap:14px;width:100%;max-width:400px;padding:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.auth-form h1{font-size:26px;text-align:center}
.auth-form__lead{color:var(--muted);font-size:14px;text-align:center}
.auth-form__field{display:grid;gap:6px;color:var(--muted);font-size:14px}
.auth-form__field input{height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--ink);font-size:16px;outline:none;-webkit-appearance:none;appearance:none}
.auth-form button{height:46px;border:0;border-radius:10px;background:var(--accent);color:var(--on);font-size:16px;font-weight:800}
.auth-form__foot{color:var(--muted);font-size:14px;text-align:center}
.auth-form__foot a{color:var(--accent);font-weight:700}
.back-top{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:40;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:999px;background:var(--accent);color:var(--on);box-shadow:0 8px 20px rgba(0,0,0,.25);opacity:0;visibility:hidden;transition:opacity .2s}
.back-top.show{opacity:1;visibility:visible}
@supports not (aspect-ratio:1/1){.player-stage{height:0;padding-top:56.25%}}
@media (max-width:639px){.wrap,.page-shell{padding-left:14px;padding-right:14px}
.sec{margin-top:28px}
.movie-grid{gap:10px}
.search-panel .primary-btn{padding:0 18px}
.auth-form{padding:24px 18px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
*, ::before, ::after{ box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
::before, ::after{ --tw-content: ""; }
html, :host{ line-height: 1.5; text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; }
body{ margin: 0px; line-height: inherit; }
hr{ height: 0px; color: inherit; border-top-width: 1px; }
abbr:where([title]){ text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6{ font-size: inherit; font-weight: inherit; }
a{ color: inherit; text-decoration: inherit; }
b, strong{ font-weight: bolder; }
code, kbd, samp, pre{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; }
small{ font-size: 80%; }
sub, sup{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub{ bottom: -0.25em; }
sup{ top: -0.5em; }
table{ text-indent: 0px; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea{ font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; }
button, select{ text-transform: none; }
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]){ appearance: button; background-color: transparent; background-image: none; }
progress{ vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button{ height: auto; }
[type="search"]{ appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration{ appearance: none; }
::-webkit-file-upload-button{ appearance: button; font: inherit; }
summary{ display: list-item; }
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre{ margin: 0px; }
fieldset{ margin: 0px; padding: 0px; }
legend{ padding: 0px; }
ol, ul, menu{ list-style: none; margin: 0px; padding: 0px; }
dialog{ padding: 0px; }
textarea{ resize: vertical; }
input::placeholder, textarea::placeholder{ opacity: 1; color: rgb(156, 163, 175); }
button, [role="button"]{ cursor: pointer; }
:disabled{ cursor: default; }
img, svg, video, canvas, audio, iframe, embed, object{ display: block; vertical-align: middle; }
img, video{ max-width: 100%; height: auto; }
[hidden]:where(:not([hidden="until-found"])){ display: none; }
:root{ --color-stone-50: #fafaf9; --color-stone-100: #f5f5f4; --color-stone-200: #e7e5e4; --color-stone-300: #d6d3d1; --color-stone-400: #a8a29e; --color-stone-500: #78716c; --color-stone-600: #57534e; --color-stone-700: #44403c; --color-stone-800: #292524; --color-stone-900: #1c1917; --color-amber-50: #fffbeb; --color-amber-100: #fef3c7; --color-amber-200: #fde68a; --color-amber-300: #fcd34d; --color-amber-400: #fbbf24; --color-amber-500: #f59e0b; --color-amber-600: #d97706; --color-amber-700: #b45309; --color-amber-800: #92400e; --color-amber-900: #78350f; }
html{ scroll-behavior: smooth; }
body{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: var(--color-stone-800); }
h1, h2, h3, h4, h5, h6{ line-height: 1.2; font-weight: 600; }
h1{ font-size: 2.5rem; font-weight: 700; }
h2{ font-size: 2rem; }
h3{ font-size: 1.5rem; }
h4{ font-size: 1.25rem; }
p{ line-height: 1.75; }
.card{ overflow: hidden; border-radius: 0.5rem; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.3s; }
.card:hover{ --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow); }
.card-hover{ transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.3s; }
.card-hover:hover{ --tw-translate-y: -.25rem; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.section-title{ margin-bottom: 2rem; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(41 37 36 / var(--tw-text-opacity, 1)); }
@media (min-width: 768px){.section-title{ font-size: 2.25rem; line-height: 2.5rem; }}
.container-custom{ margin-left: auto; margin-right: auto; max-width: 80rem; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px){.container-custom{ padding-left: 1.5rem; padding-right: 1.5rem; }}
@media (min-width: 1024px){.container-custom{ padding-left: 2rem; padding-right: 2rem; }}
:root{ --site-bg: #f8f4ed; --stone-900: #1c1917; --stone-800: #292524; --stone-700: #44403c; --stone-600: #57534e; --stone-500: #78716c; --stone-300: #d6d3d1; --amber-900: #78350f; --amber-800: #92400e; --amber-700: #b45309; --amber-600: #d97706; --amber-500: #f59e0b; --amber-100: #fef3c7; --white: #ffffff; --shadow-soft: 0 18px 55px rgba(41, 37, 36, 0.12); --shadow-strong: 0 30px 80px rgba(28, 25, 23, 0.28); }
*{ box-sizing: border-box; }
body{ min-height: 100vh; background: linear-gradient(135deg, rgb(250, 250, 249) 0%, rgb(255, 251, 235) 48%, rgb(231, 229, 228) 100%); color: var(--stone-800); }
a{ transition: color 0.2s, background-color 0.2s, transform 0.2s, box-shadow 0.2s; }
img{ width: 100%; }
.site-header{ position: sticky; top: 0px; z-index: 80; background: rgba(28, 25, 23, 0.94); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.22) 0px 10px 28px; backdrop-filter: blur(16px); }
.nav-bar{ min-height: 72px; display: flex; align-items: center; gap: 22px; }
.site-logo{ display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-weight: 800; letter-spacing: 0.04em; }
.logo-mark{ width: 38px; height: 38px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--amber-500), var(--amber-800)); color: white; box-shadow: rgba(245, 158, 11, 0.38) 0px 10px 25px; }
.logo-text{ font-size: 1.2rem; }
.desktop-nav{ display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-link, .mobile-link{ border-radius: 999px; padding: 0.55rem 0.9rem; color: rgba(255, 255, 255, 0.82); font-weight: 600; }
.nav-link:hover, .nav-link.is-active, .mobile-link:hover, .mobile-link.is-active{ color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.12); }
.nav-toggle{ display: none; margin-left: auto; padding: 0.45rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: white; }
.mobile-nav{ display: none; padding: 0px 1rem 1rem; }
.mobile-nav.is-open{ display: grid; gap: 0.45rem; }
.hero-carousel{ position: relative; min-height: 600px; overflow: hidden; background: rgb(0, 0, 0); }
.hero-slide{ position: absolute; inset: 0px; opacity: 0; pointer-events: none; transform: scale(1.02); transition: opacity 0.7s, transform 0.7s; }
.hero-slide.is-active{ opacity: 1; pointer-events: auto; transform: scale(1); }
.hero-media, .hero-media img, .hero-mask{ position: absolute; inset: 0px; width: 100%; height: 100%; }
.hero-media img{ object-fit: cover; }
.hero-mask{ background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.28)); }
.hero-content{ position: relative; z-index: 2; min-height: 600px; display: flex; align-items: center; }
.hero-copy{ max-width: 760px; color: white; }
.eyebrow, .section-kicker{ display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 1rem; color: var(--amber-500); font-size: 0.86rem; font-weight: 800; letter-spacing: 0.08em; }
.eyebrow::before, .section-kicker::before{ content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentcolor; box-shadow: rgba(245, 158, 11, 0.16) 0px 0px 0px 6px; }
.hero-copy h1{ font-size: clamp(2.6rem, 7vw, 5.8rem); line-height: 0.98; font-weight: 900; text-shadow: rgba(0, 0, 0, 0.42) 0px 16px 45px; }
.hero-copy p{ max-width: 700px; margin-top: 1.25rem; color: rgb(231, 229, 228); font-size: clamp(1.05rem, 2vw, 1.35rem); }
.hero-meta{ display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.6rem 0px 2rem; color: rgb(254, 243, 199); }
.hero-meta span, .detail-meta span{ display: inline-flex; border-radius: 999px; padding: 0.38rem 0.76rem; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 0.8rem; }
.btn-primary, .btn-ghost{ display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; padding: 0.75rem 1.25rem; font-weight: 800; }
.btn-primary{ background: linear-gradient(135deg, var(--amber-600), var(--amber-800)); color: white; box-shadow: rgba(217, 119, 6, 0.34) 0px 16px 35px; }
.btn-primary:hover{ transform: translateY(-2px); color: white; box-shadow: rgba(217, 119, 6, 0.45) 0px 22px 46px; }
.btn-ghost{ color: white; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); }
.btn-ghost:hover{ background: rgba(255, 255, 255, 0.22); color: white; }
.hero-arrow{ position: absolute; top: 50%; z-index: 5; width: 48px; height: 48px; border-radius: 999px; transform: translateY(-50%); background: rgba(0, 0, 0, 0.45); color: white; font-size: 2.2rem; line-height: 1; }
.hero-arrow:hover{ background: rgba(0, 0, 0, 0.75); }
.hero-prev{ left: 1rem; }
.hero-next{ right: 1rem; }
.hero-dots{ position: absolute; left: 50%; bottom: 2rem; z-index: 5; display: flex; gap: 0.55rem; transform: translateX(-50%); }
.hero-dot{ width: 12px; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.5); transition: width 0.25s, background-color 0.25s; }
.hero-dot.is-active{ width: 34px; background: var(--amber-500); }
.home-search-block{ margin-top: -44px; position: relative; z-index: 10; }
.search-card-large{ display: grid; grid-template-columns: minmax(0px, 1fr) minmax(360px, 0.9fr); gap: 1.5rem; align-items: center; border-radius: 24px; padding: 1.6rem; background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-soft); backdrop-filter: blur(20px); }
.search-card-large h2{ font-size: 1.5rem; font-weight: 900; }
.search-card-large p{ color: var(--stone-600); }
.home-search-form, .filter-bar{ display: flex; gap: 0.75rem; }
.home-search-form input, .filter-bar input, .filter-bar select{ min-height: 48px; border-radius: 14px; padding: 0px 1rem; border: 1px solid rgb(231, 229, 228); background: white; color: var(--stone-800); outline: none; }
.home-search-form input, .filter-bar input{ flex: 1 1 0%; }
.home-search-form button{ min-height: 48px; border-radius: 14px; padding: 0px 1.25rem; background: var(--stone-900); color: white; font-weight: 800; }
.section-block{ padding-top: 4.5rem; padding-bottom: 4.5rem; }
.section-head{ display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.section-head a{ color: var(--amber-700); font-weight: 800; }
.section-head.compact{ align-items: center; margin-bottom: 1.2rem; }
.section-title{ margin: 0px; color: var(--stone-800); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 900; }
.movie-grid{ display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 1.35rem; }
.movie-card{ overflow: hidden; border-radius: 18px; background: white; box-shadow: rgba(41, 37, 36, 0.08) 0px 10px 30px; }
.movie-card:hover{ transform: translateY(-5px); box-shadow: rgba(41, 37, 36, 0.16) 0px 22px 55px; }
.poster-link{ position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(135deg, rgb(41, 37, 36), rgb(146, 64, 14)); }
.poster-link img{ height: 100%; object-fit: cover; transition: transform 0.45s; }
.poster-badge{ position: absolute; top: 0.8rem; right: 0.8rem; border-radius: 999px; padding: 0.28rem 0.62rem; background: rgba(0, 0, 0, 0.68); color: white; font-size: 0.78rem; font-weight: 800; }
.movie-card-body{ padding: 1rem; }
.movie-card-body h2{ font-size: 1.05rem; line-height: 1.35; font-weight: 900; }
.movie-card-body h2 a:hover{ color: var(--amber-700); }
.movie-meta, .movie-line{ margin-top: 0.45rem; color: var(--stone-600); font-size: 0.9rem; }
.movie-line{ display: -webkit-box; min-height: 3.1em; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tag-row{ display: flex; flex-wrap: wrap; gap: 0.38rem; margin-top: 0.75rem; }
.tag-row span{ border-radius: 999px; padding: 0.24rem 0.55rem; background: rgb(255, 251, 235); color: var(--amber-800); font-size: 0.76rem; font-weight: 700; }
.tag-row.large span{ background: rgba(245, 158, 11, 0.18); color: rgb(254, 243, 199); }
.category-grid{ display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 1rem; }
.category-card{ min-height: 150px; border-radius: 20px; padding: 1.25rem; background: linear-gradient(135deg, rgba(41, 37, 36, 0.96), rgba(146, 64, 14, 0.92)); color: white; box-shadow: var(--shadow-soft); }
.category-card:hover{ transform: translateY(-4px); color: white; box-shadow: var(--shadow-strong); }
.category-card span{ display: block; margin-bottom: 0.55rem; font-size: 1.25rem; font-weight: 900; }
.category-card p{ color: rgb(254, 243, 199); font-size: 0.92rem; }
.two-column-layout{ display: grid; grid-template-columns: minmax(0px, 1fr) 390px; gap: 2rem; }
.compact-grid{ grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.rank-panel{ align-self: start; position: sticky; top: 96px; border-radius: 24px; padding: 1.25rem; background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow-soft); }
.rank-list{ display: grid; gap: 0.85rem; }
.rank-item{ display: grid; grid-template-columns: 46px 74px minmax(0px, 1fr); gap: 0.85rem; align-items: center; border-radius: 16px; padding: 0.72rem; background: white; box-shadow: rgba(41, 37, 36, 0.07) 0px 8px 24px; }
.rank-list.full .rank-item{ grid-template-columns: 64px 96px minmax(0px, 1fr); padding: 1rem; }
.rank-number{ display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgb(41, 37, 36); color: rgb(251, 191, 36); font-weight: 900; }
.rank-cover{ aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: rgb(41, 37, 36); }
.rank-cover img{ height: 100%; object-fit: cover; }
.rank-item h2{ font-size: 1rem; font-weight: 900; }
.rank-item p, .rank-item span{ display: block; margin-top: 0.25rem; color: var(--stone-600); font-size: 0.88rem; }
.page-hero{ position: relative; overflow: hidden; padding: 5rem 0px 4rem; background: radial-gradient(circle at 18% 20%, rgba(245, 158, 11, 0.36), transparent 34%), linear-gradient(135deg, rgb(28, 25, 23), rgb(41, 37, 36) 55%, rgb(120, 53, 15)); color: white; }
.page-hero h1{ max-width: 860px; margin-top: 1rem; font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 900; }
.page-hero p{ max-width: 760px; margin-top: 1rem; color: rgb(254, 243, 199); font-size: 1.08rem; }
.breadcrumb{ display: flex; flex-wrap: wrap; gap: 0.5rem; color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; }
.breadcrumb a:hover{ color: rgb(255, 255, 255); }
.separator{ color: rgba(255, 255, 255, 0.38); }
.category-overview-grid{ display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 1.2rem; }
.category-overview-card{ display: grid; grid-template-columns: 150px minmax(0px, 1fr); gap: 1.2rem; border-radius: 22px; padding: 1rem; background: white; box-shadow: var(--shadow-soft); }
.category-cover{ aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; background: rgb(41, 37, 36); }
.category-cover img{ height: 100%; object-fit: cover; }
.category-overview-card h2{ font-size: 1.35rem; font-weight: 900; }
.category-overview-card p{ margin-top: 0.55rem; color: var(--stone-600); }
.mini-link-row{ display: flex; flex-wrap: wrap; gap: 0.42rem; margin-top: 0.9rem; }
.mini-link-row a{ border-radius: 999px; padding: 0.28rem 0.62rem; background: rgb(255, 251, 235); color: var(--amber-800); font-size: 0.8rem; font-weight: 700; }
.filter-bar{ position: sticky; top: 84px; z-index: 20; flex-wrap: wrap; margin-bottom: 1.6rem; border-radius: 20px; padding: 1rem; background: rgba(255, 255, 255, 0.88); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); }
 .filter-bar select{ min-width: 150px; }
.detail-hero{ padding: 4rem 0px; background: radial-gradient(circle at 75% 15%, rgba(245, 158, 11, 0.28), transparent 32%), linear-gradient(135deg, rgb(28, 25, 23), rgb(41, 37, 36) 56%, rgb(120, 53, 15)); color: white; }
.detail-hero-grid{ display: grid; grid-template-columns: 300px minmax(0px, 1fr); gap: 2.3rem; align-items: center; }
.detail-poster{ overflow: hidden; border-radius: 26px; background: rgb(41, 37, 36); box-shadow: var(--shadow-strong); }
.detail-poster img{ aspect-ratio: 3 / 4; height: 100%; object-fit: cover; }
.detail-copy h1{ margin-top: 1rem; font-size: clamp(2.1rem, 6vw, 5rem); font-weight: 900; }
.detail-line{ max-width: 860px; margin-top: 1rem; color: rgb(231, 229, 228); font-size: 1.2rem; }
.detail-meta{ display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.4rem 0px; color: rgb(254, 243, 199); }
.player-section{ padding-top: 4rem; }
.player-section h2, .content-card h2{ margin-bottom: 1rem; font-size: 1.7rem; font-weight: 900; }
.video-shell{ position: relative; overflow: hidden; border-radius: 24px; background: rgb(0, 0, 0); box-shadow: var(--shadow-strong); }
.movie-player{ width: 100%; aspect-ratio: 16 / 9; background: rgb(0, 0, 0); cursor: pointer; }
.player-overlay{ position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.28)); color: white; font-size: 1.2rem; font-weight: 900; }
.detail-content{ display: grid; grid-template-columns: minmax(0px, 1.35fr) minmax(320px, 0.65fr); gap: 1.25rem; padding-top: 2rem; }
.content-card{ border-radius: 24px; padding: 1.5rem; background: white; box-shadow: var(--shadow-soft); }
.content-card p{ color: var(--stone-700); line-height: 1.9; }
.accent-card{ background: rgb(255, 251, 235); border-left: 5px solid var(--amber-600); }
.related-grid{ grid-template-columns: repeat(6, minmax(0px, 1fr)); }
.site-footer{ margin-top: 4rem; padding: 3.5rem 0px; background: rgb(28, 25, 23); color: rgb(214, 211, 209); }
.footer-grid{ display: grid; grid-template-columns: minmax(0px, 1.2fr) minmax(0px, 1fr) minmax(0px, 0.8fr); gap: 2rem; }
.footer-logo{ margin-bottom: 1rem; color: white; }
.site-footer h2{ margin-bottom: 1rem; color: white; font-size: 1.05rem; font-weight: 900; }
.footer-links{ display: flex; flex-wrap: wrap; gap: 0.55rem; }
.footer-links a{ border-radius: 999px; padding: 0.35rem 0.7rem; background: rgba(255, 255, 255, 0.08); color: rgb(254, 243, 199); }
.footer-links a:hover{ background: rgba(255, 255, 255, 0.16); color: white; }
@media (max-width: 1180px){.movie-grid{ grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.related-grid{ grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.category-grid{ grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.two-column-layout{ grid-template-columns: 1fr; }
.rank-panel{ position: static; }}
@media (max-width: 900px){.desktop-nav{ display: none; }
.nav-toggle{ display: block; }
.hero-carousel, .hero-content{ min-height: 560px; }
.search-card-large{ grid-template-columns: 1fr; }
.home-search-form, .filter-bar{ flex-direction: column; }
.category-grid, .category-overview-grid, .detail-content, .footer-grid{ grid-template-columns: 1fr; }
.category-overview-card, .detail-hero-grid{ grid-template-columns: 1fr; }
.detail-poster{ max-width: 320px; }}
@media (max-width: 640px){.nav-bar{ min-height: 64px; }
.logo-text{ font-size: 1rem; }
.hero-copy h1, .detail-copy h1, .page-hero h1{ word-break: break-word; }
.hero-arrow{ display: none; }
.section-block{ padding-top: 3rem; padding-bottom: 3rem; }
.section-head{ align-items: start; flex-direction: column; }
.movie-grid, .compact-grid, .related-grid{ grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0.85rem; }
.movie-card-body{ padding: 0.8rem; }
.movie-line{ display: none; }
.rank-list.full .rank-item, .rank-item{ grid-template-columns: 42px 64px minmax(0px, 1fr); gap: 0.65rem; }
.page-hero, .detail-hero{ padding: 3.2rem 0px; }}
.site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(28,25,23,.98)}
.desktop-nav{margin-right:20px}
.hd-tools{gap:0;margin-left:0}
.hd-search input{height:40px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.1);color:#fff}
.hd-search input::placeholder{color:rgba(255,255,255,.6)}
.hd-search button{color:var(--amber-500)}
.hd-auth{height:40px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-weight:700}
.hd-reg{border:0;background:linear-gradient(135deg,var(--amber-600),var(--amber-800));color:#fff}
.nav-toggle.hd-menu{margin-left:auto;font-size:20px}
.mobile-nav .m-search{flex-direction:row;margin-bottom:6px}
.mobile-nav .m-search input{min-width:0;font-size:16px}
.mobile-nav .m-reg{color:var(--amber-500)}
.hero-carousel [data-v2-rotate]{position:absolute;inset:0}
.hero-copy h2.hero-title{font-size:clamp(2.6rem,7vw,5.8rem);line-height:1;font-weight:900;color:#fff;text-shadow:0 16px 45px rgba(0,0,0,.42)}
@media (min-width:641px){.hero-content.container-custom{padding-left:4.5rem;padding-right:4.5rem}}
.hero-dots button{width:12px;height:12px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.5);cursor:pointer;transition:width .25s}
.hero-dots button.is-active{width:34px;background:var(--amber-500)}
.search-card-large h1{font-size:1.5rem;font-weight:900;color:var(--stone-900)}
.movie-card:hover{transform:translateY(-5px)}
.movie-card:hover .poster-link img{transform:none}
.cc-count{display:block;margin-top:.8rem;color:var(--amber-500);font-style:normal;font-weight:800;font-size:.9rem}
.cat-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.2rem}
.cs-stat{display:inline-flex;align-items:baseline;gap:6px;padding:7px 14px;border-radius:999px;color:#fef3c7;background:rgba(255,255,255,.12);font-size:13px}
.cs-stat b{font-size:18px;color:var(--amber-500)}
.cat-pick{margin:0 0 1rem}
.cs-chip{display:inline-flex;align-items:center;gap:4px;border:0;border-radius:999px;padding:.38rem .8rem;background:#fff;color:var(--amber-800);font-size:.85rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(41,37,36,.06);transition:background .2s,color .2s}
.cs-chip em{font-style:normal;opacity:.7}
.cs-chip:hover{background:var(--amber-100)}
.cs-chip.on{background:linear-gradient(135deg,var(--amber-600),var(--amber-800));color:#fff}
.cat-count{margin:0 0 1.4rem;color:var(--stone-600);font-weight:700}
.cat-count b{color:var(--amber-700);font-size:1.25rem}
.video-shell .player-stage{position:relative;aspect-ratio:16/9}
.video-shell .player-overlay{top:50%;left:50%;right:auto;bottom:auto;width:78px;height:78px;margin:-39px 0 0 -39px;gap:0;border-radius:999px;background:linear-gradient(135deg,var(--amber-500),var(--amber-800));color:#fff;font-size:28px;box-shadow:0 18px 48px rgba(245,158,11,.42)}
.detail-hero .breadcrumb{margin-bottom:1.6rem}
.ri-copy{min-width:0}
.ri-copy h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-overview-card h2 a:hover{color:var(--amber-700)}
.content-card,.auth-form{border-radius:24px;background:#fff;box-shadow:var(--shadow-soft)}
.auth-form h1{color:var(--stone-900);font-size:1.6rem;font-weight:900}
.auth-form__field input{border:1px solid #e7e5e4;border-radius:14px;padding:0 1rem}
.auth-form__field input:focus{border-color:var(--amber-600)}
.auth-form button{border-radius:14px;background:var(--stone-900);color:#fff;font-weight:800}
.auth-form__foot a{color:var(--amber-700)}
@media (min-width:1024px){.desktop-nav{display:flex}
.nav-toggle.hd-menu{display:none}}
@media (min-width:1024px) and (max-width:1199px){.desktop-nav .nav-cat{display:none}}
@media (max-width:1023px){.desktop-nav{display:none}
.nav-toggle.hd-menu{display:block}}
@media (max-width:640px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.category-card{min-height:120px;padding:1rem}
.category-card p{display:none}
.tag-row{display:none}
.cat-pick,.detail-copy .tag-row{display:flex}}
/* c66-compat */
a,button,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
select.f-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
img{-webkit-user-drag:none}
.site-header{position:-webkit-sticky;position:sticky}
[data-v2-rail],[data-chips],.v2-pick{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
a,button{touch-action:manipulation}
@media print{.site-header,.site-footer,.mobile-panel,video{display:none!important}body{background:#fff!important}}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{border:2px solid #f8f4ed;border-radius:10px;background:#d97706}::-webkit-scrollbar-track{background:#f8f4ed}html{scrollbar-color:#d97706 #f8f4ed}
/* c66-compat-end */
/* site-layout */
html,body{max-width:100%;overflow-x:hidden}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale}
img,video{max-width:100%}
input,textarea{-webkit-appearance:none;appearance:none;border-radius:0}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.player-stage,.player-card,.player-shell,.video-shell{max-width:100%}
.search-panel input,.search-panel select{min-height:44px}
@supports not (aspect-ratio:16/9){.player-stage{height:0;padding-top:56.25%}.player-stage video{position:absolute;top:0;left:0;width:100%;height:100%}}
footer,.site-footer{padding-bottom:env(safe-area-inset-bottom)}
@media (max-width:820px){.search-panel{-webkit-box-orient:vertical;flex-direction:column;align-items:stretch}.search-panel>*{-ms-flex:0 0 auto;flex:0 0 auto;width:100%;min-width:0}}
@media (max-width:374px){h1{font-size:24px!important;line-height:1.3}.movie-grid,.video-grid{gap:8px!important}}
@media (max-width:640px){.detail-hero-grid{grid-template-columns:110px minmax(0,1fr)!important;gap:14px!important;align-items:start}.detail-poster{max-width:110px;width:110px}.detail-poster img{width:100%;height:auto}.category-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.category-cover img{aspect-ratio:3/4;height:auto;object-fit:cover}}

/* site-layout-end */