/* roulang page: index */
:root {
            --bg: #19151d;
            --bg-soft: #231c27;
            --panel: #2a222f;
            --panel-light: #f1e9ed;
            --panel-warm: #ead9d5;
            --text: #fff8f5;
            --muted: #b9a9b7;
            --ink: #2e2430;
            --line: rgba(255,248,245,.13);
            --line-dark: rgba(50,34,46,.14);
            --berry: #8f3e67;
            --berry-deep: #672b4e;
            --coral: #e6806e;
            --peach: #f2b09c;
            --success: #a8c5a1;
            --radius-lg: 26px;
            --radius-md: 18px;
            --radius-sm: 12px;
            --shadow: 0 18px 50px rgba(0,0,0,.22);
            --max: 1220px;
        }
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            background:
                radial-gradient(circle at 84% 8%, rgba(143,62,103,.22), transparent 28rem),
                var(--bg);
            color: var(--text);
            font-family: "PingFang SC","Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
            font-size: 16px;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; border: 0; }
        .container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
        .eyebrow {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--peach); font-size: 12px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
        }
        .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--coral); }
        h1,h2,h3,p { margin-top: 0; }
        h1,h2,h3 { line-height: 1.2; letter-spacing: -.035em; }
        h1 { max-width: 720px; margin-bottom: 20px; font-size: clamp(38px, 5.5vw, 70px); font-weight: 750; }
        h2 { margin-bottom: 14px; font-size: clamp(28px, 3.3vw, 43px); font-weight: 730; }
        h3 { margin-bottom: 8px; font-size: 20px; font-weight: 700; }
        .lead { max-width: 700px; color: var(--muted); font-size: 18px; }
        .section { padding: 84px 0; }
        .section-head { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 30px; }
        .section-head p { max-width: 560px; margin-bottom: 0; color: var(--muted); }
        .topbar { padding: 22px 0 0; }
        .nav-shell {
            display: flex; align-items: center; gap: 18px; padding: 13px;
            border: 1px solid var(--line-dark); border-radius: 22px;
            background: var(--panel-light); color: var(--ink);
            box-shadow: 0 12px 35px rgba(0,0,0,.14);
        }
        .brand { display: inline-flex; align-items: center; gap: 10px; min-width: 250px; font-weight: 800; color: var(--berry-deep); }
        .brand-mark {
            display: grid; place-items: center; width: 38px; height: 38px;
            border-radius: 13px; background: var(--berry); color: white;
            box-shadow: inset 0 -5px 0 rgba(0,0,0,.12);
        }
        .brand-mark::after { content: "▶"; font-size: 13px; margin-left: 2px; }
        .brand-name { font-size: 15px; line-height: 1.15; }
        .nav-links { display: flex; align-items: center; gap: 7px; flex: 1; }
        .nav-link {
            display: flex; align-items: center; gap: 8px; padding: 10px 13px;
            border-radius: 13px; color: #705e6b; font-size: 13px; font-weight: 650;
            transition: .25s ease;
        }
        .nav-link:hover, .nav-link:focus-visible { background: #e5d8de; color: var(--berry-deep); outline: none; }
        .nav-link.active { background: var(--berry-deep); color: #fff; box-shadow: 0 5px 14px rgba(103,43,78,.22); }
        .nav-icon { opacity: .7; font-size: 16px; }
        .nav-cta, .btn-primary {
            display: inline-flex; justify-content: center; align-items: center; gap: 9px;
            min-height: 46px; padding: 0 20px; border-radius: 13px;
            background: var(--coral); color: #351b26; font-weight: 750;
            transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
        }
        .nav-cta:hover, .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 22px rgba(230,128,110,.22); }
        .nav-cta:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .faq-q:focus-visible { outline: 3px solid var(--peach); outline-offset: 3px; }
        .hero { padding: 72px 0 55px; }
        .hero-strip {
            position: relative; overflow: hidden; display: grid; grid-template-columns: 1.12fr .88fr;
            gap: 30px; align-items: center; padding: clamp(28px,5vw,62px);
            border: 1px solid var(--line); border-radius: var(--radius-lg);
            background: linear-gradient(105deg, #2b202d 0%, #211921 57%, #382431 100%);
            box-shadow: var(--shadow);
        }
        .hero-strip::after {
            content: ""; position: absolute; width: 280px; height: 280px; right: 7%; top: -130px;
            border-radius: 50%; border: 1px solid rgba(242,176,156,.25); box-shadow: 0 0 0 22px rgba(242,176,156,.04), 0 0 0 44px rgba(242,176,156,.03);
        }
        .hero-copy { position: relative; z-index: 1; }
        .hero-copy .lead { margin-bottom: 28px; }
        .actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .btn-secondary {
            display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
            padding: 0 20px; border: 1px solid rgba(255,248,245,.22); border-radius: 13px;
            color: var(--text); font-weight: 700; transition: .22s ease;
        }
        .btn-secondary:hover { border-color: var(--peach); background: rgba(255,255,255,.07); transform: translateY(-2px); }
        .hero-art { position: relative; min-height: 285px; }
        .cover {
            position: absolute; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
            padding: 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,.17);
            box-shadow: 0 18px 35px rgba(0,0,0,.3);
        }
        .cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,.14), transparent 45%, rgba(0,0,0,.35)); }
        .cover > * { position: relative; z-index: 1; }
        .cover-a { width: 54%; height: 230px; left: 3%; bottom: 5px; background: linear-gradient(140deg,#633755,#d88476 58%,#f1b39d); transform: rotate(-6deg); }
        .cover-b { width: 49%; height: 190px; right: 1%; top: 18px; background: linear-gradient(145deg,#423452,#9f5270 60%,#e68d76); transform: rotate(7deg); }
        .cover-c { width: 38%; height: 125px; right: 20%; bottom: 0; background: linear-gradient(135deg,#302a47,#7c4d73); }
        .cover-num { font-size: 12px; letter-spacing: .16em; color: rgba(255,255,255,.76); }
        .cover-title { font-weight: 750; font-size: 17px; }
        .play-dot { align-self: flex-end; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: rgba(255,255,255,.86); color: var(--berry-deep); font-size: 12px; }
        .status-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
        .status { padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; color: #decbd5; font-size: 12px; background: rgba(255,255,255,.035); }
        .status strong { color: var(--peach); margin-right: 5px; }
        .light-section { background: var(--panel-light); color: var(--ink); }
        .light-section .section-head p { color: #786977; }
        .feature-layout { display: grid; grid-template-columns: 1.28fr .72fr; gap: 18px; }
        .feature-main, .feature-side, .scenario-card, .result-card, .price-main, .price-side, .faq-item, .notice-card {
            border: 1px solid var(--line-dark); border-radius: var(--radius-md); background: #f8f1f2;
        }
        .feature-main { min-height: 300px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg,#f8eff0,#e8d7df); }
        .feature-main p, .feature-side p, .scenario-card p, .result-card p, .price-side p, .notice-card p { color: #786977; }
        .feature-side { display: grid; gap: 18px; border: 0; background: transparent; }
        .mini-feature { padding: 24px; border: 1px solid var(--line-dark); border-radius: var(--radius-md); background: #fff9f6; }
        .mini-label { color: var(--berry); font-size: 12px; font-weight: 750; }
        .arrow { color: var(--berry); font-size: 22px; }
        .scenario-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 20px; align-items: stretch; }
        .scenario-intro { padding: 28px; border-radius: var(--radius-md); background: var(--berry-deep); }
        .scenario-intro p { color: #d9c3cf; }
        .scenario-list { display: grid; gap: 12px; }
        .scenario-card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 15px; padding: 19px 22px; background: var(--panel); border-color: var(--line); }
        .scenario-card p { margin: 0; font-size: 14px; }
        .step-no { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(230,128,110,.14); color: var(--coral); font-weight: 800; }
        .example-wrap { display: grid; grid-template-columns: 1.4fr .6fr; gap: 18px; }
        .result-card { padding: 28px; background: linear-gradient(125deg,#342431,#28202b); border-color: var(--line); }
        .result-card p { color: #cbbac5; }
        .result-screen { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
        .result-chip { padding: 12px 15px; border-radius: 13px; background: rgba(255,255,255,.07); color: #f6d9d0; font-size: 13px; }
        .result-side { display: grid; gap: 18px; }
        .result-stat { padding: 21px; border-radius: var(--radius-md); background: var(--panel-warm); color: var(--ink); }
        .result-stat b { display: block; margin-bottom: 5px; color: var(--berry-deep); font-size: 25px; }
        .pricing { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }
        .price-main { padding: 32px; background: #fff9f6; }
        .free-tag { display: inline-block; padding: 6px 11px; border-radius: 99px; background: #edd8d4; color: var(--berry-deep); font-size: 12px; font-weight: 800; }
        .price-main ul { display: grid; gap: 10px; margin: 22px 0; padding: 0; list-style: none; color: #655566; }
        .price-main li::before { content: "✓"; margin-right: 9px; color: var(--berry); font-weight: 800; }
        .price-side { display: grid; gap: 18px; border: 0; background: transparent; }
        .price-side .mini-feature { background: var(--panel-warm); }
        .info-band { padding: 24px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); background: #e8dadd; color: var(--ink); }
        .info-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
        .info-item { display: flex; gap: 11px; align-items: flex-start; }
        .info-item b { display: block; font-size: 14px; }
        .info-item span { display: block; color: #786977; font-size: 12px; line-height: 1.5; }
        .faq-list { display: grid; gap: 10px; max-width: 900px; }
        .faq-item { overflow: hidden; background: var(--panel); border-color: var(--line); }
        .faq-q { display: flex; justify-content: space-between; width: 100%; padding: 20px 22px; background: transparent; color: var(--text); text-align: left; font-weight: 700; }
        .faq-q::after { content: "+"; color: var(--peach); font-size: 22px; line-height: 1; transition: .2s; }
        .faq-item.open .faq-q::after { content: "−"; }
        .faq-a { display: none; padding: 0 22px 20px; color: var(--muted); font-size: 14px; }
        .faq-item.open .faq-a { display: block; }
        .cta-panel { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 36px; border-radius: var(--radius-lg); background: linear-gradient(105deg,var(--berry-deep),#9e506c); }
        .cta-panel p { max-width: 600px; margin: 0; color: #e7cfd8; }
        footer { padding: 55px 0 25px; border-top: 1px solid var(--line); }
        .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 28px; }
        .footer-brand p { max-width: 310px; color: var(--muted); font-size: 13px; }
        .footer-title { margin-bottom: 12px; color: var(--peach); font-size: 13px; font-weight: 750; }
        .footer-links { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
        .footer-links a:hover { color: var(--peach); }
        .copyright { display: flex; justify-content: space-between; gap: 15px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); color: #8d7d8c; font-size: 12px; }
        .age-layer { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(18,12,18,.78); backdrop-filter: blur(7px); }
        .age-layer.hidden { display: none; }
        .age-box { width: min(470px,100%); padding: 32px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: #2b222e; box-shadow: var(--shadow); }
        .age-box p { color: var(--muted); font-size: 14px; }
        .age-actions { display: flex; gap: 10px; margin-top: 22px; }
        .age-actions button { flex: 1; }
        @media (max-width: 900px) {
            .brand { min-width: auto; }
            .nav-shell { flex-wrap: wrap; }
            .nav-links { order: 3; width: 100%; overflow-x: auto; }
            .hero-strip, .feature-layout, .scenario-grid, .example-wrap, .pricing { grid-template-columns: 1fr; }
            .hero-art { min-height: 270px; }
            .info-grid { grid-template-columns: repeat(2,1fr); }
            .footer-grid { grid-template-columns: repeat(2,1fr); }
        }
        @media (max-width: 600px) {
            .container { width: min(100% - 28px, var(--max)); }
            .topbar { padding-top: 14px; }
            .nav-shell { gap: 10px; padding: 10px; }
            .brand { flex: 1; }
            .brand-name { font-size: 13px; }
            .nav-cta { min-height: 40px; padding: 0 13px; font-size: 13px; }
            .nav-link { white-space: nowrap; padding: 9px 11px; }
            .hero { padding: 42px 0 28px; }
            .hero-strip { padding: 27px 21px; }
            h1 { font-size: 39px; }
            .lead { font-size: 16px; }
            .section { padding: 54px 0; }
            .section-head { display: block; margin-bottom: 22px; }
            .section-head p { margin-top: 13px; }
            .hero-art { min-height: 235px; transform: scale(.9); transform-origin: center; }
            .feature-main, .mini-feature, .scenario-intro, .result-card, .price-main { padding: 23px; }
            .scenario-card { grid-template-columns: 40px 1fr auto; padding: 15px; }
            .scenario-card h3 { font-size: 16px; }
            .scenario-card p { display: none; }
            .info-grid { grid-template-columns: 1fr 1fr; gap: 17px 10px; }
            .cta-panel { display: block; padding: 27px 22px; }
            .cta-panel .btn-primary { margin-top: 20px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px 15px; }
            .footer-brand { grid-column: 1 / -1; }
            .copyright { display: block; }
            .copyright span { display: block; margin-top: 6px; }
        }
        @media (max-width: 400px) {
            .info-grid, .footer-grid { grid-template-columns: 1fr; }
            .footer-brand { grid-column: auto; }
            .actions { display: grid; }
            .actions a { width: 100%; }
        }

/* roulang page: category2 */
:root{
 --bg:#19151d;--bg-soft:#231c27;--panel:#2a222f;--panel-light:#f1e9ed;
 --panel-warm:#ead9d5;--text:#fff8f5;--muted:#b9a9b7;--ink:#2e2430;
 --line:rgba(255,248,245,.13);--line-dark:rgba(50,34,46,.14);
 --berry:#8f3e67;--berry-deep:#672b4e;--coral:#e6806e;--peach:#f2b09c;
 --success:#a8c5a1;--warning:#e8c083;--radius-lg:26px;--radius-md:18px;
 --radius-sm:12px;--shadow:0 18px 50px rgba(0,0,0,.22);--max:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 84% 8%,rgba(143,62,103,.22),transparent 28rem),var(--bg);color:var(--text);font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit}
button{cursor:pointer;border:0}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(34px,5vw,62px);line-height:1.12;letter-spacing:-.045em;margin-bottom:20px}
h2{font-size:clamp(27px,3vw,40px);line-height:1.2;letter-spacing:-.03em;margin-bottom:12px}
h3{font-size:20px;line-height:1.3;margin-bottom:10px}
.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.topbar{padding:22px 0 0}
.nav-shell{display:flex;align-items:center;gap:18px;padding:13px;border:1px solid var(--line-dark);border-radius:22px;background:var(--panel-light);color:var(--ink);box-shadow:0 12px 35px rgba(0,0,0,.14)}
.brand{display:inline-flex;align-items:center;gap:10px;min-width:250px;font-weight:800;color:var(--berry-deep)}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:var(--berry);color:#fff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.12)}
.brand-mark::after{content:"▶";font-size:13px;margin-left:2px}
.brand-name{font-size:15px;line-height:1.15}
.nav-links{display:flex;align-items:center;gap:7px;flex:1}
.nav-link{display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:13px;color:#705e6b;font-size:13px;font-weight:650;transition:.25s ease}
.nav-link:hover,.nav-link:focus-visible{background:#e5d8de;color:var(--berry-deep);outline:none}
.nav-link.active{background:var(--berry-deep);color:#fff;box-shadow:0 5px 14px rgba(103,43,78,.22)}
.nav-icon{opacity:.7;font-size:16px}
.nav-cta,.btn-primary{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:46px;padding:0 20px;border-radius:13px;background:var(--coral);color:#351b26;font-weight:750;transition:transform .22s ease,filter .22s ease,box-shadow .22s ease}
.nav-cta:hover,.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 10px 22px rgba(230,128,110,.22)}
.nav-cta:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible,.faq-q:focus-visible,.filter-btn:focus-visible{outline:3px solid var(--peach);outline-offset:3px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--peach);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.eyebrow:before{content:"";width:22px;height:2px;background:var(--coral)}
.lead{max-width:720px;color:var(--muted);font-size:18px}
.hero{padding:62px 0 28px}
.page-intro{display:grid;grid-template-columns:1fr .72fr;gap:42px;align-items:end}
.page-intro p{margin-bottom:0}
.breadcrumb{display:flex;gap:9px;align-items:center;color:#a995a7;font-size:13px;margin-top:22px}
.breadcrumb a{color:var(--peach)}
.update-board{margin-top:34px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(135deg,#2d222f,#211921 70%,#392431);box-shadow:var(--shadow)}
.board-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}
.board-title{font-weight:750;font-size:18px}
.status{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:rgba(168,197,161,.14);color:var(--success);font-size:12px;font-weight:700}
.status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(168,197,161,.12)}
.progress-line{height:8px;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden}
.progress-line span{display:block;width:76%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--berry),var(--coral))}
.board-meta{display:flex;justify-content:space-between;gap:15px;margin-top:12px;color:var(--muted);font-size:13px}
.section{padding:58px 0}
.light-section{background:var(--panel-light);color:var(--ink)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:28px}
.section-head p{max-width:560px;margin-bottom:0;color:#786977}
.filter-panel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px;border:1px solid var(--line-dark);border-radius:18px;background:#f8f1f2;margin-bottom:24px}
.filter-label{font-size:13px;font-weight:750;color:#705e6b;margin-right:4px}
.filter-btn{padding:9px 14px;border:1px solid #d9cbd1;border-radius:999px;background:transparent;color:#705e6b;font-size:13px;transition:.2s ease}
.filter-btn:hover{border-color:var(--berry);color:var(--berry-deep);background:#f0e2e8}
.filter-btn.active{background:var(--berry-deep);border-color:var(--berry-deep);color:#fff}
.update-layout{display:grid;grid-template-columns:1.32fr .68fr;gap:20px;align-items:start}
.timeline{display:grid;gap:16px}
.timeline-item{display:grid;grid-template-columns:92px 1fr;gap:16px;position:relative}
.timeline-date{padding-top:19px;color:#8e7383;font-size:12px;font-weight:750;text-align:right}
.timeline-card{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:18px;border:1px solid var(--line-dark);border-radius:var(--radius-md);background:#f8f1f2;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.timeline-card:hover{transform:translateY(-3px);border-color:#c99aae;box-shadow:0 14px 28px rgba(73,43,62,.1)}
.cover{position:relative;min-height:132px;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,#633755,#b35d68 55%,#efae92)}
.cover:before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.28);border-radius:10px}
.cover:after{content:"▶";position:absolute;right:14px;bottom:13px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(30,18,28,.72);color:#fff;font-size:12px}
.cover.two{background:linear-gradient(145deg,#423752,#98728a 52%,#efc09d)}
.cover.three{background:linear-gradient(145deg,#3b3448,#9c4861 55%,#d98173)}
.cover.four{background:linear-gradient(145deg,#56364b,#d27a72 55%,#f2b09c)}
.cover-code{position:absolute;left:16px;top:16px;color:rgba(255,255,255,.85);font-size:12px;letter-spacing:.12em}
.card-info h3{margin:5px 0 8px;color:var(--ink);font-size:19px}
.card-info p{color:#786977;font-size:14px;margin-bottom:14px}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tag{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#eadde3;color:var(--berry-deep);font-size:11px;font-weight:700}
.tag.coral{background:#f5ddd7;color:#874b48}
.tag.green{background:#e3eee1;color:#557153}
.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--berry-deep);font-weight:750;font-size:13px}
.text-link:hover{color:var(--coral)}
.notice-stack{display:grid;gap:16px}
.notice-card{padding:24px;background:#ead9d5}
.notice-card.dark{background:#302432;color:var(--text);border-color:var(--line)}
.notice-card.dark p{color:var(--muted)}
.notice-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:18px;border-radius:13px;background:var(--berry);color:#fff}
.notice-card ul{margin:15px 0 0;padding-left:19px;color:#786977;font-size:14px}
.notice-card.dark ul{color:var(--muted)}
.notice-card li+li{margin-top:8px}
.empty-state{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;padding:20px 22px;border:1px dashed #cdb9c3;border-radius:16px;background:#f5ecee;color:#786977}
.stream-section{padding:72px 0}
.stream-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.stream-card{padding:22px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel);transition:.25s ease}
.stream-card:hover{transform:translateY(-3px);border-color:rgba(242,176,156,.5)}
.stream-card h3{color:var(--text)}
.stream-card p{color:var(--muted);font-size:14px}
.mini-list{display:grid;gap:12px;margin-top:18px}
.mini-item{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:#e6dce2}
.mini-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--coral)}
.faq-section{background:#211a24}
.faq-list{display:grid;gap:10px;max-width:900px}
.faq-item{overflow:hidden;background:#2d2431;border-color:var(--line)}
.faq-q{display:flex;align-items:center;justify-content:space-between;width:100%;padding:19px 22px;background:transparent;color:var(--text);text-align:left;font-weight:700}
.faq-q span:last-child{color:var(--peach);font-size:23px;transition:transform .2s ease}
.faq-item.open .faq-q span:last-child{transform:rotate(45deg)}
.faq-a{display:none;padding:0 22px 20px;color:var(--muted);font-size:14px}
.faq-item.open .faq-a{display:block}
.cta{padding:36px;border-radius:var(--radius-lg);background:linear-gradient(110deg,#713451,#a65364 58%,#d57d70);box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;gap:24px}
.cta h2{margin-bottom:8px}
.cta p{margin:0;color:#f8dfdb}
.cta .btn-secondary{border-color:rgba(255,255,255,.45)}
footer{padding:58px 0 24px;background:#120f15;color:var(--text)}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px;padding-bottom:38px}
.footer-brand p{max-width:310px;color:var(--muted);font-size:13px;margin:18px 0 0}
.footer-title{margin-bottom:14px;color:var(--peach);font-size:13px;font-weight:750}
.footer-links{display:grid;gap:8px;color:var(--muted);font-size:13px}
.footer-links a:hover{color:var(--text)}
.copyright{display:flex;justify-content:space-between;gap:15px;padding-top:20px;border-top:1px solid var(--line);color:#897988;font-size:12px}
.age-layer{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(14,10,16,.76);backdrop-filter:blur(5px)}
.age-layer[hidden]{display:none}
.age-box{width:min(460px,100%);padding:30px;border:1px solid rgba(242,176,156,.35);border-radius:24px;background:#2b202d;box-shadow:var(--shadow)}
.age-box h2{font-size:28px}
.age-box p{color:var(--muted);font-size:14px}
.age-actions{display:flex;gap:10px;margin-top:22px}
.age-actions>*{flex:1}
.btn-exit{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:1px solid var(--line);border-radius:13px;color:var(--text);font-weight:700}
.btn-exit:hover{background:rgba(255,255,255,.08)}
@media(max-width:1024px){
 .brand{min-width:210px}.page-intro{grid-template-columns:1fr .85fr}
 .update-layout{grid-template-columns:1fr}.notice-stack{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
 .container{width:min(var(--max),calc(100% - 28px))}
 .topbar{padding-top:14px}.nav-shell{gap:10px;padding:10px;overflow:hidden}
 .brand{min-width:175px}.brand-name{font-size:13px}.brand-mark{width:34px;height:34px}
 .nav-links{overflow-x:auto;scrollbar-width:none}.nav-links::-webkit-scrollbar{display:none}
 .nav-link{white-space:nowrap;padding:9px 11px}.nav-cta{min-width:96px;padding:0 12px;font-size:13px}
 .page-intro{grid-template-columns:1fr;gap:15px}.hero{padding:45px 0 20px}
 .section{padding:45px 0}.timeline-card{grid-template-columns:145px 1fr}
 .stream-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}
 .cta{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
 h1{font-size:37px}.lead{font-size:16px}.board-top{align-items:flex-start;flex-direction:column}
 .timeline-item{grid-template-columns:1fr;gap:5px}.timeline-date{text-align:left;padding-top:0}
 .timeline-card{grid-template-columns:1fr}.cover{min-height:165px}
 .filter-panel{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.filter-panel::-webkit-scrollbar{display:none}
 .filter-label{white-space:nowrap}.filter-btn{white-space:nowrap}
 .notice-stack,.stream-grid,.footer-grid{grid-template-columns:1fr}
 .empty-state{align-items:flex-start;flex-direction:column}
 .copyright{align-items:flex-start;flex-direction:column}.age-actions{flex-direction:column}
}

/* roulang page: category1 */
:root{
 --bg:#19151d;--bg-soft:#231c27;--panel:#2a222f;--panel-light:#f1e9ed;
 --panel-warm:#ead9d5;--text:#fff8f5;--muted:#b9a9b7;--ink:#2e2430;
 --line:rgba(255,248,245,.13);--line-dark:rgba(50,34,46,.14);
 --berry:#8f3e67;--berry-deep:#672b4e;--coral:#e6806e;--peach:#f2b09c;
 --success:#a8c5a1;--warning:#e9c08d;--radius-lg:26px;--radius-md:18px;
 --radius-sm:12px;--shadow:0 18px 50px rgba(0,0,0,.22);--max:1220px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 84% 8%,rgba(143,62,103,.22),transparent 28rem),var(--bg);color:var(--text);font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer;border:0}
img{display:block;max-width:100%}
.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.topbar{padding:22px 0 0}
.nav-shell{display:flex;align-items:center;gap:18px;padding:13px;border:1px solid var(--line-dark);border-radius:22px;background:var(--panel-light);color:var(--ink);box-shadow:0 12px 35px rgba(0,0,0,.14)}
.brand{display:inline-flex;align-items:center;gap:10px;min-width:250px;font-weight:800;color:var(--berry-deep)}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:var(--berry);color:#fff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.12)}
.brand-mark::after{content:"▶";font-size:13px;margin-left:2px}
.brand-name{font-size:15px;line-height:1.15}
.nav-links{display:flex;align-items:center;gap:7px;flex:1}
.nav-link{display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:13px;color:#705e6b;font-size:13px;font-weight:650;transition:.25s ease;white-space:nowrap}
.nav-link:hover,.nav-link:focus-visible{background:#e5d8de;color:var(--berry-deep);outline:none}
.nav-link.active{background:var(--berry-deep);color:#fff;box-shadow:0 5px 14px rgba(103,43,78,.22)}
.nav-icon{opacity:.7;font-size:16px}
.nav-cta,.btn-primary{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:46px;padding:0 20px;border-radius:13px;background:var(--coral);color:#351b26;font-weight:750;transition:transform .22s ease,filter .22s ease,box-shadow .22s ease;white-space:nowrap}
.nav-cta:hover,.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 10px 22px rgba(230,128,110,.22)}
.nav-cta:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible,.faq-q:focus-visible,.filter-btn:focus-visible{outline:3px solid var(--peach);outline-offset:3px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--peach);font-size:12px;font-weight:700;letter-spacing:.14em}
.eyebrow:before{content:"";width:22px;height:2px;background:var(--coral)}
h1,h2,h3,p{margin-top:0}
h1{margin-bottom:18px;font-size:clamp(34px,5vw,62px);line-height:1.12;letter-spacing:-.045em}
h2{font-size:clamp(26px,3.4vw,42px);line-height:1.2;letter-spacing:-.03em}
h3{font-size:20px;line-height:1.3}
.lead{max-width:720px;color:var(--muted);font-size:18px}
.page-intro{padding:74px 0 42px}
.intro-grid{display:grid;grid-template-columns:1fr .75fr;gap:40px;align-items:end}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;color:var(--muted);font-size:13px}
.breadcrumb a{color:var(--peach)}
.intro-note{padding:23px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(42,34,47,.75);box-shadow:var(--shadow)}
.intro-note strong{display:block;margin-bottom:6px;color:var(--peach)}
.intro-note p{margin:0;color:var(--muted);font-size:14px}
.console{padding:24px 0 28px;background:var(--panel-light);color:var(--ink)}
.console-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.search-box{display:flex;align-items:center;gap:10px;flex:1;min-width:230px;padding:0 15px;border:1px solid var(--line-dark);border-radius:13px;background:#fff8f5;color:#756571}
.search-box span{font-size:18px}
.search-box input{width:100%;min-height:46px;border:0;outline:0;background:transparent;color:var(--ink)}
.search-box input::placeholder{color:#9b8995}
.filter-group{display:flex;gap:8px;overflow:auto;padding-bottom:2px}
.filter-btn{min-height:42px;padding:0 15px;border:1px solid var(--line-dark);border-radius:12px;background:#f8eff1;color:#705e6b;font-size:13px;font-weight:700;white-space:nowrap;transition:.2s ease}
.filter-btn:hover{border-color:var(--berry);color:var(--berry-deep);transform:translateY(-1px)}
.filter-btn.active{background:var(--berry-deep);border-color:var(--berry-deep);color:#fff}
.filter-caption{width:100%;margin:13px 0 0;color:#806e79;font-size:13px}
.content-section{padding:70px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:30px}
.section-head p{max-width:580px;margin-bottom:0;color:var(--muted)}
.results-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px}
.content-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.content-card{position:relative;overflow:hidden;min-height:310px;padding:22px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel);box-shadow:0 12px 30px rgba(0,0,0,.12);transition:.25s ease}
.content-card:first-child{grid-row:span 2;min-height:638px}
.content-card:hover{border-color:rgba(242,176,156,.55);transform:translateY(-4px);box-shadow:0 20px 42px rgba(0,0,0,.24)}
.cover{position:absolute;inset:0;background:linear-gradient(145deg,#512c4c,#a5536b 48%,#e58c7c);opacity:.9}
.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,21,29,.02) 15%,rgba(25,21,29,.9) 88%)}
.cover.one{background:linear-gradient(145deg,#4b2d54,#a45273 45%,#ed9b86)}
.cover.two{background:linear-gradient(145deg,#2f3447,#704d6a 54%,#d58b7d)}
.cover.three{background:linear-gradient(145deg,#503a35,#9e5a5d 50%,#e8b28d)}
.card-content{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.card-top{position:absolute;top:0;left:0;display:flex;gap:8px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:99px;background:rgba(255,248,245,.14);border:1px solid rgba(255,248,245,.22);color:#fff8f5;font-size:12px;font-weight:700;backdrop-filter:blur(5px)}
.badge.coral{background:var(--coral);border-color:var(--coral);color:#3b2029}
.badge.green{background:rgba(168,197,161,.2);border-color:rgba(168,197,161,.45);color:#e0f0dc}
.card-content h3{max-width:430px;margin-bottom:8px;color:#fff;font-size:23px}
.content-card:not(:first-child) .card-content h3{font-size:19px}
.card-content p{max-width:490px;margin-bottom:17px;color:#ddcfd6;font-size:14px}
.card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#f2b09c;font-size:13px;font-weight:700}
.arrow{font-size:20px;transition:.2s ease}
.content-card:hover .arrow{transform:translateX(5px)}
.notice-card{height:max-content;padding:25px;background:var(--panel-warm);color:var(--ink);position:sticky;top:20px}
.notice-card h3{margin-bottom:12px;color:var(--berry-deep)}
.notice-card p{font-size:14px}
.notice-list{display:grid;gap:12px;margin:20px 0 0;padding:0;list-style:none}
.notice-list li{display:flex;gap:10px;color:#655260;font-size:13px}
.notice-list li:before{content:"✓";color:var(--berry);font-weight:800}
.empty-state{display:none;margin-top:18px;padding:25px;border:1px dashed var(--line);border-radius:var(--radius-md);text-align:center;color:var(--muted)}
.pagination{display:flex;justify-content:center;gap:9px;margin-top:28px}
.page-dot{width:38px;height:38px;border-radius:12px;background:var(--panel);color:var(--muted);display:grid;place-items:center}
.page-dot.active{background:var(--coral);color:#351b26;font-weight:800}
.path-section{background:var(--panel-light);color:var(--ink);padding:76px 0}
.path-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:36px;align-items:start}
.path-layout .section-head{display:block}
.path-layout .section-head p{margin-top:15px;color:#786977}
.steps{display:grid;gap:12px}
.step{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:16px;padding:19px 22px;border:1px solid var(--line-dark);border-radius:var(--radius-md);background:#f8f1f2;transition:.22s ease}
.step:hover{border-color:var(--berry);transform:translateX(4px)}
.step-number{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--berry-deep);color:#fff;font-weight:800}
.step h3{margin-bottom:4px;color:var(--ink);font-size:17px}
.step p{margin:0;color:#786977;font-size:13px}
.step-arrow{color:var(--berry);font-size:22px}
.faq-section{padding:74px 0}
.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:42px}
.faq-list{display:grid;gap:10px}
.faq-item{overflow:hidden;background:var(--panel);border-color:var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;width:100%;padding:19px 21px;background:none;color:var(--text);text-align:left;font-weight:700}
.faq-q span:last-child{color:var(--peach);font-size:22px;transition:.2s}
.faq-item.open .faq-q span:last-child{transform:rotate(45deg)}
.faq-a{display:none;padding:0 21px 19px;color:var(--muted);font-size:14px}
.faq-item.open .faq-a{display:block}
.cta-section{padding:20px 0 85px}
.cta-panel{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:33px 38px;border-radius:var(--radius-lg);background:linear-gradient(100deg,var(--berry-deep),#87405f 58%,#a85568);box-shadow:var(--shadow)}
.cta-panel h2{margin:0 0 8px;font-size:30px}
.cta-panel p{margin:0;color:#f2dfe2}
.cta-panel .btn-primary{background:var(--peach)}
footer{padding:52px 0 24px;background:#130f16;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}
.footer-brand p{max-width:310px;color:var(--muted);font-size:13px}
.footer-title{margin-bottom:13px;color:var(--peach);font-size:13px;font-weight:800}
.footer-links{display:grid;gap:8px}
.footer-links a{color:var(--muted);font-size:13px;transition:.2s}
.footer-links a:hover,.footer-links a:focus-visible{color:var(--text);outline:none}
.copyright{display:flex;justify-content:space-between;gap:18px;margin-top:42px;padding-top:19px;border-top:1px solid var(--line);color:#887786;font-size:12px}
.age-modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(13,10,15,.78)}
.age-modal[hidden]{display:none}
.modal-card{width:min(480px,100%);padding:32px;border:1px solid rgba(242,176,156,.35);border-radius:var(--radius-lg);background:var(--panel-light);color:var(--ink);box-shadow:var(--shadow)}
.modal-card h2{margin-bottom:12px;color:var(--berry-deep);font-size:29px}
.modal-card p{color:#766571;font-size:14px}
.modal-actions{display:flex;gap:10px;margin-top:22px}
.modal-actions button{flex:1}
.btn-exit{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:0 18px;border:1px solid var(--line-dark);border-radius:13px;background:transparent;color:var(--ink);font-weight:700}
.btn-exit:hover{background:#e8dbe0}
@media(max-width:1024px){
 .brand{min-width:210px}.intro-grid,.path-layout,.faq-grid{grid-template-columns:1fr}
 .results-layout{grid-template-columns:1fr}.notice-card{position:static}
}
@media(max-width:768px){
 .container{width:min(var(--max),calc(100% - 28px))}
 .nav-shell{align-items:flex-start;flex-wrap:wrap}.brand{min-width:190px}
 .nav-links{order:3;width:100%;overflow-x:auto;flex-basis:100%;padding-top:3px}
 .nav-cta{margin-left:auto}.page-intro{padding:52px 0 30px}.intro-grid{gap:25px}
 .content-grid{grid-template-columns:1fr 1fr}.content-card:first-child{grid-row:auto;min-height:390px;grid-column:span 2}
 .path-section,.content-section,.faq-section{padding:50px 0}.cta-panel{align-items:flex-start;flex-direction:column;padding:28px}
 .footer-grid{grid-template-columns:1fr 1fr}.copyright{flex-direction:column;gap:5px}
}
@media(max-width:520px){
 h1{font-size:36px}.lead{font-size:16px}.section-head{display:block}.section-head p{margin-top:12px}
 .brand{min-width:0}.brand-name{font-size:13px}.nav-cta{padding:0 13px;font-size:13px}
 .content-grid{display:grid;grid-template-columns:1fr}.content-card:first-child{grid-column:auto;min-height:340px}
 .content-card{min-height:290px}.step{grid-template-columns:42px 1fr}.step-arrow{display:none}
 .footer-grid{grid-template-columns:1fr 1fr;gap:24px}.footer-brand{grid-column:span 2}
 .copyright{font-size:11px}.modal-actions{flex-direction:column}
}