/* roulang page: index */
:root{
  --ink:#17352f;
  --ink-2:#295149;
  --mint:#79c9ad;
  --mint-deep:#43a889;
  --mint-pale:#e8f4ee;
  --warm:#fbfaf5;
  --cream:#f4f2e9;
  --mist:#eef3ef;
  --olive:#718278;
  --orange:#b8764f;
  --line:#dce7df;
  --text:#263b36;
  --muted:#71817b;
  --white:#fff;
  --radius:18px;
  --shadow:0 16px 42px rgba(28,65,56,.08);
  --shadow-sm:0 8px 24px rgba(28,65,56,.06);
  --container:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;color:var(--text);background:var(--warm);font-size:16px;line-height:1.75}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(67,168,137,.35);outline-offset:3px}
img{max-width:100%;display:block}
button,input,textarea{font:inherit}
button{border:0;cursor:pointer}
.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
.site-header{height:78px;background:rgba(251,250,245,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;transition:.25s}
.site-header.scrolled{box-shadow:0 6px 20px rgba(29,65,56,.08)}
.nav-wrap{height:78px;display:flex;align-items:center;gap:34px}
.logo{display:flex;align-items:center;gap:11px;min-width:245px;color:var(--ink);font-weight:800;letter-spacing:-.04em;font-size:19px}
.logo-mark{width:31px;height:31px;border:7px solid var(--mint-deep);border-left-color:var(--ink);border-radius:10px 17px 10px 17px;transform:rotate(-18deg)}
.main-nav{display:flex;align-items:center;gap:24px;flex:1}
.main-nav a{position:relative;color:#526760;font-size:14px;font-weight:600;padding:27px 0;white-space:nowrap}
.main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;border-radius:5px;background:transparent}
.main-nav a:hover,.main-nav a.active{color:var(--ink)}
.main-nav a:hover:after,.main-nav a.active:after{background:var(--mint-deep)}
.nav-actions{display:flex;align-items:center;gap:15px;white-space:nowrap}
.text-link{font-size:14px;font-weight:700;color:var(--ink-2)}
.text-link:hover{color:var(--mint-deep)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;border-radius:11px;font-size:14px;font-weight:750;transition:.22s ease}
.btn-primary{background:var(--mint-deep);color:#fff;box-shadow:0 8px 18px rgba(67,168,137,.2)}
.btn-primary:hover{background:#318f73;transform:translateY(-2px);box-shadow:0 11px 22px rgba(67,168,137,.28)}
.btn-secondary{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.btn-secondary:hover{border-color:var(--mint-deep);color:var(--mint-deep);transform:translateY(-2px)}
.menu-btn{display:none;background:none;color:var(--ink);font-size:26px}
.hero{padding:92px 0 64px;background:linear-gradient(135deg,#fbfaf5 0%,#f0f6f0 100%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:70px}
.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--mint-deep);font-size:13px;font-weight:800;letter-spacing:.08em}
.eyebrow:before{content:"";width:25px;height:2px;background:var(--mint-deep)}
.hero h1{font-size:clamp(36px,4.3vw,58px);line-height:1.17;letter-spacing:-.06em;color:var(--ink);margin:18px 0 22px;max-width:680px}
.hero-copy{font-size:18px;line-height:1.9;color:#61746c;max-width:625px}
.hero-actions{display:flex;gap:13px;margin:30px 0 38px;flex-wrap:wrap}
.quick-note{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);padding-top:20px;gap:12px}
.quick-note div{padding-right:12px;border-right:1px solid var(--line)}
.quick-note div:last-child{border:0}
.quick-note b{display:block;color:var(--ink);font-size:14px}
.quick-note span{font-size:12px;color:var(--muted)}
.device-stage{height:410px;position:relative;display:flex;justify-content:center;align-items:center}
.device{position:absolute;width:215px;height:380px;border:8px solid #263f38;border-radius:31px;background:#fbfcf8;box-shadow:var(--shadow);padding:18px 14px;overflow:hidden}
.device.main-device{transform:rotate(7deg);right:17%;z-index:2}
.device.back-device{transform:rotate(-9deg);left:15%;top:23px;background:#e8f1eb}
.device-top{display:flex;justify-content:space-between;font-size:10px;color:var(--olive);margin-bottom:18px}
.ui-pill{height:9px;width:56px;border-radius:10px;background:#b9dbc9;margin-bottom:18px}
.ui-title{font-size:18px;font-weight:800;color:var(--ink);line-height:1.35;margin-bottom:12px}
.ui-line{height:8px;background:#dce9e1;border-radius:8px;margin:8px 0}
.ui-line.short{width:62%}
.ui-panel{background:#eaf5ee;border-radius:13px;padding:14px;margin:18px 0}
.ui-panel strong{display:block;color:var(--ink);font-size:13px}
.ui-panel span{font-size:11px;color:var(--muted)}
.ui-status{display:flex;align-items:center;gap:8px;color:var(--mint-deep);font-size:12px;font-weight:700;margin-top:16px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--mint-deep)}
.section{padding:92px 0}
.section-tint{background:var(--mist)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px}
.section-head h2{font-size:32px;line-height:1.25;color:var(--ink);letter-spacing:-.04em;margin-top:8px}
.section-head p{color:var(--muted);max-width:560px}
.arrow-link{color:var(--mint-deep);font-weight:750;font-size:14px;white-space:nowrap}
.arrow-link:hover{color:var(--ink)}
.arrow-link span{display:inline-block;margin-left:5px;transition:.2s}
.arrow-link:hover span{transform:translateX(4px)}
.quick-bar{padding:20px 0;border-bottom:1px solid var(--line);background:#fff}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.quick-item{display:flex;align-items:center;gap:14px;padding:11px 25px;border-right:1px solid var(--line)}
.quick-item:first-child{padding-left:0}
.quick-item:last-child{border:0}
.quick-icon{width:38px;height:38px;border-radius:12px;background:var(--mint-pale);display:grid;place-items:center;color:var(--mint-deep);font-weight:800}
.quick-item strong{font-size:15px;color:var(--ink);display:block}
.quick-item small{color:var(--muted);font-size:12px}
.quick-arrow{margin-left:auto;color:var(--mint-deep);font-size:19px}
.download-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:start}
.lead-copy h2{font-size:32px;color:var(--ink);line-height:1.3;margin:10px 0 16px}
.lead-copy>p{color:var(--muted);line-height:1.9}
.reminder{margin-top:28px;padding:18px 20px;border-left:3px solid var(--orange);background:#f8eee8;border-radius:0 12px 12px 0;color:#795847;font-size:14px}
.download-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:27px;box-shadow:var(--shadow-sm)}
.version-top{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:20px}
.version-top h3{font-size:22px;color:var(--ink)}
.badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:20px;background:var(--mint-pale);color:#377b66;font-size:12px;font-weight:800}
.badge.orange{background:#f8e9de;color:#9a5b3e}
.version-info{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:23px}
.info-cell span{font-size:12px;color:var(--muted);display:block}
.info-cell strong{font-size:14px;color:var(--ink)}
.download-bottom{display:flex;align-items:center;gap:17px}
.qr{width:78px;height:78px;border:8px solid #fff;outline:1px solid var(--line);background:repeating-linear-gradient(45deg,#294a41 0 4px,#f5faf5 4px 8px);border-radius:8px}
.download-bottom p{font-size:12px;color:var(--muted);flex:1}
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:36px}
.process-step{position:relative;padding:0 24px 0 0}
.process-step:not(:last-child):after{content:"";position:absolute;right:14px;top:17px;width:calc(100% - 46px);height:1px;background:var(--line);transform:translateX(100%)}
.process-no{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:800;margin-bottom:12px}
.process-step h4{font-size:15px;color:var(--ink);margin-bottom:4px}
.process-step p{font-size:13px;color:var(--muted);line-height:1.6}
.announcement{display:grid;grid-template-columns:1.08fr .92fr;gap:24px}
.notice-feature{background:var(--ink);color:#fff;border-radius:var(--radius);padding:32px;min-height:275px;display:flex;flex-direction:column;justify-content:space-between}
.notice-feature .badge{background:rgba(121,201,173,.18);color:#a9e2cc}
.notice-feature h3{font-size:25px;line-height:1.45;margin:20px 0 8px;max-width:530px}
.notice-feature p{color:#b8ccc4;font-size:14px;max-width:520px}
.notice-feature .arrow-link{color:#94d9be}
.notice-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 24px}
.notice-row{display:flex;align-items:center;gap:15px;padding:19px 0;border-bottom:1px solid var(--line)}
.notice-row:last-child{border:0}
.notice-date{font-size:12px;color:var(--muted);min-width:72px}
.notice-row strong{font-size:14px;color:var(--ink);font-weight:700;flex:1}
.notice-row .arrow-link{font-size:20px}
.content-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.feature-content{background:#fff;border-radius:var(--radius);padding:31px;border:1px solid var(--line);min-height:320px;display:flex;flex-direction:column;justify-content:end;box-shadow:var(--shadow-sm)}
.feature-content h3{font-size:24px;line-height:1.45;color:var(--ink);margin:13px 0 8px}
.feature-content p,.news-row p{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:4px 25px}
.news-row{padding:18px 0;border-bottom:1px solid var(--line)}
.news-row:last-child{border:0}
.news-meta{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.news-meta time{font-size:12px;color:var(--muted)}
.news-row h3{font-size:16px;color:var(--ink);line-height:1.5;margin-bottom:3px}
.timeline{position:relative;max-width:880px;margin:0 auto;padding-left:38px}
.timeline:before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--line)}
.timeline-item{position:relative;padding:0 0 34px 28px}
.timeline-item:before{content:"";position:absolute;left:-37px;top:7px;width:16px;height:16px;border-radius:50%;border:4px solid var(--mint-deep);background:var(--warm)}
.timeline-item.muted:before{border-color:#aabbb3}
.timeline-top{display:flex;gap:12px;align-items:center;margin-bottom:7px}
.timeline-item h3{font-size:20px;color:var(--ink)}
.timeline-item p{font-size:14px;color:var(--muted);margin:4px 0 8px}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.guide-card{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:16px;transition:.22s}
.guide-card:hover,.category-card:hover,.dynamic-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.guide-no{width:43px;height:43px;border-radius:13px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800}
.guide-card h3{color:var(--ink);font-size:18px;margin-bottom:5px}
.guide-card p{color:var(--muted);font-size:14px}
.security-band{background:#e6f0e9}
.security-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:52px;align-items:center}
.security-symbol{width:88px;height:88px;border-radius:28px;background:var(--ink);color:#a9dfc8;display:grid;place-items:center;font-size:38px;margin-bottom:22px}
.security-layout h2{font-size:32px;color:var(--ink);line-height:1.3;margin-bottom:12px}
.security-layout>div>p{color:var(--muted);max-width:420px}
.security-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.security-item{background:rgba(255,255,255,.72);padding:20px;border-radius:15px;border:1px solid rgba(174,201,189,.55)}
.security-item strong{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.security-item p{font-size:13px;color:var(--muted);line-height:1.7}
.check-layout{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.check-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.check-panel h3{color:var(--ink);font-size:20px;margin-bottom:17px}
.check-list{list-style:none}
.check-list li{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;color:#526761}
.check-list li:last-child{border:0}
.check-list li:before{content:"✓";width:21px;height:21px;border-radius:50%;background:var(--mint-pale);color:var(--mint-deep);display:grid;place-items:center;font-weight:800;flex:none}
.dynamic-track{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dynamic-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:23px;min-height:225px;transition:.22s}
.dynamic-date{font-size:30px;font-weight:800;color:var(--mint-deep);line-height:1;margin-bottom:17px}
.dynamic-card h3{font-size:18px;line-height:1.45;color:var(--ink);margin:10px 0 7px}
.dynamic-card p{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.faq-wrap{max-width:900px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{width:100%;background:none;text-align:left;padding:21px 4px;display:flex;justify-content:space-between;align-items:center;color:var(--ink);font-weight:750;font-size:16px}
.faq-question span{font-size:23px;color:var(--mint-deep);transition:.2s}
.faq-answer{display:none;padding:0 40px 22px 4px;color:var(--muted);font-size:14px;line-height:1.85}
.faq-item.open .faq-answer{display:block}
.faq-item.open .faq-question span{transform:rotate(45deg)}
.support{background:var(--ink);color:#fff}
.support-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.support h2{font-size:32px;line-height:1.3;margin:10px 0 14px}
.support p{color:#b7cbc2}
.support-time{margin-top:28px;display:inline-flex;padding:10px 15px;border:1px solid rgba(184,214,200,.3);border-radius:10px;color:#b7cbc2;font-size:13px}
.feedback-form{background:rgba(255,255,255,.08);border:1px solid rgba(190,220,205,.18);border-radius:16px;padding:25px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-field{margin-bottom:14px}
.form-field.full{grid-column:1/-1}
.form-field label{display:block;font-size:13px;color:#c4d8cf;margin-bottom:6px}
.form-field input,.form-field textarea{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(190,220,205,.24);border-radius:9px;padding:11px 12px;color:#fff}
.form-field textarea{min-height:88px;resize:vertical}
.form-field input::placeholder,.form-field textarea::placeholder{color:#91aaa0}
.form-note{font-size:11px;color:#8ca79c;margin-top:12px}
.category-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:150px 150px;gap:15px}
.category-card{position:relative;background:var(--ink);border-radius:16px;padding:24px;color:#fff;overflow:hidden;transition:.22s}
.category-card:after{content:"";position:absolute;width:120px;height:120px;border:1px solid rgba(155,218,192,.25);border-radius:50%;right:-28px;bottom:-45px}
.category-card.large{grid-row:span 2;background:#306d5d}
.category-card.tall{grid-row:span 2;background:#718878}
.category-card h3{font-size:20px;margin-bottom:5px}
.category-card p{font-size:13px;color:#c6ded4;max-width:230px;line-height:1.6}
.category-card a{position:absolute;bottom:20px;left:24px;color:#a5e1ca;font-size:13px;font-weight:750}
.final-cta{background:#dcefe5;padding:54px 0}
.final-layout{display:flex;justify-content:space-between;align-items:center;gap:30px}
.final-layout h2{color:var(--ink);font-size:29px;line-height:1.35;margin-bottom:7px}
.final-layout p{color:var(--muted);font-size:14px}
.final-actions{display:flex;gap:12px;flex:none}
.site-footer{background:#16362f;color:#c0d2ca;padding:62px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.15fr;gap:35px;padding-bottom:48px}
.footer-logo{color:#fff;margin-bottom:15px}
.footer-about{font-size:13px;color:#91aaa0;max-width:270px;line-height:1.8}
.footer-col h3{font-size:14px;color:#fff;margin-bottom:17px}
.footer-col a,.footer-col p{display:block;font-size:13px;color:#9eb6ad;margin:10px 0}
.footer-col a:hover{color:#a9e2cc}
.footer-qr{display:flex;gap:13px;align-items:center}
.footer-qr .qr{width:62px;height:62px}
.footer-bottom{border-top:1px solid rgba(190,220,205,.15);padding-top:19px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#849f95}
.footer-bottom a{margin-left:16px}
.empty-state{padding:42px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:16px;grid-column:1/-1}
@media(max-width:1100px){
  .nav-wrap{gap:18px}.logo{min-width:215px;font-size:16px}.main-nav{gap:15px}
  .main-nav a{font-size:13px}.nav-actions .text-link{display:none}
  .hero-grid{gap:35px}.device.main-device{right:8%}.device.back-device{left:7%}
}
@media(max-width:768px){
  .container{width:min(100% - 32px,var(--container))}
  .site-header,.nav-wrap{height:68px}.nav-wrap{justify-content:space-between}
  .logo{min-width:0;font-size:16px}.logo-mark{width:27px;height:27px;border-width:6px}
  .main-nav,.nav-actions .text-link{display:none}.nav-actions{margin-left:auto}.nav-actions .btn{padding:9px 13px;font-size:13px}.menu-btn{display:block}
  .main-nav.open{display:flex;position:absolute;top:68px;left:0;right:0;background:var(--warm);border-bottom:1px solid var(--line);padding:12px 20px;flex-direction:column;align-items:stretch;gap:0;box-shadow:var(--shadow)}
  .main-nav.open a{padding:12px 0}.main-nav.open a:after{bottom:5px}
  .hero{padding:60px 0 48px}.hero-grid,.download-layout,.security-layout,.support-layout,.check-layout{grid-template-columns:1fr;gap:35px}
  .hero h1{font-size:39px}.hero-copy{font-size:16px}.device-stage{height:350px}.device{transform:scale(.86)}.device.main-device{right:7%}.device.back-device{left:6%}
  .quick-grid{grid-template-columns:1fr 1fr}.quick-item{padding:13px 10px}.quick-item:first-child{padding-left:0}.quick-item:nth-child(2){border:0}.quick-item:nth-child(3){padding-left:0}
  .section{padding:64px 0}.section-head{align-items:start;flex-direction:column;gap:10px}.section-head h2,.lead-copy h2,.security-layout h2,.support h2{font-size:27px}
  .announcement,.content-layout{grid-template-columns:1fr}.notice-feature{min-height:250px}
  .dynamic-track{display:flex;overflow:auto;padding-bottom:8px}.dynamic-card{min-width:275px}
  .category-grid{grid-template-columns:1fr 1fr;grid-template-rows:160px 160px}.category-card.large{grid-row:span 2}.category-card.tall{grid-row:span 1}
  .final-layout{display:block}.final-actions{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{display:block}.footer-bottom div:last-child{margin-top:10px}
}
@media(max-width:520px){
  body{font-size:15px}.hero h1{font-size:34px}.hero-actions .btn{width:100%}.quick-note{grid-template-columns:1fr 1fr;row-gap:13px}.quick-note div:nth-child(2){border:0}.device-stage{height:310px}.device{width:180px;height:315px;border-width:6px;border-radius:25px;padding:14px 11px}.device.main-device{right:0}.device.back-device{left:0}
  .version-info{grid-template-columns:1fr 1fr}.download-bottom{align-items:start}.process{grid-template-columns:1fr;gap:22px}.process-step{padding-left:46px}.process-step:not(:last-child):after{display:none}.process-no{position:absolute;left:0;top:0}
  .guide-grid,.security-list,.form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto}.category-grid{display:flex;flex-direction:column}.category-card{min-height:150px}.category-card.large,.category-card.tall{min-height:180px}
  .footer-grid{grid-template-columns:1fr}.footer-bottom a{margin-left:0;margin-right:14px}
}

/* roulang page: category1 */
:root{
  --ink:#17352f;
  --ink-2:#295149;
  --mint:#79c9ad;
  --mint-deep:#43a889;
  --mint-pale:#e8f4ee;
  --warm:#fbfaf5;
  --cream:#f4f2e9;
  --mist:#eef3ef;
  --olive:#718278;
  --orange:#b8764f;
  --orange-pale:#f8e9de;
  --line:#dce7df;
  --text:#263b36;
  --muted:#71817b;
  --white:#fff;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 16px 42px rgba(28,65,56,.08);
  --shadow-sm:0 8px 24px rgba(28,65,56,.06);
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;color:var(--text);background:var(--warm);font-size:16px;line-height:1.75}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(67,168,137,.35);outline-offset:3px}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
button{border:0;cursor:pointer}
.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
.site-header{height:78px;background:rgba(251,250,245,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;transition:.25s}
.site-header.scrolled{box-shadow:0 6px 20px rgba(29,65,56,.08)}
.nav-wrap{height:78px;display:flex;align-items:center;gap:34px}
.logo{display:flex;align-items:center;gap:11px;min-width:245px;color:var(--ink);font-weight:800;letter-spacing:-.04em;font-size:19px}
.logo-mark{width:31px;height:31px;flex:0 0 31px;border:7px solid var(--mint-deep);border-left-color:var(--ink);border-radius:10px 17px 10px 17px;transform:rotate(-18deg)}
.main-nav{display:flex;align-items:center;gap:24px;flex:1}
.main-nav a{position:relative;color:#526760;font-size:14px;font-weight:600;padding:27px 0;white-space:nowrap}
.main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;border-radius:5px;background:transparent}
.main-nav a:hover,.main-nav a.active{color:var(--ink)}
.main-nav a:hover:after,.main-nav a.active:after{background:var(--mint-deep)}
.nav-actions{display:flex;align-items:center;gap:15px;white-space:nowrap}
.text-link{font-size:14px;font-weight:700;color:var(--ink-2)}
.text-link:hover{color:var(--mint-deep)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;border-radius:11px;font-size:14px;font-weight:750;transition:.22s ease}
.btn span{transition:transform .2s ease}
.btn:hover span{transform:translate(3px,-2px)}
.btn-primary{background:var(--mint-deep);color:#fff;box-shadow:0 8px 18px rgba(67,168,137,.2)}
.btn-primary:hover{background:#318f73;transform:translateY(-2px);box-shadow:0 11px 22px rgba(67,168,137,.28)}
.btn-secondary{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.btn-secondary:hover{border-color:var(--mint-deep);color:var(--mint-deep);transform:translateY(-2px)}
.menu-btn{display:none;background:none;color:var(--ink);font-size:26px;line-height:1;padding:8px}
.page-main{overflow:hidden}
.breadcrumb-wrap{padding:28px 0 14px}
.breadcrumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:0;list-style:none;color:var(--muted);font-size:13px}
.breadcrumb a{color:var(--ink-2);font-weight:650}
.breadcrumb a:hover{color:var(--mint-deep)}
.breadcrumb .divider{color:#aab8b0}
.category-intro{padding:34px 0 70px}
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) 318px;gap:48px;align-items:end}
.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--mint-deep);font-size:13px;font-weight:800;letter-spacing:.08em}
.kicker:before{content:"";width:25px;height:2px;background:var(--mint-deep)}
.category-intro h1{margin:14px 0 17px;color:var(--ink);font-size:clamp(36px,4vw,50px);line-height:1.18;letter-spacing:-.055em}
.category-intro p{max-width:700px;margin:0;color:var(--muted);font-size:17px;line-height:1.9}
.status-panel{background:var(--ink);border-radius:var(--radius);padding:24px 25px;color:#fff;box-shadow:var(--shadow)}
.status-panel small{display:block;color:#a5c5b8;font-size:12px;letter-spacing:.06em}
.status-panel strong{display:block;margin:5px 0 13px;font-size:21px;line-height:1.35}
.status-line{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:#c6ddd3}
.status-dot{display:inline-flex;align-items:center;gap:7px}
.status-dot:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint)}
.section{padding:82px 0}
.section-tint{background:var(--mist)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:28px}
.section-head h2{margin:6px 0 0;color:var(--ink);font-size:30px;line-height:1.3;letter-spacing:-.04em}
.section-head p{max-width:500px;margin:0;color:var(--muted);font-size:15px}
.badge{display:inline-flex;align-items:center;border-radius:99px;padding:5px 10px;background:var(--mint-pale);color:#34745f;font-size:12px;font-weight:800;line-height:1.2}
.badge.olive{background:#e8ece8;color:#5e6e65}
.badge.orange{background:var(--orange-pale);color:#965b40}
.badge.dark{background:rgba(121,201,173,.17);color:#b6e9d5}
.pinned-card{display:grid;grid-template-columns:185px minmax(0,1fr) auto;align-items:stretch;border:1px solid #244b42;border-radius:var(--radius);overflow:hidden;background:var(--ink);box-shadow:var(--shadow)}
.pinned-date{display:flex;flex-direction:column;justify-content:center;padding:30px;background:#204239;color:#fff}
.pinned-date b{font-size:38px;line-height:1;letter-spacing:-.05em}
.pinned-date span{margin-top:8px;color:#b7d3c6;font-size:13px}
.pinned-body{padding:30px 34px;color:#fff}
.pinned-body h2{margin:13px 0 10px;font-size:25px;line-height:1.4;letter-spacing:-.03em}
.pinned-body p{margin:0;color:#bdd0c8;font-size:14px;line-height:1.85}
.pinned-link{display:flex;align-items:center;padding:24px 29px;border-left:1px solid rgba(255,255,255,.13);color:#a6dfc7;font-size:14px;font-weight:800;white-space:nowrap;transition:.2s}
.pinned-link:hover{background:rgba(255,255,255,.05);color:#fff}
.filter-bar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:18px 20px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.filter-label{margin-right:5px;color:var(--muted);font-size:13px;font-weight:700}
.filter-chip{padding:7px 14px;border:1px solid transparent;border-radius:99px;color:#667a72;background:#f2f5f2;font-size:13px;font-weight:700;transition:.2s}
.filter-chip:hover,.filter-chip.active{background:var(--mint-pale);border-color:#b5dfce;color:#26745c}
.announcement-list{border-top:1px solid var(--line)}
.announcement-item{display:grid;grid-template-columns:128px minmax(0,1fr) 42px;gap:28px;align-items:center;padding:25px 8px;border-bottom:1px solid var(--line);transition:.2s}
.announcement-item:hover{padding-left:16px;background:rgba(255,255,255,.55)}
.item-date{color:var(--muted);font-size:13px;font-weight:700}
.item-date strong{display:block;color:var(--ink);font-size:20px;line-height:1.35;letter-spacing:-.03em}
.item-content{min-width:0}
.item-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.item-content h3{margin:0;color:var(--ink);font-size:18px;line-height:1.45;font-weight:780;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-content p{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-arrow{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--mint-pale);color:var(--mint-deep);font-size:19px;transition:.2s}
.announcement-item:hover .item-arrow{background:var(--mint-deep);color:#fff;transform:translateX(3px)}
.empty-state{padding:56px 24px;text-align:center;border:1px dashed #b9cec2;border-radius:var(--radius);background:#f8fbf8}
.empty-icon{width:48px;height:48px;display:grid;place-items:center;margin:0 auto 14px;border-radius:16px;background:var(--mint-pale);color:var(--mint-deep);font-size:23px}
.empty-state h3{margin:0 0 6px;color:var(--ink);font-size:19px}
.empty-state p{margin:0;color:var(--muted);font-size:14px}
.list-footer{display:flex;justify-content:center;padding-top:32px}
.reading-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px}
.reading-note{padding:31px;background:var(--cream);border-radius:var(--radius)}
.reading-note h2{margin:0 0 13px;color:var(--ink);font-size:24px;line-height:1.35}
.reading-note p{margin:0;color:#60736b;font-size:15px}
.rule-list{display:grid;gap:12px}
.rule-item{display:flex;gap:14px;padding:19px 20px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm)}
.rule-number{width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;border-radius:50%;background:var(--mint-pale);color:#34745f;font-size:13px;font-weight:850}
.rule-item strong{display:block;color:var(--ink);font-size:15px}
.rule-item p{margin:2px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
.notice-map{display:grid;grid-template-columns:1.15fr .85fr;gap:25px}
.map-card{padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow-sm)}
.map-card h2{margin:0 0 8px;color:var(--ink);font-size:24px}
.map-card>p{margin:0 0 22px;color:var(--muted);font-size:14px}
.channel-list{display:grid;gap:12px}
.channel-row{display:flex;align-items:center;gap:15px;padding:14px 0;border-bottom:1px solid var(--line)}
.channel-row:last-child{border:0}
.channel-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:12px;background:var(--mint-pale);color:var(--mint-deep);font-weight:850}
.channel-row strong{display:block;color:var(--ink);font-size:14px}
.channel-row span{display:block;color:var(--muted);font-size:12px}
.update-card{display:flex;flex-direction:column;justify-content:space-between;background:var(--ink);color:#fff;border-radius:var(--radius);padding:30px}
.update-card .badge{align-self:flex-start}
.update-card h2{margin:17px 0 10px;font-size:25px;line-height:1.35}
.update-card p{margin:0;color:#bed2c8;font-size:14px}
.update-card .small-status{margin-top:25px;padding-top:17px;border-top:1px solid rgba(255,255,255,.13);color:#a5c8ba;font-size:13px}
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:45px;align-items:start}
.faq-copy h2{margin:7px 0 13px;color:var(--ink);font-size:30px;line-height:1.3}
.faq-copy p{margin:0;color:var(--muted)}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 0;background:none;color:var(--ink);text-align:left;font-weight:780;font-size:16px}
.faq-question i{width:25px;height:25px;display:grid;place-items:center;flex:0 0 25px;border-radius:50%;background:var(--mint-pale);color:var(--mint-deep);font-style:normal;transition:.2s}
.faq-item.active .faq-question i{background:var(--mint-deep);color:#fff;transform:rotate(45deg)}
.faq-answer{display:none;padding:0 42px 20px 0;color:var(--muted);font-size:14px;line-height:1.85}
.faq-item.active .faq-answer{display:block}
.support-strip{padding:34px 38px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;border-radius:var(--radius);background:#d9eee4;border:1px solid #bbddcd}
.support-strip h2{margin:0 0 6px;color:var(--ink);font-size:25px}
.support-strip p{margin:0;color:#537268;font-size:15px}
.site-footer{padding:68px 0 20px;background:var(--ink);color:#d7e4de}
.footer-grid{display:grid;grid-template-columns:1.45fr .85fr .85fr 1fr;gap:36px;padding-bottom:42px}
.footer-logo{color:#fff;min-width:0;font-size:18px}
.footer-logo .logo-mark{border-left-color:#fff}
.footer-about{max-width:310px;margin:16px 0 0;color:#b7cbc2;font-size:14px;line-height:1.8}
.footer-col h3{margin:0 0 15px;color:#fff;font-size:14px;font-weight:800}
.footer-col>a{display:block;width:max-content;max-width:100%;margin:8px 0;color:#bbcec5;font-size:13px;transition:.2s}
.footer-col>a:hover{color:var(--mint);transform:translateX(3px)}
.footer-qr{display:flex;align-items:center;gap:13px}
.qr{width:54px;height:54px;display:block;background:linear-gradient(90deg,#d7e4de 18%,transparent 18% 36%,#d7e4de 36% 54%,transparent 54% 72%,#d7e4de 72%),linear-gradient(#d7e4de 18%,transparent 18% 36%,#d7e4de 36% 54%,transparent 54% 72%,#d7e4de 72%);background-color:#326055;border:5px solid #d7e4de}
.footer-qr p{margin:0;color:#bbcec5;font-size:12px;line-height:1.65}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:19px;border-top:1px solid rgba(255,255,255,.12);color:#9fb8ad;font-size:12px}
.footer-bottom div:last-child{display:flex;gap:17px}
.footer-bottom a:hover{color:var(--mint)}
@media(max-width:1100px){
  .nav-wrap{gap:20px}.main-nav{gap:17px}.nav-actions .text-link{display:none}
  .intro-grid{gap:28px}.pinned-card{grid-template-columns:155px minmax(0,1fr) auto}
}
@media(max-width:850px){
  .site-header,.nav-wrap{height:68px}.nav-wrap{gap:14px}.logo{min-width:0;font-size:16px}.logo-mark{width:27px;height:27px;flex-basis:27px;border-width:6px}
  .menu-btn{display:block;order:3;margin-left:auto}.nav-actions{order:2}.nav-actions .btn{padding:9px 13px;font-size:13px}
  .main-nav{display:none;position:absolute;top:68px;left:0;right:0;padding:13px 24px 20px;background:var(--warm);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
  .main-nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}.main-nav a{padding:12px 0}.main-nav a:after{bottom:7px;right:auto;width:28px}
  .intro-grid,.notice-map,.faq-grid{grid-template-columns:1fr}.category-intro{padding-bottom:54px}.status-panel{max-width:440px}
  .pinned-card{grid-template-columns:1fr}.pinned-date{padding:20px 27px;flex-direction:row;align-items:baseline;gap:10px}.pinned-date span{margin:0}
  .pinned-link{padding:18px 30px;border-left:0;border-top:1px solid rgba(255,255,255,.13)}
  .reading-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  body{font-size:15px}.container{width:min(var(--container),calc(100% - 32px))}
  .nav-actions .btn span{display:none}.category-intro{padding:27px 0 48px}.category-intro h1{font-size:34px}.category-intro p{font-size:15px}
  .section{padding:58px 0}.section-head{display:block;margin-bottom:23px}.section-head h2{font-size:25px}.section-head p{margin-top:9px}
  .pinned-body{padding:24px}.pinned-body h2{font-size:21px}.pinned-date b{font-size:30px}
  .filter-bar{padding:15px}.filter-label{width:100%}.filter-chip{padding:6px 11px}
  .announcement-item{grid-template-columns:1fr 34px;gap:12px;padding:20px 0}.item-date{grid-column:1/-1}.item-date strong{display:inline;margin-right:8px;font-size:15px}.item-content h3{font-size:16px}.item-content p{font-size:13px}
  .item-arrow{width:33px;height:33px;font-size:16px}.announcement-item:hover{padding-left:5px}
  .reading-note,.map-card,.update-card{padding:23px}.support-strip{grid-template-columns:1fr;padding:27px 24px}.support-strip h2{font-size:21px}
  .footer-grid{grid-template-columns:1fr;gap:27px}.footer-bottom{display:block}.footer-bottom div:last-child{margin-top:9px;gap:13px;flex-wrap:wrap}
}

/* roulang page: article */
:root{
      --ink:#17352f;
      --ink-2:#295149;
      --mint:#79c9ad;
      --mint-deep:#43a889;
      --mint-pale:#e8f4ee;
      --warm:#fbfaf5;
      --cream:#f4f2e9;
      --mist:#eef3ef;
      --olive:#718278;
      --orange:#b8764f;
      --line:#dce7df;
      --text:#263b36;
      --muted:#71817b;
      --white:#fff;
      --radius:18px;
      --shadow:0 16px 42px rgba(28,65,56,.08);
      --shadow-sm:0 8px 24px rgba(28,65,56,.06);
      --container:1200px
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--warm);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.75}
    a{color:inherit;text-decoration:none}
    a:focus-visible,button:focus-visible{outline:3px solid rgba(67,168,137,.35);outline-offset:3px}
    img{display:block;max-width:100%}
    button{font:inherit;border:0;cursor:pointer}
    .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
    .site-header{height:78px;background:rgba(251,250,245,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;transition:.25s}
    .site-header.scrolled{box-shadow:0 6px 20px rgba(29,65,56,.08)}
    .nav-wrap{height:78px;display:flex;align-items:center;gap:34px}
    .logo{display:flex;align-items:center;gap:11px;min-width:245px;color:var(--ink);font-weight:800;letter-spacing:-.04em;font-size:19px}
    .logo-mark{width:31px;height:31px;border:7px solid var(--mint-deep);border-left-color:var(--ink);border-radius:10px 17px 10px 17px;transform:rotate(-18deg);flex:none}
    .main-nav{display:flex;align-items:center;gap:24px;flex:1}
    .main-nav a{position:relative;color:#526760;font-size:14px;font-weight:600;padding:27px 0;white-space:nowrap}
    .main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;border-radius:5px;background:transparent}
    .main-nav a:hover,.main-nav a.active{color:var(--ink)}
    .main-nav a:hover:after,.main-nav a.active:after{background:var(--mint-deep)}
    .nav-actions{display:flex;align-items:center;gap:15px;white-space:nowrap}
    .text-link{font-size:14px;font-weight:700;color:var(--ink-2)}
    .text-link:hover{color:var(--mint-deep)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;border-radius:11px;font-size:14px;font-weight:750;transition:.22s ease}
    .btn-primary{background:var(--mint-deep);color:#fff;box-shadow:0 8px 18px rgba(67,168,137,.2)}
    .btn-primary:hover{background:#318f73;transform:translateY(-2px);color:#fff}
    .btn-secondary{background:var(--white);color:var(--ink);border:1px solid var(--line)}
    .btn-secondary:hover{border-color:var(--mint-deep);color:var(--mint-deep);transform:translateY(-2px)}
    .menu-btn{display:none;background:none;color:var(--ink);font-size:26px}
    .article-hero{padding:64px 0 58px;background:linear-gradient(135deg,#fbfaf5 0%,#f0f6f0 100%);border-bottom:1px solid var(--line)}
    .crumbs{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;margin-bottom:30px}
    .crumbs a{color:var(--mint-deep);font-weight:700}
    .crumbs span{color:#a2b0aa}
    .article-heading{max-width:850px}
    .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--mint-deep);font-size:13px;font-weight:800;letter-spacing:.08em}
    .eyebrow:before,.section-kicker:before{content:"";width:25px;height:2px;background:var(--mint-deep)}
    .article-heading h1{font-size:clamp(32px,4vw, fiftypx);font-size:clamp(34px,4.2vw,52px);line-height:1.25;letter-spacing:-.055em;color:var(--ink);margin:16px 0 20px}
    .article-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:14px}
    .badge{display:inline-flex;align-items:center;padding:5px 11px;border-radius:20px;background:var(--mint-pale);color:#377b66;font-size:12px;font-weight:800}
    .badge.orange{background:#f8e9de;color:#9a5b3e}
    .article-main{padding:72px 0 96px}
    .article-layout{display:grid;grid-template-columns:minmax(0,820px) 270px;gap:70px;align-items:start;justify-content:center}
    .summary-box{background:var(--mist);border:1px solid var(--line);border-radius:var(--radius);padding:25px 29px;margin-bottom:34px;color:var(--ink-2);font-size:17px;line-height:1.85}
    .summary-box strong{display:block;color:var(--ink);font-size:14px;margin-bottom:6px}
    .article-content{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:42px 48px;box-shadow:var(--shadow-sm);overflow:hidden}
    .article-content h2{font-size:28px;line-height:1.4;color:var(--ink);margin:36px 0 15px}
    .article-content h3{font-size:21px;line-height:1.45;color:var(--ink-2);margin:28px 0 12px}
    .article-content p{margin:0 0 19px;color:#526760;line-height:1.95}
    .article-content ul,.article-content ol{padding-left:24px;margin:14px 0 24px;color:#526760}
    .article-content li{margin:8px 0}
    .article-content blockquote{margin:25px 0;padding:18px 22px;background:var(--mint-pale);border-left:4px solid var(--mint-deep);border-radius:0 12px 12px 0;color:var(--ink-2)}
    .article-content img{border-radius:13px;margin:25px auto}
    .article-content table{width:100%;border-collapse:collapse;margin:25px 0;font-size:14px}
    .article-content th,.article-content td{padding:12px 14px;border:1px solid var(--line);text-align:left}
    .article-content th{background:var(--mist);color:var(--ink)}
    .article-side{position:sticky;top:108px}
    .side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:23px;box-shadow:var(--shadow-sm);margin-bottom:18px}
    .side-card h2{font-size:17px;color:var(--ink);margin:0 0 15px}
    .side-card p{font-size:13px;color:var(--muted);line-height:1.8;margin:0}
    .side-line{height:1px;background:var(--line);margin:18px 0}
    .side-link{display:flex;justify-content:space-between;gap:10px;padding:10px 0;color:var(--ink-2);font-size:14px;border-bottom:1px solid var(--line)}
    .side-link:last-child{border-bottom:0}
    .side-link:hover{color:var(--mint-deep)}
    .notice-box{display:flex;gap:14px;align-items:flex-start;background:#fff8f2;border:1px solid #f1ddcf;border-radius:14px;padding:18px 20px;margin:30px 0}
    .notice-icon{width:28px;height:28px;border-radius:50%;background:#f4d7c6;color:var(--orange);font-weight:800;text-align:center;line-height:28px;flex:none}
    .notice-box strong{display:block;color:#895239;font-size:15px;margin-bottom:3px}
    .notice-box p{margin:0;color:#825f4c;font-size:14px;line-height:1.75}
    .related-section{padding:0 0 88px}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
    .section-head h2{font-size:30px;line-height:1.3;color:var(--ink);margin:8px 0 0;letter-spacing:-.04em}
    .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .related-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;min-height:195px;display:flex;flex-direction:column;transition:.22s ease}
    .related-card:hover{transform:translateY(-3px);border-color:#a8d8c5;box-shadow:var(--shadow-sm)}
    .related-card h3{color:var(--ink);font-size:18px;line-height:1.5;margin:15px 0 8px}
    .related-card p{color:var(--muted);font-size:14px;line-height:1.75;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .related-card time{margin-top:auto;color:#8b9a94;font-size:13px}
    .article-actions{border-top:1px solid var(--line);padding-top:27px;margin-top:40px;display:flex;justify-content:space-between;align-items:center;gap:16px}
    .action-group{display:flex;gap:11px;flex-wrap:wrap}
    .empty-state{text-align:center;padding:70px 25px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
    .empty-state .empty-icon{width:56px;height:56px;border-radius:18px;background:var(--mint-pale);color:var(--mint-deep);display:grid;place-items:center;font-size:25px;margin:0 auto 18px}
    .empty-state h1{font-size:28px;color:var(--ink);margin:0 0 12px}
    .empty-state p{color:var(--muted);margin:0 0 24px}
    .site-footer{background:var(--ink);color:#d8e8df;padding:62px 0 22px}
    .footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:45px}
    .footer-logo{color:#fff;margin-bottom:16px}
    .footer-about{color:#a9c0b6;font-size:14px;line-height:1.85;max-width:280px;margin:0}
    .footer-col{display:flex;flex-direction:column;gap:9px}
    .footer-col h3{color:#fff;font-size:15px;margin:0 0 9px}
    .footer-col a{color:#a9c0b6;font-size:14px;transition:.2s}
    .footer-col a:hover{color:var(--mint)}
    .footer-qr{display:flex;gap:13px;align-items:center}
    .qr{display:block;width:64px;height:64px;border:5px solid #fff;border-radius:7px;background:repeating-linear-gradient(45deg,#17352f 0 4px,#fff 4px 8px)}
    .footer-qr p{font-size:12px;line-height:1.7;color:#a9c0b6;margin:0}
    .footer-bottom{border-top:1px solid rgba(216,232,223,.16);padding-top:19px;display:flex;justify-content:space-between;gap:20px;color:#91aaa0;font-size:12px}
    .footer-bottom div:last-child{display:flex;gap:20px}
    .footer-bottom a:hover{color:var(--mint)}
    @media(max-width:1024px){
      .nav-wrap{gap:18px}.logo{min-width:220px;font-size:17px}.main-nav{gap:15px}
      .nav-actions .text-link{display:none}.article-layout{grid-template-columns:minmax(0,1fr) 230px;gap: thirtypx;gap:36px}
    }
    @media(max-width:768px){
      .container{width:min(var(--container),calc(100% - 34px))}
      .site-header,.nav-wrap{height:68px}.menu-btn{display:block;order:3}.main-nav{display:none;position:absolute;left:17px;right:17px;top:76px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 18px;box-shadow:var(--shadow)}
      .main-nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}.main-nav a{padding:12px 4px}.main-nav a:after{bottom:4px}
      .nav-wrap{gap:12px}.logo{min-width:0;flex:1;font-size:16px}.logo-mark{width:27px;height:27px;border-width:6px}
      .nav-actions{margin-left:auto}.nav-actions .btn{padding:9px 12px;font-size:13px}.article-hero{padding:42px 0 40px}.article-heading h1{font-size:34px}
      .article-main{padding:45px 0 64px}.article-layout{display:block}.article-side{position:static;margin-top:25px}
      .article-content{padding:28px 22px}.summary-box{padding:21px;font-size:15px}.related-section{padding-bottom:60px}.related-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom div:last-child{margin-top:12px;gap:14px;flex-wrap:wrap}
    }
    @media(max-width:520px){
      .nav-actions .btn span{display:none}.article-heading h1{font-size:29px}.crumbs{font-size:13px;overflow:hidden;white-space:nowrap}
      .article-meta{gap:8px}.article-content h2{font-size:24px}.article-content h3{font-size:19px}.article-actions{display:block}.action-group{margin-top:18px}
      .footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}
    }

/* roulang page: category3 */
:root{
      --ink:#17352f;--ink-2:#295149;--mint:#79c9ad;--mint-deep:#43a889;
      --mint-pale:#e8f4ee;--warm:#fbfaf5;--cream:#f4f2e9;--mist:#eef3ef;
      --olive:#718278;--orange:#b8764f;--line:#dce7df;--text:#263b36;
      --muted:#71817b;--white:#fff;--radius:18px;
      --shadow:0 16px 42px rgba(28,65,56,.08);--shadow-sm:0 8px 24px rgba(28,65,56,.06);
      --container:1200px
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--warm);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.75}
    a{color:inherit;text-decoration:none}
    a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(67,168,137,.35);outline-offset:3px}
    button,input,textarea{font:inherit}
    button{border:0;cursor:pointer}
    .container{width:min(var(--container),calc(100% - 48px));margin:auto}
    .site-header{height:78px;background:rgba(251,250,245,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;transition:.25s}
    .site-header.scrolled{box-shadow:0 6px 20px rgba(29,65,56,.08)}
    .nav-wrap{height:78px;display:flex;align-items:center;gap:34px}
    .logo{display:flex;align-items:center;gap:11px;min-width:245px;color:var(--ink);font-weight:800;letter-spacing:-.04em;font-size:19px}
    .logo-mark{width:31px;height:31px;border:7px solid var(--mint-deep);border-left-color:var(--ink);border-radius:10px 17px 10px 17px;transform:rotate(-18deg);display:inline-block}
    .main-nav{display:flex;align-items:center;gap:24px;flex:1}
    .main-nav a{position:relative;color:#526760;font-size:14px;font-weight:600;padding:27px 0;white-space:nowrap}
    .main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;border-radius:5px;background:transparent}
    .main-nav a:hover,.main-nav a.active{color:var(--ink)}
    .main-nav a:hover:after,.main-nav a.active:after{background:var(--mint-deep)}
    .nav-actions{display:flex;align-items:center;gap:15px;white-space:nowrap}
    .text-link{font-size:14px;font-weight:700;color:var(--ink-2)}
    .text-link:hover{color:var(--mint-deep)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;border-radius:11px;font-size:14px;font-weight:750;transition:.22s ease}
    .btn-primary{background:var(--mint-deep);color:#fff;box-shadow:0 8px 18px rgba(67,168,137,.2)}
    .btn-primary:hover{background:#318f73;transform:translateY(-2px);color:#fff}
    .btn-secondary{background:var(--white);color:var(--ink);border:1px solid var(--line)}
    .btn-secondary:hover{border-color:var(--mint-deep);color:var(--mint-deep);transform:translateY(-2px)}
    .menu-btn{display:none;background:none;color:var(--ink);font-size:26px}
    main{overflow:hidden}
    .page-intro{padding:72px 0 58px;background:linear-gradient(135deg,var(--warm),#f0f6f0)}
    .breadcrumb{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:24px}
    .breadcrumb a:hover{color:var(--mint-deep)}
    .breadcrumb span{color:#a0aea8}
    .intro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end}
    .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--mint-deep);font-size:13px;font-weight:800;letter-spacing:.08em}
    .eyebrow:before,.section-kicker:before{content:"";width:25px;height:2px;background:var(--mint-deep)}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(36px,5vw,58px);line-height:1.18;letter-spacing:-.06em;color:var(--ink);margin:17px 0}
    .intro-copy{font-size:18px;color:#61746c;max-width:700px}
    .status-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:25px;box-shadow:var(--shadow-sm)}
    .status-head{display:flex;gap:13px;align-items:center;margin-bottom:17px}
    .status-icon{width:42px;height:42px;border-radius:50%;background:var(--mint-pale);color:var(--mint-deep);display:grid;place-items:center;font-size:21px}
    .status-head strong{display:block;color:var(--ink);font-size:17px}
    .status-head small{color:var(--muted)}
    .status-line{height:7px;background:var(--mint-pale);border-radius:9px;overflow:hidden}
    .status-line i{display:block;width:88%;height:100%;background:var(--mint-deep);border-radius:9px}
    .section{padding:84px 0}
    .section-tint{background:var(--mist)}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}
    .section-head h2{font-size:32px;line-height:1.3;letter-spacing:-.04em;color:var(--ink);margin:8px 0}
    .section-head p{color:var(--muted);max-width:600px;margin-bottom:0}
    .protect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .protect-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:25px;min-height:205px;transition:.22s}
    .protect-card:hover,.article-card:hover,.guide-card:hover{transform:translateY(-3px);border-color:#acd9c4;box-shadow:var(--shadow-sm)}
    .card-icon{width:40px;height:40px;background:var(--mint-pale);border-radius:12px;display:grid;place-items:center;color:var(--mint-deep);font-weight:800;margin-bottom:20px}
    .protect-card h3{font-size:18px;color:var(--ink);margin-bottom:9px}
    .protect-card p{font-size:14px;color:var(--muted);margin-bottom:0}
    .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .compare-card{border-radius:var(--radius);padding:30px;border:1px solid var(--line);background:#fff}
    .compare-card.good{background:var(--ink);color:#fff;border-color:var(--ink)}
    .compare-card h3{font-size:20px;margin-bottom:20px}
    .compare-card.good h3{color:#b9e8d5}
    .compare-list{list-style:none;padding:0;margin:0}
    .compare-list li{padding:13px 0;border-top:1px solid var(--line);display:flex;gap:11px;align-items:flex-start;font-size:14px}
    .compare-card.good li{border-color:rgba(255,255,255,.15);color:#d1e2dc}
    .check{color:var(--mint-deep);font-weight:800}
    .article-area{display:grid;grid-template-columns:1fr 260px;gap:30px}
    .article-list{display:grid;gap:13px}
    .article-card{display:grid;grid-template-columns:110px 1fr auto;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:15px;padding:21px 24px;transition:.22s}
    .article-date{color:var(--mint-deep);font-size:13px;font-weight:800}
    .article-card h3{font-size:17px;line-height:1.45;color:var(--ink);margin:5px 0}
    .article-card p{color:var(--muted);font-size:14px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .badge{display:inline-flex;padding:5px 10px;border-radius:20px;background:var(--mint-pale);color:#377b66;font-size:12px;font-weight:800}
    .article-arrow{color:var(--mint-deep);font-size:23px}
    .side-note{background:var(--cream);border-radius:var(--radius);padding:25px;height:max-content}
    .side-note h3{color:var(--ink);font-size:18px}
    .side-note p{font-size:14px;color:var(--muted)}
    .side-note ul{padding-left:19px;color:var(--muted);font-size:14px}
    .more-wrap{text-align:center;margin-top:25px}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 20px}
    .faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 20px}
    .faq-item summary{cursor:pointer;list-style:none;color:var(--ink);font-weight:700;padding:18px 0;position:relative;padding-right:25px}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{content:"+";position:absolute;right:0;color:var(--mint-deep);font-size:21px}
    .faq-item[open] summary:after{content:"−"}
    .faq-item p{color:var(--muted);font-size:14px;border-top:1px solid var(--line);padding:14px 0 17px;margin:0}
    .feedback{background:var(--ink);color:#fff;border-radius:24px;padding:38px 42px;display:flex;align-items:center;justify-content:space-between;gap:30px}
    .feedback h2{font-size:28px;margin-bottom:9px}
    .feedback p{color:#b8ccc4;margin:0}
    .site-footer{background:var(--ink);color:#d4e2dc;padding:62px 0 22px;margin-top:0}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:42px;padding-bottom:45px}
    .footer-logo{color:#fff;margin-bottom:17px}
    .footer-about{color:#9bb3aa;font-size:14px;max-width:290px}
    .footer-col h3{color:#fff;font-size:15px;margin-bottom:16px}
    .footer-col a{display:block;color:#a9bdb5;font-size:14px;margin:9px 0}
    .footer-col a:hover{color:var(--mint)}
    .footer-qr{display:flex;gap:13px;align-items:center}
    .footer-qr p{font-size:12px;color:#a9bdb5;margin:0}
    .qr{display:block;width:64px;height:64px;border:5px solid #fff;background:repeating-linear-gradient(45deg,#fff 0 4px,#79c9ad 4px 8px);border-radius:7px}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:19px;display:flex;justify-content:space-between;gap:20px;color:#8ea69d;font-size:12px}
    .footer-bottom a{margin-left:20px}
    .footer-bottom a:hover{color:#fff}
    @media(max-width:1024px){
      .nav-wrap{gap:18px}.logo{min-width:205px;font-size:17px}.main-nav{gap:15px}
      .nav-actions .text-link{display:none}.intro-grid{gap:35px}.protect-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:768px){
      .container{width:min(var(--container),calc(100% - 34px))}
      .site-header,.nav-wrap{height:68px}.menu-btn{display:block;margin-left:auto}.main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--warm);padding:13px 22px 22px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
      .main-nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}.main-nav a{padding:12px 0}.main-nav a:after{bottom:5px}
      .nav-actions{display:none}.logo{min-width:0;font-size:16px}.logo-mark{width:27px;height:27px;border-width:6px}
      .page-intro{padding:53px 0 45px}.intro-grid{grid-template-columns:1fr}.intro-copy{font-size:16px}
      .section{padding:60px 0}.section-head{display:block}.section-head h2{font-size:27px}.section-head p{margin-top:9px}
      .protect-grid,.compare,.faq-grid{grid-template-columns:1fr}.article-area{grid-template-columns:1fr}
      .article-card{grid-template-columns:1fr auto;gap:5px 15px}.article-date{grid-column:1/-1}.article-card p{grid-column:1/-1}
      .feedback{display:block;padding:30px 25px}.feedback .btn{margin-top:22px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-bottom{display:block}.footer-bottom div+div{margin-top:12px}.footer-bottom a{margin:0 18px 0 0}
    }
    @media(max-width:520px){
      h1{font-size:38px}.status-panel{padding:20px}.article-card{padding:18px}.footer-grid{grid-template-columns:1fr}
    }

/* roulang page: category4 */
:root{
      --ink:#17352f;--ink-2:#295149;--mint:#79c9ad;--mint-deep:#43a889;--mint-pale:#e8f4ee;
      --warm:#fbfaf5;--cream:#f4f2e9;--mist:#eef3ef;--olive:#718278;--orange:#b8764f;
      --line:#dce7df;--text:#263b36;--muted:#71817b;--white:#fff;--radius:18px;
      --shadow:0 16px 42px rgba(28,65,56,.08);--shadow-sm:0 8px 24px rgba(28,65,56,.06);--container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;color:var(--text);background:var(--warm);font-size:16px;line-height:1.75}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    button{border:0;cursor:pointer}
    a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(67,168,137,.35);outline-offset:3px}
    .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
    .site-header{height:78px;background:rgba(251,250,245,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;transition:.25s}
    .site-header.scrolled{height:70px;box-shadow:0 6px 20px rgba(29,65,56,.08)}
    .nav-wrap{height:78px;display:flex;align-items:center;gap:34px;transition:.25s}
    .scrolled .nav-wrap{height:70px}
    .logo{display:flex;align-items:center;gap:11px;min-width:245px;color:var(--ink);font-weight:800;letter-spacing:-.04em;font-size:19px}
    .logo-mark{display:inline-block;width:31px;height:31px;border:7px solid var(--mint-deep);border-left-color:var(--ink);border-radius:10px 17px 10px 17px;transform:rotate(-18deg);flex:none}
    .main-nav{display:flex;align-items:center;gap:24px;flex:1}
    .main-nav a{position:relative;color:#526760;font-size:14px;font-weight:600;padding:27px 0;white-space:nowrap}
    .main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;border-radius:5px;background:transparent;transition:.2s}
    .main-nav a:hover,.main-nav a.active{color:var(--ink)}
    .main-nav a:hover:after,.main-nav a.active:after{background:var(--mint-deep)}
    .nav-actions{display:flex;align-items:center;gap:15px;white-space:nowrap}
    .text-link{font-size:14px;font-weight:700;color:var(--ink-2)}
    .text-link:hover{color:var(--mint-deep)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;border-radius:11px;font-size:14px;font-weight:750;transition:.22s ease}
    .btn-primary{background:var(--mint-deep);color:#fff;box-shadow:0 8px 18px rgba(67,168,137,.2)}
    .btn-primary:hover{background:#318f73;transform:translateY(-2px);box-shadow:0 11px 22px rgba(67,168,137,.28)}
    .btn-secondary{background:var(--white);color:var(--ink);border:1px solid var(--line)}
    .btn-secondary:hover{border-color:var(--mint-deep);color:var(--mint-deep);transform:translateY(-2px)}
    .menu-btn{display:none;background:none;color:var(--ink);font-size:26px;padding:8px}
    main{overflow:hidden}
    .page-intro{padding:34px 0 54px;background:linear-gradient(145deg,#fbfaf5 22%,#edf5ef 100%)}
    .breadcrumb{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:34px}
    .breadcrumb span{color:#a4b2ac}
    .intro-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:54px;align-items:end}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--mint-deep);font-size:13px;font-weight:800;letter-spacing:.08em}
    .eyebrow:before{content:"";width:25px;height:2px;background:var(--mint-deep)}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(35px,4vw,49px);line-height:1.18;letter-spacing:-.055em;color:var(--ink);margin:16px 0 18px}
    .intro-copy{font-size:17px;line-height:1.9;color:#60736b;max-width:680px}
    .status-panel{background:var(--ink);color:#fff;border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow)}
    .status-panel small{color:#a9d7c5;font-weight:800;letter-spacing:.06em}
    .status-panel strong{display:block;font-size:22px;line-height:1.35;margin:8px 0 12px}
    .status-line{display:flex;gap:12px;padding-top:13px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:#c3d5ce}
    .section{padding:82px 0}
    .section-tint{background:var(--mist)}
    .section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}
    .section-head h2{font-size:31px;line-height:1.3;letter-spacing:-.04em;color:var(--ink);margin:8px 0 0}
    .section-head p{max-width:540px;color:var(--muted);margin:0}
    .topic-index{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
    .topic-item{background:var(--white);border:1px solid var(--line);border-radius:15px;padding:21px;transition:.22s;min-height:145px}
    .topic-item:hover{border-color:var(--mint);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
    .topic-num{display:block;color:var(--mint-deep);font-size:13px;font-weight:800;letter-spacing:.08em;margin-bottom:24px}
    .topic-item strong{display:block;color:var(--ink);font-size:18px;margin-bottom:4px}
    .topic-item small{color:var(--muted);font-size:13px}
    .guide-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
    .guide-flow:before{content:"";height:1px;background:var(--line);position:absolute;left:12%;right:12%;top:40px}
    .flow-item{position:relative;padding:0 20px;z-index:1}
    .flow-no{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:var(--warm);border:1px solid var(--mint);color:var(--mint-deep);font-size:20px;font-weight:850;margin-bottom:22px}
    .flow-item h3{font-size:18px;color:var(--ink);margin-bottom:8px}
    .flow-item p{font-size:14px;color:var(--muted);margin:0}
    .guide-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:grid;grid-template-columns:100px 1fr;gap:25px;align-items:center;box-shadow:var(--shadow-sm)}
    .guide-card+.guide-card{margin-top:17px}
    .guide-icon{height:92px;width:92px;border-radius:16px;background:var(--mint-pale);display:grid;place-items:center;color:var(--mint-deep);font-size:32px;font-weight:800}
    .guide-card h3{font-size:20px;color:var(--ink);margin-bottom:7px}
    .guide-card p{color:var(--muted);font-size:14px;margin-bottom:11px}
    .article-link{display:inline-flex;align-items:center;gap:6px;color:var(--mint-deep);font-size:14px;font-weight:800}
    .article-link:hover{color:var(--ink)}
    .article-link b{transition:.2s}
    .article-link:hover b{transform:translateX(4px)}
    .list-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:35px;align-items:start}
    .guide-list{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
    .guide-list-head{padding:20px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
    .guide-list-head strong{color:var(--ink);font-size:18px}
    .sort-note{font-size:13px;color:var(--muted)}
    .post-item{padding:24px 26px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:112px 1fr auto;gap:20px;align-items:start;transition:.2s}
    .post-item:last-child{border-bottom:0}
    .post-item:hover{background:#fcfdfb}
    .post-date{color:var(--olive);font-size:13px;font-weight:750;padding-top:2px}
    .post-item h3{font-size:18px;line-height:1.45;color:var(--ink);margin:0 0 7px}
    .post-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .post-arrow{color:var(--mint-deep);font-size:21px;padding-top:6px}
    .badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;background:var(--mint-pale);color:#377b66;font-size:12px;font-weight:800;line-height:1.5;margin-bottom:8px}
    .badge.guide{background:#e9efeb;color:#567269}
    .list-aside{background:var(--cream);border-radius:var(--radius);padding:27px}
    .list-aside h3{font-size:20px;line-height:1.4;color:var(--ink);margin-bottom:12px}
    .list-aside p{font-size:14px;color:var(--muted);margin-bottom:19px}
    .check-list{list-style:none;padding:0;margin:0}
    .check-list li{position:relative;padding:11px 0 11px 28px;border-top:1px solid rgba(113,130,120,.2);font-size:14px;color:#50635c}
    .check-list li:before{content:"✓";position:absolute;left:0;color:var(--mint-deep);font-weight:900}
    .more-wrap{text-align:center;margin-top:28px}
    .trouble-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .trouble-card{background:var(--white);border:1px solid var(--line);padding:25px;border-radius:var(--radius)}
    .trouble-card h3{font-size:18px;color:var(--ink);margin-bottom:12px}
    .trouble-card dl{margin:0}
    .trouble-card dl div{padding:12px 0;border-top:1px solid var(--line)}
    .trouble-card dt{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:3px}
    .trouble-card dd{font-size:13px;color:var(--muted);margin:0}
    .faq-list{max-width:900px;margin:0 auto}
    .faq-item{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
    .faq-question{width:100%;padding:19px 22px;background:none;display:flex;justify-content:space-between;align-items:center;text-align:left;color:var(--ink);font-weight:800;gap:18px}
    .faq-question i{font-style:normal;color:var(--mint-deep);font-size:21px;transition:.2s}
    .faq-answer{display:none;padding:0 22px 20px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
    .faq-item.open .faq-answer{display:block;padding-top:17px}
    .faq-item.open .faq-question i{transform:rotate(45deg)}
    .support-box{background:var(--ink);border-radius:var(--radius);padding:38px 42px;color:#fff;display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px}
    .support-box h2{font-size:29px;letter-spacing:-.04em;margin-bottom:10px}
    .support-box p{color:#b7cec4;max-width:620px;margin:0}
    .support-box .btn-secondary{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
    .support-box .btn-secondary:hover{border-color:var(--mint);color:#b5ead4}
    .site-footer{background:var(--ink);color:#d2e0da;padding:66px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr .9fr;gap:46px;padding-bottom:46px}
    .footer-logo{color:#fff;font-size:18px;min-width:auto}
    .footer-about{font-size:14px;line-height:1.8;color:#aec2ba;max-width:315px;margin:17px 0 0}
    .footer-col h3{color:#fff;font-size:14px;margin:4px 0 14px}
    .footer-col>a{display:block;font-size:14px;color:#b8cbc3;margin:8px 0}
    .footer-col>a:hover{color:#90dfbf}
    .footer-qr{display:flex;align-items:center;gap:13px}
    .qr{display:block;width:62px;height:62px;border:5px solid #d7ede3;background:repeating-linear-gradient(90deg,#d7ede3 0 7px,transparent 7px 11px),repeating-linear-gradient(0deg,#d7ede3 0 7px,transparent 7px 11px);opacity:.9}
    .footer-qr p{font-size:13px;line-height:1.65;margin:0;color:#b8cbc3}
    .footer-bottom{padding-top:21px;border-top:1px solid rgba(212,230,220,.18);display:flex;justify-content:space-between;gap:20px;color:#9db4aa;font-size:12px}
    .footer-bottom a{margin-left:17px}
    .footer-bottom a:hover{color:#fff}
    @media(max-width:1024px){
      .nav-wrap{gap:18px}.logo{min-width:210px;font-size:16px}.main-nav{gap:15px}.main-nav a{font-size:13px}
      .nav-actions .text-link{display:none}.intro-grid{gap:28px}.topic-index{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1.3fr 1fr 1fr}
    }
    @media(max-width:768px){
      .container{width:min(var(--container),calc(100% - 32px))}.site-header,.nav-wrap{height:66px}.logo{min-width:0;font-size:15px;gap:8px}.logo-mark{width:27px;height:27px;border-width:6px}
      .menu-btn{display:block;margin-left:auto}.main-nav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--warm);border-bottom:1px solid var(--line);padding:12px 16px 18px;box-shadow:0 15px 24px rgba(28,65,56,.08)}
      .main-nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}.main-nav a{padding:12px 8px}.main-nav a:after{bottom:6px;left:8px;right:auto;width:28px}
      .nav-actions{gap:0}.nav-actions .btn{padding:9px 12px;font-size:13px}.nav-actions .btn span{display:none}
      .page-intro{padding:26px 0 42px}.breadcrumb{margin-bottom:25px}.intro-grid,.list-layout,.support-box{grid-template-columns:1fr}.status-panel{padding:22px}.section{padding:58px 0}.section-head{display:block;margin-bottom:25px}.section-head p{margin-top:11px}
      .guide-flow{grid-template-columns:1fr 1fr;gap:25px}.guide-flow:before{display:none}.flow-item{padding:0}.flow-no{width:62px;height:62px;margin-bottom:14px}
      .list-aside{display:none}.post-item{grid-template-columns:1fr auto;gap:10px}.post-date{grid-column:1/-1}.post-item h3{font-size:17px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:31px}.footer-bottom{display:block}.footer-bottom div+div{margin-top:9px}.footer-bottom a:first-child{margin-left:0}
    }
    @media(max-width:520px){
      body{font-size:15px}.nav-actions .btn{font-size:0;width:39px;height:39px;padding:0;border-radius:10px}.nav-actions .btn:before{content:"↓";font-size:19px}.page-intro{padding-bottom:35px}
      h1{font-size:34px}.section-head h2{font-size:26px}.topic-index,.trouble-grid,.guide-flow{grid-template-columns:1fr}.topic-item{min-height:auto}.guide-card{grid-template-columns:70px 1fr;gap:16px;padding:20px}.guide-icon{height:70px;width:70px;font-size:25px}
      .post-item{padding:20px}.post-arrow{display:none}.support-box{padding:29px 24px}.support-box h2{font-size:25px}.footer-grid{grid-template-columns:1fr}.footer-bottom{font-size:11px}.footer-bottom a{margin-left:10px}
    }

/* roulang page: category2 */
:root{
      --ink:#17352f;--ink-2:#295149;--mint:#79c9ad;--mint-deep:#43a889;
      --mint-pale:#e8f4ee;--warm:#fbfaf5;--cream:#f4f2e9;--mist:#eef3ef;
      --olive:#718278;--orange:#b8764f;--line:#dce7df;--text:#263b36;
      --muted:#71817b;--white:#fff;--radius:18px;
      --shadow:0 16px 42px rgba(28,65,56,.08);--shadow-sm:0 8px 24px rgba(28,65,56,.06);
      --container:1200px
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--text);background:var(--warm);font-size:16px;line-height:1.75}
    a{color:inherit;text-decoration:none}
    a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(67,168,137,.35);outline-offset:3px}
    button,input,textarea{font:inherit}
    button{border:0;cursor:pointer}
    .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
    .site-header{height:78px;background:rgba(251,250,245,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;transition:.25s}
    .site-header.scrolled{box-shadow:0 6px 20px rgba(29,65,56,.08)}
    .nav-wrap{height:78px;display:flex;align-items:center;gap:34px}
    .logo{display:flex;align-items:center;gap:11px;min-width:245px;color:var(--ink);font-weight:800;letter-spacing:-.04em;font-size:19px}
    .logo-mark{width:31px;height:31px;border:7px solid var(--mint-deep);border-left-color:var(--ink);border-radius:10px 17px 10px 17px;transform:rotate(-18deg);display:inline-block}
    .main-nav{display:flex;align-items:center;gap:24px;flex:1}
    .main-nav a{position:relative;color:#526760;font-size:14px;font-weight:600;padding:27px 0;white-space:nowrap}
    .main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;border-radius:5px;background:transparent}
    .main-nav a:hover,.main-nav a.active{color:var(--ink)}
    .main-nav a:hover:after,.main-nav a.active:after{background:var(--mint-deep)}
    .nav-actions{display:flex;align-items:center;gap:15px;white-space:nowrap}
    .text-link{font-size:14px;font-weight:700;color:var(--ink-2)}
    .text-link:hover{color:var(--mint-deep)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;border-radius:11px;font-size:14px;font-weight:750;transition:.22s ease}
    .btn-primary{background:var(--mint-deep);color:#fff;box-shadow:0 8px 18px rgba(67,168,137,.2)}
    .btn-primary:hover{background:#318f73;color:#fff;transform:translateY(-2px);box-shadow:0 11px 22px rgba(67,168,137,.28)}
    .btn-secondary{background:var(--white);color:var(--ink);border:1px solid var(--line)}
    .btn-secondary:hover{border-color:var(--mint-deep);color:var(--mint-deep);transform:translateY(-2px)}
    .menu-btn{display:none;background:none;color:var(--ink);font-size:26px}
    .page-intro{padding:62px 0 48px;background:linear-gradient(135deg,#fbfaf5 0%,#f0f6f0 100%);border-bottom:1px solid var(--line)}
    .breadcrumb{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:27px}
    .breadcrumb a:hover{color:var(--mint-deep)}
    .breadcrumb span{color:#a4b3ac}
    .intro-grid{display:grid;grid-template-columns:1fr 330px;gap:60px;align-items:end}
    .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--mint-deep);font-size:13px;font-weight:800;letter-spacing:.08em}
    .eyebrow:before{content:"";width:25px;height:2px;background:var(--mint-deep)}
    h1,h2,h3,p{margin-top:0}
    .page-intro h1{font-size:clamp(34px,4vw,52px);line-height:1.2;letter-spacing:-.06em;color:var(--ink);margin:15px 0 16px}
    .intro-copy{font-size:17px;color:#61746c;max-width:700px;margin:0}
    .status-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .summary-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
    .summary-item small{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
    .summary-item strong{display:block;color:var(--ink);font-size:18px}
    .section{padding:78px 0}
    .section-tint{background:var(--mist)}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}
    .section-head h2{font-size:30px;line-height:1.25;color:var(--ink);letter-spacing:-.04em;margin:8px 0 0}
    .section-head p{color:var(--muted);max-width:590px;margin:0}
    .download-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:stretch}
    .info-panel{background:var(--ink);color:#fff;border-radius:var(--radius);padding:35px;display:flex;flex-direction:column;justify-content:space-between;min-height:355px}
    .info-panel h2{font-size:29px;line-height:1.35;margin:16px 0}
    .info-panel p{color:#bdd0c8;margin-bottom:0}
    .check-list{list-style:none;padding:0;margin:28px 0 0}
    .check-list li{display:flex;gap:10px;color:#dcebe4;margin:12px 0;font-size:14px}
    .check-list li:before{content:"✓";color:var(--mint);font-weight:800}
    .download-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
    .badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:20px;background:var(--mint-pale);color:#377b66;font-size:12px;font-weight:800}
    .badge.orange{background:#f8e9de;color:#9a5b3e}
    .version-line{display:flex;justify-content:space-between;align-items:start;gap:20px;margin:18px 0 22px}
    .version-line h3{font-size:25px;color:var(--ink);margin:0 0 5px}
    .version-line p{font-size:14px;color:var(--muted);margin:0}
    .download-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin-bottom:22px}
    .download-meta span{display:block;color:var(--muted);font-size:12px}.download-meta strong{display:block;color:var(--ink);font-size:14px;margin-top:3px}
    .download-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}
    .qr{width:76px;height:76px;border:7px solid #fff;background:repeating-linear-gradient(45deg,var(--ink) 0 4px,#fff 4px 8px);display:block}
    .download-bottom .qr{border-color:var(--mint-pale);width:64px;height:64px}
    .download-note{font-size:12px;color:var(--muted);line-height:1.6;max-width:260px}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
    .step{position:relative;padding:29px 25px;border-right:1px solid var(--line)}
    .step:last-child{border:0}.step-number{color:var(--mint-deep);font-size:13px;font-weight:800;letter-spacing:.08em}
    .step h3{font-size:18px;color:var(--ink);margin:12px 0 7px}.step p{font-size:14px;color:var(--muted);margin:0}
    .history-wrap{max-width:900px;margin:auto}
    .history-list{border-left:2px solid var(--line);padding-left:28px}
    .history-item{position:relative;padding:0 0 28px;margin-bottom:28px;border-bottom:1px solid var(--line)}
    .history-item:last-child{border:0;margin-bottom:0}.history-item:before{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:var(--mint-deep);left:-35px;top:7px;box-shadow:0 0 0 5px var(--mint-pale)}
    .history-top{display:flex;align-items:center;gap:12px;margin-bottom:9px}.history-top strong{color:var(--ink);font-size:18px}.history-item time{color:var(--muted);font-size:13px}
    .history-item p{color:var(--muted);font-size:14px;margin:0 0 10px}.history-item ul{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}.history-item li{font-size:13px;color:var(--ink-2);background:var(--cream);padding:4px 10px;border-radius:8px}
    .article-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .article-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px;transition:.22s ease}
    .article-card:hover{transform:translateY(-3px);border-color:#a9d8c5;box-shadow:var(--shadow-sm)}
    .article-card h3{font-size:18px;line-height:1.45;color:var(--ink);margin:13px 0 7px}.article-card p{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px}.article-card time{font-size:12px;color:var(--olive)}
    .empty-state{grid-column:1/-1;background:#fff;border:1px dashed var(--line);border-radius:15px;padding:35px;text-align:center;color:var(--muted)}
    .faq-list{max-width:850px;margin:auto}.faq-item{background:#fff;border-bottom:1px solid var(--line)}.faq-item:first-child{border-top:1px solid var(--line)}
    .faq-item summary{list-style:none;cursor:pointer;padding:21px 5px;font-weight:750;color:var(--ink);display:flex;justify-content:space-between;gap:20px}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";font-size:22px;color:var(--mint-deep);line-height:1}.faq-item[open] summary:after{content:"−"}.faq-answer{padding:0 35px 21px 5px;color:var(--muted);font-size:14px}
    .security-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.security-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:23px}.security-card h3{font-size:17px;color:var(--ink);margin:0 0 7px}.security-card p{font-size:14px;color:var(--muted);margin:0}.security-icon{color:var(--mint-deep);font-size:21px;margin-bottom:10px}
    .support-band{background:var(--ink);color:#fff;border-radius:var(--radius);padding:38px 42px;display:grid;grid-template-columns:.9fr 1.1fr;gap:45px;align-items:center}.support-band h2{font-size:29px;margin:0 0 10px}.support-band p{color:#bcd0c7;margin:0}.support-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.support-form label{font-size:12px;color:#c5d8cf}.support-form input,.support-form textarea{display:block;width:100%;margin-top:5px;background:#285048;border:1px solid #42685e;border-radius:9px;color:#fff;padding:10px 12px}.support-form textarea{height:76px;resize:vertical}.support-form .full{grid-column:1/-1}.support-form .btn{justify-self:start}
    .site-footer{background:var(--ink);color:#fff;padding:58px 0 22px;margin-top:0}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}.footer-logo{color:#fff;margin-bottom:16px}.footer-about{color:#a9c0b6;font-size:13px;max-width:260px}.footer-col h3{font-size:14px;margin:5px 0 14px;color:#fff}.footer-col>a{display:block;color:#a9c0b6;font-size:13px;margin:9px 0}.footer-col>a:hover,.footer-bottom a:hover{color:var(--mint)}.footer-qr{display:flex;gap:12px;align-items:center}.footer-qr p{font-size:12px;color:#a9c0b6;margin:0}.footer-bottom{border-top:1px solid #31564c;margin-top:42px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#91aaa0;font-size:12px}.footer-bottom a{margin-left:18px}
    @media(max-width:1024px){.nav-wrap{gap:18px}.logo{min-width:205px;font-size:16px}.main-nav{gap:15px}.nav-actions .text-link{display:none}.intro-grid,.download-layout{gap:30px}}
    @media(max-width:768px){.container{width:min(var(--container),calc(100% - 32px))}.site-header,.nav-wrap{height:68px}.nav-wrap{justify-content:space-between}.main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--warm);border-bottom:1px solid var(--line);padding:12px 20px;flex-direction:column;align-items:stretch;gap:0;box-shadow:var(--shadow-sm)}.main-nav.open{display:flex}.main-nav a{padding:12px 0}.main-nav a:after{bottom:5px}.menu-btn{display:block}.nav-actions{display:none}.logo{min-width:0;font-size:15px}.logo-mark{width:27px;height:27px;border-width:6px}.page-intro{padding:42px 0 36px}.intro-grid,.download-layout,.support-band{grid-template-columns:1fr}.status-summary{max-width:520px}.section{padding:58px 0}.steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px solid var(--line)}.article-list,.security-grid{grid-template-columns:1fr}.support-band{padding:30px 24px}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{display:block}.footer-bottom>div:last-child{margin-top:12px}.footer-bottom a{margin-left:0;margin-right:15px}}
    @media(max-width:520px){.section-head{display:block}.section-head p{margin-top:12px}.status-summary{grid-template-columns:1fr}.download-card{padding:22px}.download-meta{grid-template-columns:1fr 1fr}.download-bottom{align-items:flex-start;flex-direction:column}.steps{grid-template-columns:1fr}.step{border-right:0!important;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}.history-list{padding-left:22px}.history-item:before{left:-29px}.support-form{grid-template-columns:1fr}.support-form .full{grid-column:auto}.footer-grid{grid-template-columns:1fr}.footer-bottom a{display:inline-block}}