/* roulang page: index */
:root{
        --bg:#F4F1E9;
        --bg-soft:#EAE5D8;
        --card:#FFFFFF;
        --ink:#1A211D;
        --ink-soft:#687269;
        --line:#E2DCCF;
        --brand:#123C33;
        --brand-bright:#1E5A4D;
        --gold:#D1A65A;
        --gold-deep:#B78A3F;
        --dark:#0F1410;
        --dark-2:#18231D;
        --radius-lg:24px;
        --radius-md:18px;
        --radius-sm:12px;
        --shadow-1:0 6px 20px rgba(15,20,16,.07);
        --shadow-2:0 14px 40px rgba(15,20,16,.10);
        --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
        margin:0; background:var(--bg); color:var(--ink);
        font-family:var(--font-sans); line-height:1.75; -webkit-font-smoothing:antialiased;
    }
    img { display:block; max-width:100%; }
    a { color:inherit; text-decoration:none; }
    ul,ol { list-style:none; margin:0; padding:0; }
    button,input,select,textarea { font-family:inherit; font-size:inherit; }
    .container-custom { max-width:1200px; margin-inline:auto; padding-inline:clamp(1rem,4vw,2.5rem); }
    .section-pad { padding-block:clamp(4.5rem,9vw,7.5rem); }
    .bg-soft { background:var(--bg-soft); }
    .bg-white { background:#fff; }
    .bg-dark { background:var(--dark); }
    .font-tnum { font-feature-settings:"tnum"; }

    .t-eyebrow {
        display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700;
        letter-spacing:.14em; color:var(--brand); background:rgba(18,60,51,.08);
        border:1px solid rgba(18,60,51,.12); padding:.3rem .9rem; border-radius:999px;
    }
    .t-dark .t-eyebrow { color:var(--gold); background:rgba(209,166,90,.1); border-color:rgba(209,166,90,.25); }
    .t-title { font-size:clamp(2rem,4vw,3.25rem); line-height:1.14; font-weight:800; margin:.6rem 0 0; }
    .t-desc { font-size:1rem; color:var(--ink-soft); max-width:680px; margin-top:.7rem; }
    .t-dark .t-desc { color:rgba(255,255,255,.65); }

    .btn {
        display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
        font-weight:700; border-radius:999px; padding:.8rem 1.6rem; min-height:46px;
        line-height:1; transition:.2s ease; border:1px solid transparent; cursor:pointer;
    }
    .btn i, .btn svg { width:1em; height:1em; }
    .btn-primary { background:var(--gold); color:#14221a; box-shadow:0 4px 0 #b78a3f66; }
    .btn-primary:hover { background:#ddb56b; transform:translateY(-2px); box-shadow:0 8px 0 #b78a3f4d; }
    .btn-primary:active { transform:translateY(0); box-shadow:0 2px 0 #b78a3f66; }
    .btn-dark { background:var(--brand); color:#fff; box-shadow:0 4px 0 #0b241e; }
    .btn-dark:hover { background:var(--brand-bright); transform:translateY(-2px); box-shadow:0 6px 16px rgba(18,60,51,.2); }
    .btn-ghost { background:transparent; color:var(--ink); border-color:#d8d0c0; }
    .btn-ghost:hover { border-color:var(--brand); color:var(--brand); }
    .btn-outline-light { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
    .btn-outline-light:hover { border-color:var(--gold); color:var(--gold); }
    .btn:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }

    .chip { border-radius:999px; font-size:.75rem; line-height:1; padding:.35rem .75rem; font-weight:600; }
    .navbar-wrap { position:fixed; top:0; left:0; right:0; z-index:1000; transition:.25s;}
    .navbar-inner { transition:.25s; background:rgba(244,241,233,.9); backdrop-filter:blur(10px); border-bottom:1px solid transparent;}
    .navbar-wrap.scrolled .navbar-inner { background:rgba(244,241,233,.97); box-shadow:0 6px 20px rgba(15,20,16,.06); border-bottom:1px solid var(--line); }
    .nav-column { display:flex; align-items:center; justify-content:space-between; column-gap:1.2rem; padding:.6rem 0; }
    .brand-logo { display:flex; align-items:center; gap:.55rem; font-weight:900; font-size:1.35rem; color:var(--ink); }
    .brand-logo svg { width:30px; height:30px; }
    .brand-sub { font-weight:600; font-size:.7rem; letter-spacing:.18em; color:var(--ink-soft); }
    .nav-actions { display:flex; align-items:center; gap:.7rem; }
    .searchbox { display:none; align-items:center; background:#ece7db; border:1px solid #e5dfd0; border-radius:999px; padding:.3rem .35rem .3rem .8rem; gap:.3rem; }
    .searchbox input { background:transparent; border:none; outline:none; width:130px; font-size:.9rem; color:var(--ink); }
    .searchbox input::placeholder { color:#a9a291; }
    .searchbox button { background:var(--brand); border:none; color:#fff; border-radius:999px; width:30px; height:30px; display:grid; place-items:center; cursor:pointer; transition:.2s;}
    .searchbox button:hover { background:var(--brand-bright); }
    .chn-nav { display:none; align-items:center; gap:.25rem; padding-block:.3rem; overflow-x:auto; scrollbar-width:none; }
    .chn-nav::-webkit-scrollbar{ display:none;}
    .chn-item { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius:999px; color:var(--ink); font-size:.9rem; font-weight:600; white-space:nowrap; transition:.2s;}
    .chn-item span{ border:none; cursor:default;}
    a.chn-item:hover { background:rgba(18,60,51,.08); color:var(--brand); }
    .chn-item.active { background:var(--dark); color:#fff; box-shadow:0 2px 10px rgba(15,20,16,.14);}
    .chn-coming { font-size:.58rem; background:var(--gold); color:#1a211d; border-radius:99px; padding:.15rem .4rem; line-height:1.4;}
    .menu-btn { display:grid; place-items:center; width:44px;height:44px; border-radius:999px; background:#fff; border:1px solid var(--line); cursor:pointer;}
    #navDrawer { display:none;}
    @media (min-width:1024px){
        .searchbox { display:flex; }
        .menu-btn { display:none; }
        .chn-nav { display:flex; }
        .nav-column { padding:.7rem 0; }
    }
    .drawer { display:none; background:#fff; border-radius:0 0 24px 24px; box-shadow:var(--shadow-2); padding:1rem 1.2rem 1.3rem; position:fixed; left:0;right:0;top:62px; z-index:999; border-top:1px solid var(--line);}
    #navDrawer:checked ~ .drawer { display:block; }
    .drawer a, .drawer button { display:block; width:100%; text-align:left; padding:.75rem .4rem; font-weight:600; border-bottom:1px solid #f0ece2; color:var(--ink); background:none; border-left:none;border-right:none;border-top:none; border-radius:0;}
    .drawer .active { color:var(--brand); }
    .drawer-note { font-size:.8rem; color:var(--ink-soft); padding:.7rem .4rem .2rem; }

    .hero-bg { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; width:100%; height:100%;}
    .hero-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(244,241,233,.3) 0%, rgba(15,20,16,.32) 45%, rgba(15,20,16,.9) 100%);}
    .hero-headline { font-size:clamp(2.75rem,6vw,5rem); line-height:1.06; font-weight:900; letter-spacing:-.01em; }
    .hero-sub { font-size:clamp(1rem,1.8vw,1.25rem); line-height:1.7; max-width:640px; color:rgba(255,255,255,.84); }
    .stage-tag { display:inline-flex; align-items:center; gap:.3rem; font-weight:600; color:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:.35rem .9rem; font-size:.8rem;}

    .bento-card { position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); transition:.25s ease;}
    .bento-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-2);}
    .bento-dark { background:var(--dark); color:#fff; border-color:transparent; }
    .bento-card img { transition: .6s ease; }
    .bento-card:hover img { transform:scale(1.04); }
    .picture-panel { position:relative; overflow:hidden; }
    .picture-panel img { transition: .6s ease; width:100%; height:100%; object-fit:cover;}
    .picture-panel:hover img{ transform:scale(1.03); }

    .scene-img { overflow:hidden; border-radius:var(--radius-lg); position:relative; }
    .scene-img img { aspect-ratio:16 / 10; object-fit:cover; width:100%; transition:.5s ease;}
    .scene-img:hover img { transform:scale(1.03); }
    .time-badge { position:absolute; right:1rem; bottom:1rem; background:rgba(15,20,16,.75); color:#fff; font-size:.75rem; font-weight:700; padding:.3rem .75rem; border-radius:999px; display:inline-flex; align-items:center; gap:.3rem; backdrop-filter:blur(4px);}

    .mini-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:1rem; transition:.2s; }
    .mini-card:hover { box-shadow:var(--shadow-1); border-color:var(--gold); }
    .user-avatar { background:var(--brand); color:#fff; width:48px; height:48px; border-radius:60% 40% 55% 45%/60% 45% 55% 40%; display:grid; place-items:center; font-weight:800; flex:none;}
    .info-row  { display:flex; justify-content:space-between; align-items:flex-start; padding:.75rem .25rem; border-bottom:1px solid #eee9dd; gap:1rem;}
    .info-row:last-child{border:none;}

    .price-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.7rem 1.5rem; position:relative; transition:.2s;}
    .price-card:hover {box-shadow:var(--shadow-2);}
    .price-featured { background:var(--dark); color:#fff; border-color:transparent; padding-top:2.6rem; box-shadow:var(--shadow-2); }
    .price-featured .benefit-item:nth-child(2n){ color:rgba(255,255,255,.75);}
    .benefit-item { display:flex; gap:.5rem; align-items:flex-start; margin:.5rem 0; }
    .benefit-item svg{ width:1rem; height:1rem; margin-top:.25rem; flex:none; color:var(--gold);}
    .price-featured .benefit-item svg {color:var(--gold);}
    .tag-flag { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--gold); color:#17231b; font-size:.75rem; font-weight:800; padding:.3rem 1rem; border-radius:999px; box-shadow:0 2px 8px #d1a65a66; white-space:nowrap;}

    .faq-item summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:1rem .1rem; font-weight:700; font-size:1rem; border-bottom:1px solid var(--line);}
    .faq-item summary::-webkit-details-marker{ display:none; }
    .faq-item[open] summary{ border-bottom-color:transparent;}
    .faq-item summary .ic { transition:.25s; flex:none; width:1.2rem; height:1.2rem;}
    .faq-item[open] summary .ic { transform:rotate(45deg); color:var(--gold);}
    .faq-ans { padding:.2rem .1rem 1.2rem; color:var(--ink-soft); font-size:.95rem;}
    .faq-item{border-bottom:1px solid var(--line);}

    .cta-panel { position:relative; overflow:hidden; border-radius:32px; background:var(--dark); padding:clamp(2.4rem,6vw,4.6rem); color:#fff;}
    .cta-panel .hero-bg { opacity:.4; }
    .cta-panel::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(15,20,16,.2),rgba(15,20,16,.88)); z-index:-1;}

    .footer-dark { background:#0b0f0d; color:rgba(255,255,255,.72); }
    .footer-dark h6 { color:#fff; font-weight:700; font-size:.95rem; }
    .footer-dark a { color:rgba(255,255,255,.65); transition:.2s; }
    .footer-dark a:hover { color:var(--gold); }
    .footer-border { border-top:1px solid rgba(255,255,255,.1); }

    .feed-item { padding:1rem 0; border-bottom:1px solid #efe9db; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
    .feed-item time { color:#aaa08d; font-size:.85rem; }
    .feed-item a { font-weight:600; }
    .feed-item:hover h4{ color:var(--brand);}

    .cat-hero { min-height:55vh; display:flex; align-items:flex-end; position:relative; overflow:hidden; }
    .cat-hero .hero-bg { z-index:-1; }
    .breadcrumb { display:flex; gap:.5rem; font-size:.85rem; color:rgba(255,255,255,.72); }
    .vert-tag { border:1px solid rgba(255,255,255,.4); color:#fff; border-radius:999px; padding:.2rem .6rem; font-size:.7rem;}

    .pagination-simple { display:flex; align-items:center; gap:.5rem; justify-content:center; }
    .pagination-simple button { width:42px;height:42px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink); cursor:pointer;}
    .pagination-simple button:hover{ border-color:var(--gold);color:var(--gold);}
    .tag-filter { display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; padding-block:0.2rem;}
    .tag-filter::-webkit-scrollbar{display:none;}
    .tag-filter span { white-space:nowrap; border-radius:999px; background:#fff; border:1px solid var(--line); padding:.45rem 1rem; font-size:.85rem; font-weight:600; color:var(--ink);}
    .tag-filter span.on { background:var(--dark); border-color:var(--dark); color:#fff;}

    .horiz-scroll { display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:.5rem; scrollbar-width:none;}
    .horiz-scroll::-webkit-scrollbar { display:none; }
    .horiz-card { flex:0 0 78%; scroll-snap-align:start; }
    @media(min-width:760px){ .horiz-card{ flex-basis:38%; }}
    @media(min-width:1100px){.horiz-card{flex-basis:30%;}}

    .medium-card { transition:.2s ease;}
    .medium-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-2);}
    .medium-card .thumb-pad { aspect-ratio:3/2; overflow:hidden;}
    .medium-card .thumb-pad img { transition:.5s ease; width:100%; height:100%; object-fit:cover;}
    .medium-card:hover .thumb-pad img{ transform:scale(1.04);}

    .progression { height:8px; background:#EFE9DD; border-radius:999px; overflow:hidden;}
    .progression span { display:block; height:100%; background:var(--brand); width:0; border-radius:999px;}

    .hidden-fade{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
    .hidden-fade.visible{ opacity:1; transform:none;}
    .stagger > *:nth-child(2) {transition-delay:.08s}
    .stagger > *:nth-child(3) {transition-delay:.16s}
    .stagger > *:nth-child(4){transition-delay:.24s}
    .stagger-vis .observed.visible{ transition-delay:0s;}
    @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;} .hidden-fade{opacity:1;transform:none;} }
    @media (max-width:640px){ .price-featured{ order:-1; } }
    .footer-bottom { font-size:.83rem; color:rgba(255,255,255,.45);}

/* roulang page: category1 */
:root{
        --bg:#F4F1E9;
        --bg-soft:#EAE5D8;
        --card:#FFFFFF;
        --ink:#1A211D;
        --ink-soft:#687269;
        --line:#E2DCCF;
        --brand:#123C33;
        --brand-bright:#1E5A4D;
        --gold:#D1A65A;
        --gold-deep:#B78A3F;
        --dark:#0F1410;
        --dark-2:#18231D;
        --radius-lg:24px;
        --radius-md:18px;
        --radius-sm:12px;
        --shadow-1:0 6px 20px rgba(15,20,16,.07);
        --shadow-2:0 14px 40px rgba(15,20,16,.10);
        --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
    }
    html{scroll-behavior:smooth;}
    body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
    *,*::before,*::after{box-sizing:border-box;}
    img{display:block;max-width:100%;}
    a{color:inherit;text-decoration:none;}
    ul,ol{list-style:none;margin:0;padding:0;}
    button,input,select,textarea{font-family:inherit;font-size:inherit;}
    .container-custom{max-width:1200px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem);}
    .section-pad{padding-block:clamp(4.5rem,9vw,7.5rem);}
    .t-eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;letter-spacing:.14em;color:var(--brand);background:rgba(18,60,51,.08);border:1px solid rgba(18,60,51,.12);padding:.3rem .9rem;border-radius:999px;}
    .t-dark .t-eyebrow{color:var(--gold);background:rgba(209,166,90,.1);border-color:rgba(209,166,90,.25);}
    .t-title{font-size:clamp(2rem,4vw,3.25rem);line-height:1.14;font-weight:800;margin:.6rem 0 0;letter-spacing:-.01em;}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;border-radius:999px;padding:.8rem 1.6rem;min-height:46px;line-height:1;transition:.2s ease;border:1px solid transparent;cursor:pointer;}
    .btn svg,.btn i{width:1em;height:1em;}
    .btn-primary{background:var(--gold);color:#14221a;box-shadow:0 4px 0 #b78a3f66;}
    .btn-primary:hover{background:#ddb56b;transform:translateY(-2px);box-shadow:0 8px 0 #b78a3f4d;}
    .btn-primary:active{transform:translateY(0);box-shadow:0 2px 0 #b78a3f66;}
    .btn-dark{background:var(--brand);color:#fff;box-shadow:0 4px 0 #0b241e;}
    .btn-dark:hover{background:var(--brand-bright);transform:translateY(-2px);box-shadow:0 6px 16px rgba(18,60,51,.2);}
    .btn-ghost{background:transparent;color:var(--ink);border-color:#d8d0c0;}
    .btn-ghost:hover{border-color:var(--brand);color:var(--brand);}
    .btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);}
    .btn-outline-light:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);}
    .btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
    .chip{border-radius:999px;font-size:.75rem;line-height:1;padding:.35rem .75rem;font-weight:600;}

    /* ===== 双层导航 ===== */
    .navbar-wrap{position:fixed;top:0;left:0;right:0;z-index:1000;transition:.25s;}
    .navbar-inner{transition:.25s;background:rgba(244,241,233,.9);backdrop-filter:blur(12px);border-bottom:1px solid transparent;}
    .navbar-wrap.scrolled .navbar-inner{background:rgba(244,241,233,.97);box-shadow:0 6px 20px rgba(15,20,16,.06);border-bottom:1px solid var(--line);}
    .nav-column{display:flex;align-items:center;justify-content:space-between;column-gap:1.2rem;padding:.6rem 0;}
    .brand-logo{display:flex;align-items:center;gap:.55rem;font-weight:900;font-size:1.35rem;color:var(--ink);}
    .brand-logo svg{width:30px;height:30px;}
    .brand-sub{font-weight:600;font-size:.7rem;letter-spacing:.18em;color:var(--ink-soft);}
    .nav-actions{display:flex;align-items:center;gap:.7rem;}
    .searchbox{display:none;align-items:center;background:#ece7db;border:1px solid #e5dfd0;border-radius:999px;padding:.3rem .35rem .3rem .8rem;gap:.3rem;}
    .searchbox input{background:transparent;border:none;outline:none;width:130px;font-size:.9rem;color:var(--ink);}
    .searchbox input::placeholder{color:#a9a291;}
    .searchbox button{background:var(--brand);border:none;color:#fff;border-radius:999px;width:30px;height:30px;display:grid;place-items:center;cursor:pointer;transition:.2s;}
    .searchbox button:hover{background:var(--brand-bright);}
    .chn-nav{display:none;align-items:center;gap:.25rem;padding-block:.3rem;overflow-x:auto;scrollbar-width:none;}
    .chn-nav::-webkit-scrollbar{display:none;}
    .chn-item{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:999px;color:var(--ink);font-size:.9rem;font-weight:600;white-space:nowrap;transition:.2s;}
    .chn-item span{border:none;cursor:default;}
    a.chn-item:hover{background:rgba(18,60,51,.08);color:var(--brand);}
    .chn-item.active{background:var(--dark);color:#fff;box-shadow:0 2px 10px rgba(15,20,16,.14);}
    .menu-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:#fff;border:1px solid var(--line);cursor:pointer;}
    #navDrawer{display:none;}
    .drawer{display:none;background:#fff;border-radius:0 0 24px 24px;box-shadow:var(--shadow-2);padding:1rem 1.2rem 1.3rem;position:fixed;left:0;right:0;top:64px;z-index:999;border-top:1px solid var(--line);}
    #navDrawer:checked ~ .drawer{display:block;}
    .drawer a,.drawer button{display:block;width:100%;text-align:left;padding:.75rem .4rem;font-weight:600;border-bottom:1px solid #f0ece2;color:var(--ink);background:none;border-radius:0;}
    .drawer .active{color:var(--brand);}
    .drawer-note{font-size:.8rem;color:var(--ink-soft);padding:.7rem .4rem .2rem;}
    .chn-coming{font-size:.65rem;font-weight:600;background:#eae5d8;color:#7b7f78;border-radius:999px;padding:.15rem .5rem;}
    @media (min-width:1024px){
        .menu-btn{display:none;}
        .searchbox{display:flex;}
        .chn-nav{display:flex;}
        .drawer{display:none!important;}
        .nav-column{padding:.7rem 0;}
        .navbar-wrap.scrolled .nav-column{display:none;}
        .navbar-wrap.scrolled .chn-nav{justify-content:center;padding:.6rem 0 .55rem;}
    }

    /* ===== 分类页 Hero ===== */
    .cat-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(420px,55vh,620px);color:#fff;overflow:hidden;padding:clamp(6.5rem,10vw,8rem) 0 clamp(2.6rem,5vw,4rem);}
    .cat-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
    .cat-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(75deg,rgba(10,14,11,.92) 0%,rgba(15,20,16,.55) 48%,rgba(15,20,16,.28) 100%);}
    .cat-hero-inner{position:relative;z-index:2;max-width:800px;}
    .cat-hero .t-eyebrow{color:var(--gold);background:rgba(209,166,90,.1);border-color:rgba(209,166,90,.3);}
    .cat-hero h1{font-size:clamp(2.5rem,5vw,4.1rem);line-height:1.08;font-weight:900;margin:.9rem 0 1rem;letter-spacing:-.01em;}
    .cat-hero-desc{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.75;max-width:660px;color:rgba(255,255,255,.86);}
    .hero-note-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;align-items:center;}
    .hero-note-badges .meta-chip{font-size:.75rem;font-weight:600;padding:.35rem .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:rgba(255,255,255,.9);}
    .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8rem;color:rgba(255,255,255,.68);font-weight:500;margin-bottom:.4rem;}
    .breadcrumb a:hover{color:var(--gold);}

    /* ===== 频道筛选条 ===== */
    .filter-sticky{position:sticky;top:0;z-index:90;background:rgba(244,241,233,.85);backdrop-filter:blur(12px);border-block:1px solid var(--line);}
    .filter-scroll{display:flex;gap:.6rem;overflow-x:auto;padding:.9rem clamp(1rem,4vw,2.5rem);scrollbar-width:none;max-width:1200px;margin-inline:auto;}
    .filter-scroll::-webkit-scrollbar{display:none;}
    .filter-tag{display:inline-flex;align-items:center;white-space:nowrap;background:#fff;border:1px solid var(--line);color:var(--ink-soft);font-weight:600;font-size:.85rem;padding:.42rem 1rem;border-radius:999px;transition:.2s;cursor:pointer;}
    .filter-tag:hover{border-color:var(--brand);color:var(--brand);background:#fff;}
    .filter-tag.active{background:var(--dark);border-color:var(--dark);color:#fff;box-shadow:0 3px 12px rgba(15,20,16,.16);}

    /* ===== 通用卡片 ===== */
    .post-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.3s cubic-bezier(.2,.7,.2,1);}
    .post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);}
    .post-card .media{position:relative;overflow:hidden;background:#dfdbcc;}
    .post-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
    .post-card:hover .media img{transform:scale(1.04);}
    .post-card-body{padding:1.1rem 1.2rem 1.25rem;}
    .card-title{font-weight:800;font-size:1.05rem;line-height:1.5;}
    .card-meta{display:flex;align-items:center;gap:.8rem;font-size:.75rem;color:var(--ink-soft);font-weight:500;margin-top:.5rem;}

    .badge-tag{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;letter-spacing:.05em;line-height:1;border-radius:999px;padding:.32rem .65rem;}
    .badge-gold{background:rgba(209,166,90,.14);color:#8b6a2f;border:1px solid rgba(209,166,90,.25);}
    .badge-brand{background:rgba(18,60,51,.1);color:var(--brand);border:1px solid rgba(18,60,51,.15);}
    .badge-light{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.25);}
    .play-dot{width:34px;height:34px;border-radius:999px;background:rgba(15,20,16,.55);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;transition:.3s;}
    .post-card:hover .play-dot{background:var(--gold);color:#14221a;}

    .section-head{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:2rem;}
    .section-head small{display:block;font-size:.9rem;color:var(--ink-soft);font-weight:500;margin-top:.6rem;max-width:560px;}
    .more-link{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;font-size:.85rem;color:var(--brand);white-space:nowrap;transition:.2s;}
    .more-link:hover{gap:.6rem;color:var(--gold-deep);}

    /* ===== 精选置顶區块 ===== */
    .feature-card .media{aspect-ratio:16/9;}
    .feature-card .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,14,11,.82) 100%);}
    .feature-card .feature-text{position:absolute;left:0;right:0;bottom:0;padding:1.6rem;color:#fff;z-index:3;}
    .feature-card .feature-text h3{font-size:clamp(1.35rem,2.4vw,2rem);font-weight:800;line-height:1.3;margin:.55rem 0 .3rem;}
    .feature-card .feature-text p{color:rgba(255,255,255,.82);font-size:.9rem;max-width:620px;line-height:1.7;margin:0;}
    .media-num{position:absolute;z-index:3;top:1rem;right:1rem;font-size:.75rem;font-weight:700;background:rgba(15,20,16,.6);border:1px solid rgba(255,255,255,.2);color:#fff;padding:.25rem .6rem;border-radius:999px;backdrop-filter:blur(6px);}
    .vertical-card{display:flow-root;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:1rem;transition:.25s;}
    .vertical-card:hover{border-color:rgba(18,60,51,.35);box-shadow:var(--shadow-1);transform:translateY(-2px);}
    .vertical-media{width:104px;height:78px;border-radius:14px;overflow:hidden;flex-shrink:0;background:#dfdbcc;float:left;margin-right:1rem;}
    .vertical-media img{width:100%;height:100%;object-fit:cover;}
    .vertical-content{overflow:hidden;}
    .vertical-content h4{font-weight:700;font-size:.95rem;line-height:1.5;margin:.3rem 0 .1rem;}
    .vertical-content p{font-size:.78rem;color:var(--ink-soft);line-height:1.6;margin:.2rem 0 0;}

    /* ===== 最新收录 ===== */
    .latest-panel{background:var(--dark);color:#fff;border-radius:28px;overflow:hidden;position:relative;}
    .latest-panel .cover-side{position:relative;min-height:300px;}
    .latest-panel .cover-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
    .latest-panel .cover-side::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,rgba(15,20,16,.85)),linear-gradient(180deg,rgba(15,20,16,0) 0%,rgba(15,20,16,.7) 100%);}
    .latest-panel .cover-note{position:absolute;z-index:3;bottom:1rem;left:1rem;color:#fff;font-size:.8rem;opacity:.8;}
    .latest-list{padding:1.8rem 1.5rem;display:flex;flex-direction:column;justify-content:center;}
    .latest-list .feed-item{display:flex;align-items:center;gap:1rem;padding:1.05rem 0;border-bottom:1px solid rgba(255,255,255,.12);}
    .latest-list .feed-item:last-child{border-bottom:none;padding-bottom:.2rem;}
    .feed-state{font-size:.7rem;font-weight:700;flex-shrink:0;border-radius:999px;padding:.3rem .7rem;background:rgba(209,166,90,.16);color:var(--gold);}
    .feed-item-name{font-size:.92rem;color:rgba(255,255,255,.92);font-weight:600;}
    .feed-item .go-icon{margin-left:auto;color:rgba(255,255,255,.4);flex-shrink:0;transition:.2s;}
    .feed-item:hover .go-icon{color:var(--gold);transform:translateX(4px);}

    /* ===== 横向频道滚动 ===== */
    .topic-scroll{display:grid;grid-auto-columns:minmax(255px,86%);grid-auto-flow:column;gap:1rem;overflow-x:auto;padding:.2rem .2rem 1rem;scroll-snap-type:x mandatory;scrollbar-width:none;}
    .topic-scroll::-webkit-scrollbar{display:none;}
    .topic-scroll .topic-card{scroll-snap-align:start;border-radius:var(--radius-lg);overflow:hidden;background:#fff;border:1px solid var(--line);transition:.25s;}
    .topic-scroll .topic-card:hover{box-shadow:var(--shadow-2);transform:translateY(-4px);}
    .topic-card .topic-media{aspect-ratio:4/3;background:#dfdbcc;position:relative;overflow:hidden;}
    .topic-card .topic-media img{width:100%;height:100%;object-fit:cover;}
    .topic-card .topic-body{padding:1rem 1.1rem 1.2rem;}
    .topic-body .topic-name{font-weight:800;margin:.3rem 0 .1rem;}
    .topic-body .topic-desc{font-size:.82rem;color:var(--ink-soft);line-height:1.65;margin:0;}

    /* ===== 编辑推荐深色面板 ===== */
    .editorial-dark{background:var(--dark);color:#fff;border-radius:30px;overflow:hidden;}
    .editorial-media{position:relative;min-height:320px;}
    .editorial-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
    .editorial-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,20,16,0) 20%,rgba(15,20,16,.6));}
    .editorial-body{padding:clamp(1.6rem,4vw,3.2rem);}
    .editorial-body h3{font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.35;font-weight:800;margin:.8rem 0 1rem;}
    .editorial-body p{color:rgba(255,255,255,.76);font-size:.95rem;line-height:1.8;margin:0 0 1.6rem;max-width:520px;}

    /* ===== 直播 feed ===== */
    .live-feed-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.25s;}
    .live-feed-card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px);}
    .live-feed-card .card-head{padding:1.1rem 1.2rem .5rem;}
    .live-item{display:flex;align-items:center;gap:.9rem;padding:.95rem 1.2rem;border-top:1px solid #f0ece2;transition:.2s;}
    .live-item:hover{background:#faf7ef;}
    .live-status{width:7px;height:7px;border-radius:999px;background:#cb6e4b;flex-shrink:0;}
    .live-item span.live-name{font-weight:700;font-size:.88rem;}
    .live-item .live-mini{color:var(--ink-soft);font-size:.7rem;font-weight:500;}
    .live-item .arrow{width:26px;height:26px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;color:var(--brand);font-size:.7rem;margin-left:auto;flex-shrink:0;transition:.2s;}
    .live-item:hover .arrow{background:var(--brand);color:#fff;border-color:var(--brand);}

    /* ===== FAQ ===== */
    .faq-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.2rem 1.4rem;margin-bottom:.8rem;transition:.25s;}
    .faq-box[open]{box-shadow:var(--shadow-1);}
    .faq-box summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-weight:800;font-size:1rem;padding:.6rem 0;cursor:pointer;}
    .faq-box summary::-webkit-details-marker{display:none;}
    .faq-box .faq-ic{flex-shrink:0;width:30px;height:30px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;font-weight:700;color:var(--brand);font-size:.85rem;transition:.2s;}
    .faq-box[open] .faq-ic{background:var(--brand);color:#fff;transform:rotate(45deg);}
    .faq-body{color:var(--ink-soft);font-size:.9rem;line-height:1.8;padding:.2rem 3rem .8rem 0;}

    /* ===== CTA条 ===== */
    .cta-warm{background:var(--bg-soft);border:1px solid var(--line);border-radius:32px;text-align:center;padding:clamp(2.5rem,6vw,4.2rem) 1.5rem;}
    .cta-warm h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1.2;font-weight:900;margin:.5rem 0 1rem;}
    .cta-warm p{color:var(--ink-soft);max-width:560px;margin:0 auto 1.7rem;}

    .footer-dark{background:var(--dark);color:#cfd6cf;border-top:1px solid rgba(255,255,255,.06);}
    .footer-dark h6{color:#fff;font-weight:700;font-size:.92rem;margin-bottom:1rem;}
    .footer-dark a{transition:.2s;color:#cfd6cf;}
    .footer-dark a:hover{color:var(--gold);}
    .footer-border{border-top:1px solid rgba(255,255,255,.1);}
    .footer-bottom div{font-size:.8rem;color:#7f8a80;}

    @media (max-width:767px){
        .editorial-media{min-height:220px;}
        .editorial-media::after{background:linear-gradient(180deg,rgba(15,20,16,0) 30%,rgba(15,20,16,.5));}
        .cat-hero h1{font-size:clamp(2rem,9vw,2.8rem);}
        .vertical-card{padding:.85rem;}
        .vertical-media{width:88px;height:70px;margin-right:.8rem;}
        .latest-panel .cover-side{min-height:220px;}
        .feature-card .feature-text{padding:1.1rem;}
        .feature-card .feature-text p{display:none;}
    }
    @media (prefers-reduced-motion:reduce){
        *,*::before,*::after{transition:none!important;animation-duration:.01ms!important;scroll-behavior:auto!important;}
    }