/* roulang page: index */
:root {
      --ink: #171817;
      --ink-soft: #222422;
      --paper: #f4f1ea;
      --paper-deep: #e9e4da;
      --cream: #fffdf8;
      --text: #252622;
      --muted: #78766e;
      --line: #d9d3c7;
      --line-dark: rgba(255,255,255,.14);
      --coral: #ee765d;
      --coral-dark: #c95745;
      --lime: #cbdc85;
      --mist: #c4d4d0;
      --violet: #c8bfd7;
      --radius: 16px;
      --shadow: 0 18px 46px rgba(22,24,22,.08);
      --ease: 220ms ease;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background: var(--paper);
      font-family: 'Noto Sans SC','Microsoft YaHei','PingFang SC',sans-serif;
      line-height: 1.8;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, select { font: inherit; }
    button { cursor: pointer; }
    :focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
    .container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
    .site-header {
      position: sticky; top: 0; z-index: 20;
      background: rgba(23,24,23,.96);
      border-bottom: 1px solid var(--line-dark);
      backdrop-filter: blur(12px);
    }
    .nav-shell { min-height: 76px; display: flex; align-items: center; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; color: #fffdf8; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
    .brand-mark {
      width: 34px; height: 34px; border: 1px solid var(--coral);
      display: grid; place-items: center; color: var(--coral); border-radius: 9px;
      position: relative;
    }
    .brand-mark::after { content: ''; width: 12px; height: 2px; background: var(--lime); box-shadow: 0 5px 0 var(--lime); }
    .brand small { display: block; color: #aaa9a1; font-size: 10px; font-weight: 500; letter-spacing: .08em; line-height: 1.2; }
    .nav-search { flex: 1; max-width: 470px; margin: 0 auto; position: relative; }
    .nav-search input {
      width: 100%; height: 44px; padding: 0 102px 0 42px; color: #fff;
      background: #2a2c29; border: 1px solid #454741; border-radius: 12px;
      transition: var(--ease);
    }
    .nav-search input::placeholder { color: #9d9d95; }
    .nav-search input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(238,118,93,.18); outline: none; }
    .search-icon { position: absolute; left: 15px; top: 12px; width: 18px; height: 18px; border: 2px solid #aeb1a7; border-radius: 50%; }
    .search-icon::after { content: ''; position: absolute; width: 7px; height: 2px; background: #aeb1a7; transform: rotate(45deg); right: -5px; bottom: -2px; }
    .search-submit {
      position: absolute; right: 5px; top: 5px; height: 34px; padding: 0 14px;
      border: 0; border-radius: 8px; color: var(--ink); background: var(--coral); font-weight: 700;
      transition: var(--ease);
    }
    .search-submit:hover { background: #ff9177; transform: translateY(-1px); }
    .nav-links { display: flex; gap: 18px; align-items: center; color: #b9bab1; font-size: 14px; }
    .nav-links a { padding: 7px 0; border-bottom: 2px solid transparent; transition: var(--ease); }
    .nav-links a:hover, .nav-links a.active { color: #fff; border-color: var(--coral); }
    .mobile-menu { display: none; color: #fff; background: transparent; border: 1px solid #53554e; border-radius: 8px; padding: 7px 10px; }
    .hero {
      color: #fffdf8; background: var(--ink); position: relative; overflow: hidden;
      padding: 76px 0 62px; border-bottom: 1px solid #383a35;
    }
    .hero::before {
      content: ''; position: absolute; inset: 0; opacity: .22;
      background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 42px 42px; mask-image: linear-gradient(90deg, #000, transparent 88%);
    }
    .hero-content { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 62px; align-items: center; }
    .eyebrow, .section-kicker { color: var(--coral); font-size: 12px; letter-spacing: .14em; font-weight: 800; text-transform: uppercase; }
    .hero h1 { margin: 14px 0 20px; max-width: 650px; font-size: clamp(36px, 5vw, 66px); line-height: 1.15; letter-spacing: -.07em; }
    .hero-lead { max-width: 610px; color: #c7c8bf; font-size: 17px; line-height: 2; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
    .btn { min-height: 46px; padding: 10px 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; border: 1px solid transparent; transition: var(--ease); }
    .btn-primary { color: var(--ink); background: var(--coral); }
    .btn-primary:hover { background: #ff947d; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(238,118,93,.2); }
    .btn-outline { color: #fffdf8; border-color: #65675f; background: transparent; }
    .btn-outline:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-2px); }
    .matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .matrix-item { min-height: 124px; padding: 18px; border: 1px solid #4a4c45; background: #20221f; border-radius: 12px; position: relative; }
    .matrix-item:nth-child(2) { transform: translateY(18px); background: #282a26; }
    .matrix-item:nth-child(3) { background: #292a26; }
    .matrix-item:nth-child(4) { transform: translateY(-10px); }
    .matrix-icon { color: var(--lime); font-size: 24px; margin-bottom: 12px; }
    .matrix-item strong { display: block; font-size: 17px; }
    .matrix-item span { color: #aeb0a5; font-size: 12px; }
    .section { padding: 78px 0; }
    .section-head { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 28px; }
    .section-head h2 { margin: 8px 0 0; font-size: clamp(25px,3vw,38px); line-height: 1.25; letter-spacing: -.05em; }
    .section-head p { max-width: 590px; color: var(--muted); margin: 0; }
    .status-board { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); border: 1px solid var(--line); background: var(--cream); box-shadow: var(--shadow); }
    .status-cell { padding: 22px 24px; min-height: 118px; border-right: 1px solid var(--line); position: relative; }
    .status-cell:last-child { border-right: 0; }
    .status-cell:first-child { background: var(--ink); color: #fff; }
    .status-cell small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 12px; }
    .status-cell:first-child small { color: #aaa; }
    .status-cell strong { font-size: 23px; letter-spacing: -.04em; }
    .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); margin-right: 7px; }
    .status-line { height: 3px; background: var(--paper-deep); margin-top: 16px; overflow: hidden; }
    .status-line i { display: block; height: 100%; width: 72%; background: var(--coral); }
    .matrix-grid { display: grid; grid-template-columns: 1.35fr .85fr .85fr; grid-template-rows: auto auto; gap: 14px; }
    .index-card { padding: 26px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); min-height: 176px; transition: var(--ease); position: relative; overflow: hidden; }
    .index-card.featured { grid-row: span 2; background: var(--ink); color: #fff; min-height: 366px; }
    .index-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--coral); }
    .index-card .number { font-size: 12px; color: var(--coral); font-weight: 800; letter-spacing: .12em; }
    .index-card h3 { margin: 24px 0 8px; font-size: 22px; letter-spacing: -.04em; }
    .index-card p { color: var(--muted); font-size: 14px; margin: 0 0 22px; line-height: 1.8; }
    .featured p { color: #babcb3; }
    .arrow-link { color: var(--coral-dark); font-size: 14px; font-weight: 800; }
    .featured .arrow-link { color: var(--lime); }
    .tag-row { display: flex; flex-wrap: wrap; gap: 7px; }
    .tag { display: inline-flex; align-items: center; min-height: 27px; padding: 2px 9px; border-radius: 99px; background: var(--paper-deep); color: #5f5e56; font-size: 12px; }
    .featured .tag { background: #363933; color: #d8dbcb; }
    .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .compare-card { border: 1px solid var(--line); background: var(--cream); border-radius: var(--radius); padding: 28px; }
    .compare-card.dark { background: #292b27; color: #fff; border-color: #292b27; }
    .compare-top { display: flex; justify-content: space-between; gap: 14px; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
    .dark .compare-top { border-color: #4a4d46; }
    .compare-top h3 { margin: 0; font-size: 21px; }
    .compare-list { list-style: none; padding: 0; margin: 20px 0 25px; }
    .compare-list li { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
    .dark .compare-list li { border-color: #4a4d46; color: #d4d5cd; }
    .compare-list b { color: var(--coral-dark); font-weight: 700; }
    .dark .compare-list b { color: var(--lime); }
    .news-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 30px; }
    .news-list { border-top: 1px solid var(--line); }
    .news-item { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 19px 4px; border-bottom: 1px solid var(--line); transition: var(--ease); }
    .news-item:hover { padding-left: 10px; color: var(--coral-dark); }
    .news-item h3 { margin: 0; font-size: 16px; font-weight: 700; }
    .news-item p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
    .news-date { color: var(--muted); white-space: nowrap; font-size: 12px; }
    .side-note { padding: 28px; border-radius: var(--radius); background: var(--violet); min-height: 240px; }
    .side-note h3 { margin: 0 0 12px; font-size: 24px; line-height: 1.35; }
    .side-note p { color: #55515f; font-size: 14px; }
    .faq-wrap { max-width: 850px; margin: 0 auto; }
    .faq-item { border-top: 1px solid var(--line); }
    .faq-item:last-child { border-bottom: 1px solid var(--line); }
    .faq-question { width: 100%; min-height: 66px; padding: 15px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: transparent; border: 0; text-align: left; font-weight: 700; color: var(--text); }
    .faq-plus { font-size: 25px; color: var(--coral-dark); transition: var(--ease); }
    .faq-answer { display: none; padding: 0 42px 20px 0; color: var(--muted); font-size: 14px; }
    .faq-item.open .faq-answer { display: block; }
    .faq-item.open .faq-plus { transform: rotate(45deg); }
    .subscribe { background: var(--ink); color: #fff; padding: 50px; border-radius: 20px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
    .subscribe h2 { margin: 8px 0 12px; font-size: 31px; line-height: 1.35; letter-spacing: -.04em; }
    .subscribe p { color: #b9bbb2; font-size: 14px; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
    .form-field.full { grid-column: 1 / -1; }
    .form-field label { display: block; font-size: 12px; color: #b9bbb2; margin-bottom: 6px; }
    .form-field input, .form-field select { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #50534b; border-radius: 9px; background: #292b27; color: #fff; }
    .form-field input::placeholder { color: #898b82; }
    .form-field input:focus, .form-field select:focus { border-color: var(--coral); outline: none; }
    .form-note { grid-column: 1 / -1; color: #8f9287; font-size: 12px; margin: 0; }
    .footer { background: #111210; color: #aaa; padding: 46px 0 24px; border-top: 1px solid #363832; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 36px; }
    .footer .brand { margin-bottom: 14px; }
    .footer p { color: #85877f; font-size: 13px; max-width: 300px; }
    .footer h3 { color: #fff; font-size: 14px; margin: 0 0 14px; }
    .footer a { display: block; color: #8d9087; font-size: 13px; margin: 8px 0; transition: var(--ease); }
    .footer a:hover { color: var(--coral); }
    .copyright { border-top: 1px solid #30322d; padding-top: 18px; color: #73766e; font-size: 12px; display: flex; justify-content: space-between; gap: 20px; }
    .toast { position: fixed; right: 22px; bottom: 22px; background: var(--lime); color: var(--ink); padding: 13px 18px; border-radius: 9px; font-size: 13px; font-weight: 700; opacity: 0; transform: translateY(12px); pointer-events: none; transition: var(--ease); z-index: 30; }
    .toast.show { opacity: 1; transform: translateY(0); }
    @media (max-width: 1024px) {
      .nav-shell { gap: 14px; }
      .nav-links { gap: 12px; }
      .hero-content { gap: 35px; }
      .status-board { grid-template-columns: repeat(2, 1fr); }
      .status-cell:nth-child(2) { border-right: 0; }
      .status-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 28px, 600px); }
      .nav-shell { flex-wrap: wrap; padding: 13px 0; }
      .brand { flex: 1; }
      .brand span { font-size: 14px; }
      .mobile-menu { display: block; }
      .nav-search { order: 3; flex-basis: 100%; max-width: none; }
      .nav-links { display: none; width: 100%; order: 4; padding: 10px 0; }
      .nav-links.show { display: flex; flex-direction: column; align-items: stretch; }
      .nav-links a { padding: 9px 0; }
      .hero { padding: 55px 0 48px; }
      .hero-content, .news-layout, .subscribe { grid-template-columns: 1fr; }
      .hero h1 { font-size: 41px; }
      .matrix { margin-top: 10px; }
      .section { padding: 58px 0; }
      .section-head { display: block; }
      .section-head p { margin-top: 13px; }
      .matrix-grid { grid-template-columns: 1fr 1fr; }
      .index-card.featured { grid-row: auto; grid-column: 1 / -1; min-height: 250px; }
      .subscribe { padding: 32px 24px; gap: 25px; }
    }
    @media (max-width: 520px) {
      .nav-search input { padding-right: 82px; }
      .search-submit { padding: 0 10px; font-size: 12px; }
      .hero h1 { font-size: 34px; }
      .hero-lead { font-size: 15px; }
      .hero-actions .btn { width: 100%; }
      .status-board, .matrix-grid, .comparison, .form-grid { grid-template-columns: 1fr; }
      .status-cell { border-right: 0; border-bottom: 1px solid var(--line); }
      .status-cell:last-child { border-bottom: 0; }
      .status-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
      .index-card.featured { grid-column: auto; }
      .news-item { align-items: start; flex-direction: column; gap: 4px; }
      .footer-grid { grid-template-columns: 1fr; gap: 22px; }
      .copyright { display: block; line-height: 2; }
      .copyright span { display: block; }
    }

/* roulang page: category2 */
:root{
      --ink:#171817;--ink-soft:#222422;--paper:#f4f1ea;--paper-deep:#e9e4da;
      --cream:#fffdf8;--text:#252622;--muted:#78766e;--line:#d9d3c7;
      --line-dark:rgba(255,255,255,.14);--coral:#ee765d;--coral-dark:#c95745;
      --lime:#cbdc85;--mist:#c4d4d0;--violet:#c8bfd7;--radius:16px;
      --shadow:0 18px 46px rgba(22,24,22,.08);--ease:220ms ease;
    }
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:var(--paper);font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,select{font:inherit}button{cursor:pointer}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(23,24,23,.96);border-bottom:1px solid var(--line-dark);backdrop-filter:blur(12px)}
    .nav-shell{min-height:76px;display:flex;align-items:center;gap:24px}.brand{display:inline-flex;align-items:center;gap:11px;color:#fffdf8;font-weight:800;letter-spacing:-.04em;white-space:nowrap}.brand-mark{width:34px;height:34px;border:1px solid var(--coral);display:grid;place-items:center;color:var(--coral);border-radius:9px;position:relative}.brand-mark:after{content:"";width:12px;height:2px;background:var(--lime);box-shadow:0 5px 0 var(--lime)}
    .nav-search{flex:1;max-width:470px;margin:0 auto;position:relative}.nav-search input{width:100%;height:44px;padding:0 102px 0 42px;color:#fff;background:#2a2c29;border:1px solid #454741;border-radius:12px;transition:var(--ease)}.nav-search input::placeholder{color:#9d9d95}.nav-search input:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(238,118,93,.18);outline:none}.search-icon{position:absolute;left:15px;top:12px;width:18px;height:18px;border:2px solid #aeb1a7;border-radius:50%}.search-icon:after{content:"";position:absolute;width:7px;height:2px;background:#aeb1a7;transform:rotate(45deg);right:-5px;bottom:-2px}.search-submit{position:absolute;right:5px;top:5px;height:34px;padding:0 14px;border:0;border-radius:8px;color:var(--ink);background:var(--coral);font-weight:700;transition:var(--ease)}.search-submit:hover{background:#ff9177;transform:translateY(-1px)}
    .nav-links{display:flex;gap:18px;align-items:center;color:#b9bab1;font-size:14px}.nav-links a{padding:7px 0;border-bottom:2px solid transparent;transition:var(--ease)}.nav-links a:hover,.nav-links a.active{color:#fff;border-color:var(--coral)}.mobile-menu{display:none;color:#fff;background:transparent;border:1px solid #53554e;border-radius:8px;padding:7px 10px}
    .subhero{color:#fffdf8;background:var(--ink);position:relative;overflow:hidden;padding:68px 0 58px;border-bottom:1px solid #383a35}.subhero:before{content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:42px 42px}.subhero-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}.eyebrow,.section-kicker{color:var(--coral);font-size:12px;letter-spacing:.14em;font-weight:800;text-transform:uppercase}.subhero h1{margin:14px 0 18px;max-width:700px;font-size:clamp(34px,5vw,60px);line-height:1.18;letter-spacing:-.07em}.lead{color:#c7c8bf;font-size:17px;line-height:2;max-width:650px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}.btn{min-height:46px;padding:10px 20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;border:1px solid transparent;transition:var(--ease)}.btn-primary{color:var(--ink);background:var(--coral)}.btn-primary:hover{background:#ff947d;transform:translateY(-2px);box-shadow:0 10px 22px rgba(238,118,93,.2)}.btn-outline{color:#fffdf8;border-color:#65675f;background:transparent}.btn-outline:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
    .preview{min-height:300px;border:1px solid #4b4d47;border-radius:18px;background:#242622;padding:22px;position:relative;box-shadow:0 24px 50px rgba(0,0,0,.2)}.preview-top{display:flex;justify-content:space-between;align-items:center;color:#b9bab1;font-size:12px}.live-dot{display:inline-flex;align-items:center;gap:7px;color:var(--lime)}.live-dot:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(203,220,133,.12)}.preview-screen{height:150px;margin:22px 0;background:linear-gradient(135deg,#343934,#171917);border:1px solid #555950;display:flex;align-items:end;padding:18px;position:relative;overflow:hidden}.preview-screen:before{content:"";position:absolute;inset:20% -10% auto;height:1px;background:var(--coral);box-shadow:0 38px 0 rgba(238,118,93,.35)}.screen-label{position:relative;color:#fff;font-weight:800;font-size:20px}.preview-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.meta-box{border-top:1px solid #555950;padding-top:10px;color:#aeb0a5;font-size:12px}.meta-box strong{display:block;color:#fff;font-size:15px;margin-top:3px}
    .section{padding:76px 0}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:28px}.section-head h2{margin:8px 0 0;font-size:clamp(25px,3vw,38px);line-height:1.25;letter-spacing:-.05em}.section-head p{max-width:590px;color:var(--muted);margin:0}
    .filter-bar{display:flex;flex-wrap:wrap;gap:10px;padding:14px;background:var(--cream);border:1px solid var(--line);border-radius:14px;margin-bottom:28px}.filter{border:1px solid var(--line);background:#f8f5ee;color:var(--muted);padding:8px 14px;border-radius:9px;font-size:14px;transition:var(--ease)}.filter:hover,.filter.selected{background:var(--ink);border-color:var(--ink);color:#fff}.filter.selected:before{content:"●";color:var(--coral);margin-right:6px;font-size:10px}
    .feature-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:18px}.feature-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:28px;min-height:245px;position:relative;overflow:hidden;transition:var(--ease)}.feature-card.dark{background:var(--ink);color:#fff}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--coral)}.feature-card h3{font-size:24px;line-height:1.35;margin:17px 0 9px;letter-spacing:-.04em}.feature-card p{color:var(--muted);font-size:14px;margin:0 0 20px}.dark p{color:#bfc1b8}.tag{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;background:var(--paper-deep);color:var(--text);font-size:12px;font-weight:700;margin:3px 4px 3px 0}.dark .tag{background:#343732;color:var(--lime)}.arrow{position:absolute;right:25px;bottom:24px;color:var(--coral);font-size:24px}
    .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}.compare-card{padding:25px;background:var(--cream);border:1px solid var(--line);border-radius:14px;position:relative}.compare-card.emphasis{border-top:4px solid var(--coral)}.compare-head{display:flex;justify-content:space-between;gap:12px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:17px;margin-bottom:15px}.compare-head h3{margin:0;font-size:20px}.status{font-size:12px;background:var(--lime);padding:4px 9px;border-radius:7px;color:#39402b;white-space:nowrap}.compare-list{list-style:none;padding:0;margin:0}.compare-list li{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px}.compare-list li span:first-child{color:var(--muted)}.compare-list li strong{font-weight:700;text-align:right}
    .rail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.rail-item{background:var(--ink-soft);color:#fff;padding:20px;border-radius:12px;border:1px solid #3e413c;min-height:135px;transition:var(--ease)}.rail-item:hover{border-color:var(--coral);transform:translateY(-3px)}.rail-item b{color:var(--coral);font-size:12px}.rail-item h3{font-size:17px;margin:14px 0 5px}.rail-item p{font-size:13px;color:#b9bab1;margin:0}
    .faq-wrap{max-width:820px}.faq-item{border-bottom:1px solid var(--line)}.faq-button{width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:20px 2px;border:0;background:transparent;color:var(--text);font-weight:700}.faq-button:focus{outline:2px solid var(--coral);outline-offset:3px}.faq-icon{color:var(--coral);font-size:24px;transition:var(--ease)}.faq-button[aria-expanded=true] .faq-icon{transform:rotate(45deg)}.faq-panel{display:none;color:var(--muted);font-size:14px;padding:0 40px 20px 2px}.faq-panel.open{display:block}
    .cta{background:var(--ink);color:#fffdf8;border-radius:20px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.cta h2{font-size:clamp(25px,3vw,38px);line-height:1.3;margin:9px 0 12px;letter-spacing:-.05em}.cta p{color:#c2c3ba;margin:0}.form{display:grid;gap:12px}.form label{font-size:13px;color:#c8c9c0}.form input,.form select{width:100%;height:48px;border:1px solid #555850;background:#2a2c29;color:#fff;border-radius:9px;padding:0 14px;outline:none}.form input:focus,.form select:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(238,118,93,.18)}.form small{color:#969890;font-size:12px}.form-message{display:none;color:var(--lime);font-size:13px}
    .footer{background:var(--ink);color:#fffdf8;border-top:1px solid #383a35;padding:54px 0 22px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:35px}.footer p{color:#aeb0a5;font-size:14px;max-width:280px}.footer h3{font-size:14px;margin:0 0 13px;color:var(--lime)}.footer a:not(.brand){display:block;color:#b9bab1;font-size:13px;margin:7px 0;transition:var(--ease)}.footer a:not(.brand):hover{color:var(--coral)}.copyright{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #383a35;margin-top:38px;padding-top:18px;color:#888b82;font-size:12px}
    @media(max-width:1024px){.nav-shell{gap:15px}.nav-links{gap:11px}.subhero-inner{gap:35px}.rail{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:768px){.container{width:min(100% - 28px,680px)}.nav-shell{flex-wrap:wrap;padding:12px 0}.brand{font-size:14px}.mobile-menu{display:block}.nav-links{display:none;width:100%;order:3;flex-direction:column;align-items:stretch;gap:0}.nav-links.open{display:flex}.nav-links a{padding:10px 4px}.nav-search{order:2;flex-basis:100%;max-width:none}.subhero{padding:52px 0}.subhero-inner,.feature-grid,.cta{grid-template-columns:1fr}.preview{min-height:260px}.section{padding:56px 0}.section-head{display:block}.section-head p{margin-top:12px}.compare{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:520px){.hero-actions .btn{width:100%}.preview-meta{grid-template-columns:1fr 1fr}.preview-meta .meta-box:last-child{grid-column:span 2}.rail{grid-template-columns:1fr}.cta{padding:26px 20px}.footer-grid{grid-template-columns:1fr}.copyright{display:block}.copyright span{display:block;margin-top:6px}.filter-bar{overflow:auto;flex-wrap:nowrap}.filter{white-space:nowrap}}

/* roulang page: category1 */
:root{
 --ink:#171817;--ink-soft:#222422;--paper:#f4f1ea;--paper-deep:#e9e4da;--cream:#fffdf8;
 --text:#252622;--muted:#78766e;--line:#d9d3c7;--line-dark:rgba(255,255,255,.14);
 --coral:#ee765d;--coral-dark:#c95745;--lime:#cbdc85;--mist:#c4d4d0;--violet:#c8bfd7;
 --radius:16px;--shadow:0 18px 46px rgba(22,24,22,.08);--ease:220ms ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:var(--paper);font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select{font:inherit}
button{cursor:pointer}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(23,24,23,.96);border-bottom:1px solid var(--line-dark);backdrop-filter:blur(12px)}
.nav-shell{min-height:76px;display:flex;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;gap:11px;color:#fffdf8;font-weight:800;letter-spacing:-.04em;white-space:nowrap}
.brand-mark{width:34px;height:34px;border:1px solid var(--coral);display:grid;place-items:center;color:var(--coral);border-radius:9px;position:relative}
.brand-mark:after{content:"";width:12px;height:2px;background:var(--lime);box-shadow:0 5px 0 var(--lime)}
.nav-search{flex:1;max-width:470px;margin:0 auto;position:relative}
.nav-search input{width:100%;height:44px;padding:0 102px 0 42px;color:#fff;background:#2a2c29;border:1px solid #454741;border-radius:12px;transition:var(--ease)}
.nav-search input::placeholder{color:#9d9d95}
.nav-search input:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(238,118,93,.18);outline:none}
.search-icon{position:absolute;left:15px;top:12px;width:18px;height:18px;border:2px solid #aeb1a7;border-radius:50%}
.search-icon:after{content:"";position:absolute;width:7px;height:2px;background:#aeb1a7;transform:rotate(45deg);right:-5px;bottom:-2px}
.search-submit{position:absolute;right:5px;top:5px;height:34px;padding:0 14px;border:0;border-radius:8px;color:var(--ink);background:var(--coral);font-weight:700;transition:var(--ease)}
.search-submit:hover{background:#ff9177;transform:translateY(-1px)}
.nav-links{display:flex;gap:18px;align-items:center;color:#b9bab1;font-size:14px}
.nav-links a{padding:7px 0;border-bottom:2px solid transparent;transition:var(--ease)}
.nav-links a:hover,.nav-links a.active{color:#fff;border-color:var(--coral)}
.mobile-menu{display:none;color:#fff;background:transparent;border:1px solid #53554e;border-radius:8px;padding:7px 10px}
.page-hero{color:#fffdf8;background:var(--ink);padding:62px 0 56px;position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 90%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.eyebrow,.section-kicker{color:var(--coral);font-size:12px;letter-spacing:.14em;font-weight:800}
.page-hero h1{margin:14px 0 16px;font-size:clamp(34px,5vw,60px);line-height:1.18;letter-spacing:-.07em}
.hero-lead{max-width:650px;color:#c7c8bf;font-size:17px;line-height:2}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{min-height:46px;padding:10px 20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;border:1px solid transparent;transition:var(--ease)}
.btn-primary{color:var(--ink);background:var(--coral)}
.btn-primary:hover{background:#ff947d;transform:translateY(-2px);box-shadow:0 10px 22px rgba(238,118,93,.2)}
.btn-outline{color:#fffdf8;border-color:#65675f;background:transparent}
.btn-outline:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
.btn-light{background:var(--cream);color:var(--ink)}
.btn-light:hover{background:#fff;color:var(--coral-dark);transform:translateY(-2px)}
.status-board{padding:24px;background:#20221f;border:1px solid #4a4c45;border-radius:14px;box-shadow:0 18px 42px rgba(0,0,0,.2)}
.board-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;border-bottom:1px solid #474941;color:#bfc1b7;font-size:13px}
.live-dot{display:inline-flex;align-items:center;gap:7px;color:var(--lime)}
.live-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(203,220,133,.12)}
.board-row{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid #393b36}
.board-row:last-child{border-bottom:0;padding-bottom:0}
.board-no{color:var(--coral);font-weight:800;font-size:12px}
.board-row strong{display:block;color:#fff;font-size:15px}
.board-row span{display:block;color:#999d93;font-size:12px}
.board-tag{margin-left:auto;color:var(--ink);background:var(--lime);padding:3px 8px;border-radius:5px;font-size:11px;font-weight:800}
.section{padding:72px 0}
.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:28px}
.section-head h2{margin:8px 0 0;font-size:clamp(26px,3vw,38px);line-height:1.25;letter-spacing:-.05em}
.section-head p{max-width:590px;color:var(--muted);margin:0}
.filter-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.filter-panel{background:var(--ink);color:#fffdf8;border-radius:var(--radius);padding:23px;position:sticky;top:98px}
.filter-panel h3{margin:0 0 20px;font-size:18px}
.filter-group{padding:17px 0;border-top:1px solid #444740}
.filter-group label{display:block;color:#aeb0a5;font-size:13px;margin-bottom:9px}
.filter-options{display:flex;flex-wrap:wrap;gap:8px}
.filter-chip{border:1px solid #55584f;background:#292b28;color:#d4d5cb;border-radius:7px;padding:7px 10px;font-size:12px;transition:var(--ease)}
.filter-chip:hover,.filter-chip.selected{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.result-area{min-width:0}
.result-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;padding:14px 17px;background:var(--cream);border:1px solid var(--line);border-radius:12px}
.result-toolbar strong{font-size:15px}
.result-toolbar span{font-size:13px;color:var(--muted)}
.sort-select{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:7px 10px;color:var(--text);outline:none}
.sort-select:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(238,118,93,.16)}
.result-list{display:flex;flex-direction:column;gap:12px}
.result-item{display:grid;grid-template-columns:60px 1fr auto;gap:17px;align-items:center;padding:19px;background:var(--cream);border:1px solid var(--line);border-radius:12px;transition:var(--ease)}
.result-item:hover{transform:translateX(4px);border-color:var(--coral);box-shadow:var(--shadow)}
.result-index{font-size:24px;color:var(--coral);font-weight:800;letter-spacing:-.06em}
.result-item h3{margin:0 0 6px;font-size:18px;line-height:1.4}
.result-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:12px}
.badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:800}
.badge-coral{color:#9f3f31;background:#f8c6b9}
.badge-lime{color:#56601d;background:var(--lime)}
.badge-mist{color:#425451;background:var(--mist)}
.text-link{color:var(--coral-dark);font-weight:800;font-size:13px;white-space:nowrap}
.text-link:hover{color:var(--coral)}
.notice-strip{margin-top:26px;padding:24px 28px;border:1px solid #c9d3bb;background:#e8edda;border-radius:14px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.notice-strip h3{margin:0 0 4px;font-size:20px}
.notice-strip p{margin:0;color:#626856;font-size:14px}
.comparison{background:var(--ink);color:#fffdf8}
.comparison .section-head p{color:#b5b7ad}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.compare-card{padding:25px;border:1px solid #484b44;background:#222521;border-radius:14px}
.compare-card:nth-child(2){background:#2b2d28}
.compare-label{display:flex;justify-content:space-between;color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.1em}
.compare-card h3{font-size:22px;margin:22px 0 8px}
.compare-card p{color:#bfc1b7;margin:0 0 20px;font-size:14px}
.compare-line{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid #464941;color:#c9cbc1;font-size:13px}
.compare-line strong{color:#fff}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-button{width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:20px 0;border:0;background:transparent;color:var(--text);font-weight:800}
.faq-button:focus{outline:2px solid var(--coral);outline-offset:4px}
.faq-icon{color:var(--coral);font-size:24px;line-height:1;transition:var(--ease)}
.faq-button[aria-expanded="true"] .faq-icon{transform:rotate(45deg)}
.faq-panel{max-width:780px;padding:0 40px 20px 0;color:var(--muted);font-size:14px}
.cta{padding:58px 0;background:var(--paper-deep)}
.cta-box{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:34px 38px;background:var(--coral);border-radius:var(--radius);color:var(--ink)}
.cta-box h2{margin:0 0 6px;font-size:clamp(25px,3vw,36px);letter-spacing:-.05em}
.cta-box p{margin:0;max-width:650px;color:#673a31}
.subscribe-form{display:flex;gap:9px;min-width:390px}
.subscribe-form input{min-width:0;flex:1;border:1px solid rgba(23,24,23,.22);background:rgba(255,253,248,.8);padding:11px 13px;border-radius:9px;outline:none}
.subscribe-form input:focus{box-shadow:0 0 0 3px rgba(255,253,248,.45)}
.form-note{font-size:11px;color:#704239;margin-top:7px}
.footer{padding:48px 0 22px;background:var(--ink);color:#b8bab0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:35px}
.footer .brand{margin-bottom:13px}
.footer p{max-width:280px;font-size:13px;color:#94988d;margin:0}
.footer h3{font-size:13px;color:#fff;margin:0 0 13px}
.footer-grid a:not(.brand){display:block;color:#9fa39a;font-size:13px;margin:7px 0;transition:var(--ease)}
.footer-grid a:not(.brand):hover{color:var(--coral)}
.copyright{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #393c36;margin-top:38px;padding-top:18px;font-size:12px;color:#7f8379}
@media(max-width:1024px){.nav-shell{gap:16px}.nav-links{gap:12px}.hero-grid{gap:35px}.filter-layout{grid-template-columns:220px 1fr}}
@media(max-width:768px){.nav-shell{flex-wrap:wrap;padding:13px 0}.nav-search{order:3;flex-basis:100%;max-width:none}.nav-links{display:none}.mobile-menu{display:block;margin-left:auto}.hero-grid,.filter-layout{grid-template-columns:1fr}.filter-panel{position:static}.section{padding:56px 0}.cta-box{display:block}.subscribe-form{min-width:0;margin-top:22px}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.container{width:min(100% - 28px,1180px)}.brand{font-size:14px}.page-hero{padding:45px 0}.page-hero h1{font-size:36px}.hero-actions,.subscribe-form{flex-direction:column}.btn,.subscribe-form input{width:100%}.result-toolbar{align-items:flex-start;flex-direction:column}.result-item{grid-template-columns:38px 1fr}.result-item .text-link{grid-column:2}.compare-grid{grid-template-columns:1fr}.notice-strip{display:block;padding:20px}.notice-strip .btn{margin-top:15px}.footer-grid{grid-template-columns:1fr}.copyright{display:block}.copyright span{display:block;margin-top:5px}}