/* roulang page: index */
:root{--ink:#202321;--muted:#68706d;--paper:#f5f6f2;--card:#fff;--dark:#202a28;--line:#dfe5df;--orange:#ef704f;--orange-dark:#d95739;--mint:#b7e9c9;--lime:#d5ef87;--radius:16px;--shadow:0 16px 42px rgba(28,43,37,.09);--max:1200px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);line-height:1.75}a{color:inherit;text-decoration:none}button,input{font:inherit}img{max-width:100%;display:block}.container{width:min(var(--max),calc(100% - 40px));margin:auto}.site-header{height:78px;background:rgba(245,246,242,.95);border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.nav-wrap{display:flex;align-items:center;gap:38px}.logo{font-size:21px;font-weight:900;letter-spacing:-1px;white-space:nowrap}.logo em{font-style:normal;color:var(--orange)}nav{display:flex;align-items:center;gap:25px;flex:1}nav a{font-size:14px;color:#555f5b;padding:27px 0;position:relative}nav a:hover,nav a.active{color:var(--ink)}nav a.active:after{content:"";height:3px;width:22px;background:var(--orange);position:absolute;bottom:16px;left:0;border-radius:4px}.nav-actions{display:flex;gap:10px;align-items:center}.btn{border:1px solid transparent;border-radius:9px;padding:10px 17px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.22s ease;cursor:pointer}.btn-primary{background:var(--orange);color:#fff}.btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 8px 18px rgba(239,112,79,.25)}.btn-quiet{background:transparent;border-color:var(--line)}.btn-quiet:hover{border-color:var(--orange);color:var(--orange)}.menu{display:none;background:none;border:0;font-size:25px}.hero{background:var(--dark);color:#fff;padding:86px 0 72px;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:480px;height:480px;border:1px solid rgba(183,233,201,.2);border-radius:50%;right:-120px;top:-180px;box-shadow:0 0 0 40px rgba(183,233,201,.035),0 0 0 80px rgba(183,233,201,.025)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;position:relative;z-index:1}.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mint);font-weight:800;margin-bottom:19px}.hero h1{font-size:clamp(34px,4vw,60px);line-height:1.2;letter-spacing:-2px;max-width:650px}.hero h1 span{color:var(--lime)}.hero p{color:#c5ceca;max-width:590px;margin:22px 0 30px;font-size:16px}.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}.btn-light{background:#fff;color:var(--dark)}.btn-light:hover{background:var(--lime);transform:translateY(-2px)}.hero-panel{background:#2d3a36;border:1px solid #465850;border-radius:20px;padding:23px;box-shadow:0 24px 60px rgba(0,0,0,.2)}.panel-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #465850;padding-bottom:17px;color:#d6dfda;font-size:13px}.live{color:var(--lime);display:flex;gap:7px;align-items:center}.live:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(213,239,135,.12)}.match{padding:25px 5px 19px}.match small{color:#9eaca5}.teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center;gap:15px;margin:16px 0}.team{font-size:18px;font-weight:800}.score{font-size:34px;font-weight:900;color:var(--lime);line-height:1}.panel-foot{display:flex;gap:9px;flex-wrap:wrap}.tag{font-size:12px;background:#eef2ed;color:#5d6963;border-radius:30px;padding:4px 10px;display:inline-block}.dark-tag{background:#3b4a45;color:#d6dfda}.section{padding:82px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}.section-head h2{font-size:32px;line-height:1.25;letter-spacing:-1px}.section-head p{color:var(--muted);font-size:14px;max-width:460px}.orange-line{display:block;width:42px;height:4px;background:var(--orange);border-radius:4px;margin-bottom:15px}.event-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.event-feature{background:var(--orange);color:#fff;border-radius:var(--radius);padding:30px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between}.event-feature .tag{background:rgba(255,255,255,.2);color:#fff}.event-feature h3{font-size:27px;max-width:430px;line-height:1.35}.event-feature p{color:#ffe8df}.event-feature .btn{align-self:flex-start;background:#fff;color:var(--orange-dark)}.event-list{display:grid;gap:10px}.event-row{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px 20px;display:grid;grid-template-columns:86px 1fr auto;align-items:center;gap:16px;transition:.2s}.event-row:hover,.news-item:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#c5d5ca}.event-time{font-weight:800;font-size:14px}.event-time small{display:block;color:var(--muted);font-weight:500}.event-name{font-weight:800}.event-name small{display:block;color:var(--muted);font-weight:400;font-size:12px}.status{font-size:12px;font-weight:800;color:#15906b;white-space:nowrap}.status.soon{color:var(--orange)}.arrow{font-size:20px;color:var(--orange)}.dark-section{background:#e8eee8}.stream-grid{display:grid;grid-template-columns:1.45fr .75fr;gap:20px}.screen{min-height:330px;background:#293531;border-radius:var(--radius);padding:25px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.screen:before{content:"赛事直播画面";position:absolute;inset:0;display:grid;place-items:center;color:#7f9489;font-size:24px;font-weight:800;letter-spacing:4px;border:1px solid #52655b;margin:20px;border-radius:10px}.screen>*{position:relative;z-index:1}.screen .btn{align-self:flex-start}.filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}.filter .tag{cursor:pointer;border:1px solid var(--line);background:#fff}.filter .tag.active{background:var(--dark);color:#fff}.side-note{background:#fff;border-radius:var(--radius);padding:25px;border:1px solid var(--line)}.side-note h3{font-size:20px;margin-bottom:13px}.side-note li{list-style:none;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}.side-note li:last-child{border:0}.two-col{display:grid;grid-template-columns:.8fr 1.2fr;gap:25px;align-items:stretch}.benefits{background:var(--dark);border-radius:var(--radius);padding:34px;color:#fff}.benefits h3{font-size:28px;margin-bottom:12px}.benefits p{color:#c1cbc5;font-size:14px}.benefit-list{display:grid;gap:13px;margin:24px 0}.benefit-list div{border-top:1px solid #44534c;padding-top:12px;display:flex;justify-content:space-between;color:#dce5df;font-size:14px}.benefit-list b{color:var(--lime)}.interaction{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.interaction-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;min-height:180px;display:flex;flex-direction:column;justify-content:space-between}.interaction-card:nth-child(2){background:var(--mint)}.interaction-card:nth-child(3){background:var(--lime)}.interaction-card h3{font-size:19px}.interaction-card p{font-size:13px;color:#59645f}.news-layout{display:grid;grid-template-columns:.86fr 1.14fr;gap:22px}.news-feature{background:#d8e9df;border-radius:var(--radius);padding:30px;min-height:300px;display:flex;flex-direction:column;justify-content:end}.news-feature h3{font-size:25px;line-height:1.4;margin:12px 0}.news-feature p{font-size:14px;color:#59645f}.news-list{display:grid;gap:10px}.news-item{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px 20px;display:grid;grid-template-columns:1fr auto;gap:10px;transition:.2s}.news-item h3{font-size:16px;line-height:1.5}.news-item p{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:500px}.news-meta{font-size:12px;color:var(--muted);text-align:right}.news-meta .tag{margin-bottom:8px}.download{background:var(--orange);color:#fff;border-radius:20px;padding:38px 45px;display:grid;grid-template-columns:1fr 270px;gap:35px;align-items:center}.download h2{font-size:31px;line-height:1.3}.download p{color:#ffe8df;margin:13px 0 20px}.download .tag{background:rgba(255,255,255,.18);color:#fff;margin-right:6px}.qr{height:155px;background:#fff;border-radius:10px;color:#46514c;display:grid;place-items:center;text-align:center;font-size:14px;border:10px solid #fff;outline:1px dashed #adb8b0;outline-offset:-18px}.faq{max-width:850px;margin:auto}.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin:10px 0;padding:17px 21px}.faq summary{cursor:pointer;font-weight:800;list-style:none}.faq summary:after{content:"+";float:right;color:var(--orange);font-size:22px}.faq p{color:var(--muted);font-size:14px;margin-top:11px;padding-right:25px}.cta{text-align:center;background:#e7f1e8}.cta h2{font-size:31px}.cta p{color:var(--muted);margin:9px 0 22px}.site-footer{background:var(--dark);color:#fff;padding:48px 0 23px}.footer-top{display:flex;justify-content:space-between;gap:35px;padding-bottom:35px;border-bottom:1px solid #425149}.footer-brand p{color:#aebbb4;font-size:13px;margin-top:12px;max-width:290px}.footer-links{display:flex;gap:30px;flex-wrap:wrap}.footer-links a{color:#c8d2cc;font-size:14px}.footer-links a:hover{color:var(--lime)}.copyright{color:#8f9e96;font-size:12px;padding-top:19px;display:flex;justify-content:space-between;gap:20px}.empty{background:#fff;border:1px dashed #cbd7cf;border-radius:12px;color:var(--muted);padding:28px;text-align:center;grid-column:1/-1}
@media(max-width:992px){.nav-wrap{gap:20px}nav{gap:14px}.hero-grid,.stream-grid,.event-layout,.two-col,.news-layout{grid-template-columns:1fr}.hero{padding:65px 0}.hero-panel{max-width:620px}.interaction{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.site-header{height:68px}.menu{display:block;margin-left:auto}.nav-wrap{width:calc(100% - 32px)}nav,.nav-actions{display:none}nav.open{display:flex;position:absolute;top:68px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 20px;flex-direction:column;align-items:stretch;gap:0;box-shadow:var(--shadow)}nav.open a{padding:10px 0}nav.open a.active:after{bottom:6px}.hero h1{letter-spacing:-1px}.section{padding:58px 0}.section-head{display:block}.section-head p{margin-top:10px}.download{grid-template-columns:1fr;padding:30px 25px}.interaction{grid-template-columns:1fr}.footer-top,.copyright{display:block}.footer-links{margin-top:25px;gap:15px 25px}}
@media(max-width:520px){.container{width:min(100% - 28px,var(--max))}.hero{padding:48px 0}.hero h1{font-size:35px}.hero-buttons .btn{width:100%}.teams{gap:8px}.team{font-size:15px}.score{font-size:28px}.event-row{grid-template-columns:70px 1fr auto;padding:14px 12px;gap:9px}.event-name{font-size:14px}.event-row .arrow{display:none}.news-item{grid-template-columns:1fr}.news-meta{text-align:left;display:flex;gap:8px;align-items:center}.news-meta .tag{margin:0}.download h2,.cta h2{font-size:26px}.qr{height:145px}}

/* roulang page: index */
:root{--ink:#20252b;--muted:#707982;--paper:#f5f5f2;--white:#fff;--night:#20272b;--line:#dfe3df;--orange:#ef694a;--orange-dark:#d95339;--mint:#b8e8c8;--mint-deep:#3b8c68;--radius:16px;--shadow:0 16px 40px rgba(27,35,37,.09);--wrap:1220px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.75}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input{font:inherit}button{cursor:pointer}.container{width:min(var(--wrap),calc(100% - 48px));margin:auto}.topline{height:4px;background:linear-gradient(90deg,var(--orange) 0 32%,var(--mint) 32% 58%,var(--night) 58%)}
.site-header{position:sticky;top:0;z-index:20;background:rgba(245,245,242,.94);border-bottom:1px solid rgba(32,37,43,.1);backdrop-filter:blur(14px)}.nav{height:76px;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:10px;min-width:270px;font-weight:900;letter-spacing:-.04em;font-size:21px}.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:18px;box-shadow:5px 5px 0 var(--mint-deep)}.nav-links{display:flex;align-items:center;gap:5px;flex:1}.nav-links a{position:relative;padding:10px 13px;color:#596168;font-size:14px;white-space:nowrap}.nav-links a:after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:3px;border-radius:3px;background:transparent}.nav-links a:hover,.nav-links a.active{color:var(--ink);font-weight:700}.nav-links a:hover:after,.nav-links a.active:after{background:var(--orange)}.nav-action{border:1px solid var(--ink);padding:9px 16px;border-radius:9px;font-weight:700;white-space:nowrap}.nav-action:hover{background:var(--ink);color:#fff}.menu-button{display:none;background:none;border:0;font-size:24px}
.hero{background:var(--night);color:#fff;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 48%,rgba(239,105,74,.14) 48% 49%,transparent 49% 100%),radial-gradient(circle at 80% 18%,rgba(184,232,200,.18),transparent 28%)}.hero .container{position:relative}.hero-grid{min-height:570px;display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:center;padding:78px 0 86px}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--mint);font-size:12px;font-weight:800;letter-spacing:.12em}.signal{width:8px;height:8px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 5px rgba(239,105,74,.16)}h1{font-size:clamp(34px,4.5vw,64px);line-height:1.15;letter-spacing:-.055em;margin:20px 0 22px;max-width:650px} .hero-copy{color:#c6cdcf;max-width:570px;font-size:16px}.hero-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:9px;border:1px solid transparent;font-weight:800;transition:.22s ease}.btn-primary{background:var(--orange);color:#fff}.btn-primary:hover{background:#ff8062;transform:translateY(-2px)}.btn-light{border-color:#657075;color:#fff}.btn-light:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px)}.scoreboard{background:#2b3438;border:1px solid #465257;border-radius:20px;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.26);transform:rotate(1deg)}.score-head{display:flex;justify-content:space-between;align-items:center;color:#aab5b8;font-size:12px}.live{color:#ff977f;font-weight:800;display:flex;align-items:center;gap:7px}.live:before{content:"";width:7px;height:7px;background:var(--orange);border-radius:50%}.score-main{margin:24px 0;background:#20282b;border-radius:14px;padding:27px 22px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;text-align:center}.team{font-weight:800;font-size:18px}.team small{display:block;color:#8c999c;font-size:11px;font-weight:500;margin-top:7px}.score{font-size:39px;font-weight:900;color:var(--mint);line-height:1}.score small{font-size:13px;color:#8c999c;display:block;margin:8px 0}.meter{height:7px;background:#3d484c;border-radius:10px;overflow:hidden}.meter i{display:block;width:68%;height:100%;background:var(--orange);border-radius:10px}.score-foot{display:flex;justify-content:space-between;color:#aab5b8;font-size:12px;margin-top:12px}.hero-note{display:flex;gap:12px;margin-top:25px;color:#9fa9ab;font-size:12px}.hero-note b{color:#fff;font-size:17px;display:block;line-height:1.2}
.section{padding:100px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:34px}.kicker{color:var(--orange-dark);font-weight:900;font-size:12px;letter-spacing:.12em}.section h2{font-size:clamp(27px,3vw,42px);line-height:1.25;letter-spacing:-.04em;margin:8px 0 0}.section-intro{color:var(--muted);max-width:440px;margin:0}.text-link{color:var(--orange-dark);font-weight:800;white-space:nowrap}.text-link:hover{text-decoration:underline}
.event-zone{background:#fff}.event-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:20px}.event-feature{background:var(--night);color:#fff;border-radius:var(--radius);padding:30px;min-height:295px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.event-feature:after{content:"LIVE";position:absolute;right:-15px;top:24px;font-size:76px;font-weight:900;color:rgba(255,255,255,.04);letter-spacing:.06em}.event-title{font-size:26px;font-weight:900;margin:12px 0 5px}.event-meta{color:#a9b4b6;font-size:13px}.event-row{border:1px solid var(--line);border-radius:var(--radius);padding:19px 20px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:15px;background:#fafbf9;transition:.22s}.event-row+.event-row{margin-top:12px}.event-row:hover{border-color:var(--orange);transform:translateX(4px)}.event-row h3{margin:0;font-size:16px}.event-row p{margin:4px 0 0;color:var(--muted);font-size:12px}.state{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--mint-deep)}.state:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.state.soon{color:#bd7b27}.mini-arrow{font-size:20px;color:var(--orange)}
.live-area{background:#eceeeb}.live-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px}.screen{min-height:340px;border-radius:18px;background:#293438;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#fff}.screen:before{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(184,232,200,.25);border-radius:50%;box-shadow:0 0 0 38px rgba(184,232,200,.04),0 0 0 76px rgba(184,232,200,.04)}.play{position:relative;width:70px;height:70px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font-size:27px;padding-left:4px;box-shadow:0 8px 24px rgba(239,105,74,.3)}.screen-label{position:absolute;left:22px;top:20px;color:#bfc9c8;font-size:12px}.screen-bottom{position:absolute;left:22px;right:22px;bottom:18px;display:flex;justify-content:space-between;color:#bdc7c8;font-size:12px}.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.filter{border:1px solid #cbd2ce;background:transparent;border-radius:20px;padding:7px 13px;color:var(--muted);font-size:12px}.filter.active,.filter:hover{border-color:var(--orange);color:var(--orange-dark);background:#fff}.schedule{background:#fff;border-radius:16px;padding:20px}.schedule h3{margin:0 0 13px}.schedule-item{padding:15px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:15px}.schedule-item:last-child{border:0}.schedule-item b{display:block;font-size:14px}.schedule-item span{display:block;color:var(--muted);font-size:12px}
.member-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:start}.member-copy p{color:var(--muted);max-width:430px}.member-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.benefit{border-left:3px solid var(--mint-deep);background:#fff;padding:19px 20px;border-radius:0 12px 12px 0}.benefit strong{display:block;font-size:16px}.benefit span{color:var(--muted);font-size:13px}.member-tag{display:inline-block;background:#e4f5e9;color:var(--mint-deep);padding:5px 10px;border-radius:5px;font-size:11px;font-weight:800;margin:8px 0 18px}
.interact{background:#f0e8e0}.interaction-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:35px}.timeline{border-left:2px solid #d6b8a8;padding-left:25px}.interaction-item{position:relative;padding:0 0 28px}.interaction-item:before{content:"";position:absolute;left:-32px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--orange);border:3px solid #f0e8e0}.interaction-item h3{margin:0 0 3px;font-size:18px}.interaction-item p{margin:0;color:var(--muted);font-size:13px}.interaction-card{background:#fff;border-radius:16px;padding:26px;display:grid;grid-template-columns:1fr auto;align-items:center;margin-bottom:12px}.interaction-card h3{margin:0}.interaction-card p{margin:5px 0;color:var(--muted);font-size:13px}.pill{background:var(--mint);color:#286548;padding:5px 9px;border-radius:5px;font-size:11px;font-weight:800}
.app-band{background:var(--orange);color:#fff}.app-layout{display:grid;grid-template-columns:1fr 300px;gap:70px;align-items:center}.app-band .kicker{color:#ffe0d7}.app-band p{color:#ffe9e3;max-width:600px}.app-features{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.app-features span{border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:6px 10px;font-size:12px}.qr-card{background:#fff;color:var(--ink);padding:18px;border-radius:16px;text-align:center;box-shadow:var(--shadow)}.qr{width:150px;height:150px;margin:0 auto 12px;background:repeating-conic-gradient(#20252b 0 25%,#fff 0 50%) 0/18px 18px;border:8px solid #fff;outline:1px solid #ddd}.qr-card small{color:var(--muted)}
.news{background:#fff}.news-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px}.feature-news{background:var(--night);color:#fff;border-radius:16px;padding:28px;min-height:290px;display:flex;flex-direction:column;justify-content:end}.news-label{font-size:11px;color:var(--mint);font-weight:800}.feature-news h3{font-size:25px;line-height:1.35;margin:12px 0}.feature-news p{color:#b6c0c1;margin:0;font-size:13px}.news-list{border-top:1px solid var(--line)}.news-item{display:grid;grid-template-columns:86px 1fr auto;align-items:center;gap:18px;padding:19px 0;border-bottom:1px solid var(--line)}.news-date{font-size:12px;color:var(--muted)}.news-item h3{font-size:16px;margin:0;line-height:1.4}.news-item p{font-size:12px;color:var(--muted);margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.news-cat{font-size:11px;color:var(--orange-dark);font-weight:800}.empty{padding:35px 0;color:var(--muted);font-size:14px}
.faq-wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px}.faq-list details{background:#fff;border:1px solid var(--line);border-radius:11px;margin-bottom:10px;padding:0 19px}.faq-list summary{padding:17px 0;font-weight:800;cursor:pointer;list-style:none}.faq-list summary:after{content:"+";float:right;color:var(--orange);font-size:20px}.faq-list details[open] summary:after{content:"−"}.faq-list p{color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding:14px 0;margin:0 0 3px}
.cta{padding:65px 0;background:#dfeee4}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}.cta h2{margin:0;font-size:30px}.cta p{margin:7px 0 0;color:var(--muted)}.site-footer{background:var(--night);color:#fff;padding:52px 0 24px}.footer-top{display:flex;justify-content:space-between;gap:40px}.footer-brand p{color:#9ea9ab;max-width:350px;font-size:13px}.footer-links{display:flex;gap:55px}.footer-links h4{font-size:13px;margin:0 0 13px}.footer-links a{display:block;color:#aeb8b9;font-size:13px;margin:7px 0}.footer-links a:hover{color:var(--mint)}.footer-bottom{border-top:1px solid #414b4e;margin-top:35px;padding-top:18px;color:#879294;font-size:12px;display:flex;justify-content:space-between;gap:20px}.focusable:focus-visible,.btn:focus-visible,.nav-links a:focus-visible,summary:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
@media(max-width:1024px){.brand{min-width:auto}.nav{gap:16px}.nav-links a{padding:10px 7px}.nav-links a:after{left:7px;right:7px}.hero-grid{gap:35px}.container{width:min(var(--wrap),calc(100% - 36px))}}
@media(max-width:768px){.nav{height:66px}.menu-button{display:block;margin-left:auto}.nav-links{display:none;position:absolute;top:66px;left:0;right:0;padding:12px 18px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-links a{padding:11px 8px}.nav-action{display:none}.hero-grid,.event-layout,.live-grid,.member-grid,.interaction-layout,.news-grid,.faq-wrap,.app-layout{grid-template-columns:1fr}.hero-grid{padding:58px 0 62px;min-height:auto}.scoreboard{max-width:570px;transform:none}.section{padding:70px 0}.section-head{display:block}.section-intro{margin-top:12px}.section-head .text-link{display:inline-block;margin-top:14px}.app-layout{gap:30px}.qr-card{max-width:250px}.footer-top{display:block}.footer-links{margin-top:30px;gap:30px;flex-wrap:wrap}.cta-inner{display:block}.cta .btn{margin-top:20px}}
@media(max-width:520px){.container{width:calc(100% - 28px)}h1{font-size:36px}.brand{font-size:17px}.brand-mark{width:30px;height:30px}.hero-copy{font-size:14px}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-actions .btn{padding:11px 8px;font-size:13px}.score-main{padding:21px 10px}.team{font-size:15px}.event-feature{min-height:270px;padding:23px}.member-list{grid-template-columns:1fr}.interaction-card{display:block}.interaction-card .btn{margin-top:15px}.news-item{grid-template-columns:65px 1fr}.news-item .text-link{display:none}.footer-links{gap:18px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:5px}}

/* roulang page: article */
:root{--ink:#202321;--muted:#68706d;--paper:#f5f6f2;--card:#fff;--dark:#202a28;--line:#dfe5df;--orange:#ef704f;--orange-dark:#d95739;--mint:#b7e9c9;--lime:#d5ef87;--radius:16px;--shadow:0 16px 42px rgba(28,43,37,.09);--max:1200px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;line-height:1.75}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{display:block;max-width:100%}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.focusable:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.site-header{height:78px;background:rgba(245,246,242,.96);border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
.nav{display:flex;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:900;letter-spacing:-1px;white-space:nowrap}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;background:var(--orange);color:#fff;border-radius:10px;font-size:14px;letter-spacing:-1px}
.nav-links{display:flex;align-items:center;gap:25px;flex:1}
.nav-links a{font-size:14px;color:#555f5b;padding:27px 0;position:relative;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active:after{content:"";height:3px;width:24px;background:var(--orange);position:absolute;bottom:16px;left:0;border-radius:4px}
.nav-action{border:1px solid var(--orange);color:var(--orange-dark);border-radius:9px;padding:9px 15px;font-size:14px;font-weight:800;white-space:nowrap;transition:.22s}
.nav-action:hover{background:var(--orange);color:#fff}
.menu-button{display:none;margin-left:auto;border:0;background:none;color:var(--dark);font-size:25px;line-height:1}
.article-hero{background:var(--dark);color:#fff;padding:62px 0 58px;position:relative;overflow:hidden}
.article-hero:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(183,233,201,.2);border-radius:50%;right:-110px;top:-190px;box-shadow:0 0 0 38px rgba(183,233,201,.035),0 0 0 76px rgba(183,233,201,.025)}
.hero-inner{position:relative;z-index:1;max-width:900px}
.breadcrumb{display:flex;align-items:center;gap:10px;color:#aebbb4;font-size:13px;margin-bottom:24px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--lime)}
.breadcrumb .current{color:var(--mint);max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.article-label{display:inline-flex;align-items:center;gap:8px;color:var(--lime);font-size:12px;font-weight:800;letter-spacing:1.5px;margin-bottom:15px}
.article-label:before{content:"";width:24px;height:3px;background:var(--orange);border-radius:3px}
.article-hero h1{font-size:clamp(31px,4.2vw,54px);line-height:1.25;letter-spacing:-1.8px;margin:0;max-width:880px}
.article-summary{color:#c5ceca;font-size:16px;max-width:780px;margin:20px 0 22px}
.article-meta{display:flex;align-items:center;gap:18px;color:#aebbb4;font-size:13px;flex-wrap:wrap}
.meta-dot{width:4px;height:4px;border-radius:50%;background:var(--orange);display:inline-block}
.article-layout{display:grid;grid-template-columns:minmax(0,820px) 260px;gap:54px;align-items:start;padding:70px 0 82px}
.article-content{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(25px,5vw,58px);box-shadow:0 8px 24px rgba(28,43,37,.035);min-width:0}
.article-content h2{font-size:27px;line-height:1.4;margin:34px 0 14px;padding-left:15px;border-left:4px solid var(--orange)}
.article-content h3{font-size:20px;line-height:1.45;margin:28px 0 10px}
.article-content p{font-size:16px;color:#3f4945;line-height:1.95;margin:0 0 20px}
.article-content ul,.article-content ol{padding-left:24px;color:#3f4945;margin:15px 0 24px}
.article-content li{padding:4px 0}
.article-content blockquote{margin:25px 0;padding:18px 22px;background:#eef6ef;border-left:4px solid var(--mint-deep);color:#4b5c53;border-radius:0 10px 10px 0}
.article-content img{border-radius:12px;margin:25px auto}
.article-content table{width:100%;border-collapse:collapse;margin:25px 0;font-size:14px}
.article-content th,.article-content td{border:1px solid var(--line);padding:11px 13px;text-align:left}
.article-content th{background:#edf2ed}
.article-content hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.article-content a{color:var(--orange-dark);text-decoration:underline;text-underline-offset:3px}
.article-side{position:sticky;top:105px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:21px;margin-bottom:15px}
.side-card h3{font-size:16px;margin:0 0 14px}
.side-card p{font-size:13px;color:var(--muted);margin:0}
.side-links{display:grid;gap:8px}
.side-links a{font-size:13px;color:#58645e;padding:7px 0;border-bottom:1px solid #edf0ed;transition:.2s}
.side-links a:hover{color:var(--orange-dark);padding-left:4px}
.side-links a:last-child{border-bottom:0}
.reading-note{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}
.reading-note i{width:8px;height:8px;border-radius:50%;background:var(--mint-deep);display:inline-block}
.empty-state{padding:70px 20px;text-align:center;background:#fff;border:1px dashed #bdc9bf;border-radius:14px}
.empty-state strong{display:block;font-size:23px;margin-bottom:8px}
.empty-state p{color:var(--muted);font-size:14px;margin:0 0 22px}
.btn{border:1px solid transparent;border-radius:9px;padding:10px 17px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.22s ease;cursor:pointer}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 8px 18px rgba(239,112,79,.25)}
.btn-quiet{background:transparent;border-color:var(--line)}
.btn-quiet:hover{border-color:var(--orange);color:var(--orange)}
.related{padding:0 0 82px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:25px}
.section-head h2{font-size:30px;line-height:1.3;letter-spacing:-1px;margin:0}
.section-head p{color:var(--muted);font-size:14px;margin:0}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.related-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;transition:.22s}
.related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#c5d5ca}
.tag{font-size:12px;background:#eef2ed;color:#5d6963;border-radius:30px;padding:4px 10px;display:inline-block}
.related-card h3{font-size:17px;line-height:1.5;margin:15px 0 10px}
.related-card p{font-size:13px;color:var(--muted);margin:0}
.related-card .arrow{color:var(--orange);font-size:20px;float:right;margin-top:-5px}
.cta{text-align:center;background:#e7f1e8;padding:68px 20px}
.cta h2{font-size:30px;line-height:1.35;margin:0}
.cta p{color:var(--muted);margin:9px 0 22px}
.site-footer{background:var(--dark);color:#fff;padding:48px 0 23px}
.footer-top{display:flex;justify-content:space-between;gap:35px;padding-bottom:35px;border-bottom:1px solid #3c4843}
.footer-brand p{color:#aebbb4;font-size:13px;line-height:1.8;margin:15px 0 0}
.footer-links{display:flex;gap:80px}
.footer-links h4{font-size:14px;margin:0 0 13px;color:var(--lime)}
.footer-links a{display:block;color:#c5ceca;font-size:13px;margin:8px 0;transition:.2s}
.footer-links a:hover{color:#fff;padding-left:3px}
.footer-bottom{display:flex;justify-content:space-between;gap:18px;padding-top:20px;color:#92a09a;font-size:12px;flex-wrap:wrap}
@media(max-width:992px){
 .nav{gap:18px}.nav-links{gap:16px}.nav-links a{font-size:13px}
 .article-layout{grid-template-columns:minmax(0,1fr);gap:25px}.article-side{position:static;display:grid;grid-template-columns:1fr 1fr;gap:15px}.side-card{margin:0}
}
@media(max-width:768px){
 .site-header{height:68px}.container{width:min(var(--max),calc(100% - 28px))}
 .nav{width:100%}.brand{font-size:19px}.brand-mark{width:31px;height:31px}
 .menu-button{display:block}.nav-action{font-size:12px;padding:8px 11px}
 .nav-links{display:none;position:absolute;left:14px;right:14px;top:62px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0}
 .nav-links.open{display:flex}.nav-links a{padding:12px 14px;border-radius:8px}.nav-links a.active:after{left:14px;bottom:7px;width:18px}.nav-links a:hover{background:#f2f5f1}
 .article-hero{padding:42px 0 40px}.article-hero h1{letter-spacing:-1px}.article-summary{font-size:15px}
 .article-layout{padding:40px 0 55px}.article-content{padding:25px 20px}.article-content p{font-size:15px}
 .article-side{grid-template-columns:1fr}.related-grid{grid-template-columns:1fr}.related{padding-bottom:55px}
 .footer-top{display:block}.footer-links{gap:45px;margin-top:28px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}
}
@media(max-width:520px){
 .nav-action{display:none}.article-meta{gap:10px}.article-content h2{font-size:23px}.article-content h3{font-size:18px}
 .cta{padding:50px 15px}.cta h2{font-size:25px}.btn{width:100%}
}

/* roulang page: category1 */
:root{
      --ink:#202321;
      --muted:#68706d;
      --paper:#f5f6f2;
      --card:#fff;
      --dark:#202a28;
      --dark-soft:#2d3a36;
      --line:#dfe5df;
      --orange:#ef704f;
      --orange-dark:#d95739;
      --mint:#b7e9c9;
      --lime:#d5ef87;
      --green:#3b8c68;
      --radius:16px;
      --shadow:0 16px 42px rgba(28,43,37,.09);
      --max:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
      color:var(--ink);
      background:var(--paper);
      line-height:1.75;
      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(--max),calc(100% - 40px));margin:0 auto}
    .site-header{
      height:78px;
      background:rgba(245,246,242,.95);
      border-bottom:1px solid var(--line);
      display:flex;
      align-items:center;
      position:sticky;
      top:0;
      z-index:20;
      backdrop-filter:blur(14px);
    }
    .nav{display:flex;align-items:center;gap:32px}
    .brand{
      display:inline-flex;
      align-items:center;
      gap:9px;
      font-size:21px;
      font-weight:900;
      letter-spacing:-1px;
      white-space:nowrap;
    }
    .brand-mark{
      width:34px;
      height:34px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--dark);
      background:var(--lime);
      border-radius:10px;
      font-size:15px;
      letter-spacing:-1px;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:25px;
      flex:1;
    }
    .nav-links a{
      font-size:14px;
      color:#555f5b;
      padding:27px 0;
      position:relative;
    }
    .nav-links a:hover,.nav-links a.active{color:var(--ink)}
    .nav-links a.active:after{
      content:"";
      height:3px;
      width:24px;
      background:var(--orange);
      position:absolute;
      bottom:16px;
      left:0;
      border-radius:4px;
    }
    .nav-action,.btn{
      border:1px solid transparent;
      border-radius:9px;
      padding:10px 17px;
      font-weight:700;
      font-size:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      transition:.22s ease;
    }
    .nav-action{
      background:var(--orange);
      color:#fff;
      white-space:nowrap;
    }
    .nav-action:hover,.btn-primary:hover{
      background:var(--orange-dark);
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 8px 18px rgba(239,112,79,.25);
    }
    .menu-button{
      display:none;
      border:0;
      background:transparent;
      color:var(--dark);
      font-size:25px;
      line-height:1;
    }
    .focusable:focus-visible,.btn:focus-visible,.menu-button:focus-visible,summary:focus-visible{
      outline:3px solid rgba(239,112,79,.35);
      outline-offset:4px;
    }
    .hero{
      background:var(--dark);
      color:#fff;
      padding:70px 0 64px;
      position:relative;
      overflow:hidden;
    }
    .hero:before{
      content:"";
      position:absolute;
      width:580px;
      height:580px;
      border:1px solid rgba(183,233,201,.17);
      border-radius:50%;
      right:-180px;
      top:-260px;
      box-shadow:0 0 0 42px rgba(183,233,201,.035),0 0 0 85px rgba(183,233,201,.025);
    }
    .hero-inner{position:relative;z-index:1}
    .crumbs{
      display:flex;
      gap:9px;
      align-items:center;
      color:#aebbb4;
      font-size:13px;
      margin-bottom:30px;
    }
    .crumbs a:hover{color:var(--lime)}
    .crumbs span{color:#6e7d75}
    .hero-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:70px;
      align-items:center;
    }
    .eyebrow{
      color:var(--mint);
      font-size:12px;
      letter-spacing:2px;
      font-weight:800;
      margin-bottom:16px;
    }
    .hero h1{
      max-width:680px;
      font-size:clamp(35px,4.5vw,60px);
      line-height:1.2;
      letter-spacing:-2px;
      margin:0;
    }
    .hero h1 span{color:var(--lime)}
    .hero p{
      color:#c5ceca;
      max-width:610px;
      margin:21px 0 28px;
      font-size:16px;
    }
    .hero-buttons{display:flex;flex-wrap:wrap;gap:12px}
    .btn-primary{background:var(--orange);color:#fff}
    .btn-light{background:#fff;color:var(--dark)}
    .btn-light:hover{background:var(--lime);transform:translateY(-2px)}
    .btn-quiet{background:transparent;border-color:var(--line);color:var(--ink)}
    .btn-quiet:hover{border-color:var(--orange);color:var(--orange)}
    .hero-board{
      background:var(--dark-soft);
      border:1px solid #465850;
      border-radius:20px;
      padding:24px;
      box-shadow:0 24px 60px rgba(0,0,0,.2);
    }
    .board-top,.board-meta{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:15px;
    }
    .board-top{color:#dce5df;font-size:13px;border-bottom:1px solid #465850;padding-bottom:18px}
    .live-dot{
      color:var(--lime);
      display:inline-flex;
      align-items:center;
      gap:7px;
      font-weight:800;
    }
    .live-dot:before{
      content:"";
      width:8px;height:8px;border-radius:50%;background:var(--lime);
      box-shadow:0 0 0 4px rgba(213,239,135,.12);
    }
    .score-box{
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:17px;
      text-align:center;
      padding:28px 0;
    }
    .team{font-weight:800;font-size:17px}
    .score{font-size:38px;font-weight:900;letter-spacing:2px;color:var(--lime)}
    .versus{color:#91a099;font-size:12px}
    .board-meta{color:#b9c7c0;font-size:13px}
    .board-meta strong{color:#fff}
    .section{padding:82px 0}
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:20px;
      margin-bottom:30px;
    }
    .section-head h2{
      font-size:32px;
      line-height:1.25;
      letter-spacing:-1px;
      margin:0;
    }
    .section-head p{color:var(--muted);font-size:14px;max-width:470px;margin:0}
    .section-kicker{
      color:var(--orange-dark);
      font-weight:800;
      font-size:13px;
      margin-bottom:7px;
    }
    .live-layout{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:22px;
      align-items:stretch;
    }
    .feature-event{
      background:var(--orange);
      color:#fff;
      border-radius:var(--radius);
      padding:31px;
      min-height:300px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      position:relative;
      overflow:hidden;
    }
    .feature-event:after{
      content:"";
      position:absolute;
      width:220px;height:220px;
      border:1px solid rgba(255,255,255,.22);
      border-radius:50%;
      right:-80px;bottom:-95px;
      box-shadow:0 0 0 28px rgba(255,255,255,.06);
    }
    .feature-event>*{position:relative;z-index:1}
    .feature-event .tag{background:rgba(255,255,255,.2);color:#fff}
    .tag{
      font-size:12px;
      background:#eef2ed;
      color:#5d6963;
      border-radius:30px;
      padding:4px 10px;
      display:inline-block;
      width:max-content;
    }
    .feature-event h3{font-size:28px;line-height:1.35;max-width:430px;margin:18px 0 7px}
    .feature-event p{color:#ffe8df;margin:0 0 17px;font-size:14px}
    .event-list{display:grid;gap:10px}
    .event-row{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:13px;
      padding:18px 20px;
      display:grid;
      grid-template-columns:86px 1fr auto;
      align-items:center;
      gap:16px;
      transition:.2s;
    }
    .event-row:hover,.timeline-item:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow);
      border-color:#c5d5ca;
    }
    .event-time{font-size:13px;color:var(--muted);font-weight:700}
    .event-info h3{font-size:16px;margin:0 0 3px;line-height:1.45}
    .event-info p{font-size:13px;color:var(--muted);margin:0}
    .status{
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
    }
    .status.live{color:var(--orange-dark)}
    .status.next{color:var(--green)}
    .status.done{color:#8a918d}
    .status:before{content:"●";margin-right:5px}
    .arrow{font-size:20px;color:var(--orange)}
    .dark-section{background:#e8eee8}
    .timeline{
      position:relative;
      max-width:900px;
      margin:auto;
    }
    .timeline:before{
      content:"";
      position:absolute;
      left:94px;top:16px;bottom:16px;width:1px;background:#cbd8ce;
    }
    .timeline-item{
      display:grid;
      grid-template-columns:75px 1fr auto;
      gap:38px;
      align-items:center;
      background:#fff;
      border:1px solid var(--line);
      border-radius:14px;
      padding:19px 22px;
      margin-bottom:12px;
      transition:.2s;
    }
    .timeline-date{font-weight:900;color:var(--orange-dark);font-size:13px}
    .timeline-content{position:relative}
    .timeline-content:before{
      content:"";
      position:absolute;
      left:-44px;top:10px;
      width:9px;height:9px;
      background:var(--mint-deep);
      border:3px solid #e8eee8;
      border-radius:50%;
    }
    .timeline-content h3{font-size:16px;margin:0 0 3px}
    .timeline-content p{margin:0;color:var(--muted);font-size:13px}
    .info-strip{
      background:var(--dark);
      color:#fff;
      border-radius:var(--radius);
      padding:25px 30px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:25px;
      margin-top:30px;
    }
    .info-strip strong{font-size:19px}
    .info-strip p{color:#c5ceca;font-size:14px;margin:4px 0 0}
    .download{
      background:var(--dark);
      color:#fff;
      border-radius:20px;
      padding:42px;
      display:grid;
      grid-template-columns:1fr 220px;
      gap:35px;
      align-items:center;
      box-shadow:var(--shadow);
    }
    .download h2{font-size:31px;line-height:1.3;margin:10px 0}
    .download p{color:#c5ceca;max-width:580px;margin:0 0 20px}
    .download .tag{background:rgba(255,255,255,.14);color:#fff;margin:0 6px 8px 0}
    .qr{
      width:180px;height:180px;
      background:#fff;
      border:12px solid #fff;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#68706d;
      text-align:center;
      font-size:13px;
      margin:auto;
      position:relative;
    }
    .qr:before,.qr:after{
      content:"";
      position:absolute;
      width:34px;height:34px;
      border:5px solid var(--dark);
      background:linear-gradient(90deg,#fff 45%,var(--dark) 46% 55%,#fff 56%);
    }
    .qr:before{top:10px;left:10px}
    .qr:after{bottom:10px;right:10px}
    .qr-label{display:block;margin-top:10px;text-align:center;color:#aebbb4;font-size:12px}
    .faq{max-width:850px;margin:auto}
    .faq details{
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      margin:10px 0;
      padding:17px 21px;
    }
    .faq summary{cursor:pointer;font-weight:800;list-style:none;padding-right:15px}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:after{content:"+";float:right;color:var(--orange);font-size:22px;line-height:1}
    .faq details[open] summary:after{content:"−"}
    .faq p{color:var(--muted);font-size:14px;margin:11px 0 0;padding-right:25px}
    .cta{text-align:center;background:#e7f1e8;padding:68px 0}
    .cta h2{font-size:31px;margin:0}
    .cta p{color:var(--muted);margin:9px 0 22px}
    .site-footer{background:var(--dark);color:#fff;padding:48px 0 23px}
    .footer-top{display:flex;justify-content:space-between;gap:35px;padding-bottom:35px;border-bottom:1px solid #425149}
    .footer-brand p{color:#b9c7c0;font-size:13px;margin:17px 0 0}
    .footer-links{display:flex;gap:80px}
    .footer-links h4{font-size:14px;margin:0 0 12px}
    .footer-links a{display:block;color:#b9c7c0;font-size:13px;margin:7px 0}
    .footer-links a:hover{color:var(--lime)}
    .footer-bottom{
      display:flex;
      justify-content:space-between;
      gap:20px;
      padding-top:20px;
      color:#8f9e96;
      font-size:12px;
    }
    @media (max-width:992px){
      .nav{gap:20px}
      .nav-links{gap:15px}
      .nav-action{padding:9px 12px}
      .hero-grid,.live-layout{grid-template-columns:1fr;gap:28px}
      .hero{padding:52px 0}
      .download{grid-template-columns:1fr 190px}
    }
    @media (max-width:768px){
      .container{width:min(var(--max),calc(100% - 30px))}
      .site-header{height:68px}
      .nav{justify-content:space-between}
      .menu-button{display:block;order:3}
      .nav-action{order:2;margin-left:auto;margin-right:8px}
      .nav-links{
        display:none;
        position:absolute;
        left:15px;right:15px;top:67px;
        background:#fff;
        border:1px solid var(--line);
        border-radius:0 0 14px 14px;
        box-shadow:var(--shadow);
        padding:8px 18px 14px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
      }
      .nav-links.open{display:flex}
      .nav-links a{padding:11px 0;border-bottom:1px solid #edf0ec}
      .nav-links a:last-child{border-bottom:0}
      .nav-links a.active:after{bottom:8px;left:auto;right:0}
      .section{padding:58px 0}
      .section-head{display:block;margin-bottom:22px}
      .section-head h2{font-size:27px;margin-bottom:8px}
      .timeline:before{left:63px}
      .timeline-item{grid-template-columns:45px 1fr;gap:20px;padding:16px}
      .timeline-item .btn-quiet{grid-column:2;justify-self:start}
      .timeline-content:before{left:-27px}
      .info-strip{display:block;padding:22px}
      .info-strip .btn{margin-top:15px}
      .download{grid-template-columns:1fr;padding:28px 22px;text-align:center}
      .download p{margin-left:auto;margin-right:auto}
      .download .hero-buttons{justify-content:center}
      .footer-top{display:block}
      .footer-links{gap:50px;margin-top:28px}
      .footer-bottom{display:block}
      .footer-bottom span{display:block;margin-top:7px}
    }
    @media (max-width:576px){
      .brand{font-size:18px}
      .brand-mark{width:30px;height:30px}
      .nav-action{font-size:12px;padding:8px 9px}
      .hero h1{font-size:36px;letter-spacing:-1px}
      .hero p{font-size:14px}
      .hero-buttons .btn{width:100%}
      .hero-board{padding:18px}
      .score-box{gap:8px;padding:23px 0}
      .team{font-size:14px}
      .score{font-size:29px}
      .event-row{grid-template-columns:65px 1fr auto;gap:10px;padding:15px 13px}
      .event-info h3{font-size:14px}
      .event-info p{font-size:12px}
      .event-row .arrow{display:none}
      .feature-event{min-height:270px;padding:24px}
      .feature-event h3{font-size:23px}
      .timeline-item{grid-template-columns:1fr;gap:4px}
      .timeline:before,.timeline-content:before{display:none}
      .timeline-item .btn-quiet{grid-column:auto}
      .download h2{font-size:26px}
      .footer-links{gap:25px}
    }

/* roulang page: category2 */
:root{
      --ink:#202321;--muted:#68706d;--paper:#f5f6f2;--card:#fff;--dark:#202a28;
      --line:#dfe5df;--orange:#ef704f;--orange-dark:#d95739;--mint:#b7e9c9;
      --lime:#d5ef87;--radius:16px;--shadow:0 16px 42px rgba(28,43,37,.09);
      --max:1200px
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);line-height:1.75}
    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% - 40px));margin:auto}
    .site-header{height:78px;background:rgba(245,246,242,.96);border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
    .nav{display:flex;align-items:center;gap:34px}
    .brand{display:inline-flex;align-items:center;gap:9px;font-size:20px;font-weight:900;letter-spacing:-.8px;white-space:nowrap}
    .brand-mark{width:34px;height:34px;border-radius:10px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:14px;letter-spacing:-1px}
    .nav-links{display:flex;align-items:center;gap:25px;flex:1}
    .nav-links a{font-size:14px;color:#555f5b;padding:27px 0;position:relative}
    .nav-links a:hover,.nav-links a.active{color:var(--ink)}
    .nav-links a.active:after{content:"";height:3px;width:25px;background:var(--orange);position:absolute;bottom:16px;left:0;border-radius:4px}
    .nav-action,.btn{border:1px solid transparent;border-radius:9px;padding:10px 17px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.22s ease}
    .nav-action,.btn-primary{background:var(--orange);color:#fff}
    .nav-action:hover,.btn-primary:hover{background:var(--orange-dark);color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(239,112,79,.25)}
    .menu-button{display:none;border:0;background:none;font-size:25px;color:var(--dark)}
    .focusable:focus-visible,.btn:focus-visible,.menu-button:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
    .hero{background:var(--dark);color:#fff;padding:76px 0 68px;position:relative;overflow:hidden}
    .hero:after{content:"";position:absolute;width:470px;height:470px;border:1px solid rgba(183,233,201,.2);border-radius:50%;right:-120px;top:-180px;box-shadow:0 0 0 40px rgba(183,233,201,.035),0 0 0 80px rgba(183,233,201,.025)}
    .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:65px;align-items:center;position:relative;z-index:1}
    .eyebrow{font-size:12px;letter-spacing:2px;color:var(--mint);font-weight:800;margin-bottom:18px}
    .hero h1{font-size:clamp(34px,4.5vw,58px);line-height:1.2;letter-spacing:-2px;max-width:650px;margin:0}
    .hero h1 span{color:var(--lime)}
    .hero p{color:#c5ceca;max-width:590px;margin:22px 0 29px;font-size:16px}
    .hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
    .btn-light{background:#fff;color:var(--dark)}
    .btn-light:hover{background:var(--lime);color:var(--dark);transform:translateY(-2px)}
    .hero-panel{background:#2d3a36;border:1px solid #465850;border-radius:20px;padding:25px;box-shadow:0 24px 60px rgba(0,0,0,.2)}
    .panel-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #465850;padding-bottom:17px;margin-bottom:18px}
    .live-dot{color:var(--lime);font-size:13px;font-weight:800}
    .live-dot:before{content:"●";margin-right:7px}
    .panel-title{font-size:21px;font-weight:800;margin:0 0 5px}
    .panel-copy{font-size:13px;color:#becac3;margin:0 0 21px}
    .service-state{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .state-box{background:#35453f;border-radius:12px;padding:14px 10px}
    .state-box strong{display:block;color:var(--lime);font-size:20px}
    .state-box span{color:#c2cec7;font-size:12px}
    .section{padding:78px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:30px}
    .section-head h2{font-size:32px;line-height:1.25;letter-spacing:-1px;margin:0}
    .section-head p{color:var(--muted);font-size:14px;max-width:460px;margin:0}
    .crumbs{padding:22px 0 0;color:var(--muted);font-size:13px}
    .crumbs a:hover{color:var(--orange)}
    .benefit-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:24px;align-items:stretch}
    .member-card{background:var(--orange);color:#fff;border-radius:var(--radius);padding:30px;min-height:330px;display:flex;flex-direction:column;justify-content:space-between}
    .member-card .tag{background:rgba(255,255,255,.2);color:#fff}
    .tag{font-size:12px;background:#eef2ed;color:#5d6963;border-radius:30px;padding:4px 10px;display:inline-block}
    .member-card h3{font-size:27px;line-height:1.35;margin:18px 0 8px}
    .member-card p{color:#ffe8df;font-size:14px}
    .member-card .btn{align-self:flex-start;background:#fff;color:var(--orange-dark)}
    .member-card .btn:hover{background:var(--lime);color:var(--dark)}
    .benefit-matrix{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:27px}
    .benefit-matrix h3{font-size:22px;margin:0 0 8px}
    .benefit-matrix>p{color:var(--muted);font-size:14px;margin:0 0 22px}
    .benefit-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px;border-top:1px solid var(--line);padding:16px 0;align-items:center}
    .benefit-row:first-of-type{color:var(--muted);font-size:12px;padding-top:0;border-top:0}
    .benefit-row strong{font-size:14px}
    .benefit-row span{font-size:13px;color:#56615c}
    .check{color:var(--mint-deep)!important;font-weight:800}
    .process{background:#e8eee8}
    .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .process-step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;min-height:190px}
    .step-no{width:31px;height:31px;background:var(--dark);color:var(--lime);border-radius:9px;display:grid;place-items:center;font-weight:900;margin-bottom:18px}
    .process-step h3{font-size:17px;margin:0 0 8px}
    .process-step p{font-size:13px;color:var(--muted);margin:0}
    .feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
    .feature-item{background:#fff;border:1px solid var(--line);border-radius:13px;padding:19px 20px;display:flex;gap:15px;align-items:flex-start;transition:.2s}
    .feature-item:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#c5d5ca}
    .feature-icon{width:40px;height:40px;flex:none;border-radius:11px;background:var(--mint);display:grid;place-items:center;color:#266346;font-weight:900}
    .feature-item h3{font-size:16px;margin:0 0 4px}
    .feature-item p{font-size:13px;color:var(--muted);margin:0}
    .app-banner{background:var(--dark);color:#fff;border-radius:var(--radius);padding:37px 42px;display:grid;grid-template-columns:1fr 210px;gap:35px;align-items:center}
    .app-banner h2{font-size:29px;margin:0 0 10px}
    .app-banner p{color:#c5ceca;font-size:14px;margin:0 0 20px;max-width:620px}
    .app-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
    .app-tags .tag{background:rgba(255,255,255,.14);color:#e2ebe5}
    .qr{height:172px;width:172px;background:#fff;border-radius:12px;padding:12px;color:var(--dark);display:grid;place-items:center;text-align:center;font-size:13px;line-height:1.45}
    .qr-mark{width:105px;height:105px;border:7px dotted var(--dark);display:grid;place-items:center;font-size:12px}
    .faq{max-width:850px;margin:auto}
    .faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin:10px 0;padding:17px 21px}
    .faq details[open]{border-color:#c8d8cc;box-shadow:0 8px 20px rgba(28,43,37,.05)}
    .faq summary{cursor:pointer;font-weight:800;list-style:none;padding-right:25px}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:after{content:"+";float:right;color:var(--orange);font-size:22px}
    .faq details[open] summary:after{content:"−"}
    .faq p{color:var(--muted);font-size:14px;margin:11px 0 0;padding-right:25px}
    .cta{text-align:center;background:#e7f1e8}
    .cta h2{font-size:31px;margin:0}
    .cta p{color:var(--muted);margin:9px 0 22px}
    .site-footer{background:var(--dark);color:#fff;padding:48px 0 23px}
    .footer-top{display:flex;justify-content:space-between;gap:35px;padding-bottom:35px;border-bottom:1px solid #41504a}
    .footer-brand p{color:#b9c6bf;font-size:13px;margin:16px 0 0}
    .footer-links{display:flex;gap:75px}
    .footer-links h4{font-size:14px;margin:0 0 13px}
    .footer-links a{display:block;color:#b9c6bf;font-size:13px;margin:7px 0}
    .footer-links a:hover{color:var(--lime)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;color:#91a099;font-size:12px}
    @media(max-width:992px){
      .nav{gap:20px}.nav-links{gap:15px}.nav-links a{font-size:13px}
      .hero-grid,.benefit-layout{grid-template-columns:1fr;gap:28px}
      .hero-panel{max-width:650px}.process-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:768px){
      .site-header{height:68px}.container{width:min(var(--max),calc(100% - 30px))}
      .menu-button{display:block;margin-left:auto;order:2}
      .nav-action{order:3;padding:8px 12px;font-size:12px}.nav-links{display:none;position:absolute;left:15px;right:15px;top:68px;background:#fff;border:1px solid var(--line);border-radius:0 0 14px 14px;padding:8px 18px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0}
      .nav-links.open{display:flex}.nav-links a{padding:12px 0;border-bottom:1px solid var(--line)}.nav-links a:last-child{border:0}.nav-links a.active:after{bottom:9px}
      .hero{padding:55px 0 48px}.hero h1{letter-spacing:-1px}.section{padding:58px 0}.section-head{display:block}.section-head h2{font-size:27px;margin-bottom:8px}
      .benefit-row{grid-template-columns:1.1fr 1fr 1fr;gap:7px}.benefit-matrix{padding:20px 15px}.benefit-row span,.benefit-row strong{font-size:12px}
      .app-banner{grid-template-columns:1fr;padding:28px 24px}.qr{width:150px;height:150px}.qr-mark{width:90px;height:90px}
      .footer-top,.footer-bottom{display:block}.footer-links{margin-top:28px;gap:45px}
    }
    @media(max-width:576px){
      .brand{font-size:18px}.brand-mark{width:31px;height:31px}.nav-action{display:none}
      .hero-buttons .btn{width:100%}.service-state{grid-template-columns:1fr 1fr 1fr}.state-box{padding:11px 7px}
      .process-grid,.feature-list{grid-template-columns:1fr}.process-step{min-height:auto}.member-card{min-height:280px}
      .footer-links{gap:28px}.footer-bottom span{display:block;margin-top:8px}
    }

/* roulang page: category3 */
:root{
      --ink:#202321;--muted:#68706d;--paper:#f5f6f2;--card:#fff;--dark:#202a28;
      --line:#dfe5df;--orange:#ef704f;--orange-dark:#d95739;--mint:#b7e9c9;
      --lime:#d5ef87;--mint-deep:#3b8c68;--radius:16px;
      --shadow:0 16px 42px rgba(28,43,37,.09);--max:1200px
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);line-height:1.75}
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    img{max-width:100%;display:block}
    .container{width:min(var(--max),calc(100% - 40px));margin:auto}
    .site-header{height:78px;background:rgba(245,246,242,.96);border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
    .nav{display:flex;align-items:center;gap:30px}
    .brand{display:inline-flex;align-items:center;gap:9px;font-size:21px;font-weight:900;letter-spacing:-1px;white-space:nowrap}
    .brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:var(--orange);color:#fff;font-size:15px;letter-spacing:-1px}
    .nav-links{display:flex;align-items:center;gap:25px;flex:1}
    .nav-links a{font-size:14px;color:#555f5b;padding:27px 0;position:relative;white-space:nowrap}
    .nav-links a:hover,.nav-links a.active{color:var(--ink)}
    .nav-links a.active:after{content:"";height:3px;width:22px;background:var(--orange);position:absolute;bottom:16px;left:0;border-radius:4px}
    .nav-action,.btn{border:1px solid transparent;border-radius:9px;padding:10px 17px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.22s ease;cursor:pointer}
    .nav-action,.btn-primary{background:var(--orange);color:#fff}
    .nav-action:hover,.btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 8px 18px rgba(239,112,79,.25)}
    .menu-button{display:none;background:none;border:0;font-size:25px;color:var(--dark)}
    .focusable:focus-visible,.btn:focus-visible,.menu-button:focus-visible,summary:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
    .hero{background:var(--dark);color:#fff;padding:76px 0 68px;position:relative;overflow:hidden}
    .hero:after{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(183,233,201,.2);border-radius:50%;right:-150px;top:-230px;box-shadow:0 0 0 42px rgba(183,233,201,.035),0 0 0 84px rgba(183,233,201,.025)}
    .hero-grid{display:grid;grid-template-columns:1fr .86fr;gap:70px;align-items:center;position:relative;z-index:1}
    .eyebrow{font-size:12px;letter-spacing:2px;color:var(--mint);font-weight:800;margin-bottom:17px}
    .hero h1{font-size:clamp(34px,4vw,58px);line-height:1.2;letter-spacing:-2px;margin:0;max-width:650px}
    .hero h1 span{color:var(--lime)}
    .hero p{color:#c5ceca;max-width:600px;margin:22px 0 29px;font-size:16px}
    .hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
    .btn-light{background:#fff;color:var(--dark)}
    .btn-light:hover{background:var(--lime);transform:translateY(-2px)}
    .hero-board{background:#2d3a36;border:1px solid #465850;border-radius:20px;padding:25px;box-shadow:0 24px 60px rgba(0,0,0,.2)}
    .board-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #465850;padding-bottom:18px;margin-bottom:20px}
    .live-dot{display:inline-flex;align-items:center;gap:8px;color:var(--lime);font-size:13px;font-weight:800}
    .live-dot:before{content:"";width:8px;height:8px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 5px rgba(213,239,135,.12)}
    .board-title{font-size:22px;font-weight:800;line-height:1.4}
    .board-meta{color:#bdc9c2;font-size:13px;margin:8px 0 22px}
    .board-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center;gap:13px}
    .board-score strong{font-size:34px;line-height:1;color:#fff}
    .board-score small{display:block;color:#c5ceca;margin-top:8px}
    .score-sep{font-size:13px;color:var(--mint)}
    .status-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 10px;border-radius:20px;font-weight:800}
    .status-open{background:#ddf2e4;color:#286c4b}.status-soon{background:#fff0dc;color:#a55b25}.status-closed{background:#e7eae8;color:#68706d}
    .section{padding:82px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}
    .section-head h2{font-size:32px;line-height:1.25;letter-spacing:-1px;margin:0}
    .section-head p{color:var(--muted);font-size:14px;max-width:470px;margin:0}
    .crumbs{font-size:13px;color:var(--muted);padding:22px 0 0}
    .crumbs a:hover{color:var(--orange)}
    .interaction-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:24px;align-items:stretch}
    .intro-card{background:var(--orange);color:#fff;border-radius:var(--radius);padding:32px;min-height:390px;display:flex;flex-direction:column;justify-content:space-between}
    .intro-card h2{font-size:29px;line-height:1.35;margin:15px 0}
    .intro-card p{color:#ffe8df;font-size:14px}
    .intro-card ul{padding:0;margin:20px 0 0;list-style:none}
    .intro-card li{border-top:1px solid rgba(255,255,255,.28);padding:10px 0;font-size:14px}
    .intro-card li:before{content:"✓";margin-right:9px;color:var(--lime);font-weight:900}
    .activity-list{display:grid;gap:11px}
    .activity-card{display:grid;grid-template-columns:80px 1fr auto;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px 20px;transition:.22s ease}
    .activity-card:hover{transform:translateY(-3px);border-color:#b7d4c0;box-shadow:var(--shadow)}
    .activity-index{width:58px;height:58px;border-radius:14px;background:#e7f1e8;color:var(--mint-deep);display:grid;place-items:center;font-size:21px;font-weight:900}
    .activity-card:nth-child(2) .activity-index{background:var(--lime);color:#596b2e}
    .activity-card:nth-child(3) .activity-index{background:#ffe4d9;color:var(--orange-dark)}
    .activity-card h3{font-size:17px;margin:0 0 3px;line-height:1.45}
    .activity-card p{font-size:13px;color:var(--muted);margin:0}
    .activity-side{text-align:right;white-space:nowrap}
    .activity-side .status-tag{margin-bottom:8px}
    .text-link{color:var(--orange-dark);font-weight:800;font-size:13px}
    .text-link:hover{color:var(--orange)}
    .dark-section{background:#e8eee8}
    .status-strip{display:flex;gap:10px;overflow:auto;padding-bottom:4px;margin-bottom:24px}
    .filter-tag{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:24px;padding:8px 15px;font-size:13px;white-space:nowrap}
    .filter-tag.active{background:var(--dark);border-color:var(--dark);color:#fff}
    .timeline{position:relative;border-left:2px solid #c7d8cc;margin-left:13px;padding-left:28px;display:grid;gap:21px}
    .timeline-item{position:relative;background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px 22px}
    .timeline-item:before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--orange);left:-35px;top:27px;border:3px solid #e8eee8}
    .timeline-item h3{margin:0 0 6px;font-size:18px}
    .timeline-item p{margin:0;color:var(--muted);font-size:14px}
    .timeline-meta{display:flex;gap:10px;align-items:center;margin-bottom:8px;font-size:12px;color:var(--muted)}
    .rule-box{background:#fdfefa;border:1px dashed #b7cbbc;border-radius:14px;padding:24px;margin-top:25px}
    .rule-box h3{font-size:19px;margin:0 0 8px}
    .rule-box p{font-size:14px;color:var(--muted);margin:0}
    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:23px;min-height:150px}
    .step-number{color:var(--orange);font-size:27px;font-weight:900;line-height:1}
    .step h3{font-size:17px;margin:14px 0 5px}
    .step p{font-size:13px;color:var(--muted);margin:0}
    .download{background:var(--dark);color:#fff;border-radius:20px;padding:38px;display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center}
    .download h2{font-size:30px;margin:0 0 10px}
    .download p{color:#c5ceca;margin:0 0 20px;max-width:620px;font-size:14px}
    .download .tag{background:rgba(255,255,255,.15);color:#fff;margin:0 6px 7px 0}
    .qr{width:128px;height:128px;background:#fff;border-radius:12px;padding:10px;display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
    .qr i{background:var(--dark);display:block}
    .qr i:nth-child(3n){background:var(--orange)}
    .qr-note{text-align:center;color:#c5ceca;font-size:12px;margin-top:8px}
    .faq{max-width:850px;margin:auto}
    .faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin:10px 0;padding:17px 21px}
    .faq summary{cursor:pointer;font-weight:800;list-style:none}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:after{content:"+";float:right;color:var(--orange);font-size:22px}
    .faq details[open] summary:after{content:"−"}
    .faq p{color:var(--muted);font-size:14px;margin:11px 0 0;padding-right:25px}
    .cta{text-align:center;background:#e7f1e8;padding:65px 0}
    .cta h2{font-size:31px;margin:0}
    .cta p{color:var(--muted);margin:9px 0 22px}
    .site-footer{background:var(--dark);color:#fff;padding:48px 0 23px}
    .footer-top{display:flex;justify-content:space-between;gap:35px;padding-bottom:35px;border-bottom:1px solid #46534d}
    .footer-brand p{color:#bdc9c2;font-size:13px;margin:15px 0 0}
    .footer-links{display:flex;gap:80px}
    .footer-links h4{font-size:14px;margin:0 0 13px;color:var(--mint)}
    .footer-links a{display:block;color:#bdc9c2;font-size:13px;margin:7px 0}
    .footer-links a:hover{color:#fff}
    .footer-bottom{display:flex;justify-content:space-between;gap:18px;padding-top:20px;color:#8f9b95;font-size:12px}
    @media(max-width:992px){
      .nav{gap:18px}.nav-links{gap:15px}.nav-links a{font-size:13px}
      .hero-grid,.interaction-layout{grid-template-columns:1fr;gap:30px}
      .hero-board{max-width:620px}.download{grid-template-columns:1fr}
    }
    @media(max-width:768px){
      .site-header{height:68px}.container{width:min(var(--max),calc(100% - 30px))}
      .menu-button{display:block;margin-left:auto}.nav-action{padding:8px 12px;font-size:12px}
      .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 20px 16px;flex-direction:column;align-items:stretch;gap:0;box-shadow:var(--shadow)}
      .nav-links.open{display:flex}.nav-links a{padding:11px 0}.nav-links a.active:after{bottom:5px}
      .section{padding:58px 0}.hero{padding:58px 0 52px}.hero h1{letter-spacing:-1px}
      .section-head{display:block}.section-head h2{font-size:27px;margin-bottom:8px}
      .activity-card{grid-template-columns:58px 1fr}.activity-side{grid-column:2;text-align:left}
      .steps{grid-template-columns:1fr}.footer-top,.footer-bottom{display:block}.footer-links{gap:45px;margin-top:28px}
    }
    @media(max-width:520px){
      .nav-action{display:none}.hero-buttons .btn{width:100%}.hero-board{padding:19px}
      .board-title{font-size:19px}.intro-card{min-height:0;padding:25px}
      .activity-card{gap:12px;padding:15px}.download{padding:26px 21px}.download h2{font-size:25px}
      .download .btn{width:100%}.qr{margin:5px auto 0}.footer-links{gap:25px;flex-wrap:wrap}
    }

/* roulang page: category4 */
:root{
      --ink:#202321;
      --muted:#68706d;
      --paper:#f5f6f2;
      --card:#fff;
      --dark:#202a28;
      --line:#dfe5df;
      --orange:#ef704f;
      --orange-dark:#d95739;
      --mint:#b7e9c9;
      --lime:#d5ef87;
      --radius:16px;
      --shadow:0 16px 42px rgba(28,43,37,.09);
      --max:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);line-height:1.75}
    a{color:inherit;text-decoration:none}
    a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(239,112,79,.45);outline-offset:3px}
    button,input{font:inherit}
    img{max-width:100%;display:block}
    .container{width:min(var(--max),calc(100% - 40px));margin:auto}
    .site-header{height:78px;background:rgba(245,246,242,.95);border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
    .nav{display:flex;align-items:center;gap:30px}
    .brand{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:900;letter-spacing:-1px;white-space:nowrap}
    .brand-mark{width:36px;height:36px;border-radius:11px;background:var(--orange);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;letter-spacing:-1px}
    .nav-links{display:flex;align-items:center;gap:25px;flex:1}
    .nav-links a{font-size:14px;color:#555f5b;padding:27px 0;position:relative;white-space:nowrap}
    .nav-links a:hover,.nav-links a.active{color:var(--ink)}
    .nav-links a.active:after{content:"";height:3px;width:22px;background:var(--orange);position:absolute;bottom:16px;left:0;border-radius:4px}
    .nav-action,.btn{border:1px solid transparent;border-radius:9px;padding:10px 17px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.22s ease;cursor:pointer}
    .nav-action,.btn-primary{background:var(--orange);color:#fff}
    .nav-action:hover,.btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 8px 18px rgba(239,112,79,.25)}
    .menu-button{display:none;border:0;background:transparent;font-size:25px;color:var(--dark)}
    .hero{background:var(--dark);color:#fff;padding:76px 0 70px;position:relative;overflow:hidden}
    .hero:after{content:"";position:absolute;width:470px;height:470px;border:1px solid rgba(183,233,201,.2);border-radius:50%;right:-140px;top:-210px;box-shadow:0 0 0 40px rgba(183,233,201,.035),0 0 0 80px rgba(183,233,201,.025)}
    .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:68px;align-items:center;position:relative;z-index:1}
    .eyebrow{font-size:12px;letter-spacing:2px;color:var(--mint);font-weight:800;margin-bottom:16px}
    .hero h1{font-size:clamp(34px,4.4vw,58px);line-height:1.2;letter-spacing:-2px;max-width:670px;margin:0}
    .hero h1 span{color:var(--lime)}
    .hero p{color:#c5ceca;max-width:600px;margin:22px 0 29px;font-size:16px}
    .hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
    .btn-light{background:#fff;color:var(--dark)}
    .btn-light:hover{background:var(--lime);transform:translateY(-2px)}
    .hero-panel{background:#2d3a36;border:1px solid #465850;border-radius:20px;padding:25px;box-shadow:0 24px 60px rgba(0,0,0,.2)}
    .panel-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #465850;padding-bottom:18px;margin-bottom:22px}
    .panel-label{font-size:13px;color:#dce5df}
    .live-dot{color:var(--lime);font-size:12px;font-weight:800}
    .device-card{background:#34433e;border-radius:15px;padding:23px;display:flex;align-items:center;justify-content:space-between;gap:18px}
    .device-card strong{display:block;font-size:22px;line-height:1.3}
    .device-card small{color:#b9c6c0}
    .phone-shape{width:112px;height:184px;border:5px solid #899d91;border-radius:21px;padding:13px 8px;flex:none;background:#202a28}
    .phone-screen{height:100%;border-radius:12px;background:linear-gradient(150deg,var(--orange),#394e43 55%,var(--mint));position:relative;overflow:hidden}
    .phone-screen:after{content:"赛事直播";position:absolute;left:10px;bottom:14px;color:#fff;font-weight:800;font-size:12px}
    .section{padding:82px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:31px}
    .section-head h2{font-size:32px;line-height:1.25;letter-spacing:-1px;margin:0}
    .section-head p{color:var(--muted);font-size:14px;max-width:470px;margin:0}
    .download-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch}
    .download-copy{background:var(--orange);border-radius:var(--radius);color:#fff;padding:36px;min-height:355px}
    .download-copy h2{font-size:34px;line-height:1.3;margin:12px 0}
    .download-copy p{color:#ffe8df;max-width:570px}
    .tag{font-size:12px;background:#eef2ed;color:#5d6963;border-radius:30px;padding:4px 10px;display:inline-block}
    .download-copy .tag{background:rgba(255,255,255,.2);color:#fff}
    .feature-points{display:flex;flex-wrap:wrap;gap:8px;margin:23px 0}
    .feature-points span{border:1px solid rgba(255,255,255,.35);border-radius:30px;padding:5px 11px;font-size:13px}
    .qr-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;align-items:center;justify-content:center;gap:27px;box-shadow:var(--shadow)}
    .qr-code{width:158px;height:158px;padding:10px;background:#fff;border:1px solid #d7ded8;display:grid;grid-template-columns:repeat(9,1fr);gap:3px;flex:none}
    .qr-code i{display:block;background:#202a28}
    .qr-code i:nth-child(3n),.qr-code i:nth-child(7n+2),.qr-code i:nth-child(11n){background:var(--orange)}
    .qr-note h3{font-size:21px;margin:0 0 8px}
    .qr-note p{font-size:13px;color:var(--muted);margin:0 0 15px}
    .btn-quiet{background:transparent;border-color:var(--line);color:var(--ink)}
    .btn-quiet:hover{border-color:var(--orange);color:var(--orange)}
    .feature-section{background:#e8eee8}
    .feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
    .feature-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:23px;min-height:190px;transition:.2s}
    .feature-item:nth-child(2){background:var(--mint)}
    .feature-item:nth-child(4){background:var(--lime)}
    .feature-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    .feature-icon{width:40px;height:40px;border-radius:12px;background:var(--dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:19px}
    .feature-item h3{font-size:18px;margin:0 0 8px}
    .feature-item p{font-size:13px;color:#59645f;margin:0}
    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
    .step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:25px;position:relative}
    .step-number{color:var(--orange);font-size:34px;font-weight:900;line-height:1}
    .step h3{font-size:18px;margin:18px 0 7px}
    .step p{font-size:14px;color:var(--muted);margin:0}
    .device-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
    .news-layout{display:grid;grid-template-columns:.83fr 1.17fr;gap:22px}
    .news-feature{background:#d8e9df;border-radius:var(--radius);padding:31px;min-height:300px;display:flex;flex-direction:column;justify-content:end}
    .news-feature h3{font-size:25px;line-height:1.4;margin:13px 0}
    .news-feature p{font-size:14px;color:#59645f;margin:0 0 20px}
    .news-list{display:grid;gap:10px}
    .news-item{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px 20px;display:grid;grid-template-columns:1fr auto;gap:10px;transition:.2s}
    .news-item:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#c5d5ca}
    .news-item h3{font-size:16px;line-height:1.5;margin:0}
    .news-item p{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:500px;margin:5px 0 0}
    .news-meta{font-size:12px;color:var(--muted);text-align:right}
    .news-meta .tag{margin-bottom:8px}
    .empty-note{border:1px dashed #b8c8bc;border-radius:12px;padding:18px;color:var(--muted);font-size:13px;background:rgba(255,255,255,.48);text-align:center}
    .faq{max-width:850px;margin:auto}
    .faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin:10px 0;padding:17px 21px}
    .faq summary{cursor:pointer;font-weight:800;list-style:none}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:after{content:"+";float:right;color:var(--orange);font-size:22px}
    .faq details[open] summary:after{content:"−"}
    .faq p{color:var(--muted);font-size:14px;margin:11px 0 0;padding-right:25px}
    .cta{text-align:center;background:#e7f1e8}
    .cta h2{font-size:31px;margin:0}
    .cta p{color:var(--muted);margin:9px 0 22px}
    .site-footer{background:var(--dark);color:#fff;padding:48px 0 23px}
    .footer-top{display:flex;justify-content:space-between;gap:35px;padding-bottom:35px;border-bottom:1px solid #405049}
    .footer-brand p{color:#b9c6c0;font-size:13px;margin:17px 0 0}
    .footer-links{display:flex;gap:78px}
    .footer-links h4{font-size:14px;margin:0 0 13px}
    .footer-links a{display:block;color:#b9c6c0;font-size:13px;margin:8px 0}
    .footer-links a:hover{color:var(--lime)}
    .footer-bottom{display:flex;justify-content:space-between;gap:15px;color:#9caaa3;font-size:12px;padding-top:20px}
    @media(max-width:992px){
      .nav{gap:18px}.nav-links{gap:14px}
      .nav-links a{font-size:13px}
      .hero-grid,.download-layout,.news-layout{grid-template-columns:1fr}
      .feature-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:768px){
      .site-header{height:68px}
      .container{width:min(var(--max),calc(100% - 30px))}
      .menu-button{display:block;order:3}
      .nav-action{margin-left:auto;padding:8px 12px;font-size:12px}
      .nav-links{display:none;position:absolute;left:15px;right:15px;top:67px;background:var(--paper);border:1px solid var(--line);border-radius:0 0 14px 14px;padding:8px 18px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0}
      .nav-links.open{display:flex}
      .nav-links a{padding:12px 0;border-bottom:1px solid var(--line)}
      .nav-links a:last-child{border-bottom:0}
      .nav-links a.active:after{bottom:8px}
      .hero{padding:58px 0 48px}
      .hero-grid{gap:34px}
      .hero h1{letter-spacing:-1px}
      .hero-panel{padding:18px}
      .section{padding:58px 0}
      .section-head{display:block;margin-bottom:22px}
      .section-head h2{font-size:27px;margin-bottom:8px}
      .qr-card{justify-content:flex-start}
      .steps{grid-template-columns:1fr}
      .footer-top,.footer-bottom{display:block}
      .footer-links{margin-top:28px;gap:45px}
      .footer-bottom span{display:block;margin-top:8px}
    }
    @media(max-width:576px){
      .brand{font-size:18px}.brand-mark{width:32px;height:32px}
      .nav-action{display:none}
      .hero-buttons .btn{width:100%}
      .device-card{align-items:flex-start}
      .phone-shape{width:92px;height:150px}
      .download-copy{padding:27px;min-height:0}
      .download-copy h2{font-size:28px}
      .qr-card{display:block;text-align:center;padding:24px}
      .qr-code{margin:0 auto 20px}
      .feature-grid{grid-template-columns:1fr 1fr;gap:9px}
      .feature-item{padding:16px;min-height:190px}
      .feature-item h3{font-size:16px}
      .news-item{grid-template-columns:1fr}
      .news-meta{text-align:left}
      .footer-links{gap:24px}
    }

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