/* roulang page: index */
:root{
            --primary:#1f8f5f;
            --primary-strong:#156f48;
            --accent:#ff7a59;
            --accent-strong:#e65c36;
            --bg:#f7f4ee;
            --bg-soft:#f3efe7;
            --card:#ffffff;
            --card-2:#fbfaf7;
            --text:#17231d;
            --muted:#66736c;
            --line:#e6ddd1;
            --shadow:0 10px 28px rgba(20,33,27,.08);
            --shadow-soft:0 6px 18px rgba(20,33,27,.06);
            --radius:16px;
            --radius-sm:10px;
            --container:1180px;
            --section:clamp(56px,7vw,92px);
            --gap:24px;
            --gap-lg:32px;
            --ease:cubic-bezier(.2,.8,.2,1);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(31,143,95,.10), transparent 35%),
                radial-gradient(circle at top right, rgba(255,122,89,.08), transparent 30%),
                linear-gradient(180deg, #faf7f2 0%, var(--bg) 100%);
            line-height:1.75;
            letter-spacing:.2px;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }
        img{max-width:100%;display:block}
        a{color:inherit;text-decoration:none;transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),opacity .2s var(--ease)}
        button,input,textarea,select{font:inherit}
        ::selection{background:rgba(31,143,95,.18);color:var(--text)}
        .skip-link{
            position:absolute;
            left:12px;
            top:-48px;
            padding:10px 14px;
            background:var(--text);
            color:#fff;
            border-radius:999px;
            z-index:999;
        }
        .skip-link:focus{top:12px}
        .container{
            width:min(calc(100% - 32px), var(--container));
            margin:0 auto;
        }
        .topbar{
            background:rgba(255,255,255,.72);
            backdrop-filter:saturate(160%) blur(8px);
            border-bottom:1px solid rgba(230,221,209,.7);
            color:var(--muted);
            font-size:14px;
        }
        .topbar-inner{
            min-height:42px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }
        .topbar-left,.topbar-right{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
        }
        .topbar-badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:4px 10px;
            border-radius:999px;
            background:rgba(31,143,95,.08);
            color:var(--primary-strong);
            font-weight:700;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            background:rgba(247,244,238,.94);
            backdrop-filter:saturate(140%) blur(10px);
            border-bottom:1px solid rgba(230,221,209,.8);
        }
        .header-inner{
            min-height:76px;
            display:flex;
            align-items:center;
            gap:18px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:max-content;
            font-weight:800;
            letter-spacing:.3px;
        }
        .brand-mark{
            width:40px;
            height:40px;
            border-radius:12px;
            display:grid;
            place-items:center;
            background:
                linear-gradient(135deg, rgba(31,143,95,.16), rgba(255,122,89,.18)),
                #fff;
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            color:var(--primary-strong);
            font-size:18px;
        }
        .brand-text{
            display:flex;
            flex-direction:column;
            line-height:1.15;
        }
        .brand-text strong{
            font-size:18px;
        }
        .brand-text span{
            color:var(--muted);
            font-weight:500;
            font-size:12px;
            margin-top:4px;
        }
        .site-nav{
            margin-left:auto;
            display:flex;
            align-items:center;
            gap:8px;
        }
        .site-nav a{
            padding:10px 14px;
            border-radius:999px;
            color:var(--muted);
            font-weight:700;
        }
        .site-nav a:hover,
        .site-nav a:focus-visible{
            color:var(--text);
            background:rgba(31,143,95,.08);
            outline:none;
        }
        .site-nav a.active{
            color:#fff;
            background:var(--primary);
            box-shadow:0 10px 18px rgba(31,143,95,.18);
        }
        .header-actions{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:44px;
            padding:0 18px;
            border-radius:999px;
            border:1px solid transparent;
            font-weight:700;
            cursor:pointer;
            transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
            white-space:nowrap;
        }
        .btn:hover{transform:translateY(-1px)}
        .btn:active{transform:translateY(0)}
        .btn:focus-visible,
        .menu-toggle:focus-visible,
        details summary:focus-visible,
        .search-field:focus-visible{
            outline:3px solid rgba(31,143,95,.25);
            outline-offset:2px;
        }
        .btn-primary{
            background:linear-gradient(135deg, var(--primary), #239a66);
            color:#fff;
            box-shadow:0 12px 24px rgba(31,143,95,.18);
        }
        .btn-primary:hover{background:linear-gradient(135deg, var(--primary-strong), #1f8f5f)}
        .btn-outline{
            background:#fff;
            border-color:var(--line);
            color:var(--text);
        }
        .btn-outline:hover{
            border-color:rgba(31,143,95,.34);
            background:rgba(31,143,95,.05);
        }
        .menu-toggle{
            display:none;
            align-items:center;
            justify-content:center;
            width:46px;
            height:46px;
            border-radius:999px;
            border:1px solid var(--line);
            background:#fff;
            cursor:pointer;
            padding:0;
            box-shadow:var(--shadow-soft);
        }
        .burger{
            width:18px;
            display:grid;
            gap:4px;
        }
        .burger span{
            display:block;
            height:2px;
            background:var(--text);
            border-radius:999px;
        }
        .hero{
            position:relative;
            overflow:hidden;
            padding:clamp(28px,4vw,48px) 0 0;
        }
        .hero-shell{
            position:relative;
            border-radius:28px;
            overflow:hidden;
            background:
                linear-gradient(135deg, rgba(17,28,23,.74), rgba(17,28,23,.46)),
                url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
            box-shadow:var(--shadow);
            color:#fff;
        }
        .hero-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 18% 20%, rgba(255,255,255,.08), transparent 28%),
                radial-gradient(circle at 78% 14%, rgba(255,122,89,.18), transparent 22%),
                linear-gradient(180deg, rgba(5,13,9,.10), rgba(5,13,9,.28));
            pointer-events:none;
        }
        .hero-inner{
            position:relative;
            z-index:1;
            padding:clamp(26px,5vw,56px);
            display:grid;
            grid-template-columns:1.05fr .95fr;
            gap:clamp(20px,4vw,40px);
            align-items:stretch;
        }
        .hero-copy{
            display:flex;
            flex-direction:column;
            justify-content:center;
            min-width:0;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            width:max-content;
            padding:7px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.12);
            border:1px solid rgba(255,255,255,.18);
            color:#f5fff8;
            font-weight:700;
            font-size:14px;
            letter-spacing:.2px;
        }
        .hero h1{
            margin:18px 0 14px;
            font-size:clamp(34px,5vw,60px);
            line-height:1.12;
            letter-spacing:-.6px;
        }
        .hero p{
            margin:0;
            max-width:56ch;
            color:rgba(255,255,255,.90);
            font-size:17px;
            line-height:1.85;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:28px;
        }
        .hero-actions .btn-outline{
            background:rgba(255,255,255,.94);
            color:var(--text);
        }
        .hero-chips{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:24px;
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.10);
            border:1px solid rgba(255,255,255,.16);
            color:#f6fff9;
            font-size:14px;
            white-space:nowrap;
        }
        .hero-visual{
            display:grid;
            grid-template-columns:1fr;
            gap:16px;
            align-content:stretch;
        }
        .visual-card{
            position:relative;
            overflow:hidden;
            border-radius:24px;
            border:1px solid rgba(255,255,255,.12);
            background:rgba(255,255,255,.10);
            box-shadow:0 18px 34px rgba(0,0,0,.14);
            min-height:100%;
        }
        .visual-main{
            min-height:360px;
            background:
                linear-gradient(180deg, rgba(11,18,14,.10), rgba(11,18,14,.42)),
                url('/assets/images/coverpic/cover-1.webp') center/cover no-repeat;
        }
        .visual-main .visual-copy{
            position:absolute;
            inset:auto 20px 20px 20px;
            background:rgba(10,16,13,.62);
            border:1px solid rgba(255,255,255,.12);
            color:#fff;
            border-radius:18px;
            padding:16px 16px 15px;
            backdrop-filter:blur(6px);
        }
        .visual-copy strong{
            display:block;
            font-size:16px;
            margin-bottom:6px;
        }
        .visual-copy span{
            display:block;
            color:rgba(255,255,255,.84);
            font-size:14px;
            line-height:1.7;
        }
        .visual-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:16px;
        }
        .mini-card{
            min-height:148px;
            padding:18px;
            display:flex;
            flex-direction:column;
            justify-content:flex-end;
            border-radius:22px;
            background:#fff;
            color:var(--text);
            border:1px solid rgba(255,255,255,.08);
            box-shadow:0 12px 24px rgba(0,0,0,.10);
            overflow:hidden;
            position:relative;
        }
        .mini-card::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(14,20,17,.50) 100%);
            pointer-events:none;
        }
        .mini-card > *{position:relative; z-index:1}
        .mini-card-1{
            background:
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.04)),
                url('/assets/images/coverpic/cover-2.webp') center/cover no-repeat;
            color:#fff;
        }
        .mini-card-2{
            background:
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.04)),
                url('/assets/images/coverpic/cover-3.webp') center/cover no-repeat;
            color:#fff;
        }
        .mini-label{
            display:inline-flex;
            align-items:center;
            width:max-content;
            padding:5px 10px;
            border-radius:999px;
            background:rgba(255,255,255,.14);
            border:1px solid rgba(255,255,255,.18);
            font-size:12px;
            font-weight:700;
            margin-bottom:12px;
        }
        .mini-card h3{
            margin:0;
            font-size:18px;
            line-height:1.25;
        }
        .mini-card p{
            margin:8px 0 0;
            font-size:14px;
            line-height:1.75;
            opacity:.94;
        }
        .section{
            padding:var(--section) 0;
        }
        .section-soft{
            background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.20));
            border-top:1px solid rgba(230,221,209,.65);
            border-bottom:1px solid rgba(230,221,209,.65);
        }
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:28px;
        }
        .section-title-wrap{
            max-width:760px;
        }
        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:6px 12px;
            border-radius:999px;
            background:rgba(31,143,95,.08);
            color:var(--primary-strong);
            font-weight:800;
            font-size:13px;
            margin-bottom:12px;
        }
        .section h2{
            margin:0;
            font-size:clamp(24px,3vw,34px);
            line-height:1.18;
            letter-spacing:-.4px;
        }
        .section-lead{
            margin:12px 0 0;
            color:var(--muted);
            font-size:16px;
            line-height:1.85;
        }
        .section-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--primary-strong);
            font-weight:700;
            white-space:nowrap;
            flex-shrink:0;
        }
        .section-link:hover{color:var(--accent-strong)}
        .grid-3{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:18px;
        }
        .grid-2{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:18px;
        }
        .card{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow-soft);
            overflow:hidden;
            transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
        }
        .card:hover{
            transform:translateY(-2px);
            box-shadow:var(--shadow);
            border-color:rgba(31,143,95,.22);
        }
        .card-media{
            position:relative;
            overflow:hidden;
            aspect-ratio:16/10;
            background:linear-gradient(135deg, rgba(31,143,95,.14), rgba(255,122,89,.12));
        }
        .card-media img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .card-body{
            padding:18px;
        }
        .tag-row{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:8px;
            margin-bottom:12px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            min-height:28px;
            padding:0 10px;
            border-radius:999px;
            background:rgba(31,143,95,.10);
            color:var(--primary-strong);
            font-size:12px;
            font-weight:700;
        }
        .tag.alt{
            background:rgba(255,122,89,.12);
            color:var(--accent-strong);
        }
        .time{
            font-size:13px;
            color:var(--muted);
        }
        .card h3{
            margin:0;
            font-size:20px;
            line-height:1.35;
            letter-spacing:-.2px;
        }
        .card p{
            margin:10px 0 0;
            color:var(--muted);
            line-height:1.8;
            font-size:15px;
        }
        .card-footer{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-top:18px;
        }
        .text-link{
            display:inline-flex;
            align-items:center;
            gap:6px;
            color:var(--primary-strong);
            font-weight:700;
        }
        .text-link:hover{color:var(--accent-strong)}
        .stats{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:18px;
        }
        .stat{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:var(--radius);
            padding:20px;
            box-shadow:var(--shadow-soft);
        }
        .stat strong{
            display:block;
            font-size:28px;
            line-height:1;
            color:var(--primary-strong);
            margin-bottom:10px;
        }
        .stat span{
            display:block;
            color:var(--text);
            font-weight:700;
            margin-bottom:6px;
        }
        .stat p{
            margin:0;
            color:var(--muted);
            line-height:1.8;
            font-size:14px;
        }
        .feature-panel{
            display:grid;
            grid-template-columns:1.25fr .75fr;
            gap:18px;
            align-items:stretch;
        }
        .feature-card{
            position:relative;
            min-height:100%;
            overflow:hidden;
            border-radius:24px;
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            background:var(--card);
        }
        .feature-cover{
            aspect-ratio:16/9;
            background:
                linear-gradient(180deg, rgba(14,20,17,.12), rgba(14,20,17,.44)),
                url('/assets/images/coverpic/cover-4.webp') center/cover no-repeat;
        }
        .feature-copy{
            position:absolute;
            inset:auto 20px 20px 20px;
            background:rgba(255,255,255,.92);
            border:1px solid rgba(230,221,209,.95);
            border-radius:18px;
            padding:18px;
            box-shadow:0 12px 22px rgba(0,0,0,.08);
        }
        .feature-copy h3{
            margin:0 0 8px;
            font-size:24px;
            line-height:1.25;
        }
        .feature-copy p{
            margin:0;
            color:var(--muted);
        }
        .side-stack{
            display:grid;
            gap:18px;
        }
        .side-note{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:24px;
            padding:20px;
            box-shadow:var(--shadow-soft);
        }
        .side-note h3{
            margin:0 0 12px;
            font-size:20px;
        }
        .checklist{
            display:grid;
            gap:10px;
            margin:0;
            padding:0;
            list-style:none;
        }
        .checklist li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:var(--muted);
            line-height:1.7;
        }
        .checklist li::before{
            content:"";
            width:9px;
            height:9px;
            border-radius:50%;
            margin-top:.55em;
            background:var(--primary);
            flex:0 0 auto;
            box-shadow:0 0 0 4px rgba(31,143,95,.10);
        }
        .notice-box{
            background:linear-gradient(135deg, rgba(31,143,95,.06), rgba(255,122,89,.06));
            border:1px solid rgba(31,143,95,.12);
            border-radius:20px;
            padding:18px;
        }
        .notice-box strong{
            display:block;
            margin-bottom:8px;
            font-size:16px;
        }
        .notice-box p{
            margin:0;
            color:var(--muted);
            line-height:1.8;
        }
        .latest-layout{
            display:grid;
            grid-template-columns:.82fr 1.18fr;
            gap:18px;
            align-items:start;
        }
        .latest-rail{
            position:sticky;
            top:112px;
            display:grid;
            gap:18px;
        }
        .rail-card{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:24px;
            padding:20px;
            box-shadow:var(--shadow-soft);
        }
        .rail-card h3{
            margin:0 0 12px;
            font-size:20px;
        }
        .rail-card p{
            margin:0;
            color:var(--muted);
            line-height:1.8;
        }
        .rail-grid{
            display:grid;
            gap:12px;
            margin-top:16px;
        }
        .rail-item{
            padding:14px 14px 13px;
            border-radius:16px;
            background:var(--bg-soft);
            border:1px solid var(--line);
        }
        .rail-item strong{
            display:block;
            margin-bottom:6px;
            font-size:15px;
        }
        .rail-item span{
            color:var(--muted);
            font-size:14px;
            line-height:1.7;
        }
        .feed-list{
            display:grid;
            gap:16px;
        }
        .feed-item{
            display:grid;
            grid-template-columns:180px minmax(0,1fr);
            gap:16px;
            background:var(--card);
            border:1px solid var(--line);
            border-radius:24px;
            overflow:hidden;
            box-shadow:var(--shadow-soft);
            transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
        }
        .feed-item:hover{
            transform:translateY(-2px);
            border-color:rgba(31,143,95,.22);
            box-shadow:var(--shadow);
        }
        .feed-thumb{
            display:block;
            aspect-ratio:1/1;
            min-height:100%;
            background:linear-gradient(135deg, rgba(31,143,95,.14), rgba(255,122,89,.12));
            overflow:hidden;
        }
        .feed-thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .feed-body{
            padding:18px 18px 18px 0;
            display:flex;
            flex-direction:column;
            justify-content:center;
            min-width:0;
        }
        .feed-body h3{
            margin:0;
            font-size:20px;
            line-height:1.42;
        }
        .feed-body h3 a:hover{color:var(--primary-strong)}
        .feed-body p{
            margin:10px 0 0;
            color:var(--muted);
            line-height:1.85;
            font-size:15px;
        }
        .feed-meta{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:8px;
            margin-bottom:10px;
        }
        .feed-actions{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-top:16px;
        }
        .empty-state{
            background:var(--card);
            border:1px dashed rgba(31,143,95,.32);
            border-radius:24px;
            padding:34px 24px;
            text-align:center;
            box-shadow:var(--shadow-soft);
        }
        .empty-state strong{
            display:block;
            font-size:20px;
            margin-bottom:8px;
        }
        .empty-state p{
            margin:0 auto 18px;
            color:var(--muted);
            max-width:52ch;
            line-height:1.8;
        }
        .faq-list{
            display:grid;
            gap:12px;
        }
        details{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:18px;
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        details[open]{
            border-color:rgba(31,143,95,.18);
        }
        summary{
            list-style:none;
            cursor:pointer;
            padding:18px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            font-weight:800;
            line-height:1.5;
        }
        summary::-webkit-details-marker{display:none}
        summary .faq-icon{
            width:28px;
            height:28px;
            flex:0 0 auto;
            border-radius:999px;
            background:rgba(31,143,95,.08);
            display:grid;
            place-items:center;
            color:var(--primary-strong);
            font-size:16px;
            transition:transform .2s var(--ease),background-color .2s var(--ease);
        }
        details[open] summary .faq-icon{
            transform:rotate(45deg);
            background:rgba(255,122,89,.12);
            color:var(--accent-strong);
        }
        .faq-content{
            padding:0 20px 18px;
            color:var(--muted);
            line-height:1.85;
        }
        .cta{
            padding:0 0 var(--section);
        }
        .cta-shell{
            background:
                linear-gradient(135deg, rgba(31,143,95,.96), rgba(22,100,67,.96));
            color:#fff;
            border-radius:28px;
            overflow:hidden;
            position:relative;
            box-shadow:0 18px 34px rgba(20,33,27,.14);
        }
        .cta-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 12% 25%, rgba(255,255,255,.12), transparent 22%),
                radial-gradient(circle at 82% 14%, rgba(255,122,89,.18), transparent 20%),
                radial-gradient(circle at 88% 90%, rgba(255,255,255,.08), transparent 24%);
            pointer-events:none;
        }
        .cta-inner{
            position:relative;
            z-index:1;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:24px;
            padding:clamp(26px,4.8vw,44px);
        }
        .cta-copy{
            max-width:700px;
        }
        .cta-copy h2{
            margin:0 0 10px;
            font-size:clamp(26px,3.4vw,38px);
            line-height:1.18;
        }
        .cta-copy p{
            margin:0;
            color:rgba(255,255,255,.88);
            line-height:1.85;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            flex-shrink:0;
        }
        .cta .btn-outline{
            background:rgba(255,255,255,.95);
            border-color:transparent;
            color:var(--text);
        }
        .site-footer{
            padding:34px 0 40px;
            border-top:1px solid rgba(230,221,209,.88);
            background:rgba(255,255,255,.34);
        }
        .footer-inner{
            display:grid;
            grid-template-columns:1.3fr .7fr .7fr;
            gap:20px;
            align-items:start;
        }
        .footer-brand{
            display:grid;
            gap:14px;
        }
        .footer-brand strong{
            font-size:22px;
        }
        .footer-brand p{
            margin:0;
            color:var(--muted);
            line-height:1.8;
        }
        .footer-col h3{
            margin:0 0 12px;
            font-size:16px;
        }
        .footer-links{
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:var(--muted);
            width:max-content;
        }
        .footer-links a:hover{color:var(--primary-strong)}
        .footer-meta{
            margin-top:24px;
            padding-top:18px;
            border-top:1px solid rgba(230,221,209,.84);
            color:var(--muted);
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            gap:12px;
            font-size:14px;
        }
        .search-box{
            display:flex;
            gap:10px;
            margin-top:18px;
            max-width:520px;
        }
        .search-field{
            flex:1;
            min-width:0;
            height:46px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.22);
            background:rgba(255,255,255,.12);
            color:#fff;
            padding:0 16px;
        }
        .search-field::placeholder{color:rgba(255,255,255,.72)}
        .search-submit{
            min-width:110px;
            border:none;
            background:#fff;
            color:var(--primary-strong);
            box-shadow:0 10px 18px rgba(0,0,0,.12);
        }
        .search-submit:hover{background:#f7fbf8}
        .section-divider{
            margin:0;
            border:none;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(230,221,209,.96), transparent);
        }
        .image-frame{
            border-radius:22px;
            overflow:hidden;
            border:1px solid var(--line);
            background:#fff;
            box-shadow:var(--shadow-soft);
        }
        .image-frame img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .content-narrow{
            max-width:760px;
        }
        @media (max-width: 1080px){
            .hero-inner,
            .latest-layout,
            .feature-panel,
            .footer-inner{
                grid-template-columns:1fr;
            }
            .latest-rail{
                position:static;
            }
            .grid-3,
            .grid-2,
            .stats{
                grid-template-columns:repeat(2,minmax(0,1fr));
            }
            .hero-visual{
                order:-1;
            }
        }
        @media (max-width: 900px){
            .menu-toggle{display:inline-flex}
            .site-nav{
                position:absolute;
                left:16px;
                right:16px;
                top:calc(100% + 10px);
                display:none;
                flex-direction:column;
                align-items:stretch;
                gap:6px;
                padding:14px;
                background:#fff;
                border:1px solid var(--line);
                border-radius:20px;
                box-shadow:var(--shadow);
            }
            .site-nav.open{display:flex}
            .site-nav a{
                width:100%;
                border-radius:14px;
                padding:12px 14px;
            }
            .header-inner{
                position:relative;
                justify-content:space-between;
            }
            .header-actions .btn-outline{
                display:none;
            }
            .search-box{
                max-width:none;
            }
            .hero h1{
                font-size:clamp(32px,7vw,48px);
            }
            .cta-inner{
                flex-direction:column;
                align-items:flex-start;
            }
        }
        @media (max-width: 768px){
            .topbar-inner,
            .footer-meta{
                flex-direction:column;
                align-items:flex-start;
            }
            .grid-3,
            .grid-2,
            .stats,
            .visual-grid{
                grid-template-columns:1fr;
            }
            .card h3,
            .feed-body h3,
            .feature-copy h3{
                font-size:18px;
            }
            .feed-item{
                grid-template-columns:1fr;
            }
            .feed-body{
                padding:18px;
            }
            .hero-shell{
                border-radius:22px;
            }
            .hero-inner{
                padding:22px;
            }
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .section-link{
                margin-top:-4px;
            }
        }
        @media (max-width: 520px){
            .container{
                width:min(calc(100% - 24px), var(--container));
            }
            .header-inner{
                min-height:70px;
                gap:12px;
            }
            .brand-text span{
                display:none;
            }
            .hero-actions,
            .cta-actions{
                flex-direction:column;
                align-items:stretch;
            }
            .btn{
                width:100%;
            }
            .hero p,
            .section-lead,
            .card p,
            .feed-body p,
            .faq-content{
                font-size:14px;
            }
            .mini-card{
                min-height:130px;
            }
            .visual-main{
                min-height:300px;
            }
            .feature-copy{
                inset:auto 14px 14px 14px;
                padding:16px;
            }
            .feature-copy h3{
                font-size:20px;
            }
            summary{
                padding:16px;
            }
            .faq-content{
                padding:0 16px 16px;
            }
            .card-body,
            .side-note,
            .rail-card{
                padding:16px;
            }
        }

/* roulang page: article */
:root{
            --primary:#1f8f5f;
            --primary-strong:#156f48;
            --accent:#ff7a59;
            --accent-strong:#e65c36;
            --bg:#f7f4ee;
            --bg-soft:#f3efe7;
            --card:#ffffff;
            --card-2:#fbfaf7;
            --text:#17231d;
            --muted:#66736c;
            --line:#e6ddd1;
            --shadow:0 10px 28px rgba(20,33,27,.08);
            --shadow-soft:0 6px 18px rgba(20,33,27,.06);
            --radius:16px;
            --radius-sm:10px;
            --container:1180px;
            --section:clamp(56px,7vw,92px);
            --gap:24px;
            --gap-lg:32px;
            --ease:cubic-bezier(.2,.8,.2,1);
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(31,143,95,.10), transparent 35%),
                radial-gradient(circle at top right, rgba(255,122,89,.08), transparent 30%),
                linear-gradient(180deg, #faf7f2 0%, var(--bg) 100%);
            line-height:1.75;
            letter-spacing:.2px;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }
        img{max-width:100%;display:block}
        a{color:inherit;text-decoration:none;transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),opacity .2s var(--ease)}
        button,input,textarea,select{font:inherit}
        ::selection{background:rgba(31,143,95,.18);color:var(--text)}
        :focus{outline:none}
        :focus-visible{
            outline:3px solid rgba(31,143,95,.24);
            outline-offset:2px;
        }

        .container{
            width:min(calc(100% - 32px), var(--container));
            margin:0 auto;
        }

        .topbar{
            background:rgba(255,255,255,.72);
            backdrop-filter:saturate(160%) blur(8px);
            border-bottom:1px solid rgba(230,221,209,.7);
            color:var(--muted);
            font-size:14px;
        }
        .topbar-inner{
            min-height:42px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }
        .topbar-left,.topbar-right{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
        }
        .topbar-badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:4px 10px;
            border-radius:999px;
            background:rgba(31,143,95,.08);
            color:var(--primary-strong);
            font-weight:700;
        }
        .topbar-dot{
            width:8px;height:8px;border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 4px rgba(255,122,89,.12);
            display:inline-block;
        }

        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            background:rgba(247,244,238,.94);
            backdrop-filter:saturate(140%) blur(10px);
            border-bottom:1px solid rgba(230,221,209,.8);
        }
        .header-inner{
            min-height:76px;
            display:flex;
            align-items:center;
            gap:18px;
            position:relative;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:max-content;
            font-weight:800;
            letter-spacing:.3px;
        }
        .brand-mark{
            width:40px;
            height:40px;
            border-radius:12px;
            display:grid;
            place-items:center;
            background:
                linear-gradient(135deg, rgba(31,143,95,.16), rgba(255,122,89,.18)),
                #fff;
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            color:var(--primary-strong);
            font-size:18px;
            line-height:1;
        }
        .brand-text{
            display:flex;
            flex-direction:column;
            line-height:1.15;
        }
        .brand-text strong{
            font-size:18px;
            color:var(--text);
        }
        .brand-text span{
            color:var(--muted);
            font-weight:500;
            font-size:12px;
            margin-top:4px;
        }

        .site-nav{
            margin-left:auto;
            display:flex;
            align-items:center;
            gap:8px;
        }
        .site-nav a{
            padding:10px 14px;
            border-radius:999px;
            color:var(--muted);
            font-weight:700;
        }
        .site-nav a:hover,
        .site-nav a:focus-visible{
            color:var(--text);
            background:rgba(31,143,95,.08);
            outline:none;
        }
        .site-nav a.active{
            color:#fff;
            background:var(--primary);
            box-shadow:0 10px 18px rgba(31,143,95,.18);
        }

        .header-actions{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:44px;
            padding:0 18px;
            border-radius:999px;
            border:1px solid transparent;
            font-weight:700;
            cursor:pointer;
            transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease);
            white-space:nowrap;
        }
        .btn:hover{transform:translateY(-1px)}
        .btn:active{transform:translateY(0)}
        .btn-primary{
            background:linear-gradient(135deg, var(--primary), #239a66);
            color:#fff;
            box-shadow:0 12px 24px rgba(31,143,95,.18);
        }
        .btn-primary:hover{background:linear-gradient(135deg, var(--primary-strong), #1f8f5f); color:#fff}
        .btn-outline{
            background:#fff;
            border-color:var(--line);
            color:var(--text);
        }
        .btn-outline:hover{
            border-color:rgba(31,143,95,.34);
            background:rgba(31,143,95,.05);
            color:var(--text);
        }
        .btn-accent{
            background:linear-gradient(135deg, var(--accent), #ff8f47);
            color:#fff;
            box-shadow:0 12px 24px rgba(255,122,89,.18);
        }
        .btn-accent:hover{background:linear-gradient(135deg, var(--accent-strong), #ff7a59); color:#fff}

        .menu-toggle{
            display:none;
            align-items:center;
            justify-content:center;
            width:46px;
            height:46px;
            border-radius:999px;
            border:1px solid var(--line);
            background:#fff;
            cursor:pointer;
            padding:0;
            color:var(--text);
            box-shadow:var(--shadow-soft);
        }
        .menu-toggle span{
            font-size:20px;
            line-height:1;
        }

        .section-block{
            padding:var(--section) 0;
        }

        .article-banner{
            position:relative;
            overflow:hidden;
            padding:clamp(30px,5vw,52px) 0;
            background:
                linear-gradient(135deg, rgba(23,35,29,.82), rgba(23,35,29,.52)),
                var(--banner-image) center/cover no-repeat;
            color:#fff;
        }
        .article-banner::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at top right, rgba(255,255,255,.14), transparent 30%),
                radial-gradient(circle at bottom left, rgba(31,143,95,.16), transparent 25%);
            pointer-events:none;
        }
        .banner-inner{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
            gap:clamp(20px,3vw,40px);
            align-items:center;
        }
        .crumbs{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
            color:rgba(255,255,255,.82);
            font-size:14px;
            margin-bottom:14px;
        }
        .crumbs span{
            opacity:.65;
        }
        .banner-state{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:6px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.10);
            border:1px solid rgba(255,255,255,.14);
            color:#fff;
            font-size:13px;
            margin-bottom:16px;
            backdrop-filter:blur(8px);
        }
        .state-dot{
            width:8px;height:8px;border-radius:50%;
            background:#7bf3b4;
            box-shadow:0 0 0 4px rgba(123,243,180,.14);
        }
        .banner-copy h1{
            margin:0;
            font-size:clamp(2rem,4vw,3.55rem);
            line-height:1.18;
            letter-spacing:.2px;
            max-width:14ch;
            text-wrap:balance;
        }
        .banner-copy p{
            margin:18px 0 0;
            font-size:clamp(1rem,1.2vw,1.1rem);
            color:rgba(255,255,255,.88);
            max-width:62ch;
        }
        .tag-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:22px;
        }
        .badge-chip{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.10);
            border:1px solid rgba(255,255,255,.14);
            color:#fff;
            font-weight:700;
            font-size:13px;
            backdrop-filter:blur(8px);
        }
        .badge-chip.primary{
            background:rgba(31,143,95,.18);
            border-color:rgba(123,243,180,.16);
        }
        .badge-chip.accent{
            background:rgba(255,122,89,.18);
            border-color:rgba(255,185,160,.14);
        }
        .banner-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:26px;
        }
        .banner-media{
            position:relative;
            border-radius:24px;
            overflow:hidden;
            min-height:320px;
            box-shadow:0 24px 48px rgba(0,0,0,.18);
            border:1px solid rgba(255,255,255,.12);
            background:#0f1a15;
        }
        .banner-media img{
            width:100%;
            height:100%;
            object-fit:cover;
            opacity:.86;
            transform:scale(1.01);
        }
        .banner-overlay-card{
            position:absolute;
            right:16px;
            bottom:16px;
            left:16px;
            background:rgba(255,255,255,.14);
            border:1px solid rgba(255,255,255,.18);
            border-radius:18px;
            padding:16px 18px;
            color:#fff;
            backdrop-filter:blur(10px);
            box-shadow:0 16px 30px rgba(0,0,0,.14);
        }
        .banner-overlay-card strong{
            display:block;
            font-size:16px;
            margin-bottom:6px;
        }
        .banner-overlay-card p{
            margin:0;
            color:rgba(255,255,255,.88);
            font-size:14px;
            line-height:1.65;
        }

        .section-heading{
            margin-bottom:24px;
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .section-heading .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            width:max-content;
            padding:6px 12px;
            border-radius:999px;
            background:rgba(31,143,95,.08);
            color:var(--primary-strong);
            font-weight:800;
            font-size:13px;
        }
        .section-heading h2{
            margin:0;
            font-size:clamp(1.45rem,2vw,2.1rem);
            line-height:1.22;
            letter-spacing:.2px;
        }
        .section-heading p{
            margin:0;
            color:var(--muted);
            max-width:70ch;
        }

        .highlight-grid{
            display:grid;
            grid-template-columns:repeat(12, minmax(0,1fr));
            gap:var(--gap);
        }
        .highlight-card{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        .highlight-card.large{
            grid-column:span 6;
            display:grid;
            grid-template-columns:1fr;
        }
        .highlight-card.large .thumb{
            aspect-ratio:16/9;
            overflow:hidden;
            background:var(--bg-soft);
        }
        .highlight-card.large .thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .highlight-card.large .content{
            padding:22px;
        }
        .highlight-card.large h3{
            margin:0 0 10px;
            font-size:1.3rem;
            line-height:1.35;
        }
        .highlight-card.large p{
            margin:0;
            color:var(--muted);
        }
        .mini-stack{
            grid-column:span 3;
            display:flex;
            flex-direction:column;
            gap:var(--gap);
        }
        .info-card{
            flex:1;
            background:var(--card);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow-soft);
            padding:22px;
        }
        .info-card .label{
            color:var(--muted);
            font-size:13px;
            margin-bottom:10px;
        }
        .info-card .value{
            font-size:1.15rem;
            font-weight:800;
            line-height:1.3;
            margin-bottom:10px;
        }
        .info-card .desc{
            color:var(--muted);
            margin:0;
        }
        .info-card .mini-tags{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:14px;
        }
        .info-card .mini-tags span{
            display:inline-flex;
            padding:6px 10px;
            border-radius:999px;
            background:var(--card-2);
            border:1px solid var(--line);
            font-size:12px;
            color:var(--muted);
            font-weight:700;
        }

        .article-layout{
            display:grid;
            grid-template-columns:minmax(0,1.8fr) minmax(290px,.9fr);
            gap:var(--gap-lg);
            align-items:start;
        }
        .article-panel{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:calc(var(--radius) + 2px);
            box-shadow:var(--shadow);
            overflow:hidden;
        }
        .article-panel-head{
            padding:24px 24px 0;
        }
        .article-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px 14px;
            color:var(--muted);
            font-size:14px;
            margin-bottom:14px;
        }
        .article-meta span{
            display:inline-flex;
            align-items:center;
            gap:6px;
        }
        .article-meta .meta-dot{
            width:6px;height:6px;border-radius:50%;
            background:var(--accent);
            display:inline-block;
        }
        .article-panel-head .panel-title{
            margin:0;
            font-size:clamp(1.6rem,2.4vw,2.35rem);
            line-height:1.28;
            text-wrap:balance;
        }
        .article-panel-head .panel-subtitle{
            margin:14px 0 0;
            color:var(--muted);
            max-width:72ch;
        }
        .article-labels{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:18px;
        }
        .article-labels .badge-chip{
            color:var(--text);
            background:var(--card-2);
            border-color:var(--line);
            border:1px solid var(--line);
            backdrop-filter:none;
        }
        .article-body{
            padding:24px;
            font-size:17px;
            line-height:1.95;
            color:var(--text);
            overflow:hidden;
        }
        .article-body > :first-child{margin-top:0}
        .article-body > :last-child{margin-bottom:0}
        .article-body h2,
        .article-body h3,
        .article-body h4{
            line-height:1.34;
            margin:1.9em 0 .8em;
            text-wrap:balance;
        }
        .article-body h2{font-size:1.55rem}
        .article-body h3{font-size:1.25rem}
        .article-body h4{font-size:1.06rem}
        .article-body p{
            margin:1em 0;
            color:var(--text);
        }
        .article-body a{
            color:var(--primary-strong);
            text-decoration:underline;
            text-decoration-thickness:1px;
            text-underline-offset:3px;
        }
        .article-body a:hover{color:var(--accent-strong)}
        .article-body blockquote{
            margin:1.4em 0;
            padding:18px 20px;
            background:var(--bg-soft);
            border-left:4px solid var(--primary);
            border-radius:0 14px 14px 0;
            color:var(--text);
        }
        .article-body ul,
        .article-body ol{
            margin:1em 0;
            padding-left:1.2rem;
        }
        .article-body li{
            margin:.45em 0;
        }
        .article-body hr{
            border:none;
            border-top:1px solid var(--line);
            margin:2em 0;
        }
        .article-body strong{
            font-weight:800;
        }
        .article-body em{
            color:var(--accent-strong);
            font-style:normal;
            font-weight:700;
        }
        .article-body figure{
            margin:1.5em 0;
        }
        .article-body img{
            width:100%;
            height:auto;
            border-radius:16px;
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            object-fit:cover;
        }
        .article-body figcaption{
            margin-top:8px;
            font-size:13px;
            color:var(--muted);
        }
        .article-body table{
            width:100%;
            border-collapse:collapse;
            margin:1.3em 0;
            display:block;
            overflow-x:auto;
            white-space:nowrap;
        }
        .article-body th,
        .article-body td{
            border:1px solid var(--line);
            padding:12px 14px;
            text-align:left;
            background:#fff;
        }
        .article-body th{
            background:var(--bg-soft);
            font-weight:800;
        }
        .article-body pre{
            margin:1.4em 0;
            padding:18px 20px;
            background:#141b17;
            color:#e6f7ef;
            border-radius:14px;
            overflow:auto;
            font-size:14px;
        }
        .article-body code{
            padding:.18em .4em;
            border-radius:6px;
            background:rgba(31,143,95,.08);
            color:var(--primary-strong);
            font-size:.95em;
        }
        .article-body pre code{
            padding:0;
            background:transparent;
            color:inherit;
        }

        .article-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            padding:0 24px 24px;
        }

        .article-sidebar{
            display:flex;
            flex-direction:column;
            gap:var(--gap);
            position:sticky;
            top:96px;
        }
        .sidebar-card{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        .sidebar-card .sidebar-head{
            padding:18px 18px 0;
        }
        .sidebar-card h3{
            margin:0;
            font-size:1.05rem;
            line-height:1.4;
        }
        .sidebar-card p{
            margin:0;
            color:var(--muted);
        }
        .sidebar-card .card-body{
            padding:18px;
        }
        .sidebar-thumb{
            aspect-ratio:16/10;
            overflow:hidden;
            background:var(--bg-soft);
        }
        .sidebar-thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .sidebar-note{
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .sidebar-note .mini-meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }
        .sidebar-note .mini-meta span{
            display:inline-flex;
            padding:6px 10px;
            border-radius:999px;
            background:var(--card-2);
            border:1px solid var(--line);
            font-size:12px;
            color:var(--muted);
            font-weight:700;
        }

        .toc-list{
            display:flex;
            flex-direction:column;
            gap:8px;
            padding:18px;
        }
        .toc-list .toc-empty{
            color:var(--muted);
            font-size:14px;
            background:var(--card-2);
            border:1px dashed var(--line);
            border-radius:12px;
            padding:14px;
        }
        .toc-link{
            display:flex;
            align-items:flex-start;
            gap:10px;
            padding:12px 14px;
            border-radius:12px;
            border:1px solid transparent;
            background:var(--card-2);
            color:var(--text);
            line-height:1.5;
            font-weight:700;
        }
        .toc-link:hover,
        .toc-link:focus-visible{
            background:rgba(31,143,95,.06);
            border-color:rgba(31,143,95,.18);
            color:var(--text);
        }
        .toc-link .index{
            min-width:22px;
            height:22px;
            border-radius:999px;
            display:inline-grid;
            place-items:center;
            background:rgba(31,143,95,.12);
            color:var(--primary-strong);
            font-size:12px;
            font-weight:800;
            flex:0 0 auto;
            margin-top:2px;
        }
        .toc-link.toc-h3{
            margin-left:16px;
            background:#fff;
        }

        .latest-section .entry-grid,
        .related-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:var(--gap);
        }
        .entry-card,
        .related-card{
            display:flex;
            flex-direction:column;
            background:var(--card);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow-soft);
            overflow:hidden;
            min-height:100%;
            transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
        }
        .entry-card:hover,
        .related-card:hover{
            transform:translateY(-2px);
            box-shadow:var(--shadow);
            border-color:rgba(31,143,95,.22);
        }
        .entry-card .thumb,
        .related-card .thumb{
            aspect-ratio:16/9;
            overflow:hidden;
            background:var(--bg-soft);
            flex:0 0 auto;
        }
        .entry-card .thumb img,
        .related-card .thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .entry-card .card-body,
        .related-card .card-body{
            padding:18px;
            display:flex;
            flex-direction:column;
            gap:10px;
            flex:1;
        }
        .entry-card .kicker,
        .related-card .kicker{
            color:var(--primary-strong);
            font-size:13px;
            font-weight:800;
        }
        .entry-card h3,
        .related-card h3{
            margin:0;
            font-size:1.05rem;
            line-height:1.45;
        }
        .entry-card p,
        .related-card p{
            margin:0;
            color:var(--muted);
            line-height:1.75;
            flex:1;
        }
        .card-meta{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            color:var(--muted);
            font-size:13px;
            margin-top:2px;
        }
        .card-meta .arrow{
            color:var(--primary-strong);
            font-weight:800;
        }

        .entry-section{
            background:
                linear-gradient(180deg, rgba(31,143,95,.04), rgba(255,122,89,.03)),
                transparent;
        }

        .faq-list{
            display:grid;
            gap:14px;
        }
        details.faq-item{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        details.faq-item summary{
            list-style:none;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:18px 20px;
            font-weight:800;
            color:var(--text);
        }
        details.faq-item summary::-webkit-details-marker{display:none}
        details.faq-item summary::after{
            content:"＋";
            color:var(--primary-strong);
            font-size:20px;
            line-height:1;
            transition:transform .2s var(--ease);
        }
        details.faq-item[open] summary::after{
            content:"－";
        }
        .faq-content{
            padding:0 20px 18px;
            color:var(--muted);
        }
        .faq-content p{margin:0}
        .faq-content p + p{margin-top:10px}

        .cta-band{
            padding:0 0 var(--section);
        }
        .cta-inner{
            background:linear-gradient(135deg, rgba(31,143,95,.11), rgba(255,122,89,.10));
            border:1px solid rgba(31,143,95,.14);
            border-radius:calc(var(--radius) + 4px);
            box-shadow:var(--shadow-soft);
            padding:clamp(22px,3.5vw,34px);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .cta-inner h2{
            margin:0 0 8px;
            font-size:clamp(1.4rem,2vw,2rem);
        }
        .cta-inner p{
            margin:0;
            color:var(--muted);
            max-width:62ch;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }

        .empty-state{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:calc(var(--radius) + 4px);
            box-shadow:var(--shadow);
            padding:clamp(28px,4vw,48px);
            text-align:center;
            max-width:760px;
            margin:0 auto;
        }
        .empty-state h1{
            margin:0;
            font-size:clamp(1.7rem,2.4vw,2.4rem);
            line-height:1.25;
        }
        .empty-state p{
            margin:14px auto 0;
            color:var(--muted);
            max-width:54ch;
        }
        .empty-state .actions{
            margin-top:24px;
            display:flex;
            justify-content:center;
            gap:12px;
            flex-wrap:wrap;
        }

        .site-footer{
            padding:38px 0 18px;
            background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.64));
            border-top:1px solid rgba(230,221,209,.85);
        }
        .footer-inner{
            display:grid;
            grid-template-columns:1.3fr .85fr .85fr;
            gap:var(--gap-lg);
            padding-bottom:22px;
        }
        .footer-brand strong{
            display:block;
            font-size:20px;
            margin-bottom:10px;
        }
        .footer-brand p{
            margin:0;
            color:var(--muted);
            max-width:42ch;
        }
        .footer-col h3{
            margin:0 0 14px;
            font-size:16px;
        }
        .footer-links{
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .footer-links a{
            color:var(--muted);
            width:max-content;
        }
        .footer-links a:hover,
        .footer-links a:focus-visible{
            color:var(--primary-strong);
        }
        .footer-meta{
            padding-top:18px;
            border-top:1px solid rgba(230,221,209,.8);
            display:flex;
            justify-content:space-between;
            gap:12px;
            flex-wrap:wrap;
            color:var(--muted);
            font-size:14px;
        }

        @media (max-width: 1080px){
            .banner-inner,
            .article-layout{
                grid-template-columns:1fr;
            }
            .article-sidebar{
                position:static;
            }
            .highlight-card.large,
            .mini-stack{
                grid-column:span 12;
            }
            .latest-section .entry-grid,
            .related-grid{
                grid-template-columns:repeat(2, minmax(0,1fr));
            }
        }

        @media (max-width: 768px){
            .topbar-inner{
                min-height:38px;
                font-size:13px;
            }
            .header-inner{
                min-height:68px;
                flex-wrap:wrap;
                padding:10px 0;
            }
            .menu-toggle{
                display:inline-flex;
                margin-left:auto;
            }
            .header-actions{
                display:none;
            }
            .site-nav{
                width:100%;
                margin:0;
                order:5;
                display:none;
                flex-direction:column;
                align-items:stretch;
                gap:8px;
                padding:12px;
                border:1px solid var(--line);
                border-radius:18px;
                background:rgba(247,244,238,.98);
                box-shadow:var(--shadow);
            }
            .site-nav.is-open{
                display:flex;
            }
            .site-nav a{
                width:100%;
                text-align:center;
            }
            .banner-copy h1{
                max-width:100%;
            }
            .banner-media{
                min-height:240px;
            }
            .highlight-grid{
                grid-template-columns:1fr;
            }
            .highlight-card.large,
            .mini-stack,
            .latest-section .entry-grid,
            .related-grid{
                grid-column:auto;
                grid-template-columns:1fr;
            }
            .article-body{
                padding:20px;
                font-size:16px;
            }
            .article-panel-head,
            .article-actions{
                padding-left:20px;
                padding-right:20px;
            }
            .cta-inner,
            .footer-inner,
            .footer-meta{
                grid-template-columns:1fr;
                flex-direction:column;
                align-items:flex-start;
            }
        }

        @media (max-width: 520px){
            .container{
                width:min(calc(100% - 24px), var(--container));
            }
            .brand-text strong{font-size:17px}
            .brand-text span{font-size:11px}
            .banner-copy h1{
                font-size:1.9rem;
            }
            .section-heading h2{
                font-size:1.35rem;
            }
            .btn{
                min-height:42px;
                padding:0 16px;
                font-size:14px;
            }
            .article-meta{
                gap:8px 10px;
            }
            .banner-actions,
            .cta-actions,
            .article-actions{
                width:100%;
            }
            .banner-actions .btn,
            .cta-actions .btn,
            .article-actions .btn{
                width:100%;
            }
            .article-body table{
                font-size:14px;
            }
        }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}