/* roulang page: index */
:root{
      --bg:#f4efe6;
      --bg-soft:#fbf8f2;
      --surface:#ffffff;
      --surface-2:#f5eee4;
      --surface-3:#ece3d7;
      --dark:#1d1a18;
      --dark-2:#26221f;
      --text:#1f1b18;
      --muted:#6d645a;
      --line:#ded3c5;
      --line-strong:#c9b9a7;
      --accent:#c95f3d;
      --accent-2:#9a6d31;
      --accent-3:#2e6d62;
      --accent-soft:#f0d5c9;
      --shadow:0 18px 42px rgba(29,26,24,.08);
      --shadow-sm:0 8px 20px rgba(29,26,24,.06);
      --radius:12px;
      --radius-sm:10px;
      --container:1200px;
      --header-h: 0px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)),
        repeating-linear-gradient(135deg, rgba(29,26,24,.025) 0 1px, transparent 1px 26px),
        var(--bg);
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
      line-height:1.75;
      letter-spacing:0;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    :focus-visible{outline:3px solid rgba(201,95,61,.28);outline-offset:2px}
    .container-xl{max-width:var(--container)}
    .site-shell{overflow:hidden}
    .site-header{
      position:sticky;top:0;z-index:1030;
      background:rgba(244,239,230,.92);
      backdrop-filter:saturate(180%) blur(16px);
      border-bottom:1px solid rgba(29,26,24,.08);
      box-shadow:0 1px 0 rgba(255,255,255,.45) inset;
    }
    .header-inner{padding:14px 0 12px}
    .brand-line{
      display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;
    }
    .brand-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
    .brand{
      display:inline-flex;align-items:center;gap:10px;
      font-size:1.08rem;font-weight:900;letter-spacing:0;color:var(--dark);
      white-space:nowrap
    }
    .brand-mark{
      width:34px;height:34px;border-radius:10px;
      display:inline-grid;place-items:center;
      color:#fff;background:linear-gradient(135deg,var(--accent),#9a4c32);
      box-shadow:0 8px 18px rgba(201,95,61,.24)
    }
    .brand small{
      display:inline-flex;align-items:center;gap:8px;
      font-size:.84rem;font-weight:700;color:var(--muted);
      padding-left:2px;
    }
    .badge-age{
      display:inline-flex;align-items:center;justify-content:center;
      min-height:28px;padding:0 10px;border-radius:999px;
      border:1px solid rgba(201,95,61,.25);
      background:var(--accent-soft);
      color:var(--accent);
      font-size:.78rem;font-weight:800;white-space:nowrap
    }
    .brand-note{
      font-size:.92rem;color:var(--muted);
      padding:7px 12px;border:1px solid rgba(29,26,24,.08);
      border-radius:999px;background:rgba(255,255,255,.55);
      white-space:nowrap
    }
    .site-search{
      display:flex;align-items:center;gap:10px;
      width:min(420px,100%);
    }
    .search-input{
      min-height:44px;border-radius:999px !important;
      border:1px solid rgba(29,26,24,.14) !important;
      background:#fff !important;color:var(--text) !important;
      padding:0 16px !important;box-shadow:none !important;
    }
    .search-input::placeholder{color:#8c8175}
    .search-btn{
      min-height:44px;padding:0 16px;border-radius:999px;
      border:1px solid var(--dark);background:var(--dark);color:#fff;
      font-weight:800;transition:.22s ease
    }
    .search-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
    .search-btn:active{transform:translateY(0)}
    .mobile-search{margin-top:12px}
    .channel-nav{
      margin-top:12px;display:flex;align-items:center;justify-content:space-between;
      gap:12px;flex-wrap:wrap
    }
    .nav-list{
      display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0
    }
    .nav-pill{
      display:inline-flex;align-items:center;gap:8px;
      min-height:40px;padding:0 14px;border-radius:999px;
      border:1px solid transparent;background:transparent;color:var(--muted);
      font-size:.94rem;font-weight:800;transition:.22s ease;white-space:nowrap
    }
    .nav-pill i{font-size:.92rem}
    .nav-pill:hover,.nav-pill.active,.nav-pill[aria-current="page"]{
      background:var(--dark);color:#fff;border-color:var(--dark);
      transform:translateY(-1px);box-shadow:var(--shadow-sm)
    }
    .trend-strip{
      display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end
    }
    .trend-chip{
      display:inline-flex;align-items:center;gap:6px;
      min-height:38px;padding:0 12px;border-radius:999px;
      background:rgba(255,255,255,.72);border:1px solid rgba(29,26,24,.08);
      color:var(--muted);font-size:.86rem;font-weight:700;transition:.22s ease
    }
    .trend-chip:hover{border-color:rgba(201,95,61,.24);color:var(--accent);transform:translateY(-1px)}
    .navbar-toggler{
      min-width:44px;min-height:44px;border-radius:14px;
      border:1px solid rgba(29,26,24,.12);background:#fff;color:var(--dark);
      box-shadow:none !important
    }
    .navbar-toggler:focus{box-shadow:none}
    .offcanvas{
      background:rgba(250,247,240,.98);
      border-left:1px solid rgba(29,26,24,.08)
    }
    .offcanvas-header{border-bottom:1px solid rgba(29,26,24,.08)}
    .offcanvas-title{
      font-weight:900;color:var(--dark);display:flex;align-items:center;gap:10px
    }
    .mobile-nav-list{display:grid;gap:8px}
    .mobile-nav-list .nav-pill{
      width:100%;justify-content:flex-start;background:#fff;border-color:rgba(29,26,24,.08)
    }
    .mobile-nav-list .nav-pill.active,.mobile-nav-list .nav-pill:hover{
      background:var(--dark);border-color:var(--dark)
    }
    .mobile-trends{
      display:flex;flex-wrap:wrap;gap:8px
    }

    main{padding-bottom:20px}
    section{scroll-margin-top:126px}
    .section-wrap{padding:82px 0}
    .section-alt{background:rgba(255,255,255,.42)}
    .section-kicker{
      display:inline-flex;align-items:center;gap:8px;
      min-height:30px;padding:0 10px;border-radius:999px;
      background:rgba(201,95,61,.08);color:var(--accent);
      border:1px solid rgba(201,95,61,.18);font-size:.8rem;font-weight:900;
      letter-spacing:0
    }
    .section-title{
      display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
      margin-bottom:26px
    }
    .section-title h2{
      margin:10px 0 0;font-size:1.95rem;line-height:1.2;font-weight:900;color:var(--dark)
    }
    .section-lead{
      margin:8px 0 0;max-width:760px;color:var(--muted);font-size:1.02rem
    }
    .section-actions{
      display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end
    }

    .hero-section{padding:26px 0 12px}
    .hero-shell{
      position:relative;
      border-radius:18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 28px),
        linear-gradient(180deg,#1b1816 0%, #24201d 100%);
      color:#fff;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
      overflow:hidden;
      padding:34px;
    }
    .hero-shell::before{
      content:"";
      position:absolute;inset:0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 34%),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size:auto, 64px 64px, 64px 64px;
      opacity:.18;
      pointer-events:none;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.1) 88%);
    }
    .hero-shell > .row{position:relative;z-index:1}
    .hero-kicker{
      display:inline-flex;align-items:center;gap:8px;
      min-height:30px;padding:0 12px;border-radius:999px;
      background:rgba(255,255,255,.08);color:#f3e8db;
      border:1px solid rgba(255,255,255,.12);
      font-size:.82rem;font-weight:900;letter-spacing:0
    }
    .hero-shell h1{
      margin:18px 0 14px;
      font-size:3.08rem;line-height:1.08;font-weight:900;letter-spacing:0;color:#fff
    }
    .hero-desc{
      margin:0;max-width:620px;font-size:1.06rem;line-height:1.9;color:#ede5db
    }
    .hero-actions{
      display:flex;flex-wrap:wrap;gap:12px;margin-top:22px
    }
    .btn-base{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      min-height:46px;padding:0 18px;border-radius:999px;font-weight:900;
      border:1px solid transparent;transition:.22s ease;white-space:nowrap;
      text-decoration:none
    }
    .btn-base:hover{transform:translateY(-1px)}
    .btn-brand{
      background:var(--accent);color:#fff;border-color:var(--accent);
      box-shadow:0 10px 22px rgba(201,95,61,.22)
    }
    .btn-brand:hover{background:#b94f31;color:#fff;box-shadow:0 14px 24px rgba(201,95,61,.26)}
    .btn-dark-soft{
      background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.14)
    }
    .btn-dark-soft:hover{background:rgba(255,255,255,.14);color:#fff}
    .btn-light-soft{
      background:#fff;color:var(--dark);border-color:rgba(255,255,255,.2)
    }
    .btn-light-soft:hover{background:#f5efe5;color:var(--dark)}
    .hero-tags{
      display:flex;flex-wrap:wrap;gap:10px;margin-top:18px
    }
    .hero-chip{
      display:inline-flex;align-items:center;gap:8px;
      min-height:38px;padding:0 12px;border-radius:999px;
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
      color:#f0e5d8;font-size:.88rem;font-weight:700
    }
    .hero-visual{
      position:relative;height:100%;min-height:430px;
      border-radius:16px;border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      padding:18px
    }
    .visual-head{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      margin-bottom:16px
    }
    .visual-head .mini-tag{
      display:inline-flex;align-items:center;gap:6px;
      padding:7px 10px;border-radius:999px;font-size:.78rem;font-weight:900;
      background:rgba(255,255,255,.08);color:#efe5d8;border:1px solid rgba(255,255,255,.12)
    }
    .visual-head .mini-note{
      font-size:.82rem;color:#d9cec0
    }
    .hero-stage{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;align-content:start
    }
    .stage-card{
      min-height:126px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      padding:16px;
      color:#fff;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03)
    }
    .stage-card.large{
      grid-column:1 / -1;
      display:flex;flex-direction:column;justify-content:space-between;gap:14px;
      min-height:148px;
      background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03))
    }
    .stage-card .stage-label{
      display:inline-flex;align-items:center;gap:6px;
      font-size:.78rem;font-weight:900;color:#f2dfd0;
      text-transform:none
    }
    .stage-card h3{
      margin:10px 0 0;font-size:1rem;line-height:1.4;font-weight:900;color:#fff
    }
    .stage-card p{
      margin:8px 0 0;font-size:.88rem;line-height:1.7;color:#ddd1c4
    }
    .stage-bullets{
      display:grid;gap:8px;margin:0;padding:0;list-style:none
    }
    .stage-bullets li{
      display:flex;align-items:flex-start;gap:8px;color:#eee3d7;font-size:.9rem
    }
    .stage-bullets i{color:#f0b28f;margin-top:3px}
    .stage-grid{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px
    }
    .stage-mini{
      display:flex;flex-direction:column;gap:8px;
      min-height:110px;
      border-radius:14px;border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);padding:14px;color:#fff
    }
    .stage-mini strong{font-size:.9rem}
    .stage-mini span{font-size:.84rem;color:#dcd0c1;line-height:1.6}
    .hero-bottom-strip{
      margin-top:14px;
      display:flex;flex-wrap:wrap;gap:8px
    }
    .hero-bottom-strip .hero-chip{background:rgba(255,255,255,.06)}

    .section-card{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-sm);
      transition:.22s ease;
    }
    .section-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
    .channel-grid{
      display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px
    }
    .channel-card{
      min-height:194px;
      display:flex;flex-direction:column;justify-content:space-between;
      padding:20px;border-radius:16px;
      background:linear-gradient(180deg,#fff 0%, #fcfaf7 100%);
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
      transition:.22s ease
    }
    .channel-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
    .channel-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
    .channel-icon{
      width:46px;height:46px;border-radius:14px;
      display:grid;place-items:center;
      background:linear-gradient(135deg, rgba(201,95,61,.14), rgba(154,109,49,.12));
      color:var(--accent);font-size:1.25rem;flex:0 0 auto;
      border:1px solid rgba(201,95,61,.18)
    }
    .channel-title{
      margin:0;color:var(--dark);font-size:1.08rem;line-height:1.35;font-weight:900
    }
    .channel-desc{
      margin:10px 0 0;color:var(--muted);font-size:.94rem;line-height:1.8
    }
    .channel-foot{
      display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px
    }
    .channel-link{
      display:inline-flex;align-items:center;gap:8px;
      font-weight:900;color:var(--accent)
    }
    .channel-note{
      display:inline-flex;align-items:center;gap:6px;
      color:var(--muted);font-size:.84rem
    }

    .preview-wrap{
      position:relative
    }
    .preview-bar{
      display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px
    }
    .preview-controls{display:flex;align-items:center;gap:8px}
    .preview-control{
      width:40px;height:40px;border-radius:999px;border:1px solid var(--line);
      background:#fff;color:var(--dark);display:grid;place-items:center;
      transition:.22s ease
    }
    .preview-control:hover{transform:translateY(-1px);border-color:rgba(201,95,61,.22);box-shadow:var(--shadow-sm)}
    .preview-track{
      display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
      padding-bottom:8px;scrollbar-width:none
    }
    .preview-track::-webkit-scrollbar{display:none}
    .preview-card{
      flex:0 0 280px;scroll-snap-align:start;
      background:linear-gradient(180deg,#fff 0%, #fbf8f2 100%);
      border:1px solid var(--line);
      border-radius:16px;
      padding:16px;
      box-shadow:var(--shadow-sm);
      transition:.22s ease
    }
    .preview-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
    .preview-meta{
      display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px
    }
    .preview-tag{
      display:inline-flex;align-items:center;gap:6px;
      min-height:28px;padding:0 10px;border-radius:999px;
      background:rgba(201,95,61,.08);border:1px solid rgba(201,95,61,.14);
      color:var(--accent);font-size:.78rem;font-weight:900
    }
    .preview-step{
      color:var(--muted);font-size:.82rem;font-weight:800
    }
    .preview-title{
      margin:0;color:var(--dark);font-size:1.04rem;line-height:1.4;font-weight:900
    }
    .preview-desc{
      margin:10px 0 0;color:var(--muted);font-size:.92rem;line-height:1.8
    }
    .preview-art{
      margin-top:14px;
      border-radius:14px;border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(244,239,230,.72)),
        repeating-linear-gradient(135deg, rgba(29,26,24,.035) 0 1px, transparent 1px 18px);
      padding:14px;min-height:166px
    }
    .art-top{
      display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px
    }
    .art-top .art-pill{
      width:46%;height:12px;border-radius:999px;background:rgba(29,26,24,.12)
    }
    .art-top .art-chip{
      width:72px;height:24px;border-radius:999px;background:rgba(201,95,61,.16)
    }
    .art-grid{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px
    }
    .art-block{
      min-height:46px;border-radius:12px;border:1px solid rgba(29,26,24,.08);
      background:#fff
    }
    .art-block.tall{min-height:84px}
    .preview-dots{
      display:flex;justify-content:center;gap:8px;margin-top:14px
    }
    .preview-dot{
      width:10px;height:10px;border-radius:999px;border:0;background:rgba(29,26,24,.18);
      transition:.22s ease
    }
    .preview-dot.active{width:28px;background:var(--accent)}
    .preview-dot:hover{transform:translateY(-1px)}

    .system-grid{
      display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px
    }
    .system-card{
      min-height:162px;padding:18px;
      background:linear-gradient(180deg,#fff 0%, #fcfaf8 100%);
      border:1px solid var(--line);border-radius:16px;
      box-shadow:var(--shadow-sm);transition:.22s ease
    }
    .system-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
    .system-icon{
      width:44px;height:44px;border-radius:14px;
      background:rgba(46,109,98,.12);border:1px solid rgba(46,109,98,.18);
      color:var(--accent-3);display:grid;place-items:center;font-size:1.2rem
    }
    .system-title{
      margin:12px 0 0;color:var(--dark);font-size:1rem;line-height:1.35;font-weight:900
    }
    .system-desc{
      margin:8px 0 0;color:var(--muted);font-size:.92rem;line-height:1.75
    }

    .review-grid{
      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px
    }
    .review-card{
      padding:18px;background:linear-gradient(180deg,#fff 0%, #fcfaf7 100%);
      border:1px solid var(--line);border-radius:16px;
      box-shadow:var(--shadow-sm);transition:.22s ease;min-height:190px
    }
    .review-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
    .review-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .review-user{display:flex;align-items:center;gap:12px;min-width:0}
    .avatar{
      width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
      background:linear-gradient(135deg,var(--dark),#3a332e);color:#fff;font-weight:900;flex:0 0 auto
    }
    .user-meta{min-width:0}
    .user-meta strong{display:block;color:var(--dark);font-size:.98rem;line-height:1.3}
    .user-meta span{display:block;color:var(--muted);font-size:.82rem}
    .stars{color:#b6822d;font-size:.95rem;letter-spacing:1px;white-space:nowrap}
    .review-text{
      margin:14px 0 0;color:var(--text);line-height:1.86;font-size:.95rem
    }
    .review-time{
      margin-top:14px;color:var(--muted);font-size:.82rem
    }

    .topic-grid{
      display:grid;grid-template-columns:1.02fr .98fr;gap:16px
    }
    .topic-cloud,.rank-card,.update-card,.cta-card,.faq-card{
      background:linear-gradient(180deg,#fff 0%, #fbf8f2 100%);
      border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)
    }
    .topic-cloud{padding:20px}
    .topic-title{
      margin:0;color:var(--dark);font-size:1.05rem;font-weight:900
    }
    .topic-desc{
      margin:8px 0 0;color:var(--muted);font-size:.92rem;line-height:1.8
    }
    .chip-cloud{
      display:flex;flex-wrap:wrap;gap:10px;margin-top:16px
    }
    .topic-chip{
      display:inline-flex;align-items:center;gap:8px;
      min-height:36px;padding:0 12px;border-radius:999px;
      background:#fff;border:1px solid var(--line);color:var(--dark);font-size:.86rem;font-weight:800;
      transition:.22s ease
    }
    .topic-chip:hover{border-color:rgba(201,95,61,.22);color:var(--accent);transform:translateY(-1px)}
    .rank-card{padding:20px}
    .rank-list{
      list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px
    }
    .rank-item{
      display:flex;align-items:flex-start;gap:12px;
      padding-bottom:12px;border-bottom:1px solid rgba(29,26,24,.08)
    }
    .rank-item:last-child{padding-bottom:0;border-bottom:0}
    .rank-num{
      width:28px;height:28px;border-radius:999px;flex:0 0 auto;
      display:grid;place-items:center;background:rgba(201,95,61,.1);
      color:var(--accent);font-weight:900;font-size:.84rem
    }
    .rank-body strong{
      display:block;color:var(--dark);font-size:.95rem;line-height:1.5
    }
    .rank-body span{display:block;color:var(--muted);font-size:.84rem;line-height:1.7;margin-top:2px}

    .update-grid{
      display:grid;grid-template-columns:1.12fr .88fr;gap:16px
    }
    .update-card{padding:20px}
    .update-list{
      list-style:none;margin:16px 0 0;padding:0;display:grid
    }
    .update-list li{
      padding:14px 0;border-bottom:1px solid rgba(29,26,24,.08)
    }
    .update-list li:last-child{border-bottom:0;padding-bottom:0}
    .update-link{
      display:flex;align-items:flex-start;justify-content:space-between;gap:12px
    }
    .update-link strong{
      display:block;color:var(--dark);font-size:.98rem;line-height:1.55;font-weight:900
    }
    .update-link span{
      display:block;color:var(--muted);font-size:.9rem;line-height:1.75;margin-top:4px
    }
    .update-time{
      min-height:28px;padding:0 10px;border-radius:999px;background:rgba(46,109,98,.1);
      color:var(--accent-3);font-size:.78rem;font-weight:900;white-space:nowrap
    }
    .update-side{
      display:grid;gap:16px
    }
    .side-note{
      padding:18px;background:linear-gradient(180deg, rgba(29,26,24,.97), rgba(41,36,32,.97));
      color:#fff;border-radius:16px;box-shadow:var(--shadow-sm)
    }
    .side-note h3{
      margin:0;color:#fff;font-size:1.04rem;font-weight:900
    }
    .side-note p{
      margin:10px 0 0;color:#e3d8cb;font-size:.92rem;line-height:1.8
    }
    .side-mini{
      display:grid;gap:10px;padding:18px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm)
    }
    .side-mini-row{
      display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
      padding-bottom:10px;border-bottom:1px solid rgba(29,26,24,.08)
    }
    .side-mini-row:last-child{padding-bottom:0;border-bottom:0}
    .side-mini-row strong{display:block;color:var(--dark);font-size:.94rem;line-height:1.5}
    .side-mini-row span{display:block;color:var(--muted);font-size:.84rem;line-height:1.65;margin-top:2px}
    .side-mini-row .mini-mark{
      width:26px;height:26px;border-radius:999px;display:grid;place-items:center;
      background:rgba(201,95,61,.1);color:var(--accent);font-weight:900;font-size:.8rem;flex:0 0 auto
    }

    .faq-grid{
      display:grid;gap:12px
    }
    .faq-card{padding:18px}
    .accordion{
      display:grid;gap:12px
    }
    .accordion-item{
      border:1px solid var(--line) !important;
      border-radius:14px !important;
      overflow:hidden;
      background:#fff;
      box-shadow:var(--shadow-sm)
    }
    .accordion-button{
      background:#fff;
      color:var(--dark);
      font-weight:900;
      box-shadow:none !important;
      padding:18px 18px;
    }
    .accordion-button:not(.collapsed){
      background:rgba(201,95,61,.08);
      color:var(--dark);
    }
    .accordion-button::after{
      background-size:1rem;
      opacity:.75
    }
    .accordion-body{
      color:var(--muted);
      line-height:1.85;
      padding:0 18px 18px
    }

    .cta-shell{
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 28px),
        linear-gradient(135deg,#191614 0%, #26211d 100%);
      color:#fff;
      border-radius:18px;
      padding:32px;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
      overflow:hidden
    }
    .cta-shell h2{
      color:#fff;margin:0;font-size:2rem;line-height:1.2;font-weight:900
    }
    .cta-shell p{
      color:#e8ddd2;margin:12px 0 0;max-width:720px;font-size:1.02rem;line-height:1.9
    }
    .cta-layout{
      display:grid;grid-template-columns:1.04fr .96fr;gap:18px;margin-top:20px
    }
    .cta-card{
      padding:20px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.1);
      color:#fff
    }
    .cta-card h3{
      margin:0;color:#fff;font-size:1.02rem;font-weight:900
    }
    .cta-card p{margin:10px 0 0;color:#e8ddd1;font-size:.94rem;line-height:1.85}
    .cta-actions{
      display:flex;flex-wrap:wrap;gap:10px;margin-top:18px
    }
    .cta-step-list{
      display:grid;gap:12px
    }
    .cta-step{
      padding:15px 16px;border-radius:14px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.1)
    }
    .cta-step strong{display:block;color:#fff;font-size:.95rem;line-height:1.4}
    .cta-step span{display:block;color:#e4d9cc;font-size:.86rem;line-height:1.65;margin-top:4px}
    .cta-note{
      margin-top:14px;padding:14px 16px;border-radius:14px;
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
      color:#f4eadf;font-size:.88rem;line-height:1.8
    }

    .footer-shell{
      background:linear-gradient(180deg,#181512 0%, #1f1b18 100%);
      color:#eee5d9;
      padding:34px 0 26px;
      border-top:1px solid rgba(255,255,255,.06)
    }
    .footer-grid{
      display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:24px
    }
    .footer-brand{
      display:flex;flex-direction:column;gap:12px
    }
    .footer-brand strong{
      font-size:1.1rem;font-weight:900;color:#fff
    }
    .footer-brand p{
      margin:0;color:#d8ccbc;line-height:1.85;font-size:.94rem
    }
    .footer-links{
      display:grid;gap:10px
    }
    .footer-links a{
      color:#efe5d8;font-weight:700;transition:.2s ease
    }
    .footer-links a:hover{color:#fff;transform:translateX(2px)}
    .footer-note{
      color:#d5c7b6;font-size:.88rem;line-height:1.85
    }
    .footer-bar{
      margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
      display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap
    }
    .footer-bar span{color:#d9cec0;font-size:.86rem}

    .copy-flash{
      position:fixed;right:18px;bottom:18px;z-index:1050;
      padding:10px 14px;border-radius:999px;background:var(--dark);color:#fff;
      box-shadow:var(--shadow);opacity:0;transform:translateY(12px);
      pointer-events:none;transition:.25s ease;font-size:.88rem;font-weight:800
    }
    .copy-flash.show{opacity:1;transform:translateY(0)}

    @media (max-width: 1199.98px){
      .hero-shell h1{font-size:2.72rem}
      .channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .system-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
      .review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .topic-grid,.update-grid,.cta-layout,.footer-grid{grid-template-columns:1fr}
    }
    @media (max-width: 991.98px){
      .brand-line,.channel-nav{align-items:flex-start}
      .site-search{width:100%}
      .header-inner{padding-bottom:14px}
      .hero-shell{padding:24px}
      .hero-shell h1{font-size:2.42rem}
      .hero-visual{min-height:0}
      .hero-stage{gap:10px}
      .section-wrap{padding:70px 0}
      .section-title{flex-direction:column;align-items:flex-start}
      .section-actions{justify-content:flex-start}
      .review-grid,.system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media (max-width: 767.98px){
      .brand-note{display:none}
      .hero-shell{padding:20px}
      .hero-shell h1{font-size:2.12rem}
      .hero-desc{font-size:1rem}
      .hero-visual{padding:14px}
      .hero-stage,.stage-grid,.channel-grid,.system-grid,.review-grid{grid-template-columns:1fr}
      .stage-card.large{min-height:132px}
      .preview-card{flex-basis:82vw}
      .preview-bar{flex-direction:column;align-items:flex-start}
      .search-btn{padding:0 14px}
      .section-title h2{font-size:1.72rem}
      .cta-shell{padding:22px}
      .cta-shell h2{font-size:1.72rem}
      .footer-grid{grid-template-columns:1fr}
    }
    @media (max-width: 575.98px){
      .header-inner{padding-top:12px}
      .brand{font-size:1rem}
      .brand-mark{width:30px;height:30px;border-radius:9px}
      .nav-pill{min-height:38px;padding:0 12px;font-size:.88rem}
      .trend-chip{min-height:36px;font-size:.84rem}
      .hero-section{padding-top:18px}
      .hero-shell{border-radius:16px}
      .hero-shell h1{font-size:1.92rem}
      .hero-actions .btn-base{width:100%;justify-content:center}
      .hero-chip{width:100%;justify-content:center}
      .preview-track{padding-right:6px}
      .preview-card{flex-basis:86vw}
      .accordion-button{padding:16px}
      .accordion-body{padding:0 16px 16px}
      .section-wrap{padding:58px 0}
      .cta-actions .btn-base{width:100%}
      .footer-bar{flex-direction:column;align-items:flex-start}
    }
    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{animation:none !important;transition:none !important}
    }

/* roulang page: category2 */
:root {
      --ink: #171412;
      --ink-2: #2b2521;
      --muted: #746a61;
      --paper: #fffaf2;
      --paper-2: #f5eadb;
      --panel: #ffffff;
      --line: #e5d6c4;
      --accent: #e5483f;
      --accent-2: #ffb84d;
      --green: #258463;
      --deep: #211b18;
      --shadow: 0 14px 32px rgba(23, 20, 18, .11);
      --shadow-soft: 0 8px 20px rgba(23, 20, 18, .08);
      --radius: 8px;
      --radius-sm: 6px;
      --container: 1180px;
    }

    * { 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(--ink);
      background: var(--paper);
      line-height: 1.72;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
    img { max-width: 100%; display: block; }
    button, input { font: inherit; }
    button:focus-visible, a:focus-visible, input:focus-visible {
      outline: 3px solid rgba(229, 72, 63, .28);
      outline-offset: 3px;
    }

    .container-xl { max-width: var(--container); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1020;
      background: rgba(23, 20, 18, .96);
      color: #fffaf2;
      border-bottom: 1px solid rgba(255, 250, 242, .12);
      box-shadow: 0 12px 24px rgba(23, 20, 18, .16);
      backdrop-filter: blur(12px);
    }
    .header-inner { padding: 12px 12px 10px; }
    .brand-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .brand-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 900;
      font-size: 18px;
      white-space: nowrap;
    }
    .brand:hover { color: #fff; transform: translateY(-1px); }
    .brand small {
      display: block;
      font-size: 11px;
      color: rgba(255, 250, 242, .66);
      font-weight: 700;
      line-height: 1;
      margin-top: 2px;
    }
    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: var(--radius-sm);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--accent);
      color: #fff;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,.2);
      flex: 0 0 34px;
    }
    .badge-age {
      display: inline-flex;
      align-items: center;
      height: 24px;
      padding: 0 8px;
      border-radius: 99px;
      background: rgba(255, 184, 77, .16);
      border: 1px solid rgba(255, 184, 77, .36);
      color: #ffd08a;
      font-size: 12px;
      font-weight: 800;
    }
    .brand-note { color: rgba(255, 250, 242, .64); font-size: 13px; white-space: nowrap; }
    .site-search {
      width: min(410px, 38vw);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .mobile-search {
      width: 100%;
      margin-top: 10px;
    }
    .search-input {
      height: 40px;
      border: 1px solid rgba(255, 250, 242, .18);
      border-radius: var(--radius-sm);
      background: rgba(255, 250, 242, .1);
      color: #fffaf2;
      box-shadow: none !important;
      padding: 0 13px;
    }
    .search-input::placeholder { color: rgba(255, 250, 242, .55); }
    .search-input:focus {
      border-color: rgba(255, 184, 77, .8);
      background: rgba(255, 250, 242, .14);
      color: #fff;
    }
    .search-btn {
      height: 40px;
      border: 0;
      border-radius: var(--radius-sm);
      background: var(--accent-2);
      color: #211b18;
      font-weight: 900;
      padding: 0 14px;
      white-space: nowrap;
    }
    .search-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(255, 184, 77, .22); }
    .navbar-toggler {
      width: 42px;
      height: 40px;
      border: 1px solid rgba(255,255,255,.18);
      color: #fffaf2;
      border-radius: var(--radius-sm);
      padding: 0;
    }
    .channel-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 11px;
      border-top: 1px solid rgba(255, 250, 242, .1);
      padding-top: 10px;
    }
    .nav-list, .trend-strip {
      display: flex;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .nav-list::-webkit-scrollbar, .trend-strip::-webkit-scrollbar { display: none; }
    .nav-pill, .trend-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 34px;
      border-radius: 99px;
      padding: 0 12px;
      color: rgba(255, 250, 242, .78);
      border: 1px solid rgba(255, 250, 242, .13);
      background: rgba(255, 250, 242, .05);
      font-size: 14px;
      white-space: nowrap;
      font-weight: 750;
    }
    .nav-pill:hover, .trend-chip:hover {
      color: #fff;
      border-color: rgba(255, 184, 77, .46);
      background: rgba(255, 184, 77, .12);
      transform: translateY(-1px);
    }
    .nav-pill.active {
      background: #fffaf2;
      color: var(--ink);
      border-color: #fffaf2;
    }
    .trend-chip { font-size: 13px; min-height: 32px; color: #ffd08a; }

    .offcanvas {
      background: var(--deep);
      color: #fffaf2;
    }
    .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.12); }
    .drawer-links {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }
    .drawer-links a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      font-weight: 800;
    }
    .drawer-links a.active { background: var(--accent-2); color: var(--ink); border-color: var(--accent-2); }
    .drawer-hot {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
    }

    .hero-coupon {
      min-height: calc(100vh - 118px);
      padding: 54px 0 42px;
      background:
        linear-gradient(180deg, rgba(33,27,24,.96), rgba(33,27,24,.88)),
        radial-gradient(circle at 70% 20%, rgba(229,72,63,.24), transparent 34%);
      color: #fffaf2;
      display: flex;
      align-items: center;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(340px, .98fr);
      gap: 34px;
      align-items: center;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      padding: 0 11px;
      border-radius: 99px;
      border: 1px solid rgba(255, 184, 77, .38);
      background: rgba(255, 184, 77, .12);
      color: #ffd08a;
      font-weight: 900;
      font-size: 13px;
      margin-bottom: 18px;
    }
    h1 {
      font-size: 48px;
      line-height: 1.16;
      font-weight: 950;
      margin: 0 0 18px;
      letter-spacing: 0;
    }
    .hero-copy {
      color: rgba(255, 250, 242, .78);
      font-size: 18px;
      max-width: 640px;
      margin: 0 0 24px;
    }
    .hero-actions, .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }
    .btn-main, .btn-ghost, .btn-soft {
      min-height: 46px;
      border-radius: var(--radius-sm);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 18px;
      font-weight: 900;
      border: 1px solid transparent;
      cursor: pointer;
    }
    .btn-main {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 12px 22px rgba(229,72,63,.24);
    }
    .btn-main:hover { color: #fff; transform: translateY(-2px); background: #f15147; box-shadow: 0 16px 28px rgba(229,72,63,.28); }
    .btn-ghost {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.18);
      color: #fffaf2;
    }
    .btn-ghost:hover { color: #fff; transform: translateY(-2px); border-color: rgba(255,184,77,.45); background: rgba(255,184,77,.12); }
    .btn-soft {
      background: #fff4df;
      border-color: #f0d7b5;
      color: var(--ink);
    }
    .btn-soft:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-soft); }

    .coupon-wall {
      display: grid;
      gap: 14px;
      background: rgba(255,250,242,.08);
      border: 1px solid rgba(255,250,242,.16);
      padding: 16px;
      border-radius: 10px;
      box-shadow: 0 20px 46px rgba(0,0,0,.18);
    }
    .coupon-main {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      background: #fffaf2;
      color: var(--ink);
      padding: 24px;
      min-height: 210px;
      display: grid;
      align-content: space-between;
      border-left: 7px solid var(--accent);
    }
    .coupon-main:before, .coupon-main:after {
      content: "";
      position: absolute;
      right: 86px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--deep);
    }
    .coupon-main:before { top: -12px; }
    .coupon-main:after { bottom: -12px; }
    .coupon-main strong {
      display: block;
      font-size: 28px;
      line-height: 1.22;
      margin-bottom: 8px;
      font-weight: 950;
    }
    .coupon-main p { margin: 0; color: var(--muted); }
    .coupon-code {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px dashed #d7c5af;
    }
    .coupon-code span {
      font-size: 13px;
      font-weight: 900;
      color: var(--accent);
      background: #ffe6df;
      border-radius: 99px;
      padding: 5px 10px;
      white-space: nowrap;
    }
    .mini-coupons {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .mini-coupon {
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: var(--radius);
      padding: 14px;
      min-height: 112px;
    }
    .mini-coupon b { display: block; color: #fff; margin-bottom: 6px; }
    .mini-coupon span { display: block; color: rgba(255,250,242,.65); font-size: 13px; }

    .section { padding: 58px 0; }
    .section.alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .section-head {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: end;
      margin-bottom: 24px;
    }
    .section-kicker {
      color: var(--accent);
      font-weight: 950;
      font-size: 13px;
      margin-bottom: 7px;
    }
    h2 {
      font-size: 30px;
      line-height: 1.25;
      margin: 0;
      font-weight: 950;
      letter-spacing: 0;
    }
    .section-summary {
      max-width: 520px;
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .overview-band {
      display: grid;
      grid-template-columns: 1.1fr repeat(3, minmax(0, .7fr));
      gap: 12px;
    }
    .overview-lead, .metric-box, .topic-card, .list-item, .faq-panel, .notice-card {
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
    }
    .overview-lead {
      padding: 22px;
      min-height: 184px;
    }
    .overview-lead h2 { font-size: 28px; margin-bottom: 10px; }
    .overview-lead p { color: var(--muted); margin: 0; }
    .metric-box {
      padding: 18px;
      min-height: 184px;
      display: grid;
      align-content: space-between;
    }
    .metric-icon {
      width: 38px;
      height: 38px;
      border-radius: var(--radius-sm);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fff0d3;
      color: #a75a00;
      font-size: 20px;
    }
    .metric-box b { display: block; font-size: 26px; line-height: 1; margin-top: 18px; }
    .metric-box span { color: var(--muted); font-size: 14px; }

    .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .tag-cloud a, .badge-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 99px;
      padding: 8px 12px;
      border: 1px solid #dfcdb8;
      background: #fffaf2;
      color: var(--ink-2);
      font-weight: 850;
      font-size: 14px;
    }
    .tag-cloud a:nth-child(3n) { background: #ffe9e6; border-color: #ffc7c0; color: #9d2d27; }
    .tag-cloud a:nth-child(4n) { background: #edf8f2; border-color: #c8e8d8; color: #1d6b4f; }
    .tag-cloud a:hover, .badge-chip:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-soft);
      border-color: var(--accent);
    }

    .content-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 24px;
      align-items: start;
    }
    .vertical-list {
      display: grid;
      gap: 14px;
    }
    .list-item {
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      padding: 14px;
    }
    .thumb-box {
      width: 112px;
      aspect-ratio: 1 / 1;
      border-radius: var(--radius-sm);
      background:
        linear-gradient(135deg, rgba(229,72,63,.92), rgba(255,184,77,.92)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 8px, transparent 8px 16px);
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 28px;
      box-shadow: inset 0 -18px 28px rgba(0,0,0,.16);
    }
    .list-title {
      font-size: 18px;
      font-weight: 950;
      margin: 0 0 6px;
      line-height: 1.35;
    }
    .list-item p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
    .list-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 25px;
      border-radius: 99px;
      padding: 0 8px;
      background: #f6ead9;
      color: #6d5a48;
      font-size: 12px;
      font-weight: 800;
    }
    .item-action {
      min-width: 94px;
      height: 38px;
      border-radius: var(--radius-sm);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--ink);
      color: #fffaf2;
      font-weight: 900;
      padding: 0 12px;
      border: 1px solid var(--ink);
      white-space: nowrap;
    }
    .item-action:hover { color: #fff; transform: translateY(-2px); background: var(--accent); border-color: var(--accent); box-shadow: var(--shadow-soft); }

    .side-stack {
      display: grid;
      gap: 14px;
      position: sticky;
      top: 138px;
    }
    .notice-card { padding: 18px; }
    .notice-card h3 {
      font-size: 18px;
      margin: 0 0 12px;
      font-weight: 950;
    }
    .notice-card ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }
    .notice-card li {
      display: flex;
      gap: 9px;
      color: var(--muted);
      font-size: 14px;
    }
    .notice-card li i { color: var(--green); margin-top: 3px; }
    .topic-mini {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 0;
      border-top: 1px solid var(--line);
      font-weight: 850;
      color: var(--ink-2);
    }
    .topic-mini:first-of-type { border-top: 0; padding-top: 0; }
    .topic-mini span { color: var(--accent); font-size: 12px; font-weight: 950; }

    .steps-rail {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--panel);
      box-shadow: var(--shadow-soft);
    }
    .step-cell {
      padding: 20px;
      border-right: 1px solid var(--line);
      min-height: 150px;
    }
    .step-cell:last-child { border-right: 0; }
    .step-no {
      width: 34px;
      height: 34px;
      border-radius: var(--radius-sm);
      background: var(--ink);
      color: #fffaf2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 950;
      margin-bottom: 12px;
    }
    .step-cell b { display: block; font-size: 17px; margin-bottom: 5px; }
    .step-cell p { margin: 0; color: var(--muted); font-size: 14px; }

    .faq-wrap {
      display: grid;
      grid-template-columns: 360px minmax(0, 1fr);
      gap: 26px;
      align-items: start;
    }
    .faq-intro {
      background: var(--deep);
      color: #fffaf2;
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow);
    }
    .faq-intro h2 { margin-bottom: 10px; }
    .faq-intro p { color: rgba(255,250,242,.7); margin: 0; }
    .accordion {
      display: grid;
      gap: 10px;
    }
    .accordion-item {
      border: 1px solid var(--line) !important;
      border-radius: var(--radius) !important;
      overflow: hidden;
      background: var(--panel);
      box-shadow: var(--shadow-soft);
    }
    .accordion-button {
      padding: 17px 18px;
      font-weight: 950;
      color: var(--ink);
      background: #fff;
      box-shadow: none !important;
      line-height: 1.45;
    }
    .accordion-button:not(.collapsed) {
      color: var(--accent);
      background: #fff6e8;
    }
    .accordion-body {
      color: var(--muted);
      padding: 0 18px 18px;
      font-size: 15px;
    }

    .cta-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: center;
      background: var(--deep);
      color: #fffaf2;
      border-radius: 10px;
      padding: 30px;
      box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,.08);
    }
    .cta-panel h2 { margin-bottom: 8px; }
    .cta-panel p { margin: 0; color: rgba(255,250,242,.72); max-width: 700px; }

    .footer-shell {
      background: #151210;
      color: rgba(255, 250, 242, .72);
      padding: 40px 0 22px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.25fr .8fr 1fr;
      gap: 34px;
      padding-bottom: 28px;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .footer-brand strong {
      display: block;
      color: #fff;
      font-size: 20px;
      margin-bottom: 10px;
    }
    .footer-brand p, .footer-note { margin: 0; color: rgba(255,250,242,.66); font-size: 14px; }
    .footer-links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }
    .footer-links a {
      color: rgba(255,250,242,.72);
      font-size: 14px;
    }
    .footer-links a:hover { color: #ffd08a; transform: translateX(2px); }
    .footer-bar {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding-top: 18px;
      font-size: 13px;
      color: rgba(255,250,242,.5);
    }

    @media (max-width: 1199.98px) {
      .hero-grid { grid-template-columns: 1fr .92fr; }
      h1 { font-size: 42px; }
      .overview-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .overview-lead { grid-column: 1 / -1; }
    }

    @media (max-width: 991.98px) {
      .brand-note, .badge-age { display: none; }
      .channel-nav { align-items: flex-start; flex-direction: column; }
      .hero-coupon { min-height: auto; padding: 42px 0 34px; }
      .hero-grid, .content-layout, .faq-wrap, .cta-panel {
        grid-template-columns: 1fr;
      }
      .side-stack { position: static; }
      .steps-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .step-cell:nth-child(2) { border-right: 0; }
      .step-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
    }

    @media (max-width: 767.98px) {
      .header-inner { padding-left: 10px; padding-right: 10px; }
      .brand { font-size: 15px; }
      .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
      h1 { font-size: 34px; }
      .hero-copy { font-size: 16px; }
      .section { padding: 42px 0; }
      .section-head { display: grid; gap: 10px; }
      .mini-coupons, .overview-band, .steps-rail { grid-template-columns: 1fr; }
      .step-cell, .step-cell:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
      .step-cell:last-child { border-bottom: 0; }
      .list-item {
        grid-template-columns: 82px minmax(0, 1fr);
        align-items: start;
      }
      .thumb-box { width: 82px; }
      .item-action { grid-column: 1 / -1; width: 100%; }
      .coupon-code { align-items: flex-start; flex-direction: column; }
      .cta-actions { width: 100%; }
      .cta-actions a, .hero-actions a { width: 100%; }
      .footer-grid, .footer-bar { grid-template-columns: 1fr; display: grid; }
      .footer-links { grid-template-columns: 1fr; }
    }

    @media (max-width: 575.98px) {
      .container-xl { padding-left: 14px; padding-right: 14px; }
      h1 { font-size: 30px; }
      h2 { font-size: 24px; }
      .coupon-main { padding: 18px; }
      .coupon-main strong { font-size: 23px; }
      .overview-lead, .metric-box, .notice-card, .faq-intro, .cta-panel { padding: 18px; }
      .nav-pill, .trend-chip { font-size: 13px; padding: 0 10px; }
      .list-title { font-size: 16px; }
    }

/* roulang page: category1 */
:root{
      --bg:#f6f2ea;
      --bg-alt:#efe8dc;
      --panel:#fffaf2;
      --panel-soft:#f3eee5;
      --panel-dark:#141311;
      --text:#171412;
      --muted:#6b6257;
      --muted-soft:#8b8173;
      --border:#ddd4c6;
      --border-strong:#cdbfae;
      --brand:#111111;
      --accent:#d86f4b;
      --accent-strong:#b95533;
      --accent-2:#7a8663;
      --accent-3:#e7b564;
      --shadow:0 14px 40px rgba(20,16,12,.08);
      --shadow-hover:0 18px 48px rgba(20,16,12,.14);
      --radius:10px;
      --radius-sm:8px;
      --radius-xs:6px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      background:linear-gradient(180deg,#f7f3ed 0%,#f5efe6 36%,#f7f3ec 100%);
      color:var(--text);
      line-height:1.75;
      overflow-x:hidden;
      letter-spacing:0;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ul{padding-left:0;margin:0;list-style:none}
    p{margin-bottom:0}
    ::selection{background:rgba(216,111,75,.18)}
    :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

    .container-xl{max-width:1280px}
    .site-header{
      position:sticky;
      top:0;
      z-index:1030;
      background:rgba(17,17,17,.965);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .header-inner{padding:1rem 0 .8rem}
    .brand-line{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
    }
    .brand-wrap{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:.75rem;
      min-width:0;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:.75rem;
      color:#fff;
      font-weight:900;
      font-size:1.02rem;
      white-space:nowrap;
      transition:transform .18s ease,opacity .18s ease;
    }
    .brand:hover{transform:translateY(-1px);color:#fff}
    .brand small{
      display:block;
      color:var(--accent-3);
      font-size:.72rem;
      line-height:1.1;
      font-weight:700;
      margin-top:.1rem;
    }
    .brand-mark{
      width:40px;
      height:40px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:var(--accent);
      border:1px solid rgba(255,255,255,.08);
      color:#fff;
      box-shadow:0 8px 20px rgba(216,111,75,.25);
      flex:0 0 auto;
    }
    .badge-age{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:28px;
      padding:.18rem .58rem;
      border-radius:999px;
      background:rgba(231,181,100,.16);
      border:1px solid rgba(231,181,100,.26);
      color:#f5d89d;
      font-size:.78rem;
      font-weight:800;
      letter-spacing:0;
      flex:0 0 auto;
    }
    .brand-note{
      color:rgba(255,255,255,.72);
      font-size:.88rem;
      line-height:1.4;
      flex:1 1 auto;
      min-width:180px;
    }
    .site-search{
      display:flex;
      align-items:center;
      gap:.55rem;
      min-width:320px;
      margin-left:auto;
    }
    .search-input{
      height:44px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.14);
      background:#fff;
      color:var(--text);
      padding:0 1rem;
      box-shadow:none;
    }
    .search-input::placeholder{color:#8a8177}
    .search-input:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 .18rem rgba(216,111,75,.12);
    }
    .search-btn{
      height:44px;
      padding:0 1rem;
      border-radius:10px;
      border:1px solid var(--accent);
      background:var(--accent);
      color:#fff;
      font-weight:800;
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
    }
    .search-btn:hover{
      background:var(--accent-strong);
      border-color:var(--accent-strong);
      transform:translateY(-1px);
      box-shadow:0 10px 18px rgba(216,111,75,.2);
    }
    .navbar-toggler{
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      color:#fff;
      min-height:44px;
      min-width:44px;
      border-radius:10px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
    }
    .navbar-toggler:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.1);
      border-color:rgba(255,255,255,.22);
      color:#fff;
    }
    .mobile-search{
      margin-top:.8rem;
      display:none;
    }
    .mobile-search .search-input{width:100%}
    .mobile-search .search-btn{width:100%;justify-content:center}

    .channel-nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.8rem 0 0;
    }
    .nav-list{
      display:flex;
      align-items:center;
      gap:.55rem;
      overflow-x:auto;
      scrollbar-width:none;
      flex:1 1 auto;
      min-width:0;
    }
    .nav-list::-webkit-scrollbar{display:none}
    .nav-pill{
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      padding:.56rem .9rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      color:rgba(255,255,255,.82);
      white-space:nowrap;
      font-weight:700;
      font-size:.94rem;
      transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
    }
    .nav-pill i{font-size:.92rem}
    .nav-pill:hover,
    .nav-pill.active{
      color:#111;
      background:#fff;
      border-color:#fff;
      transform:translateY(-1px);
    }
    .trend-strip{
      display:flex;
      align-items:center;
      gap:.5rem;
      flex-wrap:wrap;
      justify-content:flex-end;
      flex:0 0 auto;
    }
    .trend-chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.4rem .7rem;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.06);
      color:rgba(255,255,255,.78);
      font-size:.86rem;
      font-weight:600;
      white-space:nowrap;
      transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
    }
    .trend-chip:hover{
      background:rgba(255,255,255,.14);
      color:#fff;
      border-color:rgba(255,255,255,.16);
      transform:translateY(-1px);
    }

    .site-drawer{
      background:#111111;
      color:#fff;
      width:min(92vw,390px);
    }
    .site-drawer .offcanvas-header,
    .site-drawer .offcanvas-body{
      border-color:rgba(255,255,255,.08);
    }
    .site-drawer .search-input{
      background:#fff;
      color:var(--text);
      border-color:#fff;
    }
    .site-drawer .search-btn{
      width:100%;
    }
    .drawer-section{
      padding:1rem 0;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .drawer-links{
      display:grid;
      gap:.55rem;
    }
    .drawer-links .nav-pill,
    .drawer-links .trend-chip{
      justify-content:flex-start;
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.1);
      color:rgba(255,255,255,.82);
    }
    .drawer-links .nav-pill.active,
    .drawer-links .nav-pill:hover{
      background:#fff;
      color:#111;
      border-color:#fff;
    }

    .hero-band{
      padding:2rem 0 1rem;
      background:linear-gradient(180deg,#f8f4ee 0%,#f5efe6 100%);
      border-bottom:1px solid var(--border);
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.18fr .92fr;
      gap:1.25rem;
      align-items:stretch;
    }
    .hero-copy,
    .hero-panel,
    .featured-card,
    .sidebar-panel,
    .faq-shell,
    .cta-shell,
    .filter-shell{
      box-shadow:var(--shadow);
    }
    .hero-copy{
      background:var(--panel);
      border:1px solid var(--border);
      border-top:4px solid var(--accent);
      border-radius:calc(var(--radius) + 2px);
      padding:2rem;
      position:relative;
      overflow:hidden;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.38rem;
      padding:.32rem .72rem;
      border-radius:999px;
      background:rgba(216,111,75,.12);
      color:var(--accent-strong);
      font-size:.84rem;
      font-weight:800;
      white-space:nowrap;
    }
    .eyebrow.dark{
      background:rgba(255,255,255,.08);
      color:#fff;
    }
    .hero-copy h1{
      font-size:2.35rem;
      line-height:1.16;
      margin:.95rem 0 .85rem;
      font-weight:900;
      letter-spacing:0;
    }
    .hero-copy p{
      color:var(--muted);
      font-size:1.01rem;
      line-height:1.85;
      max-width:44rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      margin:1.2rem 0 1rem;
    }
    .action-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.42rem;
      min-height:46px;
      padding:0 1rem;
      border-radius:10px;
      border:1px solid var(--border);
      background:#fff;
      color:var(--text);
      font-weight:800;
      transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
    }
    .action-btn:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow-hover);
    }
    .action-btn.primary{
      background:var(--accent);
      border-color:var(--accent);
      color:#fff;
    }
    .action-btn.primary:hover{
      background:var(--accent-strong);
      border-color:var(--accent-strong);
      color:#fff;
    }
    .action-btn.ghost{
      background:var(--brand);
      border-color:var(--brand);
      color:#fff;
    }
    .action-btn.ghost:hover{
      background:#1c1916;
      color:#fff;
    }
    .action-btn.light{
      background:var(--panel-soft);
      border-color:var(--border);
      color:var(--text);
    }
    .action-btn.light:hover{
      background:#fff;
      color:var(--text);
    }
    .point-row{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }
    .point-chip{
      display:inline-flex;
      align-items:center;
      gap:.36rem;
      padding:.42rem .72rem;
      border-radius:999px;
      background:var(--bg-alt);
      border:1px solid var(--border);
      color:var(--muted);
      font-size:.86rem;
      font-weight:600;
    }

    .hero-panel{
      background:var(--panel-dark);
      color:#fff;
      border-radius:calc(var(--radius) + 2px);
      border:1px solid rgba(255,255,255,.08);
      padding:1.25rem;
      display:flex;
      flex-direction:column;
      gap:1rem;
      position:relative;
      overflow:hidden;
    }
    .panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      font-weight:900;
      font-size:1rem;
    }
    .panel-head span{
      color:rgba(255,255,255,.66);
      font-size:.84rem;
      font-weight:600;
    }
    .progress-wrap{
      display:grid;
      gap:.45rem;
    }
    .progress-label{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.7rem;
      font-size:.88rem;
      color:rgba(255,255,255,.78);
      font-weight:600;
    }
    .progress-track{
      height:10px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(255,255,255,.1);
    }
    .progress-track span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--accent) 0%,var(--accent-3) 100%);
    }
    .system-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.75rem;
    }
    .system-tile{
      min-height:92px;
      padding:.85rem;
      border-radius:10px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.07);
    }
    .system-tile strong{
      display:block;
      font-size:.92rem;
      margin-bottom:.25rem;
    }
    .system-tile span{
      display:block;
      color:rgba(255,255,255,.72);
      font-size:.84rem;
      line-height:1.55;
    }
    .mini-tip{
      padding:.85rem .9rem;
      border-radius:10px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      color:rgba(255,255,255,.76);
      font-size:.9rem;
      line-height:1.65;
    }

    .filter-band{
      margin-top:-.75rem;
      padding:0 0 1rem;
      position:relative;
      z-index:2;
    }
    .filter-shell{
      background:var(--panel);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:1rem 1.1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
    }
    .filter-left,
    .filter-right{
      display:flex;
      align-items:center;
      gap:.7rem;
      flex-wrap:wrap;
    }
    .filter-label{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      font-size:.84rem;
      color:var(--muted);
      font-weight:800;
      white-space:nowrap;
    }
    .filter-label i{color:var(--accent)}
    .filter-chips,
    .sort-chips{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
    }
    .filter-chip,
    .sort-chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.45rem .75rem;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--bg);
      color:var(--muted);
      font-weight:700;
      font-size:.88rem;
      transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
      white-space:nowrap;
    }
    .filter-chip:hover,
    .sort-chip:hover,
    .sort-chip.active{
      border-color:var(--accent);
      background:rgba(216,111,75,.08);
      color:var(--accent-strong);
      transform:translateY(-1px);
    }

    .content-band{
      padding:1rem 0 1.4rem;
    }
    .featured-card{
      background:linear-gradient(180deg,#fffaf2 0%,#fff 100%);
      border:1px solid var(--border);
      border-top:4px solid var(--accent);
      border-radius:calc(var(--radius) + 2px);
      padding:1.35rem;
      position:relative;
      overflow:hidden;
    }
    .featured-tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.34rem .65rem;
      border-radius:999px;
      background:rgba(216,111,75,.12);
      color:var(--accent-strong);
      font-size:.82rem;
      font-weight:800;
      white-space:nowrap;
    }
    .featured-card h2{
      font-size:1.6rem;
      line-height:1.3;
      margin:.78rem 0 .65rem;
      font-weight:900;
    }
    .featured-card p{
      color:var(--muted);
      line-height:1.85;
    }
    .featured-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin:1rem 0;
    }
    .meta-chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.34rem .6rem;
      border-radius:999px;
      background:var(--panel-soft);
      border:1px solid var(--border);
      color:var(--muted);
      font-size:.8rem;
      font-weight:700;
      white-space:nowrap;
    }
    .featured-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
    }
    .featured-checks{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:.55rem;
      margin-top:1rem;
    }
    .featured-checks span{
      display:inline-flex;
      align-items:center;
      gap:.38rem;
      padding:.5rem .65rem;
      border-radius:10px;
      background:var(--bg);
      border:1px solid var(--border);
      color:var(--muted);
      font-size:.84rem;
      font-weight:700;
      min-height:42px;
    }
    .featured-checks i{color:var(--accent-2)}

    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:1rem;
      margin:1.2rem 0 .85rem;
    }
    .section-head h2{
      font-size:1.4rem;
      line-height:1.25;
      margin:0;
      font-weight:900;
    }
    .section-head p{
      color:var(--muted);
      font-size:.92rem;
      line-height:1.7;
    }

    .update-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.75rem;
    }
    .update-card{
      display:grid;
      grid-template-columns:140px 1fr;
      gap:.9rem;
      padding:.85rem;
      border-radius:var(--radius);
      background:var(--panel);
      border:1px solid var(--border);
      box-shadow:0 10px 24px rgba(23,18,13,.04);
      transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
    }
    .update-card:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow-hover);
      border-color:var(--border-strong);
    }
    .update-thumb{
      min-height:150px;
      border-radius:10px;
      padding:.85rem;
      background:#151311;
      color:#fff;
      border:1px solid rgba(255,255,255,.04);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:.7rem;
    }
    .thumb-badge{
      display:inline-flex;
      align-items:center;
      width:fit-content;
      padding:.28rem .55rem;
      border-radius:999px;
      background:rgba(255,255,255,.1);
      font-size:.74rem;
      font-weight:800;
      white-space:nowrap;
    }
    .thumb-screen{
      display:grid;
      gap:.45rem;
    }
    .thumb-line{
      height:10px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
    }
    .thumb-line.short{width:64%}
    .thumb-line.mid{width:82%}
    .thumb-line.long{width:100%}
    .thumb-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.45rem;
    }
    .thumb-mini{
      height:32px;
      border-radius:8px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.05);
    }
    .update-body{
      display:flex;
      flex-direction:column;
      gap:.65rem;
      justify-content:space-between;
    }
    .update-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.5rem;
      font-size:.82rem;
      color:var(--muted);
    }
    .update-tag{
      display:inline-flex;
      align-items:center;
      gap:.3rem;
      padding:.26rem .55rem;
      border-radius:999px;
      background:rgba(122,134,99,.14);
      color:var(--accent-2);
      font-weight:800;
      white-space:nowrap;
    }
    .update-body h3{
      font-size:1.08rem;
      line-height:1.45;
      margin:0;
      font-weight:900;
    }
    .update-body p{
      color:var(--muted);
      line-height:1.75;
      font-size:.94rem;
    }
    .update-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
    }
    .update-meta span{
      display:inline-flex;
      align-items:center;
      gap:.3rem;
      padding:.3rem .55rem;
      border-radius:999px;
      background:var(--bg-alt);
      border:1px solid var(--border);
      color:var(--muted);
      font-size:.8rem;
      font-weight:700;
    }
    .update-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
    }
    .text-link{
      display:inline-flex;
      align-items:center;
      gap:.3rem;
      color:var(--accent-strong);
      font-weight:800;
      white-space:nowrap;
      transition:transform .18s ease,color .18s ease;
    }
    .text-link:hover{
      color:var(--accent);
      transform:translateY(-1px);
    }
    .page-nav{
      display:flex;
      justify-content:center;
      margin:1.3rem 0 0;
    }
    .pagination{
      gap:.4rem;
      flex-wrap:wrap;
    }
    .pagination .page-link{
      border-radius:10px;
      border:1px solid var(--border);
      background:var(--panel);
      color:var(--muted);
      padding:.55rem .82rem;
      font-weight:800;
      box-shadow:none;
      transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
    }
    .pagination .page-link:hover,
    .pagination .page-item.active .page-link{
      background:var(--accent);
      border-color:var(--accent);
      color:#fff;
      transform:translateY(-1px);
    }
    .pagination .page-item.disabled .page-link{
      background:var(--panel-soft);
      color:#aaa;
    }

    .sidebar-panel{
      background:var(--panel);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:1.1rem;
      margin-bottom:1rem;
    }
    .sidebar-panel h3{
      margin:0 0 .75rem;
      font-size:1rem;
      line-height:1.3;
      font-weight:900;
    }
    .chip-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }
    .rank-list{
      display:grid;
      gap:.65rem;
    }
    .rank-item{
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:.6rem;
      padding:.65rem .7rem;
      border-radius:10px;
      background:var(--bg);
      border:1px solid var(--border);
    }
    .rank-num{
      width:28px;
      height:28px;
      border-radius:8px;
      display:grid;
      place-items:center;
      background:rgba(216,111,75,.12);
      color:var(--accent-strong);
      font-weight:900;
      font-size:.85rem;
      flex:0 0 auto;
    }
    .rank-copy strong{
      display:block;
      font-size:.92rem;
      line-height:1.25;
    }
    .rank-copy span{
      display:block;
      font-size:.8rem;
      color:var(--muted);
      line-height:1.45;
    }
    .rank-meta{
      font-size:.78rem;
      color:var(--muted);
      font-weight:800;
      white-space:nowrap;
    }
    .mini-channel{
      display:grid;
      gap:.7rem;
    }
    .mini-card{
      padding:.8rem .85rem;
      border-radius:10px;
      background:var(--bg);
      border:1px solid var(--border);
    }
    .mini-card strong{
      display:block;
      font-size:.93rem;
      margin-bottom:.2rem;
      line-height:1.35;
    }
    .mini-card p{
      color:var(--muted);
      font-size:.84rem;
      line-height:1.55;
    }

    .faq-band{
      padding:1rem 0 1.5rem;
    }
    .faq-shell{
      background:var(--panel);
      border:1px solid var(--border);
      border-radius:calc(var(--radius) + 2px);
      padding:1rem 1.1rem;
    }
    .faq-shell .section-head{
      margin-top:0;
    }
    .custom-accordion{
      display:grid;
      gap:.7rem;
    }
    .custom-accordion .accordion-item{
      border:1px solid var(--border);
      border-radius:10px;
      overflow:hidden;
      background:var(--bg);
    }
    .custom-accordion .accordion-button{
      background:var(--bg);
      color:var(--text);
      font-weight:900;
      box-shadow:none;
      padding:1rem 1.1rem;
    }
    .custom-accordion .accordion-button:not(.collapsed){
      background:rgba(216,111,75,.07);
      color:var(--text);
    }
    .custom-accordion .accordion-button:focus{
      box-shadow:0 0 0 .18rem rgba(216,111,75,.12);
    }
    .custom-accordion .accordion-body{
      padding:0 1.1rem 1rem;
      color:var(--muted);
      line-height:1.8;
    }

    .cta-band{
      padding:1rem 0 2rem;
    }
    .cta-shell{
      background:var(--panel-dark);
      color:#fff;
      border-radius:calc(var(--radius) + 2px);
      border:1px solid rgba(255,255,255,.08);
      padding:1.4rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .cta-copy h2{
      font-size:1.55rem;
      line-height:1.3;
      margin:.5rem 0 .5rem;
      font-weight:900;
      letter-spacing:0;
    }
    .cta-copy p{
      color:rgba(255,255,255,.72);
      line-height:1.8;
      max-width:42rem;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      justify-content:flex-end;
    }
    .action-btn.secondary{
      background:transparent;
      border-color:rgba(255,255,255,.18);
      color:#fff;
    }
    .action-btn.secondary:hover{
      background:rgba(255,255,255,.08);
      border-color:#fff;
      color:#fff;
    }

    .footer-shell{
      background:#111111;
      color:#fff;
      padding:1.5rem 0 1rem;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.1fr .8fr .9fr;
      gap:1rem;
      padding-bottom:1rem;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .footer-brand strong,
    .footer-grid strong{
      font-size:.98rem;
      line-height:1.3;
    }
    .footer-brand p,
    .footer-note{
      margin:.75rem 0 0;
      color:rgba(255,255,255,.72);
      line-height:1.8;
      font-size:.92rem;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
    }
    .footer-links a{
      display:inline-flex;
      align-items:center;
      padding:.44rem .7rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      color:rgba(255,255,255,.82);
      font-size:.88rem;
      font-weight:700;
      transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
    }
    .footer-links a:hover{
      background:rgba(255,255,255,.12);
      color:#fff;
      transform:translateY(-1px);
    }
    .footer-bar{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
      padding-top:1rem;
      color:rgba(255,255,255,.58);
      font-size:.84rem;
    }

    @media (max-width: 1199.98px){
      .hero-copy h1{font-size:2.1rem}
      .update-card{grid-template-columns:120px 1fr}
    }
    @media (max-width: 991.98px){
      .brand-line,
      .channel-nav,
      .filter-shell,
      .cta-shell{
        display:flex;
        flex-direction:column;
        align-items:stretch;
      }
      .site-search{width:100%;min-width:0}
      .hero-grid,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .hero-copy h1{font-size:1.95rem}
      .update-grid{grid-template-columns:1fr}
      .update-card{grid-template-columns:1fr}
      .update-thumb{min-height:120px}
      .featured-checks{grid-template-columns:1fr}
      .cta-actions{justify-content:flex-start}
      .channel-nav{padding-top:.65rem}
      .trend-strip{justify-content:flex-start}
    }
    @media (max-width: 767.98px){
      .header-inner{padding:.85rem 0 .55rem}
      .brand-note{display:none}
      .mobile-search{display:flex;flex-direction:column}
      .hero-copy,
      .hero-panel,
      .featured-card,
      .sidebar-panel,
      .faq-shell,
      .cta-shell,
      .filter-shell{
        padding:1rem;
      }
      .hero-copy h1{font-size:1.7rem}
      .hero-copy p,
      .cta-copy p{
        font-size:.96rem;
      }
      .section-head{
        align-items:flex-start;
        flex-direction:column;
      }
      .section-head p{max-width:100%}
      .featured-card h2,
      .cta-copy h2{font-size:1.35rem}
      .update-body h3{font-size:1.02rem}
      .nav-list{width:100%}
      .cta-shell{padding:1rem}
    }
    @media (max-width: 575.98px){
      .hero-actions,
      .featured-actions,
      .cta-actions,
      .update-actions,
      .footer-links{
        gap:.45rem;
      }
      .action-btn,
      .search-btn{
        width:100%;
        justify-content:center;
      }
      .site-search{
        flex-direction:column;
      }
      .rank-item{
        grid-template-columns:auto 1fr;
      }
      .rank-meta{
        grid-column:2;
        justify-self:start;
      }
    }