/* roulang page: index */
:root {
            --green: #a8d83c;
            --green-dark: #7eaa21;
            --green-soft: #e5f2bd;
            --charcoal: #181b1d;
            --ink: #252a2b;
            --muted: #6e7475;
            --cream: #f5f2e9;
            --paper: #fffdf8;
            --line: #e2e0d7;
            --orange: #f47b45;
            --orange-soft: #fff0e9;
            --shadow: 0 14px 34px rgba(24, 27, 29, .08);
            --radius: 14px;
            --max: 1200px;
        }
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--cream);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
        .container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
        .topline {
            background: var(--green);
            color: var(--charcoal);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .02em;
        }
        .topline .container {
            min-height: 34px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }
        .topline span:last-child { font-weight: 600; }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(24, 27, 29, .98);
            color: #fff;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }
        .nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 28px; }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: 250px;
            font-weight: 900;
            line-height: 1.1;
        }
        .brand-mark {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            background: var(--green);
            color: var(--charcoal);
            border-radius: 10px;
            font-size: 20px;
            font-weight: 900;
        }
        .brand-text { font-size: 16px; }
        .brand-text small { display: block; margin-top: 4px; color: #bfc6c4; font-size: 11px; font-weight: 600; }
        .main-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
        .main-nav a {
            padding: 10px 11px;
            color: #cbd0ce;
            font-size: 14px;
            white-space: nowrap;
            border-bottom: 2px solid transparent;
            transition: color .2s, border-color .2s, background .2s;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--green); border-bottom-color: var(--green); }
        .nav-action, .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 44px;
            padding: 10px 18px;
            border: 1px solid transparent;
            border-radius: 9px;
            font-weight: 800;
            font-size: 14px;
            transition: transform .2s, background .2s, border-color .2s, color .2s, box-shadow .2s;
        }
        .nav-action, .button-primary { background: var(--green); color: var(--charcoal); }
        .nav-action:hover, .button-primary:hover { background: #b9e74e; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(168,216,60,.25); }
        .button-secondary { border-color: var(--charcoal); color: var(--charcoal); background: transparent; }
        .button-secondary:hover { background: var(--green-soft); transform: translateY(-2px); }
        .menu-toggle { display: none; background: transparent; border: 1px solid #57605e; color: #fff; border-radius: 8px; width: 44px; height: 44px; }
        .hero { padding: 76px 0 62px; background: var(--cream); }
        .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 70px; align-items: center; }
        .eyebrow, .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 18px;
            color: var(--green-dark);
            font-size: 13px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .eyebrow::before, .section-kicker::before { content: ""; width: 24px; height: 3px; background: var(--orange); border-radius: 2px; }
        h1, h2, h3, p { margin-top: 0; }
        h1 { max-width: 720px; margin-bottom: 22px; color: var(--charcoal); font-size: clamp(36px, 5vw, 64px); line-height: 1.12; letter-spacing: 0; }
        .hero-copy { max-width: 650px; color: var(--muted); font-size: 18px; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
        .hero-note { margin-top: 18px; color: var(--muted); font-size: 13px; }
        .score-visual {
            position: relative;
            min-height: 380px;
            overflow: hidden;
            padding: 28px;
            color: #fff;
            background: var(--charcoal);
            border-radius: 20px;
            box-shadow: var(--shadow);
        }
        .score-visual::before, .score-visual::after { content: ""; position: absolute; border: 1px solid rgba(168,216,60,.3); pointer-events: none; }
        .score-visual::before { width: 250px; height: 250px; right: -70px; top: -80px; border-radius: 50%; }
        .score-visual::after { width: 1px; height: 100%; left: 50%; top: 0; border-color: rgba(255,255,255,.12); }
        .visual-head { display: flex; justify-content: space-between; color: #bfc6c4; font-size: 13px; }
        .live-dot { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 800; }
        .live-dot::before { content: ""; width: 8px; height: 8px; background: var(--orange); border-radius: 50%; }
        .match-box { position: relative; z-index: 1; margin-top: 52px; text-align: center; }
        .match-box .league { color: var(--green); font-size: 13px; font-weight: 800; }
        .teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin: 22px 0; }
        .team { font-size: 17px; font-weight: 800; }
        .team span { display: block; width: 50px; height: 50px; margin: 0 auto 10px; border: 1px solid #4b5552; border-radius: 50%; background: #27302d; }
        .versus { color: #aab3af; font-size: 12px; }
        .visual-bars { display: grid; gap: 10px; margin-top: 30px; }
        .bar-row { display: flex; align-items: center; gap: 10px; color: #bdc3c0; font-size: 12px; }
        .bar { height: 7px; flex: 1; overflow: hidden; background: #3a4440; border-radius: 8px; }
        .bar i { display: block; height: 100%; background: var(--green); border-radius: inherit; }
        .bar-row:last-child i { background: var(--orange); }
        .quick-section { padding: 0 0 72px; }
        .quick-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
        .quick-link {
            min-height: 108px;
            padding: 17px;
            background: var(--paper);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            transition: transform .2s, border-color .2s, box-shadow .2s;
        }
        .quick-link:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: var(--shadow); }
        .quick-icon { color: var(--orange); font-size: 23px; font-weight: 900; }
        .quick-link strong { display: block; margin-top: 9px; font-size: 15px; }
        .quick-link small { color: var(--muted); font-size: 12px; }
        .section { padding: 76px 0; }
        .section-dark { color: #fff; background: var(--charcoal); }
        .section-head { display: flex; align-items: end; justify-content: space-between; gap: 26px; margin-bottom: 30px; }
        .section-head h2 { margin-bottom: 0; color: inherit; font-size: 32px; line-height: 1.25; }
        .section-head p { max-width: 540px; margin-bottom: 0; color: var(--muted); }
        .section-dark .section-head p { color: #aeb7b3; }
        .status-band { display: grid; grid-template-columns: 1.15fr .85fr 1fr .7fr auto; align-items: center; gap: 20px; padding: 20px 24px; background: #242a29; border: 1px solid #39423e; border-radius: var(--radius); }
        .status-cell small { display: block; color: #9ba6a1; font-size: 12px; }
        .status-cell strong { display: block; margin-top: 4px; font-size: 15px; }
        .status-label { display: inline-flex; padding: 5px 10px; color: var(--charcoal); background: var(--green); border-radius: 20px; font-size: 12px; font-weight: 900; }
        .text-link { color: var(--green); font-weight: 800; }
        .text-link:hover { color: #d1f27b; }
        .news-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .feature-news, .news-list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
        .feature-news { min-height: 290px; padding: 28px; display: flex; flex-direction: column; justify-content: end; }
        .feature-news h3 { max-width: 520px; margin: 12px 0 10px; font-size: 25px; line-height: 1.35; }
        .feature-news p { color: var(--muted); }
        .news-list { padding: 10px 24px; }
        .news-item { display: block; padding: 19px 0; border-bottom: 1px solid var(--line); }
        .news-item:last-child { border-bottom: 0; }
        .news-meta { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 12px; }
        .tag { display: inline-flex; padding: 3px 9px; color: #557213; background: var(--green-soft); border-radius: 4px; font-size: 12px; font-weight: 800; }
        .news-item h3 { margin: 7px 0 0; font-size: 16px; line-height: 1.5; }
        .news-item:hover h3 { color: var(--green-dark); }
        .empty-state { display: flex; min-height: 250px; align-items: center; justify-content: center; color: var(--muted); text-align: center; }
        .app-section { background: var(--orange-soft); }
        .app-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
        .phone-stage { display: flex; justify-content: center; min-height: 355px; align-items: center; }
        .phone { width: 210px; padding: 13px; background: var(--charcoal); border: 5px solid #303635; border-radius: 28px; box-shadow: 14px 18px 0 rgba(24,27,29,.12); transform: rotate(-5deg); }
        .phone-screen { min-height: 325px; padding: 17px 13px; background: var(--paper); border-radius: 17px; color: var(--charcoal); }
        .phone-top { display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; }
        .phone-title { margin: 25px 0 18px; font-size: 17px; font-weight: 900; }
        .phone-row { padding: 11px 0; border-top: 1px solid var(--line); font-size: 11px; }
        .phone-row b { display: block; font-size: 12px; }
        .phone-row span { color: var(--muted); }
        .app-copy h2 { margin-bottom: 15px; font-size: 34px; line-height: 1.25; }
        .app-copy p { color: var(--muted); }
        .feature-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
        .feature-tags span { padding: 7px 11px; color: #566b25; background: #e6f1c7; border-radius: 6px; font-size: 13px; font-weight: 800; }
        .download-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
        .qr-placeholder { display: grid; place-items: center; width: 72px; height: 72px; background: #fff; border: 5px solid #fff; color: var(--charcoal); box-shadow: 0 0 0 1px var(--line); font-size: 10px; text-align: center; }
        .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
        .step { position: relative; padding: 28px 24px 10px 0; border-right: 1px solid var(--line); }
        .step:not(:first-child) { padding-left: 24px; }
        .step:last-child { border-right: 0; }
        .step-number { color: var(--orange); font-size: 13px; font-weight: 900; }
        .step h3 { margin: 11px 0 7px; font-size: 19px; }
        .step p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
        .faq-wrap { max-width: 850px; margin: 0 auto; }
        details { border-top: 1px solid var(--line); }
        details:last-child { border-bottom: 1px solid var(--line); }
        summary { display: flex; justify-content: space-between; gap: 20px; padding: 21px 0; color: var(--charcoal); font-weight: 800; cursor: pointer; list-style: none; }
        summary::-webkit-details-marker { display: none; }
        summary::after { content: "+"; color: var(--green-dark); font-size: 24px; line-height: 1; }
        details[open] summary::after { content: "−"; }
        details p { max-width: 760px; margin: -7px 40px 22px 0; color: var(--muted); }
        .cta { padding: 48px 0; color: #fff; background: var(--green-dark); }
        .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
        .cta h2 { margin-bottom: 8px; font-size: 29px; }
        .cta p { margin-bottom: 0; color: #e7f1d1; }
        .cta .button-primary { background: var(--charcoal); color: #fff; }
        .cta .button-primary:hover { background: #303736; }
        footer { padding: 54px 0 25px; color: #b6c0bc; background: var(--charcoal); }
        .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 35px; padding-bottom: 38px; }
        footer .brand { color: #fff; min-width: 0; }
        footer .brand-text { font-size: 15px; }
        .footer-intro { margin: 18px 0 0; max-width: 300px; color: #8f9995; font-size: 14px; }
        footer h3 { margin: 4px 0 14px; color: #fff; font-size: 15px; }
        .footer-links { display: grid; gap: 8px; font-size: 14px; }
        .footer-links a:hover { color: var(--green); }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid #343b39; color: #7f8a85; font-size: 12px; }
        @media (max-width: 1100px) {
            .main-nav a { padding-inline: 7px; font-size: 13px; }
            .brand { min-width: 220px; }
            .quick-list { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 820px) {
            .container { width: min(var(--max), calc(100% - 32px)); }
            .nav-wrap { min-height: 68px; justify-content: space-between; }
            .brand { min-width: 0; }
            .main-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; padding: 12px 16px 18px; background: var(--charcoal); border-top: 1px solid #3a4240; flex-direction: column; align-items: stretch; }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 12px 8px; border-bottom: 1px solid #343b39; }
            .menu-toggle { display: block; }
            .nav-action { min-height: 40px; padding: 8px 13px; }
            .hero { padding: 52px 0 44px; }
            .hero-grid, .app-grid, .news-layout { grid-template-columns: 1fr; gap: 32px; }
            h1 { font-size: clamp(35px, 9vw, 52px); }
            .score-visual { min-height: 340px; }
            .status-band { grid-template-columns: repeat(2, 1fr); }
            .status-band .text-link { grid-column: 1 / -1; }
            .steps { grid-template-columns: repeat(2, 1fr); }
            .step:nth-child(2) { border-right: 0; }
            .step:nth-child(3), .step:nth-child(4) { border-top: 1px solid var(--line); }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 520px) {
            .topline .container { align-items: flex-start; flex-direction: column; gap: 0; padding-block: 6px; }
            .brand-text { font-size: 13px; }
            .brand-text small { font-size: 10px; }
            .nav-action { display: none; }
            .quick-list { display: flex; overflow-x: auto; margin-right: -16px; padding-right: 16px; }
            .quick-link { min-width: 145px; }
            .section { padding: 54px 0; }
            .section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
            .section-head h2, .app-copy h2 { font-size: 28px; }
            .status-band { grid-template-columns: 1fr 1fr; padding: 17px; gap: 16px; }
            .feature-news { min-height: 250px; padding: 22px; }
            .feature-news h3 { font-size: 21px; }
            .steps { grid-template-columns: 1fr; }
            .step, .step:not(:first-child) { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }
            .step:last-child { border-bottom: 0; }
            .phone-stage { min-height: 300px; }
            .download-row { align-items: flex-start; flex-direction: column; }
            .cta-inner, .footer-bottom { align-items: flex-start; flex-direction: column; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
        }

/* roulang page: index */
:root{
            --green:#16845a;
            --green-dark:#0d5e42;
            --green-soft:#e6f4ed;
            --ink:#17231f;
            --muted:#68746f;
            --paper:#f6f7f3;
            --white:#fff;
            --line:#dfe6e1;
            --amber:#e6a536;
            --red:#c95e4b;
            --radius:18px;
            --radius-sm:11px;
            --shadow:0 18px 45px rgba(22,46,36,.08);
            --shadow-hover:0 22px 50px rgba(22,46,36,.14);
            --container:1180px;
        }
        *,*::before,*::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--paper);
            font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",Arial,sans-serif;
            line-height:1.7;
            font-size:16px;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 40px));margin:0 auto}
        .notice{
            background:var(--ink);
            color:#dce9e1;
            font-size:13px;
            letter-spacing:.02em;
            padding:8px 0;
        }
        .notice-inner{display:flex;align-items:center;gap:10px;white-space:nowrap;overflow:hidden}
        .notice-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
        header{
            background:rgba(246,247,243,.94);
            border-bottom:1px solid var(--line);
            position:sticky;
            top:0;
            z-index:20;
            backdrop-filter:blur(12px);
        }
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:26px}
        .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
        .brand-mark{
            width:34px;height:34px;border-radius:10px;background:var(--green);
            color:white;display:grid;place-items:center;font-size:18px;
            box-shadow:0 6px 16px rgba(22,132,90,.25)
        }
        .brand-text{font-size:16px}
        nav{display:flex;align-items:center;gap:4px;margin-left:auto}
        nav a{
            padding:8px 10px;border-radius:8px;color:#53615b;font-size:14px;
            transition:.2s ease;
        }
        nav a:hover,nav a:focus,nav a.active{color:var(--green-dark);background:var(--green-soft)}
        .nav-action{display:inline-flex;align-items:center;justify-content:center;padding:11px 17px;border-radius:10px;background:var(--green);color:#fff;font-size:14px;font-weight:700;transition:.2s}
        .nav-action:hover,.nav-action:focus{background:var(--green-dark);transform:translateY(-1px)}
        .menu-toggle{display:none;border:1px solid var(--line);background:white;border-radius:9px;padding:8px 11px;color:var(--ink)}
        .hero{padding:76px 0 58px;position:relative;overflow:hidden}
        .hero::before{
            content:"";position:absolute;width:470px;height:470px;border-radius:50%;
            background:rgba(22,132,90,.08);right:-180px;top:-180px;
        }
        .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center;position:relative}
        .eyebrow{display:flex;align-items:center;gap:9px;color:var(--green-dark);font-weight:800;font-size:13px;margin-bottom:18px}
        .eyebrow::before{content:"";width:30px;height:2px;background:var(--amber)}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(38px,5vw,66px);line-height:1.1;letter-spacing:-.055em;margin-bottom:22px;max-width:720px}
        .hero-copy{color:var(--muted);font-size:18px;max-width:650px;margin-bottom:28px}
        .actions{display:flex;gap:12px;flex-wrap:wrap}
        .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 20px;border-radius:10px;font-weight:700;font-size:15px;transition:.2s ease;border:1px solid transparent}
        .btn-primary{background:var(--green);color:white;box-shadow:0 9px 20px rgba(22,132,90,.18)}
        .btn-primary:hover,.btn-primary:focus{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 13px 25px rgba(22,132,90,.25)}
        .btn-secondary{background:transparent;border-color:#b9c9c0;color:var(--green-dark)}
        .btn-secondary:hover,.btn-secondary:focus{border-color:var(--green);background:var(--green-soft)}
        .hero-note{font-size:12px;color:var(--muted);margin-top:16px}
        .match-board{
            background:var(--ink);border-radius:24px;padding:24px;color:white;
            box-shadow:var(--shadow);transform:rotate(1deg)
        }
        .board-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.13)}
        .board-label{font-size:13px;color:#a9c7b8}
        .status{font-size:12px;padding:4px 8px;border-radius:5px;background:rgba(230,165,54,.16);color:#f0bf67}
        .fixture{padding:21px 0;border-bottom:1px solid rgba(255,255,255,.13)}
        .fixture:last-child{border-bottom:0;padding-bottom:4px}
        .fixture-head{display:flex;justify-content:space-between;color:#a9b8b0;font-size:12px;margin-bottom:10px}
        .teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;font-size:15px;font-weight:700}
        .teams span:last-child{text-align:right}
        .versus{font-size:12px;color:#7c9186}
        .board-footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:19px}
        .mini-tag{font-size:11px;color:#b8d2c5;border:1px solid rgba(255,255,255,.16);padding:5px 8px;border-radius:5px}
        section{padding:76px 0}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}
        .section-kicker{color:var(--green);font-size:13px;font-weight:800;margin-bottom:7px}
        h2{font-size:clamp(27px,3vw,40px);line-height:1.2;letter-spacing:-.04em;margin-bottom:8px}
        .section-intro{color:var(--muted);max-width:650px;margin:0}
        .text-link{font-size:14px;color:var(--green-dark);font-weight:800;white-space:nowrap}
        .text-link:hover{text-decoration:underline}
        .sport-index{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
        .sport-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px;display:flex;justify-content:space-between;align-items:center;transition:.2s}
        .sport-item:hover{border-color:#94c6ad;box-shadow:var(--shadow);transform:translateY(-3px)}
        .sport-name{font-weight:800}.sport-meta{font-size:12px;color:var(--muted);display:block;margin-top:3px}
        .arrow{color:var(--green);font-size:22px}
        .data-section{background:#edf2ee}
        .data-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}
        .panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:25px}
        .panel.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
        .panel-title{font-size:18px;font-weight:800;margin-bottom:20px}
        .event-row{display:grid;grid-template-columns:1.2fr .8fr .65fr auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px}
        .event-row:last-child{border-bottom:0}
        .event-name{font-weight:700}.event-league,.event-time{font-size:12px;color:var(--muted)}
        .event-state{font-size:11px;color:var(--green-dark);background:var(--green-soft);padding:4px 8px;border-radius:5px;white-space:nowrap}
        .event-link{color:var(--green-dark);font-size:12px;font-weight:800}
        .timeline{position:relative;padding-left:24px}
        .timeline::before{content:"";position:absolute;left:5px;top:8px;bottom:7px;width:1px;background:#456b5b}
        .time-point{position:relative;margin-bottom:22px}.time-point:last-child{margin-bottom:0}
        .time-point::before{content:"";position:absolute;left:-23px;top:8px;width:9px;height:9px;border:2px solid #80b89e;background:var(--ink);border-radius:50%}
        .time-point strong{display:block;font-size:14px}.time-point span{display:block;color:#aabdb3;font-size:12px;margin-top:3px}
        .news-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px}
        .featured-news{background:var(--green-dark);color:#fff;border-radius:var(--radius);padding:30px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
        .featured-news::after{content:"资讯";position:absolute;right:-8px;top:10px;font-size:100px;font-weight:900;color:rgba(255,255,255,.05)}
        .tag{display:inline-block;width:max-content;font-size:11px;font-weight:800;padding:5px 9px;border-radius:5px;background:var(--green-soft);color:var(--green-dark);margin-bottom:12px}
        .featured-news .tag{background:#326d55;color:#d8f1e3}
        .featured-news h3{font-size:26px;line-height:1.3;margin-bottom:10px;max-width:500px;position:relative}
        .featured-news p{color:#c5d9cf;font-size:14px;margin-bottom:16px;position:relative}
        .news-date{font-size:12px;color:#a6c3b4;position:relative}
        .news-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 23px}
        .news-row{display:block;padding:17px 0;border-bottom:1px solid var(--line);transition:.2s}
        .news-row:last-child{border-bottom:0}.news-row:hover .news-title{color:var(--green)}
        .news-title{font-weight:800;line-height:1.45;margin-bottom:5px;transition:.2s}
        .news-summary{font-size:13px;color:var(--muted);margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        .news-meta{font-size:11px;color:#89958f;display:flex;gap:9px;align-items:center}
        .empty{padding:35px 8px;color:var(--muted);text-align:center}
        .app-section{background:var(--white)}
        .app-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:center}
        .app-visual{min-height:360px;background:#e7f3ec;border-radius:28px;display:grid;place-items:center;position:relative;overflow:hidden}
        .app-visual::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:#c4e5d2;left:-80px;bottom:-90px}
        .phone{width:190px;height:330px;background:#172b22;border:7px solid #0c1812;border-radius:30px;padding:12px;box-shadow:0 20px 35px rgba(20,48,35,.25);position:relative;z-index:1}
        .phone-screen{height:100%;border-radius:20px;background:#f4f8f4;padding:14px 11px;color:var(--ink)}
        .phone-top{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-bottom:18px}
        .phone-card{background:var(--green);color:white;border-radius:10px;padding:13px 10px;margin-bottom:10px}
        .phone-card small{display:block;color:#cde8d7;font-size:9px}.phone-card b{font-size:16px}
        .phone-line{height:9px;background:#dce8df;border-radius:4px;margin:9px 0}.phone-line.short{width:65%}
        .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
        .step-num{width:34px;height:34px;border-radius:9px;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center;font-weight:900;margin-bottom:13px}
        .step h3{font-size:16px;margin-bottom:5px}.step p{font-size:13px;color:var(--muted);margin:0}
        .feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:25px 0}
        .feature-list span{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13px;color:#53615b}
        .faq-grid{max-width:850px;margin:auto}
        details{background:var(--white);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:0 19px}
        summary{cursor:pointer;list-style:none;padding:17px 0;font-weight:800;display:flex;justify-content:space-between;gap:15px}
        summary::-webkit-details-marker{display:none} summary::after{content:"+";color:var(--green);font-size:21px;font-weight:400} details[open] summary::after{content:"−"}
        details p{color:var(--muted);font-size:14px;padding:0 0 17px;margin:0}
        .responsibility{background:#fff8e8;border:1px solid #f0d69e;border-radius:var(--radius);padding:22px 25px;color:#765a27;font-size:14px}
        .cta{padding:65px 0}.cta-box{background:var(--green-dark);border-radius:var(--radius);padding:38px 45px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:25px}
        .cta-box h2{margin-bottom:8px}.cta-box p{color:#c7dfd1;margin:0}.cta-box .btn-primary{background:#fff;color:var(--green-dark);box-shadow:none}
        footer{background:var(--ink);color:#d7e3dc;padding:50px 0 24px}
        .footer-top{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:35px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.14)}
        .footer-brand{font-size:17px;font-weight:800;margin-bottom:12px;color:#fff}.footer-copy{font-size:13px;color:#9db0a5;max-width:290px}
        footer h3{font-size:14px;color:#fff;margin-bottom:13px}footer ul{list-style:none;padding:0;margin:0}footer li{margin:7px 0}footer li a{font-size:13px;color:#9db0a5;transition:.2s}footer li a:hover{color:#fff}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;color:#879a90;font-size:12px}
        :focus-visible{outline:3px solid rgba(230,165,54,.75);outline-offset:3px}
        @media(max-width:1024px){nav{gap:0}.nav-wrap{gap:14px}.brand-text{font-size:14px}.nav-action{padding:10px 12px}.hero-grid{gap:35px}.footer-top{grid-template-columns:1.3fr 1fr 1fr}}
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 30px))}
            .menu-toggle{display:block;margin-left:auto}
            nav{display:none;position:absolute;left:15px;right:15px;top:69px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
            nav.open{display:flex}nav a{padding:11px 13px}.nav-action{display:none}
            .hero{padding:55px 0 42px}.hero-grid,.data-grid,.news-layout,.app-grid{grid-template-columns:1fr}
            .hero-grid{gap:38px}h1{font-size:42px}.hero-copy{font-size:16px}
            .match-board{transform:none}.sport-index{grid-template-columns:repeat(2,1fr)}
            section{padding:55px 0}.section-head{display:block}.section-head .text-link{display:inline-block;margin-top:12px}
            .app-grid{gap:30px}.app-visual{min-height:320px}.steps{gap:12px}
            .cta-box{display:block;padding:30px 25px}.cta-box .btn{margin-top:20px}
            .footer-top{grid-template-columns:1fr 1fr;gap:28px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}
        }
        @media(max-width:520px){
            .notice{font-size:11px}.brand-text{font-size:13px}.brand-mark{width:30px;height:30px}
            h1{font-size:34px}.actions .btn{width:100%}.sport-index{grid-template-columns:1fr}
            .panel{padding:19px}.event-row{grid-template-columns:1fr auto;gap:4px 10px}.event-row .event-league{grid-column:1}.event-row .event-time{grid-column:1}.event-link{grid-column:2;grid-row:1 / span 2}
            .featured-news{min-height:270px;padding:24px}.featured-news h3{font-size:22px}
            .steps{grid-template-columns:1fr}.feature-list{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr}
            .footer-bottom{font-size:11px}
        }

/* roulang page: article */
:root {
            --green:#a8d83c;
            --green-dark:#7eaa21;
            --green-soft:#e5f2bd;
            --charcoal:#181b1d;
            --ink:#252a2b;
            --muted:#6e7475;
            --cream:#f5f2e9;
            --paper:#fffdf8;
            --line:#e2e0d7;
            --orange:#f47b45;
            --orange-soft:#fff0e9;
            --shadow:0 14px 34px rgba(24,27,29,.08);
            --shadow-hover:0 20px 42px rgba(24,27,29,.13);
            --radius:14px;
            --radius-sm:9px;
            --max:1200px;
        }
        * { box-sizing:border-box; }
        html { scroll-behavior:smooth; }
        body {
            margin:0;
            color:var(--ink);
            background:var(--cream);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.75;
            -webkit-font-smoothing:antialiased;
        }
        a { color:inherit; text-decoration:none; }
        a:hover { color:var(--green-dark); }
        img { max-width:100%; height:auto; display:block; }
        button,input { font:inherit; }
        button { cursor:pointer; }
        .container { width:min(var(--max),calc(100% - 48px)); margin:0 auto; }
        .topline {
            min-height:34px;
            color:#d8dfdc;
            background:#111415;
            font-size:12px;
        }
        .topline .container {
            min-height:34px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
        }
        .topline strong { color:var(--green); }
        .site-header {
            position:sticky;
            top:0;
            z-index:20;
            color:#fff;
            background:rgba(24,27,29,.98);
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .nav-wrap {
            min-height:76px;
            display:flex;
            align-items:center;
            gap:25px;
        }
        .brand {
            display:inline-flex;
            align-items:center;
            gap:11px;
            min-width:250px;
            color:#fff;
            font-weight:900;
            line-height:1.1;
        }
        .brand-mark {
            width:38px;
            height:38px;
            display:grid;
            place-items:center;
            color:var(--charcoal);
            background:var(--green);
            border-radius:10px;
            font-size:20px;
            font-weight:900;
        }
        .brand-text { font-size:16px; }
        .brand-text small {
            display:block;
            margin-top:4px;
            color:#bfc6c4;
            font-size:11px;
            font-weight:600;
        }
        .main-nav {
            display:flex;
            align-items:center;
            gap:2px;
            flex:1;
        }
        .main-nav a {
            padding:10px 10px;
            color:#cbd0ce;
            font-size:14px;
            white-space:nowrap;
            border-bottom:2px solid transparent;
            transition:color .2s,border-color .2s,background .2s;
        }
        .main-nav a:hover,
        .main-nav a.active {
            color:var(--green);
            border-bottom-color:var(--green);
        }
        .nav-action,.button {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:44px;
            padding:10px 18px;
            border:1px solid transparent;
            border-radius:9px;
            font-size:14px;
            font-weight:800;
            transition:transform .2s,background .2s,border-color .2s,color .2s,box-shadow .2s;
        }
        .nav-action,.button-primary {
            color:var(--charcoal);
            background:var(--green);
        }
        .nav-action:hover,.button-primary:hover {
            color:var(--charcoal);
            background:#b9e74e;
            transform:translateY(-2px);
            box-shadow:0 8px 18px rgba(168,216,60,.25);
        }
        .button-secondary {
            color:var(--charcoal);
            background:transparent;
            border-color:var(--charcoal);
        }
        .button-secondary:hover {
            color:var(--charcoal);
            background:var(--green-soft);
            transform:translateY(-2px);
        }
        .button:focus-visible,.nav-action:focus-visible,.main-nav a:focus-visible,
        .menu-toggle:focus-visible,.toc a:focus-visible {
            outline:3px solid rgba(168,216,60,.6);
            outline-offset:3px;
        }
        .menu-toggle {
            display:none;
            width:44px;
            height:44px;
            color:#fff;
            background:transparent;
            border:1px solid #57605e;
            border-radius:8px;
        }
        .page-hero {
            padding:62px 0 54px;
            background:
                radial-gradient(circle at 84% 20%,rgba(168,216,60,.2),transparent 28%),
                var(--cream);
            border-bottom:1px solid var(--line);
        }
        .breadcrumbs {
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:8px;
            margin-bottom:28px;
            color:var(--muted);
            font-size:13px;
        }
        .breadcrumbs a { color:var(--green-dark); font-weight:700; }
        .breadcrumbs span { color:#a3a9a4; }
        .article-heading { max-width:870px; }
        .eyebrow,.section-kicker {
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:17px;
            color:var(--green-dark);
            font-size:13px;
            font-weight:900;
            letter-spacing:.07em;
        }
        .eyebrow::before,.section-kicker::before {
            content:"";
            width:24px;
            height:3px;
            background:var(--orange);
            border-radius:2px;
        }
        h1,h2,h3,p { overflow-wrap:anywhere; }
        h1 {
            margin:0;
            color:var(--charcoal);
            font-size:clamp(34px,5vw,58px);
            line-height:1.18;
            letter-spacing:-.035em;
            font-weight:950;
        }
        .article-summary {
            max-width:800px;
            margin:22px 0 20px;
            color:var(--muted);
            font-size:18px;
        }
        .article-meta {
            display:flex;
            flex-wrap:wrap;
            gap:12px 22px;
            color:var(--muted);
            font-size:13px;
        }
        .meta-label {
            display:inline-flex;
            align-items:center;
            gap:7px;
        }
        .meta-label b { color:var(--ink); }
        .tag {
            display:inline-flex;
            align-items:center;
            min-height:25px;
            padding:3px 10px;
            color:#557213;
            background:var(--green-soft);
            border-radius:20px;
            font-size:12px;
            font-weight:800;
        }
        .reading-layout {
            display:grid;
            grid-template-columns:minmax(0,790px) 280px;
            gap:70px;
            align-items:start;
            padding:68px 0 82px;
        }
        .article-card {
            min-width:0;
            padding:42px 48px;
            background:var(--paper);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
        }
        .article-content { color:#3c4542; font-size:17px; line-height:1.95; }
        .article-content h2 {
            margin:38px 0 14px;
            color:var(--charcoal);
            font-size:29px;
            line-height:1.3;
        }
        .article-content h3 {
            margin:28px 0 10px;
            color:var(--charcoal);
            font-size:22px;
            line-height:1.4;
        }
        .article-content p { margin:0 0 20px; }
        .article-content ul,.article-content ol { margin:0 0 22px; padding-left:26px; }
        .article-content li { margin:7px 0; }
        .article-content a {
            color:var(--green-dark);
            text-decoration:underline;
            text-decoration-thickness:1px;
            text-underline-offset:3px;
        }
        .article-content blockquote {
            margin:28px 0;
            padding:18px 22px;
            color:#55615c;
            background:var(--green-soft);
            border-left:4px solid var(--green-dark);
            border-radius:0 var(--radius-sm) var(--radius-sm) 0;
        }
        .article-content img { margin:28px auto; border-radius:var(--radius-sm); }
        .article-content table {
            width:100%;
            margin:24px 0;
            border-collapse:collapse;
            background:#fff;
        }
        .article-content th,.article-content td {
            padding:11px 13px;
            text-align:left;
            border:1px solid var(--line);
        }
        .article-content th { background:var(--green-soft); color:var(--charcoal); }
        .empty-state {
            padding:42px 20px;
            color:var(--muted);
            text-align:center;
            background:var(--paper);
            border:1px dashed #c6cbc3;
            border-radius:var(--radius);
        }
        .empty-state strong { display:block; margin-bottom:12px; color:var(--charcoal); font-size:22px; }
        .empty-state a { color:var(--green-dark); font-weight:800; }
        .side-stack { position:sticky; top:105px; }
        .side-box {
            padding:23px;
            margin-bottom:18px;
            background:var(--paper);
            border:1px solid var(--line);
            border-radius:var(--radius);
        }
        .side-box h2 {
            margin:0 0 15px;
            color:var(--charcoal);
            font-size:18px;
        }
        .toc {
            display:flex;
            flex-direction:column;
            gap:10px;
            color:var(--muted);
            font-size:14px;
        }
        .toc a {
            padding-left:12px;
            border-left:2px solid var(--line);
            transition:color .2s,border-color .2s;
        }
        .toc a:hover { color:var(--green-dark); border-left-color:var(--green); }
        .notice {
            color:#655b4b;
            background:var(--orange-soft);
            border-color:#f5d2c3;
            font-size:13px;
        }
        .article-footer {
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            gap:14px;
            padding-top:25px;
            margin-top:36px;
            border-top:1px solid var(--line);
        }
        .related {
            padding:70px 0;
            background:#e9eee5;
            border-top:1px solid var(--line);
        }
        .section-head {
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:25px;
            margin-bottom:27px;
        }
        .section-head h2 { margin:0; color:var(--charcoal); font-size:31px; line-height:1.25; }
        .section-head p { max-width:510px; margin:0; color:var(--muted); }
        .related-grid {
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:18px;
        }
        .related-card {
            padding:25px;
            background:var(--paper);
            border:1px solid var(--line);
            border-radius:var(--radius);
            transition:transform .2s,box-shadow .2s,border-color .2s;
        }
        .related-card:hover {
            transform:translateY(-4px);
            border-color:var(--green);
            box-shadow:var(--shadow-hover);
        }
        .related-card h3 {
            margin:14px 0 8px;
            color:var(--charcoal);
            font-size:19px;
            line-height:1.4;
        }
        .related-card p { margin:0 0 18px; color:var(--muted); font-size:14px; }
        .card-meta { color:var(--muted); font-size:12px; }
        .responsibility {
            padding:38px 0;
            color:#dbe3de;
            background:var(--charcoal);
        }
        .responsibility .container {
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:28px;
        }
        .responsibility h2 { margin:0 0 8px; color:#fff; font-size:22px; }
        .responsibility p { max-width:780px; margin:0; color:#acb8b2; font-size:14px; }
        footer {
            padding:48px 0 20px;
            color:#c4cbc7;
            background:#111415;
        }
        .footer-top {
            display:grid;
            grid-template-columns:1.6fr repeat(3,1fr);
            gap:35px;
            padding-bottom:36px;
        }
        .footer-brand { color:#fff; font-size:18px; font-weight:900; }
        .footer-copy { max-width:300px; margin:13px 0 0; color:#919b96; font-size:13px; }
        footer h3 { margin:0 0 14px; color:#fff; font-size:14px; }
        footer ul { padding:0; margin:0; list-style:none; }
        footer li { margin:7px 0; color:#aeb8b3; font-size:13px; }
        footer a { transition:color .2s; }
        footer a:hover { color:var(--green); }
        .footer-bottom {
            display:flex;
            justify-content:space-between;
            gap:20px;
            padding-top:18px;
            color:#7f8984;
            border-top:1px solid rgba(255,255,255,.1);
            font-size:12px;
        }
        @media (max-width:1024px) {
            .brand { min-width:220px; }
            .main-nav a { padding-left:7px; padding-right:7px; font-size:13px; }
            .reading-layout { grid-template-columns:minmax(0,1fr) 245px; gap:35px; }
        }
        @media (max-width:768px) {
            .container { width:min(var(--max),calc(100% - 34px)); }
            .nav-wrap { min-height:68px; gap:10px; }
            .brand { min-width:0; flex:1; }
            .brand-text { font-size:14px; }
            .brand-text small { font-size:10px; }
            .main-nav {
                display:none;
                position:absolute;
                top:68px;
                left:17px;
                right:17px;
                padding:10px;
                flex-direction:column;
                align-items:stretch;
                background:var(--charcoal);
                border:1px solid #414948;
                border-radius:var(--radius-sm);
                box-shadow:var(--shadow-hover);
            }
            .main-nav.open { display:flex; }
            .main-nav a { padding:12px 13px; border-bottom:0; border-left:3px solid transparent; }
            .main-nav a:hover,.main-nav a.active { border-left-color:var(--green); background:#22282a; }
            .nav-action { min-height:40px; padding:8px 12px; font-size:12px; }
            .menu-toggle { display:block; }
            .page-hero { padding:42px 0 38px; }
            .reading-layout { display:block; padding:42px 0 58px; }
            .side-stack { position:static; margin-top:22px; }
            .side-box { margin-bottom:13px; }
            .article-card { padding:29px 23px; }
            .article-content { font-size:16px; }
            .related-grid { grid-template-columns:1fr; }
            .responsibility .container { display:block; }
            .responsibility .button { margin-top:20px; }
            .footer-top { grid-template-columns:repeat(2,1fr); gap:28px 18px; }
            .footer-top > div:first-child { grid-column:1/-1; }
            .footer-bottom { display:block; }
            .footer-bottom span { display:block; margin-top:7px; }
        }
        @media (max-width:520px) {
            .topline .container { display:block; padding:6px 0; }
            .topline .container span:last-child { display:none; }
            .brand-mark { width:34px; height:34px; font-size:17px; }
            .brand-text { max-width:175px; line-height:1.25; }
            .brand-text small { display:none; }
            h1 { font-size:34px; }
            .article-summary { font-size:16px; }
            .article-card { border-radius:10px; }
            .article-content h2 { font-size:25px; }
            .article-content h3 { font-size:20px; }
            .article-content table { display:block; overflow-x:auto; white-space:nowrap; }
            .section-head { display:block; }
            .section-head h2 { font-size:27px; margin-bottom:10px; }
            .footer-top { grid-template-columns:1fr; }
            .footer-top > div:first-child { grid-column:auto; }
        }

/* roulang page: category1 */
:root{
            --green:#a8d83c;--green-dark:#7eaa21;--green-soft:#e5f2bd;
            --charcoal:#181b1d;--ink:#252a2b;--muted:#6e7475;--cream:#f5f2e9;
            --paper:#fffdf8;--line:#e2e0d7;--orange:#f47b45;--orange-soft:#fff0e9;
            --shadow:0 14px 34px rgba(24,27,29,.08);--shadow-hover:0 20px 42px rgba(24,27,29,.14);
            --radius:14px;--max:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;color:var(--ink);background:var(--cream);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--max),calc(100% - 48px));margin:0 auto}
        .topline{background:#101313;color:#cbd0ce;font-size:12px;border-bottom:1px solid rgba(255,255,255,.07)}
        .topline .container{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:18px}
        .topline strong{color:var(--green)}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(24,27,29,.98);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:28px}
        .brand{display:inline-flex;align-items:center;gap:11px;min-width:250px;font-weight:900;line-height:1.1}
        .brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--green);color:var(--charcoal);border-radius:10px;font-size:20px;font-weight:900}
        .brand-text{font-size:16px}.brand-text small{display:block;margin-top:4px;color:#bfc6c4;font-size:11px;font-weight:600}
        .main-nav{display:flex;align-items:center;gap:4px;flex:1}
        .main-nav a{padding:10px 11px;color:#cbd0ce;font-size:14px;white-space:nowrap;border-bottom:2px solid transparent;transition:.2s}
        .main-nav a:hover,.main-nav a.active{color:var(--green);border-bottom-color:var(--green)}
        .nav-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:9px;font-weight:800;font-size:14px;transition:.2s}
        .nav-action,.button-primary{background:var(--green);color:var(--charcoal)}
        .nav-action:hover,.button-primary:hover{background:#b9e74e;transform:translateY(-2px);box-shadow:0 8px 18px rgba(168,216,60,.25)}
        .button-secondary{border-color:var(--charcoal);color:var(--charcoal);background:transparent}
        .button-secondary:hover{background:var(--green-soft);transform:translateY(-2px)}
        .menu-toggle{display:none;background:transparent;border:1px solid #57605e;color:#fff;border-radius:8px;width:44px;height:44px}
        .page-hero{padding:72px 0 64px;background:var(--cream);border-bottom:1px solid var(--line)}
        .hero-layout{display:grid;grid-template-columns:1fr 390px;gap:70px;align-items:center}
        .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:17px;color:var(--green-dark);font-size:13px;font-weight:900;letter-spacing:.08em}
        .eyebrow:before,.section-kicker:before{content:"";width:24px;height:3px;background:var(--orange);border-radius:2px}
        h1{max-width:750px;margin:0 0 20px;font-size:clamp(38px,5vw,66px);line-height:1.12;letter-spacing:-.04em}
        .lead{max-width:680px;color:var(--muted);font-size:18px;margin:0}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
        .hero-card{padding:25px;background:var(--charcoal);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
        .hero-card h2{margin:0 0 20px;font-size:20px}
        .update-line{display:flex;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.13);font-size:13px}
        .update-line:last-child{border:0}.update-line span{color:#aeb7b3}.update-line strong{color:var(--green);font-weight:700}
        .section{padding:76px 0}.section-white{background:var(--paper)}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:26px;margin-bottom:30px}
        .section-head h2{margin:0;font-size:32px;line-height:1.25}.section-head p{max-width:560px;margin:0;color:var(--muted)}
        .index-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
        .index-link{padding:12px 18px;background:var(--paper);border:1px solid var(--line);border-radius:9px;font-weight:800;transition:.2s}
        .index-link:hover,.index-link.active{border-color:var(--green);background:var(--green-soft);color:var(--green-dark)}
        .content-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}
        .feature-card,.news-panel,.info-card,.guide-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
        .feature-card{min-height:330px;padding:32px;display:flex;flex-direction:column;justify-content:end;background:linear-gradient(145deg,#fffdf8 0%,#edf5d7 100%)}
        .feature-card h3{max-width:620px;margin:14px 0 10px;font-size:28px;line-height:1.35}
        .feature-card p{max-width:600px;margin:0;color:var(--muted)}
        .tag{display:inline-flex;width:max-content;padding:4px 10px;color:#557213;background:var(--green-soft);border-radius:6px;font-size:12px;font-weight:800}
        .news-panel{padding:10px 24px}.news-item{display:block;padding:19px 0;border-bottom:1px solid var(--line);transition:.2s}
        .news-item:last-child{border-bottom:0}.news-item:hover{padding-left:6px}.news-item h3{margin:8px 0 5px;font-size:17px;line-height:1.45}
        .news-item:hover h3{color:var(--green-dark)}.news-item p{margin:0;color:var(--muted);font-size:14px}
        .meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
        .notice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .info-card{padding:25px;box-shadow:none}.info-card:nth-child(2){background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
        .info-card:nth-child(2) p{color:#b8c0bd}.info-card h3{margin:15px 0 8px;font-size:20px}.info-card p{margin:0;color:var(--muted);font-size:14px}
        .number{color:var(--orange);font-size:28px;font-weight:900;line-height:1}
        .guide-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:35px;align-items:start}
        .guide-copy h2{font-size:32px;line-height:1.3;margin:0 0 15px}.guide-copy p{color:var(--muted)}
        .guide-list{display:grid;gap:12px}.guide-card{padding:19px 22px;display:flex;gap:17px;align-items:flex-start;transition:.2s}
        .guide-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--green)}
        .guide-icon{width:32px;height:32px;display:grid;place-items:center;background:var(--green);color:var(--charcoal);border-radius:8px;font-weight:900;flex:none}
        .guide-card h3{margin:0 0 3px;font-size:17px}.guide-card p{margin:0;color:var(--muted);font-size:14px}
        .faq-list{max-width:900px;margin:auto}.faq-item{border-bottom:1px solid var(--line)}
        .faq-item summary{padding:19px 0;cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:15px}
        .faq-item summary:after{content:"+";color:var(--green-dark);font-size:22px;line-height:1}.faq-item[open] summary:after{content:"−"}
        .faq-item p{margin:0;padding:0 30px 20px 0;color:var(--muted);font-size:15px}
        .responsibility{padding:20px 24px;border-left:4px solid var(--orange);background:var(--orange-soft);border-radius:8px;color:#5e5149}
        .cta{padding:52px 0;background:var(--green)}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{margin:0 0 8px;font-size:30px}.cta p{margin:0;color:#3f541f}
        .cta .button{background:var(--charcoal);color:#fff}.cta .button:hover{background:#303638}
        footer{padding:50px 0 20px;background:var(--charcoal);color:#fff}.footer-top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:35px}
        .footer-brand{font-size:18px;font-weight:900}.footer-copy{max-width:290px;color:#aeb7b3;font-size:14px;margin-top:14px}
        footer h3{margin:0 0 13px;font-size:14px;color:var(--green)}footer ul{list-style:none;margin:0;padding:0}footer li{margin:7px 0;color:#bfc6c4;font-size:13px}footer li a:hover{color:var(--green)}
        .footer-bottom{display:flex;justify-content:space-between;gap:15px;margin-top:38px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);color:#89938f;font-size:12px}
        :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
        @media(max-width:1024px){.nav-wrap{gap:15px}.brand{min-width:220px}.main-nav a{padding:10px 6px;font-size:13px}.hero-layout{gap:35px}.footer-top{grid-template-columns:1.3fr repeat(3,1fr)}}
        @media(max-width:768px){.container{width:min(var(--max),calc(100% - 32px))}.topline .container{min-height:30px}.topline span:last-child{display:none}.menu-toggle{display:block;margin-left:auto}.main-nav{display:none;position:absolute;top:76px;left:0;right:0;padding:12px 16px;background:var(--charcoal);border-top:1px solid rgba(255,255,255,.1);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{padding:12px;border-bottom:1px solid rgba(255,255,255,.08)}.nav-action{display:none}.hero-layout,.content-grid,.guide-layout{grid-template-columns:1fr}.page-hero{padding:55px 0}.hero-card{max-width:520px}.section{padding:58px 0}.notice-grid{grid-template-columns:1fr}.section-head{display:block}.section-head p{margin-top:12px}.footer-top{grid-template-columns:1fr 1fr}.cta-inner{display:block}.cta .button{margin-top:22px}}
        @media(max-width:520px){h1{font-size:38px}.lead{font-size:16px}.hero-actions .button{width:100%}.feature-card{min-height:300px;padding:23px}.feature-card h3{font-size:23px}.news-panel{padding:8px 17px}.footer-top{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}.index-bar{display:grid;grid-template-columns:1fr 1fr}.index-link{text-align:center;padding:10px 8px;font-size:13px}}

/* roulang page: category2 */
:root{
            --green:#a8d83c;
            --green-dark:#7eaa21;
            --green-soft:#e5f2bd;
            --charcoal:#181b1d;
            --ink:#252a2b;
            --muted:#6e7475;
            --cream:#f5f2e9;
            --paper:#fffdf8;
            --line:#e2e0d7;
            --orange:#f47b45;
            --orange-soft:#fff0e9;
            --shadow:0 14px 34px rgba(24,27,29,.08);
            --shadow-hover:0 20px 42px rgba(24,27,29,.14);
            --radius:14px;
            --max:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;color:var(--ink);background:var(--cream);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,select{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--max),calc(100% - 48px));margin:0 auto}
        .topline{background:var(--green);color:var(--charcoal);font-size:12px;font-weight:700}
        .topline .container{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:18px}
        .topline span:last-child{opacity:.72}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(24,27,29,.98);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:25px}
        .brand{display:inline-flex;align-items:center;gap:11px;min-width:250px;font-weight:900;line-height:1.1}
        .brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--green);color:var(--charcoal);border-radius:10px;font-size:20px;font-weight:900}
        .brand-text{font-size:16px}
        .brand-text small{display:block;margin-top:4px;color:#bfc6c4;font-size:11px;font-weight:600}
        .main-nav{display:flex;align-items:center;gap:3px;flex:1}
        .main-nav a{padding:10px 10px;color:#cbd0ce;font-size:14px;white-space:nowrap;border-bottom:2px solid transparent;transition:.2s}
        .main-nav a:hover,.main-nav a.active{color:var(--green);border-bottom-color:var(--green)}
        .nav-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:9px;font-weight:800;font-size:14px;transition:.2s}
        .nav-action,.button-primary{background:var(--green);color:var(--charcoal)}
        .nav-action:hover,.button-primary:hover{background:#b9e74e;transform:translateY(-2px);box-shadow:0 8px 18px rgba(168,216,60,.25)}
        .button-secondary{border-color:var(--charcoal);color:var(--charcoal);background:transparent}
        .button-secondary:hover{background:var(--green-soft);transform:translateY(-2px)}
        .menu-toggle{display:none;background:transparent;border:1px solid #57605e;color:#fff;border-radius:8px;width:44px;height:44px}
        .page-hero{padding:72px 0 66px;background:linear-gradient(120deg,#f5f2e9 0%,#edf3db 100%);border-bottom:1px solid var(--line)}
        .hero-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
        .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--green-dark);font-size:13px;font-weight:900;letter-spacing:.07em}
        .eyebrow:before,.section-kicker:before{content:"";width:24px;height:3px;background:var(--orange);border-radius:2px}
        h1{margin:0 0 20px;font-size:clamp(38px,5vw,64px);line-height:1.12;letter-spacing:-.04em}
        .hero-copy{max-width:650px;color:var(--muted);font-size:18px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
        .hero-note{margin-top:15px;color:var(--muted);font-size:13px}
        .court-card{position:relative;min-height:310px;padding:25px;background:var(--charcoal);color:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
        .court-card:after{content:"";position:absolute;inset:20px;border:1px solid rgba(168,216,60,.35);border-radius:16px;pointer-events:none}
        .court-card h2{position:relative;z-index:1;margin:0 0 7px;font-size:22px}
        .court-card p{position:relative;z-index:1;color:#b7c0bc;font-size:13px}
        .court-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(168,216,60,.32)}
        .court-ring{position:absolute;left:50%;top:50%;width:110px;height:110px;transform:translate(-50%,-50%);border:1px solid rgba(168,216,60,.42);border-radius:50%}
        .game-chip{position:absolute;z-index:2;padding:10px 13px;background:#29312d;border:1px solid #45554b;border-radius:10px;font-size:12px}
        .game-chip strong{display:block;color:var(--green);font-size:15px}
        .chip-a{top:108px;left:38px}.chip-b{right:38px;bottom:74px}
        .signal{position:absolute;right:25px;top:25px;z-index:2;color:var(--green);font-size:12px}
        .section{padding:76px 0}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:30px}
        .section-head h2{margin:0;font-size:32px;line-height:1.25}
        .section-head p{max-width:550px;margin:0;color:var(--muted)}
        .filter-bar{display:flex;flex-wrap:wrap;gap:10px;padding:15px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
        .filter-bar label{color:var(--muted);font-size:13px;font-weight:700;align-self:center}
        .filter-bar select{min-width:145px;padding:9px 35px 9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);outline:none}
        .filter-bar select:focus,.search-input:focus{border-color:var(--green-dark);box-shadow:0 0 0 3px var(--green-soft)}
        .schedule-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:22px;margin-top:22px}
        .schedule-panel,.info-panel,.guide-card,.faq-list,.cta-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
        .schedule-panel{padding:8px 25px}
        .match-row{display:grid;grid-template-columns:1.1fr .75fr .6fr auto;gap:18px;align-items:center;padding:19px 0;border-bottom:1px solid var(--line)}
        .match-row:last-child{border-bottom:0}
        .match-name{font-weight:800}.match-name small{display:block;color:var(--muted);font-size:12px;font-weight:500}
        .match-time{font-weight:800;font-variant-numeric:tabular-nums}
        .status{display:inline-flex;width:max-content;padding:4px 9px;border-radius:6px;background:var(--green-soft);color:#557213;font-size:12px;font-weight:800}
        .status.wait{background:var(--orange-soft);color:#ad532d}
        .row-link{color:var(--green-dark);font-size:13px;font-weight:800}
        .row-link:hover{color:var(--orange)}
        .info-panel{padding:27px}
        .info-panel.dark{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
        .info-panel h3{margin:0 0 14px;font-size:22px}
        .info-panel p{color:var(--muted);font-size:14px}
        .dark p{color:#b9c1bd}
        .metric{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px}
        .metric strong{color:var(--green)}
        .topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
        .guide-card{padding:25px;transition:.2s}
        .guide-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--green)}
        .guide-card .number{color:var(--orange);font-weight:900;font-size:14px}
        .guide-card h3{margin:8px 0 9px;font-size:20px}
        .guide-card p{margin:0;color:var(--muted);font-size:14px}
        .tag{display:inline-flex;padding:3px 9px;color:#557213;background:var(--green-soft);border-radius:6px;font-size:12px;font-weight:800}
        .notice{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
        .notice-box{padding:28px;background:var(--orange-soft);border-left:4px solid var(--orange);border-radius:var(--radius)}
        .notice-box h3{margin:0 0 8px;font-size:21px}.notice-box p{margin:0;color:#6f625c;font-size:14px}
        .app-strip{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center;padding:38px;background:var(--charcoal);color:#fff;border-radius:20px}
        .app-strip h2{margin:0 0 10px;font-size:30px}.app-strip p{color:#b9c1bd}
        .app-features{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}
        .app-features span{padding:6px 10px;border:1px solid #445049;border-radius:7px;color:#dce7df;font-size:13px}
        .faq-list{overflow:hidden}
        details{padding:20px 25px;border-bottom:1px solid var(--line)}
        details:last-child{border-bottom:0}
        summary{cursor:pointer;font-weight:800;list-style:none;padding-right:25px;position:relative}
        summary:after{content:"＋";position:absolute;right:0;color:var(--green-dark)}
        details[open] summary:after{content:"－"}
        details p{margin:12px 0 0;color:var(--muted);font-size:14px}
        .cta-box{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:32px}
        .cta-box h2{margin:0 0 7px;font-size:28px}.cta-box p{margin:0;color:var(--muted)}
        footer{padding:55px 0 22px;background:var(--charcoal);color:#fff}
        .footer-top{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:35px}
        .footer-brand{font-size:19px;font-weight:900}.footer-copy{max-width:310px;color:#aeb7b3;font-size:13px}
        footer h3{margin:0 0 13px;font-size:15px}footer ul{padding:0;margin:0;list-style:none}footer li{margin:7px 0;color:#aeb7b3;font-size:13px}footer a:hover{color:var(--green)}
        .footer-bottom{display:flex;justify-content:space-between;gap:15px;padding-top:24px;margin-top:35px;border-top:1px solid rgba(255,255,255,.12);color:#89938e;font-size:12px}
        :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
        @media(max-width:1024px){.brand{min-width:210px}.main-nav a{padding-inline:6px;font-size:13px}.hero-layout{gap:35px}.schedule-grid{grid-template-columns:1fr}.footer-top{grid-template-columns:1.5fr repeat(3,1fr)}}
        @media(max-width:768px){.container{width:min(var(--max),calc(100% - 32px))}.topline .container{min-height:32px}.topline span:last-child{display:none}.nav-wrap{min-height:68px}.brand{min-width:0;flex:1}.brand-text{font-size:14px}.main-nav{display:none;position:absolute;left:16px;right:16px;top:68px;padding:12px;background:var(--charcoal);border:1px solid #37413d;border-radius:10px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow-hover)}.main-nav.open{display:flex}.main-nav a{padding:11px 13px}.nav-action{display:none}.menu-toggle{display:block}.page-hero{padding:55px 0}.hero-layout{grid-template-columns:1fr}.court-card{min-height:270px}.section{padding:57px 0}.section-head{display:block}.section-head p{margin-top:12px}.topic-grid{grid-template-columns:1fr 1fr}.notice{grid-template-columns:1fr}.app-strip{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr 1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}}
        @media(max-width:520px){h1{font-size:38px}.hero-copy{font-size:16px}.hero-actions .button{width:100%}.topic-grid{grid-template-columns:1fr}.filter-bar{align-items:stretch}.filter-bar label{width:100%}.filter-bar select{width:100%}.match-row{grid-template-columns:1fr auto;gap:5px 12px}.match-row .match-time{grid-column:2;grid-row:1}.match-row .status{grid-row:2}.match-row .row-link{grid-column:2;grid-row:2}.schedule-panel{padding:5px 17px}.app-strip{padding:27px 22px}.cta-box{display:block}.cta-box .button{margin-top:20px;width:100%}.footer-top{grid-template-columns:1fr}.footer-bottom{font-size:11px}}

/* roulang page: category3 */
:root{
            --green:#a8d83c;
            --green-dark:#7eaa21;
            --green-soft:#e5f2bd;
            --charcoal:#181b1d;
            --ink:#252a2b;
            --muted:#6e7475;
            --cream:#f5f2e9;
            --paper:#fffdf8;
            --line:#e2e0d7;
            --orange:#f47b45;
            --orange-soft:#fff0e9;
            --shadow:0 14px 34px rgba(24,27,29,.08);
            --shadow-hover:0 22px 50px rgba(24,27,29,.14);
            --radius:14px;
            --max:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;color:var(--ink);background:var(--cream);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--max),calc(100% - 48px));margin:0 auto}
        .topline{background:var(--green);color:var(--charcoal);font-size:13px;font-weight:700}
        .topline .container{min-height:35px;display:flex;align-items:center;justify-content:space-between;gap:18px}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(24,27,29,.98);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:28px}
        .brand{display:inline-flex;align-items:center;gap:11px;min-width:250px;font-weight:900;line-height:1.1}
        .brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--green);color:var(--charcoal);border-radius:10px;font-size:20px;font-weight:900}
        .brand-text{font-size:16px}.brand-text small{display:block;margin-top:4px;color:#bfc6c4;font-size:11px;font-weight:600}
        .main-nav{display:flex;align-items:center;gap:4px;flex:1}
        .main-nav a{padding:10px 11px;color:#cbd0ce;font-size:14px;white-space:nowrap;border-bottom:2px solid transparent;transition:.2s}
        .main-nav a:hover,.main-nav a.active{color:var(--green);border-bottom-color:var(--green)}
        .nav-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:9px;font-weight:800;font-size:14px;transition:.2s}
        .nav-action,.button-primary{background:var(--green);color:var(--charcoal)}
        .nav-action:hover,.button-primary:hover{background:#b9e74e;transform:translateY(-2px);box-shadow:0 8px 18px rgba(168,216,60,.25)}
        .button-secondary{border-color:var(--charcoal);color:var(--charcoal);background:transparent}
        .button-secondary:hover{background:var(--green-soft);transform:translateY(-2px)}
        .menu-toggle{display:none;background:transparent;border:1px solid #57605e;color:#fff;border-radius:8px;width:44px;height:44px}
        .hero{padding:82px 0 70px;background:var(--cream)}
        .hero-grid{display:grid;grid-template-columns:1fr .85fr;gap:72px;align-items:center}
        .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:17px;color:var(--green-dark);font-size:13px;font-weight:900;letter-spacing:.08em}
        .eyebrow:before,.section-kicker:before{content:"";width:24px;height:3px;background:var(--orange);border-radius:2px}
        h1{font-size:clamp(38px,5vw,66px);line-height:1.12;letter-spacing:-.04em;margin:0 0 23px;max-width:680px}
        .hero-copy{max-width:650px;color:var(--muted);font-size:18px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
        .hero-note{margin-top:18px;color:var(--muted);font-size:13px}
        .scoreboard{background:var(--charcoal);color:#fff;border-radius:22px;padding:28px;box-shadow:var(--shadow);transform:rotate(1deg)}
        .score-head{display:flex;justify-content:space-between;align-items:center;color:#bdc3c0;font-size:13px;border-bottom:1px solid #38403d;padding-bottom:18px}
        .live-dot{color:var(--orange);font-weight:800}.live-dot:before{content:"";display:inline-block;width:8px;height:8px;background:var(--orange);border-radius:50%;margin-right:7px}
        .score-match{padding:23px 0;border-bottom:1px solid #38403d}
        .score-match:last-child{border-bottom:0;padding-bottom:0}
        .match-label{font-size:12px;color:#9ca8a3;margin-bottom:11px}
        .team-row{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:17px}
        .team-row span:last-child{color:var(--green);font-size:21px}
        .status{display:inline-flex;padding:4px 9px;border-radius:6px;background:rgba(168,216,60,.14);color:var(--green);font-size:12px;font-weight:800}
        .section{padding:76px 0}.section-dark{background:var(--charcoal);color:#fff}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:26px;margin-bottom:30px}
        .section-head h2{margin:0;font-size:32px;line-height:1.25}.section-head p{max-width:560px;margin:0;color:var(--muted)}
        .section-dark .section-head p{color:#aeb7b3}
        .filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
        .filter-bar button{border:1px solid var(--line);background:var(--paper);color:var(--muted);border-radius:8px;padding:9px 16px;transition:.2s}
        .filter-bar button:hover,.filter-bar button.active{background:var(--green);border-color:var(--green);color:var(--charcoal);font-weight:800}
        .event-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:22px}
        .event-list,.info-panel,.guide-card,.faq-list,.cta-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
        .event-list{padding:8px 25px}
        .event-row{display:grid;grid-template-columns:1.15fr .8fr .45fr .3fr;align-items:center;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
        .event-row:last-child{border-bottom:0}.event-title{font-weight:900}.event-sub{font-size:12px;color:var(--muted)}
        .event-time{font-weight:800}.event-state{color:var(--muted);font-size:13px}.event-link{color:var(--green-dark);font-weight:800;font-size:13px;text-align:right}
        .info-panel{padding:28px}.info-panel h3{margin:0 0 15px;font-size:22px}.info-panel p{color:var(--muted);font-size:14px}
        .info-points{list-style:none;padding:0;margin:24px 0 0}.info-points li{padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}.info-points li:last-child{border:0}
        .info-points strong{display:block;font-size:15px;margin-bottom:3px}
        .tag{display:inline-flex;padding:3px 9px;color:#557213;background:var(--green-soft);border-radius:6px;font-size:12px;font-weight:800}
        .split{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:stretch}
        .guide-card{padding:30px}.guide-card h3{font-size:25px;margin:10px 0}.guide-card p{color:var(--muted)}
        .reading-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
        .reading-item{padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);transition:.2s}
        .reading-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--green)}
        .reading-item h3{font-size:18px;margin:12px 0 7px}.reading-item p{color:var(--muted);font-size:14px;margin:0 0 12px}
        .arrow{color:var(--green-dark);font-weight:900}
        .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #38403d}
        .step{padding:28px 28px 10px 0;border-right:1px solid #38403d;margin-right:28px}.step:last-child{border:0;margin:0}
        .step-no{color:var(--green);font-size:34px;font-weight:900;line-height:1}.step h3{margin:14px 0 6px;font-size:19px}.step p{color:#aeb7b3;font-size:14px}
        .faq-list{overflow:hidden}.faq-item{border-bottom:1px solid var(--line)}.faq-item:last-child{border-bottom:0}
        .faq-item summary{cursor:pointer;padding:20px 24px;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:20px}
        .faq-item summary:after{content:"+";color:var(--green-dark);font-size:22px}.faq-item[open] summary:after{content:"−"}
        .faq-item p{padding:0 24px 20px;margin:0;color:var(--muted);font-size:14px}
        .responsibility{padding:20px 24px;border-left:4px solid var(--orange);background:var(--orange-soft);border-radius:10px;color:#69483d;font-size:14px}
        .cta{padding:60px 0}.cta-box{background:var(--green);border:0;padding:38px 42px;display:flex;justify-content:space-between;align-items:center;gap:25px}
        .cta-box h2{margin:0 0 8px;font-size:30px}.cta-box p{margin:0;color:#41521d}.cta-box .button{background:var(--charcoal);color:#fff}
        footer{background:var(--charcoal);color:#fff;padding:58px 0 22px}.footer-top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px;padding-bottom:42px}
        .footer-brand{font-weight:900;font-size:19px;margin-bottom:12px}.footer-copy{max-width:330px;color:#aeb7b3;font-size:14px}
        footer h3{font-size:15px;color:var(--green);margin:0 0 15px}footer ul{list-style:none;padding:0;margin:0}footer li{margin:8px 0;color:#bfc6c4;font-size:14px}footer li a:hover{color:var(--green)}
        .footer-bottom{border-top:1px solid #38403d;padding-top:18px;display:flex;justify-content:space-between;gap:15px;color:#89938f;font-size:12px}
        :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
        @media(max-width:1024px){.brand{min-width:220px}.main-nav{gap:0}.main-nav a{padding:9px 7px;font-size:13px}.hero-grid{gap:38px}.event-layout{grid-template-columns:1fr}.footer-top{grid-template-columns:1.3fr repeat(3,1fr)}}
        @media(max-width:768px){.container{width:min(var(--max),calc(100% - 32px))}.topline .container{min-height:32px}.nav-wrap{min-height:68px;gap:12px}.brand{min-width:0;flex:1}.brand-text{font-size:14px}.brand-text small{font-size:10px}.main-nav{display:none;position:absolute;top:68px;left:0;right:0;padding:12px 16px;background:var(--charcoal);border-top:1px solid #38403d;flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{padding:12px 10px}.menu-toggle{display:block}.nav-action{padding:9px 12px;min-height:40px}.hero{padding:58px 0 48px}.hero-grid,.split{grid-template-columns:1fr}.scoreboard{transform:none}.section{padding:58px 0}.section-head{display:block}.section-head p{margin-top:12px}.event-row{grid-template-columns:1.2fr .8fr .45fr}.event-link{display:none}.steps{grid-template-columns:1fr;border-top:0}.step{border-right:0;border-bottom:1px solid #38403d;margin:0;padding:22px 0}.reading-list{grid-template-columns:1fr}.cta-box{display:block;padding:30px 25px}.cta-box .button{margin-top:22px}.footer-top{grid-template-columns:1fr 1fr;gap:28px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}}
        @media(max-width:520px){h1{font-size:38px}.hero-copy{font-size:16px}.hero-actions .button{width:100%}.scoreboard{padding:21px}.event-list{padding:6px 17px}.event-row{grid-template-columns:1fr auto;gap:5px 12px}.event-time{grid-column:1}.event-state{grid-column:2;grid-row:1/3}.section-head h2{font-size:27px}.footer-top{grid-template-columns:1fr}.brand-mark{width:34px;height:34px}.topline .container span:last-child{display:none}}

/* roulang page: category4 */
:root{
            --green:#a8d83c;
            --green-dark:#7eaa21;
            --green-soft:#e5f2bd;
            --charcoal:#181b1d;
            --ink:#252a2b;
            --muted:#6e7475;
            --cream:#f5f2e9;
            --paper:#fffdf8;
            --line:#e2e0d7;
            --orange:#f47b45;
            --orange-soft:#fff0e9;
            --shadow:0 14px 34px rgba(24,27,29,.08);
            --shadow-hover:0 20px 42px rgba(24,27,29,.14);
            --radius:14px;
            --radius-sm:9px;
            --max:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--cream);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.7;
            -webkit-font-smoothing:antialiased;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--max),calc(100% - 48px));margin:0 auto}
        .topline{background:#101312;color:#cbd0ce;font-size:12px}
        .topline .container{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:18px}
        .topline strong{color:var(--green);font-weight:800}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(24,27,29,.98);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:28px}
        .brand{display:inline-flex;align-items:center;gap:11px;min-width:250px;font-weight:900;line-height:1.1}
        .brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--green);color:var(--charcoal);border-radius:10px;font-size:20px;font-weight:900}
        .brand-text{font-size:16px}
        .brand-text small{display:block;margin-top:4px;color:#bfc6c4;font-size:11px;font-weight:600}
        .main-nav{display:flex;align-items:center;gap:4px;flex:1}
        .main-nav a{padding:10px 11px;color:#cbd0ce;font-size:14px;white-space:nowrap;border-bottom:2px solid transparent;transition:.2s}
        .main-nav a:hover,.main-nav a.active{color:var(--green);border-bottom-color:var(--green)}
        .nav-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:9px;font-weight:800;font-size:14px;transition:.2s}
        .nav-action,.button-primary{background:var(--green);color:var(--charcoal)}
        .nav-action:hover,.button-primary:hover{background:#b9e74e;transform:translateY(-2px);box-shadow:0 8px 18px rgba(168,216,60,.25)}
        .button-secondary{border-color:var(--charcoal);color:var(--charcoal);background:transparent}
        .button-secondary:hover{background:var(--green-soft);transform:translateY(-2px)}
        .menu-toggle{display:none;background:transparent;border:1px solid #57605e;color:#fff;border-radius:8px;width:44px;height:44px}
        .page-hero{padding:74px 0 62px;background:var(--cream);border-bottom:1px solid var(--line)}
        .hero-inner{max-width:850px}
        .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:17px;color:var(--green-dark);font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
        .eyebrow:before,.section-kicker:before{content:"";width:24px;height:3px;background:var(--orange);border-radius:2px}
        h1,h2,h3,p{margin-top:0}
        h1{max-width:820px;margin-bottom:20px;font-size:clamp(38px,5vw,64px);line-height:1.12;letter-spacing:-.035em}
        .hero-lead{max-width:720px;margin-bottom:28px;color:var(--muted);font-size:19px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
        .hero-strip{margin-top:42px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
        .mini-stat{padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
        .mini-stat strong{display:block;font-size:22px;line-height:1.2}
        .mini-stat span{display:block;margin-top:4px;color:var(--muted);font-size:13px}
        .section{padding:76px 0}
        .section-dark{background:var(--charcoal);color:#fff}
        .section-soft{background:#eef1e8}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:26px;margin-bottom:30px}
        .section-head h2{margin-bottom:0;font-size:32px;line-height:1.25}
        .section-head p{max-width:560px;margin-bottom:0;color:var(--muted)}
        .section-dark .section-head p{color:#aeb7b3}
        .guide-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
        .info-card,.term-card,.notice-card,.entry-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
        .info-card{padding:30px}
        .info-card h3{font-size:24px;margin-bottom:12px}
        .info-card p{color:var(--muted)}
        .term-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
        .term-card{padding:20px}
        .term-card b{display:block;margin-bottom:6px;color:var(--green-dark);font-size:17px}
        .term-card span{color:var(--muted);font-size:14px}
        .reading-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:26px;align-items:stretch}
        .reading-panel{padding:32px;background:var(--charcoal);color:#fff;border-radius:var(--radius);position:relative;overflow:hidden}
        .reading-panel:after{content:"";position:absolute;width:180px;height:180px;right:-55px;bottom:-75px;background:var(--green);opacity:.16;border-radius:50%}
        .reading-panel h2{font-size:30px;line-height:1.25}
        .reading-panel p{color:#bac3bf}
        .step-list{margin:25px 0 0;padding:0;list-style:none}
        .step-list li{display:flex;gap:15px;padding:15px 0;border-top:1px solid rgba(255,255,255,.13)}
        .step-num{flex:0 0 30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:var(--charcoal);font-weight:900}
        .step-list strong{display:block;line-height:1.3}
        .step-list span{display:block;margin-top:3px;color:#aeb7b3;font-size:13px}
        .rules-card{padding:30px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
        .rules-card h3{font-size:23px}
        .rules-card ul{margin:18px 0 0;padding-left:20px;color:var(--muted)}
        .rules-card li{margin:10px 0}
        .rules-card li::marker{color:var(--orange)}
        .filter-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
        .filter{padding:9px 15px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--muted);font-size:14px}
        .filter.active,.filter:hover{border-color:var(--green-dark);background:var(--green-soft);color:var(--green-dark)}
        .event-table{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
        .event-row{display:grid;grid-template-columns:1.2fr .8fr .7fr .7fr;gap:15px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
        .event-row:last-child{border-bottom:0}
        .event-row.head{background:var(--charcoal);color:#fff;font-size:13px;font-weight:800}
        .event-row:not(.head):hover{background:#fbfaf4}
        .event-name strong{display:block}
        .event-name span,.event-row small{color:var(--muted);font-size:13px}
        .status{display:inline-flex;align-items:center;gap:6px;color:#98701d;font-size:13px;font-weight:800}
        .status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
        .faq-list{max-width:900px;margin:0 auto}
        .faq-item{border-top:1px solid var(--line)}
        .faq-item:last-child{border-bottom:1px solid var(--line)}
        .faq-question{width:100%;display:flex;justify-content:space-between;gap:20px;padding:21px 0;background:none;border:0;text-align:left;color:var(--ink);font-weight:800}
        .faq-question span:last-child{color:var(--green-dark);font-size:23px;line-height:1}
        .faq-answer{display:none;max-width:780px;padding:0 40px 21px 0;color:var(--muted)}
        .faq-item.open .faq-answer{display:block}
        .cta{padding:58px 0;background:var(--green)}
        .cta-box{display:flex;align-items:center;justify-content:space-between;gap:30px}
        .cta h2{margin-bottom:8px;color:var(--charcoal);font-size:32px}
        .cta p{margin:0;color:#41521b}
        .cta .button{background:var(--charcoal);color:#fff}
        .responsibility{padding:22px 26px;background:var(--orange-soft);border:1px solid #f4c5b2;border-radius:var(--radius);color:#75452f}
        .responsibility strong{display:block;margin-bottom:5px;color:#9b4f32}
        footer{padding:54px 0 22px;background:var(--charcoal);color:#fff}
        .footer-top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:35px;padding-bottom:38px}
        .footer-brand{font-size:20px;font-weight:900}
        .footer-copy{max-width:330px;margin-top:13px;color:#aeb7b3;font-size:14px}
        footer h3{margin:0 0 13px;font-size:15px}
        footer ul{padding:0;margin:0;list-style:none}
        footer li{margin:7px 0;color:#aeb7b3;font-size:14px}
        footer a:hover{color:var(--green)}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:#89938f;font-size:12px}
        :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
        @media(max-width:1024px){
            .brand{min-width:220px}.main-nav{gap:0}.main-nav a{padding-left:7px;padding-right:7px;font-size:13px}
            .guide-grid,.reading-layout{grid-template-columns:1fr}.hero-strip{grid-template-columns:repeat(2,1fr)}
        }
        @media(max-width:768px){
            .container{width:min(var(--max),calc(100% - 32px))}
            .topline .container{min-height:32px}.topline span:last-child{display:none}
            .nav-wrap{min-height:68px;gap:10px}.brand{min-width:0;flex:1}.brand-text{font-size:14px}.brand-text small{font-size:10px}
            .main-nav{display:none;position:absolute;left:16px;right:16px;top:68px;padding:10px;background:var(--charcoal);border:1px solid #3f4845;border-radius:10px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow-hover)}
            .main-nav.open{display:flex}.main-nav a{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
            .nav-action{display:none}.menu-toggle{display:block}
            .page-hero{padding:54px 0 46px}h1{font-size:42px}.hero-lead{font-size:17px}
            .section{padding:55px 0}.section-head{display:block}.section-head p{margin-top:12px}.section-head h2{font-size:27px}
            .term-list{grid-template-columns:1fr}.event-row{grid-template-columns:1fr 1fr;gap:8px}.event-row.head{display:none}
            .event-row .event-name{grid-column:1/-1}.event-row small{font-size:12px}
            .cta-box{display:block}.cta h2{font-size:27px}.cta .button{margin-top:20px}
            .footer-top{grid-template-columns:1fr 1fr;gap:28px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}
        }
        @media(max-width:520px){
            .hero-strip{grid-template-columns:1fr}.hero-actions .button{width:100%}
            .info-card,.rules-card,.reading-panel{padding:23px}.event-row{padding:17px}
            .footer-top{grid-template-columns:1fr}.footer-brand{font-size:18px}
        }

/* roulang page: category5 */
:root {
            --green: #a8d83c;
            --green-dark: #7eaa21;
            --green-soft: #e5f2bd;
            --charcoal: #181b1d;
            --ink: #252a2b;
            --muted: #6e7475;
            --cream: #f5f2e9;
            --paper: #fffdf8;
            --white: #ffffff;
            --line: #e2e0d7;
            --orange: #f47b45;
            --orange-soft: #fff0e9;
            --red: #c95e4b;
            --shadow: 0 14px 34px rgba(24, 27, 29, .08);
            --shadow-hover: 0 20px 44px rgba(24, 27, 29, .14);
            --radius: 14px;
            --radius-sm: 10px;
            --max: 1200px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--cream);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        a:hover { color: inherit; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        :focus-visible {
            outline: 3px solid rgba(168, 216, 60, .7);
            outline-offset: 3px;
        }
        .container {
            width: min(var(--max), calc(100% - 48px));
            margin: 0 auto;
        }

        .topline {
            min-height: 36px;
            color: #dfe5df;
            background: #23282a;
            font-size: 12px;
        }
        .topline .container {
            min-height: 36px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }
        .topline strong { color: var(--green); }
        .topline span:last-child { color: #aeb7b2; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 30;
            color: var(--white);
            background: rgba(24, 27, 29, .98);
            border-bottom: 1px solid rgba(255,255,255,.08);
        }
        .nav-wrap {
            min-height: 76px;
            display: flex;
            align-items: center;
            gap: 26px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            gap: 11px;
            min-width: 250px;
            font-weight: 900;
            line-height: 1.1;
        }
        .brand-mark {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            flex: 0 0 38px;
            color: var(--charcoal);
            background: var(--green);
            border-radius: 10px;
            font-size: 20px;
            font-weight: 900;
        }
        .brand-text { font-size: 16px; }
        .brand-text small {
            display: block;
            margin-top: 4px;
            color: #bfc6c4;
            font-size: 11px;
            font-weight: 600;
        }
        .main-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            gap: 3px;
        }
        .main-nav a {
            padding: 10px 10px;
            color: #cbd0ce;
            font-size: 14px;
            white-space: nowrap;
            border-bottom: 2px solid transparent;
            transition: color .2s, border-color .2s, background .2s;
        }
        .main-nav a:hover,
        .main-nav a.active {
            color: var(--green);
            border-bottom-color: var(--green);
        }
        .nav-action,
        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 44px;
            padding: 10px 18px;
            border: 1px solid transparent;
            border-radius: 9px;
            font-size: 14px;
            font-weight: 800;
            transition: transform .2s, background .2s, border-color .2s, color .2s, box-shadow .2s;
        }
        .nav-action,
        .button-primary {
            color: var(--charcoal);
            background: var(--green);
        }
        .nav-action:hover,
        .button-primary:hover {
            color: var(--charcoal);
            background: #b9e74e;
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(168,216,60,.25);
        }
        .button-secondary {
            color: var(--charcoal);
            background: transparent;
            border-color: var(--charcoal);
        }
        .button-secondary:hover {
            color: var(--charcoal);
            background: var(--green-soft);
            transform: translateY(-2px);
        }
        .menu-toggle {
            display: none;
            width: 44px;
            height: 44px;
            color: var(--white);
            background: transparent;
            border: 1px solid #57605e;
            border-radius: 8px;
        }

        .page-hero {
            position: relative;
            overflow: hidden;
            padding: 88px 0 76px;
            background:
                radial-gradient(circle at 84% 20%, rgba(168,216,60,.18), transparent 26%),
                var(--cream);
        }
        .page-hero::after {
            position: absolute;
            right: -90px;
            bottom: -120px;
            width: 330px;
            height: 330px;
            content: "";
            border: 1px solid rgba(126,170,33,.18);
            border-radius: 50%;
        }
        .hero-layout {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr .82fr;
            align-items: center;
            gap: 80px;
        }
        .eyebrow,
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 17px;
            color: var(--green-dark);
            font-size: 13px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .eyebrow::before,
        .section-kicker::before {
            width: 24px;
            height: 3px;
            content: "";
            background: var(--orange);
            border-radius: 2px;
        }
        h1, h2, h3, p { overflow-wrap: anywhere; }
        h1 {
            max-width: 720px;
            margin: 0 0 22px;
            color: var(--charcoal);
            font-size: clamp(38px, 5vw, 66px);
            line-height: 1.12;
            letter-spacing: -.045em;
        }
        .hero-copy {
            max-width: 650px;
            margin: 0;
            color: var(--muted);
            font-size: 18px;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 30px;
        }
        .hero-note {
            margin: 18px 0 0;
            color: var(--muted);
            font-size: 13px;
        }

        .phone-stage {
            position: relative;
            min-height: 410px;
            display: grid;
            place-items: center;
        }
        .phone {
            position: relative;
            z-index: 2;
            width: 232px;
            padding: 10px;
            background: #111516;
            border: 7px solid #303638;
            border-radius: 30px;
            box-shadow: 20px 26px 44px rgba(24,27,29,.2);
            transform: rotate(4deg);
        }
        .phone-notch {
            width: 72px;
            height: 16px;
            margin: 0 auto 9px;
            background: #303638;
            border-radius: 0 0 12px 12px;
        }
        .phone-screen {
            min-height: 365px;
            padding: 16px 13px;
            color: #eaf4e7;
            background: #1d2b26;
            border-radius: 17px;
        }
        .screen-brand {
            display: flex;
            justify-content: space-between;
            margin-bottom: 18px;
            font-size: 12px;
            font-weight: 800;
        }
        .screen-brand b { color: var(--green); }
        .screen-card {
            margin-bottom: 12px;
            padding: 13px;
            background: #2d4439;
            border: 1px solid rgba(168,216,60,.22);
            border-radius: 11px;
        }
        .screen-card small { color: #b7c8bd; font-size: 10px; }
        .screen-card strong {
            display: block;
            margin-top: 4px;
            font-size: 13px;
        }
        .screen-line {
            height: 7px;
            margin-top: 12px;
            background: #63806a;
            border-radius: 8px;
        }
        .screen-line.short { width: 62%; background: var(--green); }
        .phone-badge {
            position: absolute;
            top: 36px;
            right: 8px;
            z-index: 3;
            padding: 12px 15px;
            color: var(--charcoal);
            background: var(--green);
            border-radius: 10px;
            box-shadow: var(--shadow);
            font-size: 13px;
            font-weight: 900;
        }
        .phone-stamp {
            position: absolute;
            bottom: 28px;
            left: 5px;
            z-index: 3;
            padding: 12px 15px;
            color: var(--charcoal);
            background: var(--paper);
            border: 1px solid var(--line);
            border-radius: 10px;
            box-shadow: var(--shadow);
            font-size: 12px;
            font-weight: 800;
        }

        .section { padding: 78px 0; }
        .section-light { background: var(--paper); }
        .section-dark { color: var(--white); background: var(--charcoal); }
        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 28px;
            margin-bottom: 32px;
        }
        .section-head h2 {
            margin: 0;
            color: inherit;
            font-size: clamp(28px, 3.3vw, 40px);
            line-height: 1.22;
            letter-spacing: -.03em;
        }
        .section-head p {
            max-width: 540px;
            margin: 0;
            color: var(--muted);
        }
        .section-dark .section-head p { color: #aeb7b3; }
        .text-link {
            color: var(--green-dark);
            font-weight: 800;
        }
        .text-link:hover { color: #557213; }

        .intro-band {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 22px;
        }
        .info-panel {
            padding: 30px;
            background: var(--cream);
            border: 1px solid var(--line);
            border-radius: var(--radius);
        }
        .info-panel h3 {
            margin: 0 0 12px;
            font-size: 23px;
        }
        .info-panel p { margin: 0; color: var(--muted); }
        .info-panel.green {
            color: var(--charcoal);
            background: var(--green);
            border-color: var(--green);
        }
        .info-panel.green p { color: #394c20; }
        .feature-list {
            display: grid;
            gap: 14px;
            margin: 20px 0 0;
            padding: 0;
            list-style: none;
        }
        .feature-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            color: #d7dfd9;
        }
        .feature-list li::before {
            width: 20px;
            height: 20px;
            display: grid;
            place-items: center;
            flex: 0 0 20px;
            margin-top: 3px;
            content: "✓";
            color: var(--charcoal);
            background: var(--green);
            border-radius: 50%;
            font-size: 12px;
            font-weight: 900;
        }

        .download-grid {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 26px;
            align-items: stretch;
        }
        .download-card {
            padding: 34px;
            background: var(--paper);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        .download-card h3 {
            margin: 0 0 12px;
            font-size: 25px;
        }
        .download-card p { color: var(--muted); }
        .access-box {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-top: 24px;
            padding: 17px;
            background: var(--green-soft);
            border: 1px dashed #a5c65d;
            border-radius: var(--radius-sm);
        }
        .access-icon {
            width: 62px;
            height: 62px;
            display: grid;
            place-items: center;
            flex: 0 0 62px;
            color: var(--green-dark);
            background: var(--white);
            border: 1px solid #cbdca5;
            border-radius: 10px;
            font-size: 25px;
            font-weight: 900;
        }
        .access-box strong { display: block; margin-bottom: 3px; }
        .access-box span { color: var(--muted); font-size: 13px; }

        .steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            margin-top: 12px;
            border-top: 1px solid rgba(255,255,255,.18);
        }
        .step {
            position: relative;
            padding: 28px 22px 10px 0;
            border-right: 1px solid rgba(255,255,255,.15);
        }
        .step:not(:first-child) { padding-left: 22px; }
        .step:last-child { border-right: 0; }
        .step-number {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            margin-bottom: 17px;
            color: var(--charcoal);
            background: var(--green);
            border-radius: 50%;
            font-weight: 900;
        }
        .step h3 { margin: 0 0 8px; font-size: 18px; }
        .step p { margin: 0; color: #aeb7b3; font-size: 14px; }

        .notice {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 21px 24px;
            color: #594424;
            background: #fff8e8;
            border: 1px solid #efd99b;
            border-radius: var(--radius-sm);
        }
        .notice strong { display: block; margin-bottom: 3px; }
        .notice p { margin: 0; font-size: 14px; }

        .faq-list {
            max-width: 850px;
            margin: 0 auto;
        }
        .faq-item {
            margin-bottom: 10px;
            background: var(--paper);
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }
        .faq-question {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 20px 22px;
            color: var(--ink);
            text-align: left;
            background: transparent;
            border: 0;
            font-weight: 900;
        }
        .faq-question::after {
            content: "+";
            color: var(--green-dark);
            font-size: 24px;
            font-weight: 400;
            transition: transform .2s;
        }
        .faq-item.open .faq-question::after { transform: rotate(45deg); }
        .faq-answer {
            display: none;
            padding: 0 22px 21px;
            color: var(--muted);
            font-size: 15px;
        }
        .faq-item.open .faq-answer { display: block; }

        .cta {
            padding: 66px 0;
            color: var(--white);
            background: var(--green-dark);
        }
        .cta-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
        }
        .cta h2 { margin: 0 0 9px; font-size: 31px; line-height: 1.25; }
        .cta p { max-width: 650px; margin: 0; color: #dcebdc; }
        .cta .button-primary { background: var(--green); }

        footer {
            padding: 58px 0 22px;
            color: #d6ddda;
            background: var(--charcoal);
        }
        .footer-top {
            display: grid;
            grid-template-columns: 1.45fr repeat(3, 1fr);
            gap: 34px;
            padding-bottom: 40px;
        }
        .footer-brand {
            margin-bottom: 13px;
            color: var(--green);
            font-size: 18px;
            font-weight: 900;
        }
        .footer-copy {
            max-width: 310px;
            margin: 0;
            color: #aeb7b3;
            font-size: 14px;
        }
        footer h3 { margin: 0 0 14px; color: #fff; font-size: 15px; }
        footer ul { margin: 0; padding: 0; list-style: none; }
        footer li { margin: 7px 0; color: #aeb7b3; font-size: 14px; }
        footer a:hover { color: var(--green); }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 19px;
            color: #89938e;
            border-top: 1px solid rgba(255,255,255,.12);
            font-size: 12px;
        }

        @media (max-width: 1100px) {
            .nav-wrap { gap: 15px; }
            .brand { min-width: 215px; }
            .main-nav a { padding: 10px 6px; font-size: 13px; }
            .hero-layout { gap: 44px; }
        }
        @media (max-width: 900px) {
            .menu-toggle { display: block; }
            .nav-wrap { justify-content: space-between; }
            .main-nav {
                position: absolute;
                top: 76px;
                right: 24px;
                left: 24px;
                display: none;
                align-items: stretch;
                flex-direction: column;
                padding: 12px;
                background: var(--charcoal);
                border: 1px solid #3a4240;
                border-radius: 12px;
                box-shadow: var(--shadow-hover);
            }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 12px 14px; border-bottom: 0; border-left: 3px solid transparent; }
            .main-nav a:hover, .main-nav a.active { border-left-color: var(--green); background: #242b2b; }
            .hero-layout, .intro-band, .download-grid { grid-template-columns: 1fr; }
            .hero-layout { gap: 26px; }
            .phone-stage { min-height: 380px; }
            .steps { grid-template-columns: repeat(2, 1fr); }
            .step:nth-child(2) { border-right: 0; }
            .step:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.15); }
            .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
            .footer-top > :first-child { grid-column: 1 / -1; }
        }
        @media (max-width: 620px) {
            .container { width: min(var(--max), calc(100% - 32px)); }
            .topline .container { min-height: 34px; }
            .topline span:last-child { display: none; }
            .brand { min-width: 0; }
            .brand-text { font-size: 14px; }
            .brand-text small { font-size: 10px; }
            .nav-action { display: none; }
            .page-hero { padding: 60px 0 48px; }
            h1 { font-size: 39px; }
            .hero-copy { font-size: 16px; }
            .hero-actions { align-items: stretch; flex-direction: column; }
            .hero-actions .button { width: 100%; }
            .phone-stage { min-height: 365px; transform: scale(.92); }
            .section { padding: 56px 0; }
            .section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
            .info-panel, .download-card { padding: 24px; }
            .access-box { align-items: flex-start; flex-direction: column; }
            .steps { grid-template-columns: 1fr; }
            .step, .step:not(:first-child) {
                padding: 22px 0;
                border-right: 0;
                border-bottom: 1px solid rgba(255,255,255,.15);
            }
            .step:last-child { border-bottom: 0; }
            .cta-inner { align-items: flex-start; flex-direction: column; }
            .cta .button { width: 100%; }
            .footer-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
            .footer-top > :first-child { grid-column: 1 / -1; }
            .footer-bottom { align-items: flex-start; flex-direction: column; gap: 7px; }
        }

/* roulang page: category6 */
:root{
            --green:#a8d83c;
            --green-dark:#7eaa21;
            --green-soft:#e5f2bd;
            --charcoal:#181b1d;
            --ink:#252a2b;
            --muted:#6e7475;
            --cream:#f5f2e9;
            --paper:#fffdf8;
            --line:#e2e0d7;
            --orange:#f47b45;
            --orange-soft:#fff0e9;
            --shadow:0 14px 34px rgba(24,27,29,.08);
            --shadow-hover:0 20px 42px rgba(24,27,29,.14);
            --radius:14px;
            --max:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--cream);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.7;
            -webkit-font-smoothing:antialiased;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--max),calc(100% - 48px));margin:0 auto}
        .topline{background:var(--green);color:var(--charcoal);font-size:12px;font-weight:700}
        .topline .container{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:18px}
        .topline-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .topline-status{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
        .topline-status i{width:7px;height:7px;border-radius:50%;background:var(--charcoal)}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(24,27,29,.98);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:28px}
        .brand{display:inline-flex;align-items:center;gap:11px;min-width:250px;font-weight:900;line-height:1.1}
        .brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--green);color:var(--charcoal);border-radius:10px;font-size:20px;font-weight:900}
        .brand-text{font-size:16px}
        .brand-text small{display:block;margin-top:4px;color:#bfc6c4;font-size:11px;font-weight:600}
        .main-nav{display:flex;align-items:center;gap:4px;flex:1}
        .main-nav a{padding:10px 11px;color:#cbd0ce;font-size:14px;white-space:nowrap;border-bottom:2px solid transparent;transition:.2s}
        .main-nav a:hover,.main-nav a.active{color:var(--green);border-bottom-color:var(--green)}
        .nav-action,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:9px;font-weight:800;font-size:14px;transition:.2s}
        .nav-action,.button-primary{background:var(--green);color:var(--charcoal)}
        .nav-action:hover,.button-primary:hover{background:#b9e74e;transform:translateY(-2px);box-shadow:0 8px 18px rgba(168,216,60,.25)}
        .button-secondary{border-color:var(--charcoal);color:var(--charcoal);background:transparent}
        .button-secondary:hover{background:var(--green-soft);transform:translateY(-2px)}
        .menu-toggle{display:none;background:transparent;border:1px solid #57605e;color:#fff;border-radius:8px;width:44px;height:44px}
        .hero{padding:76px 0 64px;background:var(--cream)}
        .hero-grid{display:grid;grid-template-columns:1fr .9fr;gap:70px;align-items:center}
        .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;color:var(--green-dark);font-size:13px;font-weight:900;letter-spacing:.08em}
        .eyebrow:before,.section-kicker:before{content:"";width:24px;height:3px;background:var(--orange);border-radius:2px}
        h1,h2,h3,p{margin-top:0}
        h1{max-width:680px;margin-bottom:22px;font-size:clamp(38px,5vw,68px);line-height:1.1;letter-spacing:-.045em}
        .hero-copy{max-width:650px;color:var(--muted);font-size:18px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
        .hero-note{margin-top:18px;color:var(--muted);font-size:13px}
        .guide-board{position:relative;padding:28px;background:var(--charcoal);color:#fff;border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
        .guide-board:after{content:"";position:absolute;right:-70px;top:-80px;width:220px;height:220px;border-radius:50%;background:rgba(168,216,60,.14)}
        .board-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.14)}
        .board-title{font-weight:900;font-size:18px}
        .live-label{padding:4px 9px;border-radius:5px;background:var(--orange);font-size:11px;font-weight:800}
        .guide-row{position:relative;z-index:1;display:grid;grid-template-columns:62px 1fr auto;gap:15px;align-items:center;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.1)}
        .guide-row:last-child{border-bottom:0;padding-bottom:4px}
        .guide-time{color:var(--green);font-weight:900;font-size:13px}
        .guide-name{font-weight:800}
        .guide-name small{display:block;color:#aeb7b3;font-size:12px;font-weight:500}
        .guide-state{color:#d7ddd9;font-size:12px}
        .section{padding:76px 0}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:26px;margin-bottom:30px}
        .section-head h2{margin:0;font-size:32px;line-height:1.25}
        .section-head p{max-width:540px;margin:0;color:var(--muted)}
        .guide-index{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
        .index-panel,.reading-card,.faq-item,.cta-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
        .index-panel{padding:28px}
        .index-panel h3{margin-bottom:18px;font-size:22px}
        .index-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
        .index-link{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;transition:.2s}
        .index-link:hover{border-color:var(--green-dark);color:var(--green-dark);transform:translateY(-2px)}
        .index-link span:last-child{color:var(--green-dark);font-weight:900}
        .reading-card{padding:28px;background:var(--charcoal);color:#fff}
        .reading-card .section-kicker{color:var(--green)}
        .reading-card p{color:#bfc6c4}
        .reading-rule{display:flex;gap:13px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14)}
        .reading-rule b{color:var(--green);font-size:18px}
        .reading-rule span{font-size:14px}
        .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
        .step{position:relative;padding:28px 24px 10px;border-right:1px solid var(--line)}
        .step:last-child{border-right:0}
        .step-number{display:grid;place-items:center;width:34px;height:34px;margin-bottom:18px;border-radius:50%;background:var(--green);color:var(--charcoal);font-weight:900}
        .step h3{font-size:18px;margin-bottom:8px}
        .step p{color:var(--muted);font-size:14px;margin:0}
        .info-strip{padding:24px 28px;background:var(--orange-soft);border-left:4px solid var(--orange);border-radius:10px}
        .info-strip strong{display:block;margin-bottom:5px}
        .info-strip p{margin:0;color:#6f5145;font-size:14px}
        .faq-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
        .faq-item{padding:0;overflow:hidden}
        .faq-item summary{list-style:none;padding:19px 22px;font-weight:800;cursor:pointer;position:relative;padding-right:50px}
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary:after{content:"+";position:absolute;right:22px;color:var(--green-dark);font-size:22px;line-height:1}
        .faq-item[open] summary:after{content:"−"}
        .faq-answer{padding:0 22px 20px;color:var(--muted);font-size:14px}
        .cta-section{padding:30px 0 82px}
        .cta-box{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:38px 42px;background:var(--green)}
        .cta-box h2{margin-bottom:8px;font-size:30px}
        .cta-box p{margin:0;color:#40520e}
        .cta-box .button{background:var(--charcoal);color:#fff}
        .cta-box .button:hover{background:#303638}
        footer{padding:54px 0 22px;background:var(--charcoal);color:#fff}
        .footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px;padding-bottom:42px}
        .footer-brand{margin-bottom:12px;font-size:18px;font-weight:900}
        .footer-copy{max-width:310px;color:#aeb7b3;font-size:13px}
        footer h3{margin:0 0 13px;font-size:14px;color:var(--green)}
        footer ul{padding:0;margin:0;list-style:none}
        footer li{margin:7px 0;color:#c5ccc8;font-size:13px}
        footer li a{transition:.2s}
        footer li a:hover{color:var(--green)}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13);color:#89938f;font-size:12px}
        :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
        @media(max-width:1024px){
            .nav-wrap{gap:14px}.brand{min-width:220px}.main-nav a{padding:10px 6px;font-size:13px}
            .hero-grid{gap:35px}.guide-index{grid-template-columns:1fr}
        }
        @media(max-width:768px){
            .container{width:min(var(--max),calc(100% - 32px))}
            .topline-status{display:none}
            .nav-wrap{min-height:68px;justify-content:space-between}
            .brand{min-width:0}.brand-text{font-size:14px}.brand-text small{font-size:10px}
            .main-nav{display:none;position:absolute;left:16px;right:16px;top:76px;padding:12px;background:var(--charcoal);border:1px solid #3c4542;border-radius:12px;flex-direction:column;align-items:stretch}
            .main-nav.open{display:flex}.main-nav a{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
            .menu-toggle{display:block}.nav-action{min-height:40px;padding:8px 12px;font-size:12px}
            .hero{padding:52px 0 46px}.hero-grid{grid-template-columns:1fr}
            h1{font-size:43px}.hero-copy{font-size:16px}
            .section{padding:56px 0}.section-head{display:block}.section-head p{margin-top:12px}
            .timeline{grid-template-columns:1fr 1fr;border-top:0}.step{border-top:1px solid var(--line);padding:22px 14px}.step:nth-child(2){border-right:0}
            .faq-list{grid-template-columns:1fr}.cta-box{display:block;padding:30px 25px}.cta-box .button{margin-top:20px}
            .footer-top{grid-template-columns:1fr 1fr;gap:28px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}
        }
        @media(max-width:520px){
            .brand-mark{width:34px;height:34px;font-size:17px}.brand-text small{display:none}
            .nav-action{display:none}.hero-actions .button{width:100%}
            h1{font-size:36px}.guide-board{padding:21px 18px}.guide-row{grid-template-columns:52px 1fr;gap:10px}.guide-state{grid-column:2}
            .index-list{grid-template-columns:1fr}.index-panel,.reading-card{padding:22px 19px}
            .timeline{grid-template-columns:1fr}.step{border-right:0!important}
            .footer-top{grid-template-columns:1fr}
        }

/* 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}