/* roulang page: index */
:root {
            --berry-950: #241321;
            --berry-900: #35172d;
            --berry-800: #4b1e3f;
            --berry-700: #67254d;
            --berry-600: #82305a;
            --berry-100: #f4e9f0;
            --amber-500: #d9953d;
            --amber-300: #f0c477;
            --cream: #fbf8f4;
            --paper: #fffdfa;
            --ink: #302932;
            --muted: #786e78;
            --line: #e9dfe2;
            --mint: #d8ebe3;
            --radius-lg: 24px;
            --radius-md: 16px;
            --shadow-soft: 0 16px 40px rgba(57, 24, 44, .08);
            --shadow-hover: 0 20px 44px rgba(57, 24, 44, .15);
            --ease: 220ms ease;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--cream);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            font-size: 16px;
            line-height: 1.78;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; transition: color var(--ease), background var(--ease), border-color var(--ease), transform var(--ease); }
        img { max-width: 100%; display: block; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        .container { max-width: 1200px; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--berry-700);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .08em;
        }
        .eyebrow::before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--amber-500);
        }
        .section-heading { max-width: 690px; margin-bottom: 34px; }
        .section-heading h2 {
            margin: 10px 0 12px;
            color: var(--berry-950);
            font-size: clamp(28px, 4vw, 43px);
            line-height: 1.25;
            letter-spacing: -.04em;
            font-weight: 800;
        }
        .section-heading p { margin: 0; color: var(--muted); max-width: 650px; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(255,253,250,.96);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(12px);
        }
        .topbar {
            min-height: 76px;
            display: flex;
            align-items: center;
            gap: 24px;
        }
        .brand {
            flex: 0 0 auto;
            color: var(--berry-950);
            font-size: 19px;
            line-height: 1.2;
            font-weight: 900;
            letter-spacing: -.04em;
        }
        .brand span { color: var(--amber-500); }
        .search-box {
            display: flex;
            align-items: center;
            flex: 1 1 440px;
            max-width: 520px;
            margin-left: auto;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #fff;
            overflow: hidden;
            transition: border-color var(--ease), box-shadow var(--ease);
        }
        .search-box:focus-within {
            border-color: var(--berry-600);
            box-shadow: 0 0 0 4px rgba(103,37,77,.12);
        }
        .search-box input {
            width: 100%;
            min-height: 44px;
            border: 0;
            outline: 0;
            padding: 9px 14px;
            color: var(--ink);
            background: transparent;
        }
        .search-box input::placeholder { color: #a49aa1; }
        .search-button {
            width: 48px;
            height: 44px;
            border: 0;
            color: var(--berry-800);
            background: transparent;
            font-size: 19px;
        }
        .search-button:hover { color: var(--amber-500); background: var(--berry-100); }
        .btn-main, .btn-light, .btn-small {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            min-height: 46px;
            padding: 10px 20px;
            border-radius: 10px;
            border: 1px solid transparent;
            font-size: 14px;
            font-weight: 800;
            transition: transform var(--ease), background var(--ease), box-shadow var(--ease), color var(--ease);
        }
        .btn-main {
            color: #fff;
            background: var(--berry-800);
            box-shadow: 0 8px 18px rgba(75,30,63,.18);
        }
        .btn-main:hover { color: #fff; background: var(--berry-950); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
        .btn-light { color: var(--berry-800); border-color: #cdb9c5; background: rgba(255,255,255,.55); }
        .btn-light:hover { color: var(--berry-950); border-color: var(--berry-700); background: #fff; transform: translateY(-2px); }
        .btn-main:focus-visible, .btn-light:focus-visible, .btn-small:focus-visible, .tab-link:focus-visible, input:focus-visible {
            outline: 3px solid var(--amber-300);
            outline-offset: 3px;
        }
        .btn-main:active, .btn-light:active { transform: translateY(0); }
        .channel-bar {
            border-top: 1px solid #f0e8e9;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .channel-bar::-webkit-scrollbar { display: none; }
        .channels { display: flex; gap: 8px; min-width: max-content; padding: 9px 0; }
        .tab-link {
            display: inline-flex;
            align-items: center;
            min-height: 38px;
            padding: 6px 16px;
            border: 1px solid transparent;
            border-radius: 30px;
            color: var(--muted);
            font-size: 13px;
            white-space: nowrap;
        }
        .tab-link:hover { color: var(--berry-800); background: var(--berry-100); }
        .tab-link.active { color: #fff; background: var(--berry-800); box-shadow: 0 5px 12px rgba(75,30,63,.16); }

        .hero {
            position: relative;
            padding: 78px 0 68px;
            background:
                radial-gradient(circle at 83% 20%, rgba(217,149,61,.16), transparent 23%),
                linear-gradient(135deg, #f8eef1 0%, #fbf8f4 62%);
            border-bottom: 1px solid var(--line);
        }
        .hero::after {
            content: "";
            position: absolute;
            right: 5%;
            bottom: 24px;
            width: 110px;
            height: 110px;
            border: 1px solid rgba(103,37,77,.16);
            border-radius: 50%;
        }
        .hero-copy { max-width: 720px; }
        .hero h1 {
            margin: 15px 0 20px;
            color: var(--berry-950);
            font-size: clamp(38px, 6vw, 70px);
            line-height: 1.16;
            letter-spacing: -.065em;
            font-weight: 900;
        }
        .hero h1 em { color: var(--berry-700); font-style: normal; }
        .hero-lead { max-width: 680px; margin-bottom: 26px; color: #605660; font-size: 17px; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
        .hero-notes { display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--muted); font-size: 13px; }
        .hero-notes strong { color: var(--berry-800); font-size: 20px; margin-right: 5px; }
        .hero-stage {
            position: relative;
            min-height: 210px;
            margin-top: 48px;
            padding: 22px;
            border-radius: var(--radius-lg);
            color: #fff;
            background: var(--berry-950);
            box-shadow: var(--shadow-soft);
            overflow: hidden;
        }
        .hero-stage::before, .hero-stage::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(240,196,119,.4);
        }
        .hero-stage::before { width: 260px; height: 260px; right: -70px; top: -120px; }
        .hero-stage::after { width: 150px; height: 150px; right: 20px; top: -65px; }
        .stage-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; }
        .stage-label { color: var(--amber-300); font-size: 12px; font-weight: 800; }
        .stage-date { color: #ccbfc8; font-size: 12px; }
        .stage-title { position: relative; z-index: 1; max-width: 420px; margin-top: 56px; font-size: 25px; line-height: 1.35; font-weight: 800; }
        .stage-line { position: absolute; left: 22px; right: 22px; bottom: 20px; height: 5px; border-radius: 5px; background: #5b3c55; }
        .stage-line span { display: block; width: 72%; height: 100%; border-radius: 5px; background: var(--amber-500); }

        .section { padding: 82px 0; }
        .stats-band { padding: 24px 0; background: var(--berry-900); color: #fff; }
        .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
        .stat { padding: 8px 28px; border-right: 1px solid rgba(255,255,255,.15); }
        .stat:last-child { border-right: 0; }
        .stat-number { color: var(--amber-300); font-size: 34px; line-height: 1.2; font-weight: 900; }
        .stat-label { margin-top: 3px; font-size: 14px; font-weight: 800; }
        .stat small { color: #c8b9c4; font-size: 12px; }

        .matrix { background: var(--paper); }
        .matrix-grid { display: grid; grid-template-columns: 1.35fr .85fr .85fr; grid-template-rows: 1fr 1fr; gap: 16px; }
        .content-card {
            position: relative;
            min-height: 178px;
            padding: 24px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: #fff;
            overflow: hidden;
            transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
        }
        .content-card:hover { transform: translateY(-4px); border-color: #c7aabb; box-shadow: var(--shadow-hover); }
        .content-card.featured { grid-row: span 2; min-height: 372px; color: #fff; background: var(--berry-800); border-color: var(--berry-800); }
        .content-card.featured::after { content: "▶"; position: absolute; right: 25px; bottom: 22px; display: grid; place-items: center; width: 48px; height: 48px; color: var(--berry-950); background: var(--amber-300); border-radius: 50%; }
        .card-index { color: var(--amber-500); font-size: 12px; font-weight: 900; }
        .featured .card-index { color: var(--amber-300); }
        .card-title { margin: 25px 0 9px; font-size: 23px; line-height: 1.35; font-weight: 800; }
        .content-card:not(.featured) .card-title { margin-top: 15px; font-size: 18px; }
        .card-text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
        .featured .card-text { max-width: 330px; color: #e4d7df; }
        .card-tag { display: inline-block; padding: 3px 9px; color: var(--berry-700); background: var(--berry-100); border-radius: 20px; font-size: 11px; font-weight: 800; }
        .featured .card-tag { color: var(--berry-950); background: var(--amber-300); }

        .time-section { background: #f3ecee; }
        .time-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
        .time-card { padding: 25px; border-top: 4px solid var(--berry-700); background: var(--paper); border-radius: 14px; box-shadow: 0 8px 24px rgba(75,30,63,.05); }
        .time-card:nth-child(2) { border-top-color: var(--amber-500); }
        .time-card:nth-child(3) { border-top-color: #669487; }
        .time-card h3 { margin: 13px 0 8px; color: var(--berry-950); font-size: 20px; }
        .time-card p { margin: 0; color: var(--muted); font-size: 14px; }
        .time-meta { display: flex; justify-content: space-between; color: var(--berry-700); font-size: 12px; font-weight: 800; }

        .compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
        .compare-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
        .compare-card.after { color: #fff; background: var(--berry-900); border-color: var(--berry-900); }
        .compare-card h3 { margin: 12px 0 10px; font-size: 20px; }
        .compare-card p { margin: 0; color: var(--muted); font-size: 14px; }
        .after p { color: #dbcbd6; }
        .compare-mark { align-self: center; color: var(--amber-500); font-size: 25px; font-weight: 900; }

        .info-section { background: var(--paper); }
        .info-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 38px; }
        .info-list { border-top: 1px solid var(--line); }
        .info-item { display: flex; justify-content: space-between; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
        .info-item a { color: var(--berry-900); font-weight: 800; }
        .info-item a:hover { color: var(--amber-500); }
        .info-item small { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
        .recommend {
            padding: 27px;
            color: #fff;
            border-radius: var(--radius-lg);
            background: var(--berry-800);
        }
        .recommend h3 { margin: 12px 0 10px; font-size: 23px; }
        .recommend p { color: #e7d8e0; font-size: 14px; }
        .recommend .btn-light { color: #fff; border-color: rgba(255,255,255,.55); }

        .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
        .faq-intro p { color: var(--muted); }
        .accordion-item { border: 0; border-bottom: 1px solid var(--line); background: transparent; }
        .accordion-button { padding: 20px 4px; color: var(--berry-950); background: transparent; box-shadow: none !important; font-weight: 800; }
        .accordion-button:not(.collapsed) { color: var(--berry-700); background: transparent; }
        .accordion-button::after { background-size: 14px; }
        .accordion-body { padding: 0 30px 20px 4px; color: var(--muted); font-size: 14px; }

        .cta-section { padding: 70px 0; background: var(--berry-100); }
        .cta-box { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 38px 42px; border: 1px solid #decbd5; border-radius: var(--radius-lg); background: var(--paper); }
        .cta-box h2 { margin: 9px 0 8px; color: var(--berry-950); font-size: 31px; line-height: 1.3; }
        .cta-box p { margin: 0; color: var(--muted); }
        .feedback-form { display: flex; min-width: 380px; gap: 8px; }
        .feedback-form input { min-width: 0; flex: 1; height: 46px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
        .feedback-form input:focus { border-color: var(--berry-600); outline: 3px solid rgba(103,37,77,.13); }

        .site-footer { padding: 48px 0 24px; color: #cdbfc9; background: var(--berry-950); }
        .footer-grid { display: grid; grid-template-columns: 1.35fr .8fr .8fr; gap: 40px; padding-bottom: 34px; }
        .footer-brand { color: #fff; font-size: 20px; font-weight: 900; }
        .footer-brand span { color: var(--amber-300); }
        .footer-copy { max-width: 360px; margin: 14px 0 0; font-size: 13px; line-height: 1.8; }
        .footer-title { margin-bottom: 12px; color: var(--amber-300); font-size: 13px; font-weight: 800; }
        .footer-links { display: grid; gap: 7px; font-size: 13px; }
        .footer-links a:hover { color: var(--amber-300); }
        .copyright { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.13); font-size: 12px; color: #a998a5; }

        @media (max-width: 991px) {
            .topbar { gap: 14px; flex-wrap: wrap; padding: 14px 0; }
            .search-box { order: 3; flex-basis: 100%; max-width: none; }
            .hero { padding-top: 58px; }
            .matrix-grid { grid-template-columns: 1fr 1fr; }
            .content-card.featured { grid-row: auto; grid-column: span 2; min-height: 260px; }
            .info-layout, .faq-grid { grid-template-columns: 1fr; gap: 30px; }
        }
        @media (max-width: 767px) {
            .container { padding-left: 18px; padding-right: 18px; }
            .topbar { min-height: auto; }
            .brand { font-size: 16px; max-width: 210px; }
            .topbar .btn-main { padding: 9px 12px; font-size: 12px; }
            .hero { padding: 48px 0 42px; }
            .hero h1 { font-size: 42px; }
            .hero-lead { font-size: 15px; }
            .hero-stage { margin-top: 32px; }
            .section { padding: 58px 0; }
            .stats-grid { grid-template-columns: repeat(2,1fr); }
            .stat { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.15); }
            .stat:nth-child(2) { border-right: 0; }
            .matrix-grid, .time-grid, .compare-grid { grid-template-columns: 1fr; }
            .content-card.featured { grid-column: auto; min-height: 270px; }
            .compare-mark { transform: rotate(90deg); }
            .cta-box { display: block; padding: 28px 22px; }
            .feedback-form { min-width: 0; margin-top: 22px; flex-direction: column; }
            .feedback-form .btn-main { width: 100%; }
            .footer-grid { grid-template-columns: 1fr; gap: 24px; }
        }
        @media (max-width: 420px) {
            .hero h1 { font-size: 36px; }
            .hero-actions .btn-main, .hero-actions .btn-light { width: 100%; }
            .hero-notes { display: grid; gap: 6px; }
        }

/* roulang page: category1 */
:root {
      --berry-950:#241321;--berry-900:#35172d;--berry-800:#4b1e3f;--berry-700:#67254d;
      --berry-600:#82305a;--berry-100:#f4e9f0;--amber-500:#d9953d;--amber-300:#f0c477;
      --cream:#fbf8f4;--paper:#fffdfa;--ink:#302932;--muted:#786e78;--line:#e9dfe2;
      --mint:#d8ebe3;--radius-lg:24px;--radius-md:16px;
      --shadow-soft:0 16px 40px rgba(57,24,44,.08);--shadow-hover:0 20px 44px rgba(57,24,44,.15);
      --ease:220ms ease;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--cream);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:16px;line-height:1.78;overflow-x:hidden}
    a{color:inherit;text-decoration:none;transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease)}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{max-width:1200px}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(255,253,250,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
    .topbar{min-height:76px;display:flex;align-items:center;gap:24px}
    .brand{flex:0 0 auto;color:var(--berry-950);font-size:19px;line-height:1.2;font-weight:900;letter-spacing:-.04em}
    .brand span,.footer-brand span{color:var(--amber-500)}
    .search-box{display:flex;align-items:center;flex:1 1 440px;max-width:520px;margin-left:auto;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;transition:border-color var(--ease),box-shadow var(--ease)}
    .search-box:focus-within{border-color:var(--berry-600);box-shadow:0 0 0 4px rgba(103,37,77,.12)}
    .search-box input{width:100%;min-height:44px;border:0;outline:0;padding:9px 14px;color:var(--ink);background:transparent}
    .search-box input::placeholder{color:#a49aa1}
    .search-button{width:48px;height:44px;border:0;color:var(--berry-800);background:transparent;font-size:19px}
    .search-button:hover{color:var(--amber-500);background:var(--berry-100)}
    .btn-main,.btn-light,.btn-small{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:10px 20px;border-radius:10px;border:1px solid transparent;font-size:14px;font-weight:800;transition:transform var(--ease),background var(--ease),box-shadow var(--ease),color var(--ease)}
    .btn-main{color:#fff;background:var(--berry-800);box-shadow:0 8px 18px rgba(75,30,63,.18)}
    .btn-main:hover{color:#fff;background:var(--berry-950);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
    .btn-light{color:var(--berry-800);border-color:#cdb9c5;background:rgba(255,255,255,.55)}
    .btn-light:hover{color:var(--berry-950);border-color:var(--berry-700);background:#fff;transform:translateY(-2px)}
    .btn-main:focus-visible,.btn-light:focus-visible,.btn-small:focus-visible,.tab-link:focus-visible,input:focus-visible,.filter-select:focus-visible{outline:3px solid var(--amber-300);outline-offset:3px}
    .btn-main:active,.btn-light:active,.btn-small:active{transform:translateY(0)}
    .channel-bar{border-top:1px solid #f1e9ea}
    .channels{display:flex;gap:8px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
    .channels::-webkit-scrollbar{display:none}
    .tab-link{white-space:nowrap;padding:7px 16px;border-radius:999px;color:var(--muted);font-size:14px;font-weight:700}
    .tab-link:hover{color:var(--berry-800);background:var(--berry-100)}
    .tab-link.active{color:#fff;background:var(--berry-800);box-shadow:0 5px 12px rgba(75,30,63,.18)}
    .page-intro{padding:68px 0 46px;background:linear-gradient(135deg,#f8eef1 0%,#fbf8f4 68%);border-bottom:1px solid var(--line)}
    .crumbs{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:25px}
    .crumbs a:hover{color:var(--berry-700)}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--berry-700);font-size:12px;font-weight:800;letter-spacing:.08em}
    .eyebrow::before{content:"";width:24px;height:2px;background:var(--amber-500)}
    .page-intro h1{max-width:760px;margin:13px 0 15px;color:var(--berry-950);font-size:clamp(36px,5vw,62px);line-height:1.2;letter-spacing:-.06em;font-weight:900}
    .page-intro h1 em{font-style:normal;color:var(--berry-700)}
    .intro-text{max-width:700px;margin:0;color:#625761;font-size:17px}
    .intro-meta{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:26px;color:var(--muted);font-size:13px}
    .intro-meta strong{color:var(--berry-800);font-size:18px;margin-right:5px}
    .section{padding:72px 0}
    .section-heading{max-width:700px;margin-bottom:30px}
    .section-heading h2{margin:10px 0 12px;color:var(--berry-950);font-size:clamp(28px,4vw,42px);line-height:1.25;letter-spacing:-.04em;font-weight:800}
    .section-heading p{margin:0;color:var(--muted);max-width:650px}
    .filter-panel{padding:18px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper);box-shadow:var(--shadow-soft)}
    .filter-label{display:block;margin-bottom:7px;color:var(--berry-800);font-size:12px;font-weight:800}
    .filter-input,.filter-select{width:100%;min-height:46px;padding:9px 13px;border:1px solid var(--line);border-radius:10px;outline:0;background:#fff;color:var(--ink)}
    .filter-input:focus,.filter-select:focus{border-color:var(--berry-600);box-shadow:0 0 0 4px rgba(103,37,77,.1)}
    .filter-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
    .filter-tag,.badge-soft{display:inline-flex;align-items:center;padding:5px 11px;border:1px solid #ddcbd4;border-radius:999px;color:var(--berry-700);background:var(--berry-100);font-size:12px;font-weight:700}
    .filter-tag:hover,.filter-tag.active{color:#fff;background:var(--berry-700);border-color:var(--berry-700)}
    .feature-card{height:100%;display:grid;grid-template-columns:1.08fr 1fr;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);box-shadow:var(--shadow-soft);transition:transform var(--ease),box-shadow var(--ease)}
    .feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
    .cover{position:relative;min-height:330px;overflow:hidden;background:linear-gradient(145deg,var(--berry-950),var(--berry-700) 55%,var(--amber-500))}
    .cover::before{content:"";position:absolute;inset:16px;border:1px solid rgba(255,255,255,.28);border-radius:18px}
    .cover::after{content:"";position:absolute;width:170px;height:170px;right:-35px;bottom:-45px;border:25px solid rgba(255,255,255,.13);border-radius:50%}
    .cover-word{position:absolute;left:28px;bottom:30px;color:#fff;font-size:42px;line-height:1.15;font-weight:900;letter-spacing:-.08em}
    .cover-mark{position:absolute;top:27px;left:28px;color:var(--amber-300);font-size:12px;font-weight:800;letter-spacing:.13em}
    .play-dot{position:absolute;right:28px;top:28px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:var(--berry-950);background:var(--amber-300);font-size:20px}
    .feature-copy{padding:34px}
    .feature-copy h3{margin:17px 0 12px;color:var(--berry-950);font-size:29px;line-height:1.35;font-weight:850}
    .feature-copy p{color:var(--muted);margin-bottom:24px}
    .content-list{display:flex;flex-direction:column;gap:12px}
    .content-item{display:flex;gap:17px;align-items:center;padding:14px;border-bottom:1px solid var(--line);background:rgba(255,253,250,.55);transition:background var(--ease),transform var(--ease)}
    .content-item:hover{background:#fff;transform:translateX(4px)}
    .mini-cover{flex:0 0 106px;height:76px;display:grid;place-items:end start;padding:10px;border-radius:11px;color:#fff;font-size:12px;font-weight:800;background:linear-gradient(135deg,#5b284c,#be7651)}
    .mini-cover.green{background:linear-gradient(135deg,#294c49,#c09558)}
    .mini-cover.gold{background:linear-gradient(135deg,#6c3c30,#e1ae54)}
    .item-copy{min-width:0;flex:1}
    .item-copy h3{margin:2px 0 4px;overflow:hidden;color:var(--berry-950);font-size:16px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
    .item-copy p{margin:0;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .item-meta{display:flex;gap:12px;color:#978c94;font-size:12px}
    .index-block{padding:30px;border-radius:var(--radius-lg);background:var(--berry-950);color:#fff}
    .index-block h2{margin:0 0 9px;font-size:27px}
    .index-block p{margin:0;color:#d6c7d1;font-size:14px}
    .index-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
    .index-tags a{padding:9px 15px;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#f6e9ee;font-size:14px}
    .index-tags a:hover{border-color:var(--amber-300);color:var(--amber-300);background:rgba(255,255,255,.08)}
    .pagination-wrap{display:flex;justify-content:center;margin-top:34px}
    .pagination .page-link{margin:0 4px;border:1px solid var(--line);border-radius:9px!important;color:var(--berry-800);background:var(--paper)}
    .pagination .page-link:hover{color:#fff;background:var(--berry-700);border-color:var(--berry-700)}
    .pagination .active .page-link{color:#fff;background:var(--berry-800);border-color:var(--berry-800)}
    .pagination .disabled .page-link{color:#b9adb4;background:#f4eff0}
    .faq-area{background:#f3e9ee}
    .accordion-item{margin-bottom:10px;border:1px solid var(--line)!important;border-radius:14px!important;overflow:hidden;background:var(--paper)}
    .accordion-button{padding:19px 21px;color:var(--berry-950);font-weight:800;background:var(--paper);box-shadow:none!important}
    .accordion-button:not(.collapsed){color:var(--berry-700);background:#fff7fa}
    .accordion-button::after{background-size:14px}
    .accordion-body{padding:0 21px 20px;color:var(--muted);font-size:14px}
    .cta{padding:54px 0;background:var(--berry-800);color:#fff}
    .cta-box{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .cta h2{margin:0 0 8px;font-size:32px;line-height:1.3}
    .cta p{max-width:650px;margin:0;color:#ead9e1}
    .cta .btn-light{background:#fff;border-color:#fff}
    .cta .btn-light:hover{background:var(--amber-300);border-color:var(--amber-300);color:var(--berry-950)}
    .site-footer{padding:54px 0 24px;background:var(--berry-950);color:#f8edf2}
    .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:45px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.14)}
    .footer-brand{font-size:20px;font-weight:900;letter-spacing:-.04em}
    .footer-copy{max-width:390px;margin:17px 0 0;color:#c8b7c1;font-size:14px}
    .footer-title{margin-bottom:14px;color:var(--amber-300);font-size:13px;font-weight:800}
    .footer-links{display:flex;flex-direction:column;gap:8px;color:#d4c5cd;font-size:14px}
    .footer-links a:hover{color:var(--amber-300);transform:translateX(3px)}
    .copyright{padding-top:20px;color:#a996a3;font-size:12px}
    .empty-state{display:none;margin-top:18px;padding:30px;text-align:center;border:1px dashed #cdb9c5;border-radius:16px;color:var(--muted);background:var(--paper)}
    @media(max-width:991px){.topbar{gap:15px}.brand{font-size:17px}.search-box{max-width:390px}.feature-card{grid-template-columns:1fr}.cover{min-height:250px}.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
    @media(max-width:767px){.topbar{min-height:66px;flex-wrap:wrap;padding:12px 0;gap:10px}.brand{font-size:16px}.topbar>.btn-main{min-height:40px;padding:7px 12px;font-size:12px}.search-box{order:3;flex-basis:100%;max-width:none}.channel-bar{margin-top:4px}.channels{padding:9px 0}.page-intro{padding:43px 0 36px}.page-intro h1{font-size:39px}.intro-text{font-size:15px}.section{padding:48px 0}.filter-panel{padding:14px}.feature-copy{padding:25px}.feature-copy h3{font-size:25px}.cover{min-height:220px}.cover-word{font-size:34px}.cta-box{display:block}.cta .btn-light{margin-top:22px}.footer-grid{grid-template-columns:1fr;gap:28px;padding-bottom:28px}}
    @media(max-width:520px){.container{padding-left:16px;padding-right:16px}.intro-meta{gap:8px 16px}.content-item{align-items:flex-start}.mini-cover{flex-basis:88px;height:68px}.item-copy h3{font-size:15px}.item-meta{gap:8px}.index-block{padding:23px}.cta h2{font-size:27px}}