/* roulang page: index */
:root {
            --ink: #171d2d;
            --muted: #697286;
            --soft: #f4f7fb;
            --line: #e4e9f1;
            --white: #ffffff;
            --violet: #7357df;
            --violet-dark: #5941bd;
            --mint: #37b69a;
            --gold: #e6a84c;
            --danger: #d96b72;
            --radius-lg: 26px;
            --radius-md: 16px;
            --radius-sm: 10px;
            --shadow: 0 18px 50px rgba(31, 43, 75, .09);
            --shadow-hover: 0 22px 55px rgba(31, 43, 75, .16);
            --container: 1180px;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--white);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 15px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        img { display: block; width: 100%; object-fit: cover; }
        a { color: inherit; text-decoration: none; }
        button, input { font: inherit; }
        button { border: 0; cursor: pointer; }
        :focus-visible { outline: 3px solid rgba(115, 87, 223, .35); outline-offset: 3px; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--violet);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1.6px;
            text-transform: uppercase;
        }
        .eyebrow::before {
            content: "";
            width: 22px;
            height: 3px;
            border-radius: 4px;
            background: var(--mint);
        }
        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 28px;
        }
        .section-head h2 {
            margin: 8px 0 0;
            font-size: clamp(26px, 3vw, 38px);
            line-height: 1.25;
            letter-spacing: 0;
        }
        .section-head p {
            max-width: 580px;
            margin: 8px 0 0;
            color: var(--muted);
        }
        .text-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            color: var(--violet-dark);
            font-weight: 700;
        }
        .text-link:hover { color: var(--mint); }

        header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(255,255,255,.92);
            border-bottom: 1px solid rgba(228,233,241,.86);
            backdrop-filter: blur(16px);
        }
        .nav-shell {
            min-height: 76px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-width: 235px;
        }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            color: white;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--violet), var(--mint));
            box-shadow: 0 10px 22px rgba(115,87,223,.25);
        }
        .brand-name {
            font-size: 16px;
            font-weight: 900;
            letter-spacing: 0;
            white-space: nowrap;
        }
        nav { display: flex; align-items: center; gap: 6px; }
        nav a {
            position: relative;
            padding: 10px 13px;
            color: #5d6679;
            font-size: 14px;
            font-weight: 700;
            border-radius: 9px;
            transition: .25s ease;
        }
        nav a:hover, nav a.active { color: var(--violet-dark); background: #f0edff; }
        nav a.active::after {
            content: "";
            position: absolute;
            left: 13px;
            right: 13px;
            bottom: 4px;
            height: 2px;
            background: var(--violet);
        }
        .nav-search {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            color: var(--muted);
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--soft);
        }
        .nav-search input {
            width: 120px;
            border: 0;
            outline: 0;
            color: var(--ink);
            background: transparent;
        }
        .menu-toggle { display: none; padding: 10px; color: var(--ink); background: transparent; font-size: 20px; }

        .hero {
            position: relative;
            min-height: 590px;
            display: flex;
            align-items: center;
            overflow: hidden;
            color: #fff;
            background:
                linear-gradient(90deg, rgba(17,24,45,.94) 0%, rgba(17,24,45,.76) 42%, rgba(17,24,45,.28) 100%),
                url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=1800&q=90") center/cover;
        }
        .hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 100px;
            background: linear-gradient(transparent, rgba(255,255,255,.18));
            pointer-events: none;
        }
        .hero-content { position: relative; z-index: 1; max-width: 760px; padding: 90px 0 100px; }
        .hero .eyebrow { color: #b9f1df; }
        .hero h1 {
            max-width: 720px;
            margin: 18px 0 18px;
            font-size: clamp(38px, 6vw, 68px);
            line-height: 1.14;
            letter-spacing: 0;
        }
        .hero h1 em { color: #a9f1dc; font-style: normal; }
        .hero-lead {
            max-width: 720px;
            margin: 0 0 28px;
            color: rgba(255,255,255,.82);
            font-size: 17px;
        }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 46px;
            padding: 0 20px;
            border-radius: 11px;
            font-weight: 800;
            transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
        }
        .btn:hover { transform: translateY(-2px); }
        .btn-primary { color: #fff; background: var(--violet); box-shadow: 0 12px 26px rgba(115,87,223,.28); }
        .btn-primary:hover { background: var(--violet-dark); box-shadow: 0 15px 30px rgba(115,87,223,.38); }
        .btn-light { color: var(--ink); background: #fff; }
        .btn-light:hover { background: #eafff8; }
        .hero-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            max-width: 700px;
            margin-top: 48px;
            border-top: 1px solid rgba(255,255,255,.25);
        }
        .hero-stat { padding: 19px 22px 0 0; }
        .hero-stat strong { display: block; font-size: 24px; line-height: 1.2; }
        .hero-stat span { color: rgba(255,255,255,.66); font-size: 12px; }

        section { padding: 86px 0; }
        .section-soft { background: var(--soft); }
        .section-tint { background: #f5f3ff; }
        .section-dark { color: white; background: #171d2d; }
        .section-dark .section-head p { color: rgba(255,255,255,.64); }
        .section-dark .eyebrow { color: #a9f1dc; }

        .movie-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .movie-card {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: #fff;
            box-shadow: 0 8px 25px rgba(31,43,75,.045);
            transition: transform .25s ease, box-shadow .25s ease;
        }
        .movie-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
        .poster { position: relative; aspect-ratio: 4 / 5.25; overflow: hidden; background: #dfe5ee; }
        .poster img { height: 100%; transition: transform .45s ease; }
        .movie-card:hover .poster img { transform: scale(1.05); }
        .poster::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(10,15,30,.72)); }
        .badge {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 1;
            display: inline-flex;
            padding: 4px 8px;
            color: #fff;
            background: rgba(22,29,45,.78);
            border-radius: 6px;
            font-size: 11px;
            font-weight: 800;
        }
        .badge.mint { background: var(--mint); }
        .badge.gold { background: #c98828; }
        .play {
            position: absolute;
            z-index: 1;
            right: 13px;
            bottom: 13px;
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            color: white;
            border: 1px solid rgba(255,255,255,.5);
            border-radius: 50%;
            background: rgba(115,87,223,.9);
        }
        .movie-info { padding: 15px 15px 16px; }
        .movie-info h3 { margin: 0 0 7px; font-size: 16px; line-height: 1.4; }
        .movie-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
        .score { color: var(--gold); font-weight: 900; }
        .score i { margin-right: 3px; }

        .featured-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 22px; }
        .feature-large, .feature-small {
            position: relative;
            overflow: hidden;
            min-height: 345px;
            border-radius: var(--radius-lg);
            background: #20283e;
        }
        .feature-small { min-height: 165px; }
        .feature-stack { display: grid; gap: 22px; }
        .feature-large img, .feature-small img { position: absolute; inset: 0; height: 100%; }
        .feature-large::after, .feature-small::after {
            content: "";
            position: absolute;
            inset: 25% 0 0;
            background: linear-gradient(transparent, rgba(15,20,36,.9));
        }
        .feature-copy { position: absolute; z-index: 1; right: 25px; bottom: 23px; left: 25px; color: #fff; }
        .feature-copy h3 { margin: 7px 0; font-size: 25px; }
        .feature-copy p { margin: 0; color: rgba(255,255,255,.74); font-size: 13px; }

        .category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
        .category-item {
            padding: 22px 18px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: #fff;
            transition: .25s ease;
        }
        .category-item:hover { border-color: #b8aafa; box-shadow: var(--shadow); transform: translateY(-3px); }
        .category-icon { color: var(--violet); font-size: 20px; }
        .category-item h3 { margin: 12px 0 7px; font-size: 16px; }
        .category-item p { min-height: 76px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

        .rank-layout { display: grid; grid-template-columns: 1fr .8fr; gap: 26px; align-items: start; }
        .rank-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
        .rank-row {
            display: grid;
            grid-template-columns: 42px 1fr auto auto;
            align-items: center;
            gap: 14px;
            min-height: 64px;
            padding: 10px 20px;
            border-bottom: 1px solid var(--line);
        }
        .rank-row:last-child { border-bottom: 0; }
        .rank-num { color: var(--violet); font-size: 20px; font-weight: 900; font-style: italic; }
        .rank-title { font-weight: 800; }
        .rank-type { padding: 3px 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; font-size: 11px; }
        .rank-hot { color: var(--danger); font-size: 12px; font-weight: 800; }
        .insight-panel {
            padding: 28px;
            color: white;
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, #27344e, #1a2035);
            box-shadow: var(--shadow);
        }
        .insight-panel h3 { margin: 0 0 12px; font-size: 24px; }
        .insight-panel p { color: rgba(255,255,255,.68); }
        .metric { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
        .metric:last-child { border: 0; }
        .metric strong { color: #a9f1dc; }

        .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .news-card { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; transition: .25s ease; }
        .news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
        .news-card img { height: 92px; border-radius: 9px; }
        .news-card h3 { margin: 2px 0 7px; font-size: 15px; line-height: 1.5; }
        .news-card p { margin: 0; color: var(--muted); font-size: 12px; }
        .news-date { color: var(--violet); font-size: 11px; font-weight: 800; }

        .collection-band { display: grid; grid-template-columns: .85fr 1.15fr; gap: 42px; align-items: center; }
        .collection-band h2 { margin: 10px 0 14px; font-size: clamp(28px, 4vw, 44px); line-height: 1.25; }
        .collection-band p { color: var(--muted); }
        .collection-points { display: grid; gap: 12px; margin-top: 24px; }
        .collection-point { display: flex; align-items: flex-start; gap: 12px; }
        .collection-point i { margin-top: 5px; color: var(--mint); }
        .collection-point strong { display: block; margin-bottom: 2px; }
        .collection-point span { display: block; color: var(--muted); font-size: 13px; }
        .poster-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
        .poster-strip img { height: 280px; border-radius: var(--radius-md); }
        .poster-strip img:nth-child(2) { transform: translateY(24px); }

        .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .quote-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
        .quote-card .stars { color: var(--gold); letter-spacing: 3px; }
        .quote-card p { margin: 15px 0; color: #4e586b; }
        .quote-user { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; }
        .avatar { display: grid; place-items: center; width: 30px; height: 30px; color: var(--violet); border-radius: 50%; background: #eeebff; }

        .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
        details { padding: 19px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
        summary { cursor: pointer; list-style: none; font-weight: 800; }
        summary::-webkit-details-marker { display: none; }
        summary::after { content: "+"; float: right; color: var(--violet); font-size: 20px; line-height: 1; }
        details[open] summary::after { content: "−"; }
        details p { margin: 14px 0 0; color: var(--muted); font-size: 13px; }

        .closing {
            padding: 46px 0;
            color: #fff;
            background: linear-gradient(110deg, #5941bd, #258d85);
        }
        .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
        .closing h2 { margin: 0 0 6px; font-size: 30px; }
        .closing p { margin: 0; color: rgba(255,255,255,.76); }
        footer { color: #aab2c3; background: #151b2a; }
        .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 38px; padding: 64px 0 42px; }
        .footer-brand { color: #fff; }
        .footer-brand p { max-width: 300px; color: #8f99ad; font-size: 13px; }
        footer h3 { margin: 0 0 15px; color: #fff; font-size: 14px; }
        footer a { display: block; margin: 8px 0; color: #9ca6b8; font-size: 13px; }
        footer a:hover { color: #a9f1dc; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); color: #737e93; font-size: 12px; }

        .age-note {
            margin-top: 16px;
            color: rgba(255,255,255,.55);
            font-size: 12px;
        }
        @media (max-width: 1024px) {
            .movie-grid { grid-template-columns: repeat(3, 1fr); }
            .category-grid { grid-template-columns: repeat(3, 1fr); }
            .rank-layout, .collection-band { grid-template-columns: 1fr; }
            .poster-strip { max-width: 680px; }
            .news-grid { grid-template-columns: repeat(2, 1fr); }
            .nav-search { display: none; }
        }
        @media (max-width: 768px) {
            .container { width: min(var(--container), calc(100% - 32px)); }
            .nav-shell { min-height: 68px; }
            .brand { min-width: 0; }
            .brand-name { font-size: 14px; white-space: normal; line-height: 1.25; }
            .menu-toggle { display: block; }
            nav {
                position: absolute;
                top: 68px;
                right: 16px;
                left: 16px;
                display: none;
                flex-direction: column;
                align-items: stretch;
                padding: 10px;
                border: 1px solid var(--line);
                border-radius: 14px;
                background: #fff;
                box-shadow: var(--shadow);
            }
            nav.open { display: flex; }
            nav a { padding: 12px; }
            .hero { min-height: 660px; background-position: 61% center; }
            .hero-content { padding: 76px 0 90px; }
            .hero h1 { font-size: 43px; }
            .hero-stats { margin-top: 34px; }
            section { padding: 64px 0; }
            .section-head { display: block; }
            .section-head .text-link { margin-top: 18px; }
            .movie-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
            .featured-grid { grid-template-columns: 1fr; }
            .feature-small { min-height: 210px; }
            .category-grid { grid-template-columns: repeat(2, 1fr); }
            .news-grid, .quote-grid, .faq-grid { grid-template-columns: 1fr; }
            .closing-inner { display: block; }
            .closing .btn { margin-top: 22px; }
            .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
            .footer-brand { grid-column: 1 / -1; }
        }
        @media (max-width: 520px) {
            .hero h1 { font-size: 36px; }
            .hero-lead { font-size: 15px; }
            .hero-actions .btn { width: 100%; }
            .hero-stats { grid-template-columns: 1fr; }
            .hero-stat { padding: 14px 0 0; }
            .movie-grid { gap: 10px; }
            .movie-info { padding: 12px; }
            .movie-info h3 { font-size: 14px; }
            .movie-meta { display: block; }
            .movie-meta .score { display: block; margin-top: 3px; }
            .category-grid { grid-template-columns: 1fr; }
            .category-item p { min-height: auto; }
            .rank-row { grid-template-columns: 28px 1fr auto; gap: 8px; padding: 9px 12px; }
            .rank-type { display: none; }
            .poster-strip img { height: 190px; }
            .poster-strip img:nth-child(2) { transform: translateY(14px); }
            .news-card { grid-template-columns: 86px 1fr; gap: 10px; }
            .news-card img { height: 78px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; margin-top: 5px; }
        }

/* roulang page: category1 */
:root{
 --ink:#171d2d;--muted:#697286;--soft:#f4f7fb;--line:#e4e9f1;--white:#fff;
 --violet:#7357df;--violet-dark:#5941bd;--mint:#37b69a;--gold:#e6a84c;--danger:#d96b72;
 --radius-lg:26px;--radius-md:16px;--radius-sm:10px;
 --shadow:0 18px 50px rgba(31,43,75,.09);--shadow-hover:0 22px 55px rgba(31,43,75,.16);
 --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{border:0;cursor:pointer}
.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(228,233,241,.86);backdrop-filter:blur(16px)}
.nav-shell{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:235px}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;color:white;border-radius:12px;background:linear-gradient(135deg,var(--violet),var(--mint));box-shadow:0 10px 22px rgba(115,87,223,.25)}
.brand-name{font-size:16px;font-weight:900;white-space:nowrap}
nav{display:flex;align-items:center;gap:6px}
nav a{position:relative;padding:10px 13px;color:#5d6679;font-size:14px;font-weight:700;border-radius:9px;transition:.25s ease}
nav a:hover,nav a.active{color:var(--violet-dark);background:#f0edff}
nav a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:var(--violet)}
.nav-search{display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--muted);border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.nav-search input{width:120px;border:0;outline:0;color:var(--ink);background:transparent}
.menu-toggle{display:none;padding:10px;color:var(--ink);background:transparent;font-size:20px}
.page-hero{position:relative;overflow:hidden;padding:84px 0 72px;background:linear-gradient(120deg,#f5f1ff 0%,#eef9f6 100%);border-bottom:1px solid var(--line)}
.page-hero:after{content:"";position:absolute;right:-100px;top:-150px;width:430px;height:430px;border:1px solid rgba(115,87,223,.12);border-radius:50%;box-shadow:0 0 0 45px rgba(115,87,223,.035),0 0 0 90px rgba(55,182,154,.025)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:72px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--violet);font-size:12px;font-weight:800;letter-spacing:1.6px}
.eyebrow:before{content:"";width:22px;height:3px;border-radius:4px;background:var(--mint)}
.page-hero h1{max-width:650px;margin:16px 0 16px;font-size:clamp(38px,5vw,64px);line-height:1.16;letter-spacing:0}
.page-hero h1 em{color:var(--violet);font-style:normal}
.hero-copy{max-width:650px;margin:0;color:var(--muted);font-size:17px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border-radius:11px;font-weight:800;transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:#fff;background:var(--violet);box-shadow:0 12px 26px rgba(115,87,223,.28)}
.btn-primary:hover{background:var(--violet-dark);box-shadow:0 15px 30px rgba(115,87,223,.35)}
.btn-light{color:var(--violet-dark);background:#fff;border:1px solid var(--line)}
.btn-light:hover{border-color:#cfc5ff;box-shadow:var(--shadow)}
.hero-poster{position:relative;min-height:330px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:#252941}
.hero-poster img{height:330px;opacity:.82}
.poster-overlay{position:absolute;inset:0;padding:26px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:linear-gradient(180deg,rgba(17,24,45,.08),rgba(17,24,45,.8))}
.poster-top{display:flex;justify-content:space-between;align-items:center}
.live-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:20px;color:#fff;background:rgba(217,107,114,.9);font-size:12px;font-weight:800}
.live-badge i{font-size:8px}
.poster-meta{display:flex;gap:8px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:8px;color:var(--violet-dark);background:#f0edff;font-size:12px;font-weight:800}
.badge.mint{color:#19836d;background:#e3f7f1}
.badge.gold{color:#9c681e;background:#fff2d8}
.poster-content h2{margin:0 0 5px;font-size:27px;line-height:1.25}
.poster-content p{margin:0;color:rgba(255,255,255,.78)}
section{padding:82px 0}
.section-soft{background:var(--soft)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.section-head h2{margin:8px 0 0;font-size:clamp(26px,3vw,38px);line-height:1.25}
.section-head p{max-width:580px;margin:8px 0 0;color:var(--muted)}
.text-link{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;color:var(--violet-dark);font-weight:700}
.text-link:hover{color:var(--mint)}
.channel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.channel-card{position:relative;min-height:205px;padding:27px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;box-shadow:0 8px 28px rgba(31,43,75,.045);transition:.25s ease}
.channel-card:hover{transform:translateY(-5px);border-color:#cfc5ff;box-shadow:var(--shadow-hover)}
.channel-icon{display:grid;place-items:center;width:45px;height:45px;margin-bottom:20px;border-radius:13px;color:var(--violet);background:#f0edff;font-size:18px}
.channel-card:nth-child(2n) .channel-icon{color:#19836d;background:#e3f7f1}
.channel-card h3{margin:0 0 8px;font-size:20px}
.channel-card p{margin:0;color:var(--muted);font-size:14px}
.channel-count{position:absolute;right:23px;top:26px;color:#a1a9b8;font-size:12px;font-weight:800}
.feature-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:30px;align-items:stretch}
.feature-panel{position:relative;min-height:355px;padding:34px;border-radius:var(--radius-lg);overflow:hidden;color:#fff;background:linear-gradient(145deg,#29244f,#604cbd)}
.feature-panel:after{content:"";position:absolute;right:-55px;bottom:-85px;width:260px;height:260px;border:1px solid rgba(255,255,255,.2);border-radius:50%;box-shadow:0 0 0 35px rgba(255,255,255,.06),0 0 0 70px rgba(255,255,255,.04)}
.feature-panel h3{position:relative;z-index:1;max-width:330px;margin:20px 0 12px;font-size:31px;line-height:1.3}
.feature-panel p{position:relative;z-index:1;max-width:340px;margin:0;color:rgba(255,255,255,.75)}
.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.feature-item{padding:22px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff}
.feature-item strong{display:block;margin-bottom:7px;font-size:18px}
.feature-item p{margin:0;color:var(--muted);font-size:14px}
.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.media-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;transition:.25s ease}
.media-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.media-card img{height:175px}
.media-body{padding:16px}
.media-body h3{margin:0 0 6px;font-size:16px;line-height:1.4}
.media-body p{margin:0;color:var(--muted);font-size:13px}
.media-footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.rating{color:#b67a20;font-weight:800;font-size:13px}
.rating i{margin-right:3px}
.rank-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:30px}
.rank-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.rank-item{display:grid;grid-template-columns:38px 1fr auto auto;align-items:center;gap:16px;padding:15px 4px;border-bottom:1px solid var(--line)}
.rank-num{color:#a2aaba;font-size:18px;font-weight:900}
.rank-item:nth-child(-n+3) .rank-num{color:var(--violet)}
.rank-title{font-weight:800}
.rank-title small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.rank-hot{color:#d96b72;font-size:13px;font-weight:800}
.rank-score{color:var(--violet-dark);font-weight:900}
.quote-panel{padding:34px;border-radius:var(--radius-lg);background:#f0edff;border:1px solid #ddd6ff}
.quote-panel i{color:var(--violet);font-size:26px}
.quote-panel blockquote{margin:20px 0;font-size:20px;font-weight:800;line-height:1.55}
.quote-panel p{margin:0;color:var(--muted);font-size:14px}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.faq-item{padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff}
.faq-item h3{display:flex;align-items:flex-start;gap:12px;margin:0 0 8px;font-size:16px}
.faq-item h3 i{margin-top:5px;color:var(--mint)}
.faq-item p{margin:0;color:var(--muted);font-size:14px}
.cta-band{padding:56px 0;background:linear-gradient(120deg,#252143,#4a3b9a);color:#fff}
.cta-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta-wrap h2{margin:0 0 8px;font-size:32px}
.cta-wrap p{margin:0;color:rgba(255,255,255,.72)}
.cta-band .btn-light{border:0}
footer{padding:62px 0 0;background:#171d2d;color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:42px}
.footer-brand .brand-name{color:#fff}
.footer-brand p{max-width:340px;margin:18px 0 0;color:#aeb6c7;font-size:14px}
footer h3{margin:4px 0 16px;font-size:15px}
footer a:not(.brand){display:block;margin:9px 0;color:#aeb6c7;font-size:14px;transition:.2s}
footer a:not(.brand):hover{color:#a9f1dc}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:48px;padding:21px 0;border-top:1px solid rgba(255,255,255,.12);color:#8e98ab;font-size:12px}
:focus-visible{outline:3px solid rgba(55,182,154,.55);outline-offset:3px}
@media(max-width:1024px){
 .hero-grid,.feature-layout,.rank-layout{gap:28px}
 .media-grid{grid-template-columns:repeat(3,1fr)}
 .nav-search{display:none}
}
@media(max-width:768px){
 .container{width:min(var(--container),calc(100% - 32px))}
 .nav-shell{min-height:68px}
 .brand{min-width:0}
 .brand-name{font-size:14px}
 .menu-toggle{display:block}
 nav{display:none;position:absolute;left:16px;right:16px;top:76px;flex-direction:column;align-items:stretch;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow)}
 nav.open{display:flex}
 nav a{padding:12px 14px}
 .hero-grid,.feature-layout,.rank-layout{grid-template-columns:1fr}
 .page-hero{padding:60px 0 52px}
 .hero-poster{min-height:280px}
 .hero-poster img{height:280px}
 .channel-grid{grid-template-columns:repeat(2,1fr)}
 .media-grid{grid-template-columns:repeat(2,1fr)}
 .section-head{display:block}
 .section-head .text-link{margin-top:15px}
 .cta-wrap{display:block}
 .cta-wrap .btn{margin-top:22px}
 .footer-grid{grid-template-columns:repeat(2,1fr);gap:28px}
}
@media(max-width:520px){
 .page-hero h1{font-size:38px}
 .hero-copy{font-size:15px}
 .hero-actions .btn{width:100%}
 .channel-grid,.media-grid,.feature-list,.faq-grid{grid-template-columns:1fr}
 section{padding:58px 0}
 .rank-item{grid-template-columns:28px 1fr auto;gap:10px}
 .rank-hot{display:none}
 .footer-grid{grid-template-columns:1fr}
 .footer-bottom{display:block}
 .footer-bottom span{display:block;margin:7px 0}
}