/* roulang page: index */
:root {
      --bg: #160f16;
      --bg-deep: #0f0a10;
      --bg-soft: #21151f;
      --panel: #2a1a27;
      --panel-2: #352030;
      --paper: #f6efed;
      --text: #fff7f5;
      --muted: #c9b7bd;
      --muted-2: #9f8e95;
      --line: rgba(255, 232, 229, .14);
      --line-strong: rgba(255, 232, 229, .28);
      --primary: #b63153;
      --primary-2: #d84d64;
      --accent: #ff7a68;
      --gold: #e7b86a;
      --green: #6cc59b;
      --danger: #ff5e65;
      --radius: 8px;
      --radius-sm: 6px;
      --shadow: 0 18px 44px rgba(10, 5, 9, .34);
      --shadow-soft: 0 10px 26px rgba(10, 5, 9, .22);
      --container: 1220px;
      --focus: 0 0 0 .22rem rgba(255, 122, 104, .34);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 20% -10%, rgba(182, 49, 83, .22), transparent 32rem),
        linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 42%, #1c1119 100%);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
      font-size: 16px;
      line-height: 1.7;
      letter-spacing: 0;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease;
    }

    a:hover {
      color: var(--accent);
    }

    img {
      max-width: 100%;
      display: block;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: none;
      box-shadow: var(--focus);
    }

    .site-container {
      width: min(100% - 32px, var(--container));
      margin-inline: auto;
    }

    .skip-link {
      position: absolute;
      left: 16px;
      top: -60px;
      z-index: 2000;
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      background: var(--accent);
      color: #240b13;
      font-weight: 800;
    }

    .skip-link:focus {
      top: 12px;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1020;
      border-bottom: 1px solid var(--line);
      background: rgba(16, 10, 16, .92);
      backdrop-filter: blur(18px);
    }

    .search-nav {
      min-height: 76px;
      display: grid;
      grid-template-columns: auto minmax(320px, 1fr) auto auto;
      gap: 18px;
      align-items: center;
      padding: 14px 0;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: max-content;
      font-weight: 900;
      color: var(--text);
      line-height: 1.15;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      box-shadow: 0 10px 24px rgba(216, 77, 100, .28);
      font-weight: 900;
    }

    .brand-text {
      max-width: 210px;
      font-size: 15px;
      word-break: keep-all;
    }

    .nav-search {
      position: relative;
      display: flex;
      align-items: center;
      min-width: 0;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: rgba(255, 247, 245, .08);
      overflow: hidden;
      transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .nav-search:focus-within {
      border-color: rgba(255, 122, 104, .72);
      background: rgba(255, 247, 245, .12);
      box-shadow: var(--focus);
    }

    .search-icon {
      width: 42px;
      flex: 0 0 42px;
      text-align: center;
      color: var(--muted);
      font-size: 18px;
    }

    .nav-search label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
    }

    .nav-search input {
      min-width: 0;
      width: 100%;
      height: 46px;
      border: 0;
      outline: 0;
      color: var(--text);
      background: transparent;
      padding: 0 8px 0 0;
    }

    .nav-search input::placeholder {
      color: rgba(255, 247, 245, .56);
    }

    .clear-btn {
      border: 0;
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      border-radius: 50%;
      color: var(--muted);
      background: transparent;
    }

    .clear-btn:hover {
      color: var(--text);
      background: rgba(255, 247, 245, .1);
    }

    .search-submit {
      height: 38px;
      margin-right: 4px;
      padding: 0 18px;
      border: 0;
      border-radius: 999px;
      color: #fff;
      background: var(--primary-2);
      font-weight: 800;
      white-space: nowrap;
    }

    .search-submit:hover {
      background: var(--accent);
      color: #23080f;
      transform: translateY(-1px);
    }

    .nav-links {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .nav-link-custom {
      padding: 10px 12px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .nav-link-custom:hover,
    .nav-link-custom.active {
      color: var(--text);
      background: rgba(216, 77, 100, .18);
    }

    .nav-tools {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .tool-btn,
    .mobile-toggle {
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      color: var(--text);
      background: rgba(255, 247, 245, .06);
    }

    .tool-btn:hover,
    .mobile-toggle:hover {
      border-color: rgba(255, 122, 104, .55);
      background: rgba(255, 122, 104, .16);
      transform: translateY(-1px);
    }

    .mobile-toggle {
      display: none;
    }

    .mobile-panel {
      display: none;
      padding: 0 0 16px;
      border-top: 1px solid var(--line);
    }

    .btn-main,
    .btn-soft,
    .btn-line {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 10px 18px;
      border-radius: 999px;
      font-weight: 850;
      border: 1px solid transparent;
      transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    }

    .btn-main {
      color: #fff;
      background: var(--primary-2);
      box-shadow: 0 10px 24px rgba(216, 77, 100, .24);
    }

    .btn-main:hover {
      color: #23080f;
      background: var(--accent);
      transform: translateY(-2px);
    }

    .btn-soft {
      color: var(--text);
      background: rgba(255, 247, 245, .1);
      border-color: var(--line);
    }

    .btn-soft:hover {
      color: var(--text);
      background: rgba(255, 247, 245, .16);
      border-color: rgba(255, 122, 104, .42);
      transform: translateY(-2px);
    }

    .btn-line {
      color: var(--text);
      background: transparent;
      border-color: var(--line-strong);
    }

    .btn-line:hover {
      color: var(--accent);
      border-color: rgba(255, 122, 104, .62);
      transform: translateY(-2px);
    }

    .badge-soft {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      padding: 6px 10px;
      border: 1px solid rgba(255, 122, 104, .22);
      border-radius: 999px;
      color: #ffd5ce;
      background: rgba(255, 122, 104, .1);
      font-size: 13px;
      font-weight: 750;
    }

    .section {
      padding: 72px 0;
    }

    .section-tight {
      padding: 52px 0;
    }

    .section-light {
      color: #2a171e;
      background: var(--paper);
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 28px;
    }

    .section-title {
      margin: 0 0 8px;
      font-size: clamp(24px, 3vw, 36px);
      line-height: 1.22;
      font-weight: 950;
    }

    .section-desc {
      max-width: 760px;
      margin: 0;
      color: var(--muted);
    }

    .section-light .section-desc {
      color: #6f5a62;
    }

    .hero {
      position: relative;
      min-height: 640px;
      display: grid;
      align-items: center;
      padding: 72px 0 48px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(15, 10, 16, .18), rgba(15, 10, 16, .88)),
        linear-gradient(115deg, rgba(15, 10, 16, .78), rgba(88, 30, 48, .44)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='760' viewBox='0 0 1400 760'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop stop-color='%2359273e'/%3E%3Cstop offset='.55' stop-color='%23241625'/%3E%3Cstop offset='1' stop-color='%23b63153'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1400' height='760' fill='url(/%23g)'/%3E%3Cpath d='M110 560C250 380 390 350 540 450s290 132 430 10 222-198 370-118v418H0V650c36-22 72-50 110-90Z' fill='%23120b12' fill-opacity='.55'/%3E%3Ccircle cx='1060' cy='210' r='170' fill='%23ff7a68' fill-opacity='.16'/%3E%3Cpath d='M820 120c88 30 126 94 116 190-8 74-62 142-132 168-84 32-178 4-226-67 92 10 163-18 210-82 42-56 52-126 32-209Z' fill='%23f6efed' fill-opacity='.13'/%3E%3Cpath d='M520 160c72 62 92 138 60 228-30 84-100 132-190 144 48-82 58-154 30-216-22-50-62-91-120-124 72-40 146-50 220-32Z' fill='%23e7b86a' fill-opacity='.12'/%3E%3C/svg%3E");
      background-size: cover;
      background-position: center;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 110px;
      background: linear-gradient(180deg, transparent, var(--bg));
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      max-width: 920px;
      margin: 0 auto;
      text-align: center;
    }

    .hero h1 {
      margin: 18px auto 18px;
      max-width: 900px;
      font-size: clamp(34px, 6vw, 68px);
      line-height: 1.08;
      font-weight: 1000;
    }

    .hero-lead {
      max-width: 780px;
      margin: 0 auto 26px;
      color: rgba(255, 247, 245, .82);
      font-size: 17px;
    }

    .hero-search {
      max-width: 760px;
      margin: 0 auto 18px;
      display: flex;
      align-items: center;
      border: 1px solid rgba(255, 247, 245, .24);
      border-radius: 999px;
      background: rgba(18, 10, 16, .72);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .hero-search input {
      height: 60px;
      border: 0;
      flex: 1 1 auto;
      min-width: 0;
      color: var(--text);
      background: transparent;
      outline: 0;
      padding: 0 12px;
    }

    .hero-search input::placeholder {
      color: rgba(255, 247, 245, .58);
    }

    .hero-search button {
      min-width: 112px;
      height: 50px;
      margin-right: 5px;
      border: 0;
      border-radius: 999px;
      color: #fff;
      background: var(--primary-2);
      font-weight: 900;
    }

    .hero-search button:hover {
      color: #23080f;
      background: var(--accent);
    }

    .quick-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 18px auto 24px;
    }

    .quick-tags a {
      padding: 8px 12px;
      border: 1px solid rgba(255, 247, 245, .16);
      border-radius: 999px;
      color: rgba(255, 247, 245, .82);
      background: rgba(255, 247, 245, .08);
      font-size: 14px;
      font-weight: 750;
    }

    .quick-tags a:hover {
      color: #23080f;
      background: var(--accent);
      border-color: var(--accent);
    }

    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      max-width: 760px;
      margin: 0 auto;
    }

    .metric {
      min-height: 86px;
      padding: 14px;
      border: 1px solid rgba(255, 247, 245, .13);
      border-radius: var(--radius);
      background: rgba(18, 10, 16, .46);
    }

    .metric strong {
      display: block;
      color: #fff;
      font-size: 24px;
      line-height: 1.15;
    }

    .metric span {
      color: rgba(255, 247, 245, .68);
      font-size: 13px;
    }

    .directory-layout {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }

    .filter-index {
      position: sticky;
      top: 98px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 247, 245, .06);
    }

    .filter-index h3 {
      margin: 0 0 14px;
      font-size: 16px;
      font-weight: 900;
    }

    .filter-index a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      color: var(--muted);
      font-weight: 750;
    }

    .filter-index a:hover,
    .filter-index a.active {
      color: #fff;
      background: rgba(216, 77, 100, .2);
    }

    .directory-list {
      display: grid;
      gap: 14px;
    }

    .directory-row {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 247, 245, .055);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .directory-row:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 122, 104, .42);
      background: rgba(255, 247, 245, .085);
    }

    .row-num {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), #643048);
      font-weight: 950;
    }

    .directory-row h3 {
      margin: 0 0 6px;
      font-size: 19px;
      font-weight: 930;
    }

    .directory-row p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .tag-line {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 10px;
    }

    .mini-tag {
      display: inline-flex;
      padding: 4px 8px;
      border-radius: 999px;
      color: #ffd8d3;
      background: rgba(255, 122, 104, .12);
      font-size: 12px;
      font-weight: 760;
    }

    .row-meta {
      min-width: 132px;
      color: var(--muted-2);
      text-align: right;
      font-size: 13px;
    }

    .recommend-band {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 18px;
    }

    .feature-card,
    .recommend-card,
    .entry-card,
    .trust-item,
    .reward-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 247, 245, .06);
      overflow: hidden;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .feature-card:hover,
    .recommend-card:hover,
    .entry-card:hover,
    .trust-item:hover,
    .reward-card:hover {
      transform: translateY(-3px);
      border-color: rgba(255, 122, 104, .44);
      background: rgba(255, 247, 245, .09);
    }

    .safe-cover {
      min-height: 220px;
      background:
        linear-gradient(135deg, rgba(15, 10, 16, .24), rgba(15, 10, 16, .74)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='430' viewBox='0 0 900 430'%3E%3Crect width='900' height='430' fill='%23351f2e'/%3E%3Cpath d='M0 300c120-70 230-72 330-6 130 86 250 70 360-40 76-76 146-98 210-66v242H0Z' fill='%23120b12' fill-opacity='.72'/%3E%3Ccircle cx='690' cy='130' r='120' fill='%23ff7a68' fill-opacity='.24'/%3E%3Cpath d='M260 82c86 34 132 96 138 186-74 8-136-10-186-54-42-38-60-82-54-132 34-14 68-14 102 0Z' fill='%23f6efed' fill-opacity='.13'/%3E%3C/svg%3E");
      background-size: cover;
      background-position: center;
    }

    .feature-body,
    .recommend-body {
      padding: 20px;
    }

    .feature-body h3,
    .recommend-body h3 {
      margin: 0 0 10px;
      font-size: 22px;
      font-weight: 950;
    }

    .feature-body p,
    .recommend-body p {
      margin: 0 0 14px;
      color: var(--muted);
    }

    .side-stack {
      display: grid;
      gap: 18px;
    }

    .recommend-card {
      display: grid;
      grid-template-columns: 138px minmax(0, 1fr);
      min-height: 164px;
    }

    .thumb {
      min-height: 100%;
      background:
        linear-gradient(135deg, rgba(182, 49, 83, .42), rgba(15, 10, 16, .78)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 14px);
    }

    .news-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 24px;
    }

    .news-list {
      display: grid;
      gap: 2px;
      border: 1px solid rgba(42, 23, 30, .13);
      border-radius: var(--radius);
      overflow: hidden;
      background: #fffaf8;
    }

    .news-item {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 16px;
      color: #2a171e;
      background: #fffaf8;
      border-bottom: 1px solid rgba(42, 23, 30, .1);
    }

    .news-item:last-child {
      border-bottom: 0;
    }

    .news-item:hover {
      color: var(--primary);
      background: #fff2ee;
    }

    .news-date {
      color: #876d75;
      font-size: 13px;
      font-weight: 800;
    }

    .news-title {
      min-width: 0;
      font-weight: 900;
    }

    .news-note {
      color: #876d75;
      font-size: 13px;
      white-space: nowrap;
    }

    .notice-box {
      padding: 20px;
      border-radius: var(--radius);
      color: #2a171e;
      background: #fffaf8;
      border: 1px solid rgba(42, 23, 30, .13);
    }

    .notice-box h3 {
      margin: 0 0 12px;
      font-size: 18px;
      font-weight: 950;
    }

    .notice-box p {
      margin: 0 0 14px;
      color: #6f5a62;
    }

    .entry-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .entry-card {
      padding: 18px;
      min-height: 150px;
    }

    .entry-icon {
      width: 42px;
      height: 42px;
      margin-bottom: 14px;
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      color: #23080f;
      background: var(--accent);
      font-weight: 950;
    }

    .entry-card h3 {
      margin: 0 0 8px;
      font-size: 17px;
      font-weight: 930;
    }

    .entry-card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .timeline {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: rgba(255, 247, 245, .055);
    }

    .timeline-step {
      position: relative;
      padding: 22px;
      border-right: 1px solid var(--line);
    }

    .timeline-step:last-child {
      border-right: 0;
    }

    .timeline-step strong {
      display: inline-flex;
      margin-bottom: 12px;
      padding: 5px 9px;
      border-radius: 999px;
      color: #23080f;
      background: var(--gold);
      font-size: 13px;
      font-weight: 950;
    }

    .timeline-step h3 {
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: 940;
    }

    .timeline-step p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .trust-strip {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
    }

    .trust-item {
      padding: 16px;
      text-align: center;
    }

    .trust-item span {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      margin: 0 auto 10px;
      border-radius: 999px;
      color: #23080f;
      background: var(--green);
      font-weight: 950;
    }

    .trust-item strong {
      display: block;
      margin-bottom: 4px;
      font-size: 15px;
    }

    .trust-item small {
      color: var(--muted);
    }

    .share-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: center;
      padding: 28px;
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(182, 49, 83, .5), rgba(53, 32, 48, .72)),
        rgba(255, 247, 245, .06);
      border: 1px solid rgba(255, 247, 245, .18);
      box-shadow: var(--shadow-soft);
    }

    .share-panel h2 {
      margin: 0 0 8px;
      font-size: clamp(23px, 3vw, 34px);
      font-weight: 950;
    }

    .share-panel p {
      margin: 0;
      color: rgba(255, 247, 245, .78);
    }

    .share-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }

    .accordion {
      --bs-accordion-bg: transparent;
      --bs-accordion-border-color: var(--line);
      --bs-accordion-border-radius: var(--radius);
      --bs-accordion-inner-border-radius: var(--radius);
      --bs-accordion-btn-color: var(--text);
      --bs-accordion-active-color: var(--text);
      --bs-accordion-active-bg: rgba(216, 77, 100, .18);
      --bs-accordion-btn-focus-box-shadow: var(--focus);
      --bs-accordion-color: var(--muted);
    }

    .accordion-item {
      overflow: hidden;
      margin-bottom: 10px;
      border: 1px solid var(--line) !important;
      border-radius: var(--radius) !important;
      background: rgba(255, 247, 245, .055);
    }

    .accordion-button {
      font-weight: 900;
      background: rgba(255, 247, 245, .04);
      box-shadow: none !important;
    }

    .accordion-button::after {
      filter: invert(1);
    }

    .accordion-body {
      color: var(--muted);
    }

    .site-footer {
      padding: 48px 0 24px;
      border-top: 1px solid var(--line);
      background: #100a10;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) .8fr .8fr;
      gap: 28px;
      margin-bottom: 28px;
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      font-weight: 950;
    }

    .footer-text {
      margin: 0;
      max-width: 560px;
      color: var(--muted);
    }

    .footer-col h3 {
      margin: 0 0 12px;
      font-size: 16px;
      font-weight: 940;
    }

    .footer-col a {
      display: block;
      width: fit-content;
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 14px;
    }

    .footer-col a:hover {
      color: var(--accent);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
      color: var(--muted-2);
      font-size: 13px;
    }

    .age-modal .modal-content {
      color: var(--text);
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: #1c1119;
      box-shadow: var(--shadow);
    }

    .age-modal .modal-header,
    .age-modal .modal-footer {
      border-color: var(--line);
    }

    .age-modal .modal-title {
      font-weight: 950;
    }

    .toast-custom {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 1080;
      display: none;
      max-width: 320px;
      padding: 12px 14px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      color: var(--text);
      background: rgba(28, 17, 25, .96);
      box-shadow: var(--shadow-soft);
    }

    .toast-custom.show {
      display: block;
    }

    @media (max-width: 1100px) {
      .search-nav {
        grid-template-columns: auto minmax(220px, 1fr) auto;
      }

      .nav-links {
        display: none;
      }

      .mobile-toggle {
        display: inline-grid;
      }

      .mobile-panel.show {
        display: block;
      }

      .mobile-panel .nav-links {
        display: flex;
        flex-wrap: wrap;
        margin-top: 12px;
      }

      .mobile-panel .nav-search {
        display: none;
      }

      .entry-grid,
      .timeline,
      .trust-strip {
        grid-template-columns: repeat(2, 1fr);
      }

      .timeline-step:nth-child(2) {
        border-right: 0;
      }

      .timeline-step {
        border-bottom: 1px solid var(--line);
      }

      .timeline-step:nth-child(3),
      .timeline-step:nth-child(4) {
        border-bottom: 0;
      }
    }

    @media (max-width: 900px) {
      .hero {
        min-height: 600px;
        padding-top: 54px;
      }

      .directory-layout,
      .recommend-band,
      .news-layout,
      .share-panel,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .filter-index {
        position: static;
      }

      .filter-scroll {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
      }

      .filter-index a {
        min-width: max-content;
      }

      .share-actions {
        justify-content: flex-start;
      }
    }

    @media (max-width: 720px) {
      .site-container {
        width: min(100% - 22px, var(--container));
      }

      .search-nav {
        grid-template-columns: auto auto;
        min-height: 64px;
      }

      .brand-text {
        max-width: 168px;
        font-size: 13px;
      }

      .search-nav > .nav-search,
      .nav-tools .tool-btn {
        display: none;
      }

      .mobile-panel .nav-search {
        display: flex;
        margin-top: 14px;
      }

      .hero {
        min-height: 570px;
        padding: 42px 0 34px;
      }

      .hero-search {
        border-radius: var(--radius);
      }

      .hero-search button {
        min-width: 86px;
        padding: 0 12px;
      }

      .hero-metrics {
        grid-template-columns: 1fr;
      }

      .section,
      .section-tight {
        padding: 48px 0;
      }

      .section-head {
        display: block;
      }

      .directory-row {
        grid-template-columns: 46px minmax(0, 1fr);
      }

      .row-num {
        width: 42px;
        height: 42px;
      }

      .row-meta {
        grid-column: 2;
        text-align: left;
        min-width: 0;
      }

      .recommend-card {
        grid-template-columns: 1fr;
      }

      .thumb {
        min-height: 150px;
      }

      .news-item {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .news-note {
        white-space: normal;
      }

      .entry-grid,
      .timeline,
      .trust-strip {
        grid-template-columns: 1fr;
      }

      .timeline-step {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .timeline-step:last-child {
        border-bottom: 0;
      }

      .footer-bottom {
        display: block;
      }

      .footer-bottom a {
        display: inline-block;
        margin-top: 10px;
      }
    }

    @media (max-width: 520px) {
      .brand-mark {
        width: 34px;
        height: 34px;
      }

      .hero h1 {
        font-size: 34px;
      }

      .hero-lead {
        font-size: 15px;
      }

      .quick-tags {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
      }

      .quick-tags a {
        min-width: max-content;
      }

      .hero-search input {
        height: 54px;
        font-size: 14px;
      }

      .hero-search button {
        height: 44px;
        font-size: 14px;
      }

      .share-panel {
        padding: 20px;
      }

      .btn-main,
      .btn-soft,
      .btn-line {
        width: 100%;
      }
    }

/* roulang page: category1 */
:root {
      --ink: #211d24;
      --deep: #30212f;
      --plum: #542943;
      --wine: #752f4e;
      --berry: #b54265;
      --coral: #df6b72;
      --cream: #fff8f1;
      --paper: #f6eee9;
      --muted: #786c74;
      --line: #e7d8d6;
      --white: #ffffff;
      --radius: 8px;
      --shadow: 0 16px 36px rgba(42, 25, 34, .12);
      --container: 1240px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--cream);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
      font-size: 15px;
      line-height: 1.75;
    }
    a { color: inherit; text-decoration: none; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    img { max-width: 100%; display: block; }
    .site-container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 248, 241, .96);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 4px 18px rgba(48, 33, 47, .06);
      backdrop-filter: blur(12px);
    }
    .search-nav {
      min-height: 78px;
      display: flex;
      align-items: center;
      gap: 18px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: max-content;
      font-weight: 800;
      color: var(--deep);
      letter-spacing: 0;
    }
    .brand:hover { color: var(--berry); }
    .brand-mark {
      display: inline-grid;
      place-items: center;
      width: 38px;
      height: 30px;
      border-radius: 6px;
      color: var(--white);
      background: var(--wine);
      font-size: 12px;
      font-weight: 800;
    }
    .brand-text { font-size: 15px; }
    .nav-search {
      position: relative;
      flex: 1;
      min-width: 180px;
      display: flex;
      align-items: center;
      height: 46px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--white);
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .nav-search:focus-within {
      border-color: var(--berry);
      box-shadow: 0 0 0 4px rgba(181, 66, 101, .12);
    }
    .nav-search label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
    }
    .search-icon { padding-left: 14px; color: var(--berry); font-size: 22px; line-height: 1; }
    .nav-search input {
      width: 100%;
      min-width: 0;
      height: 100%;
      padding: 0 8px;
      border: 0;
      outline: 0;
      color: var(--ink);
      background: transparent;
    }
    .nav-search input::placeholder { color: #9b8c91; }
    .clear-btn, .search-submit {
      flex: 0 0 auto;
      border: 0;
      background: transparent;
    }
    .clear-btn { color: #aa9b9e; font-size: 21px; padding: 0 8px; }
    .clear-btn:hover { color: var(--berry); }
    .search-submit {
      height: 34px;
      margin-right: 6px;
      padding: 0 14px;
      border-radius: 5px;
      color: var(--white);
      background: var(--berry);
      font-weight: 700;
      font-size: 13px;
    }
    .search-submit:hover { background: var(--wine); transform: translateY(-1px); }
    .nav-links, .nav-tools { display: flex; align-items: center; gap: 8px; }
    .nav-link-custom {
      padding: 8px 10px;
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
      border-bottom: 2px solid transparent;
    }
    .nav-link-custom:hover, .nav-link-custom.active {
      color: var(--wine);
      border-bottom-color: var(--coral);
    }
    .tool-btn, .mobile-toggle {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid var(--line);
      border-radius: 6px;
      color: var(--wine);
      background: var(--white);
      font-size: 12px;
      font-weight: 700;
    }
    .tool-btn:hover, .mobile-toggle:hover { border-color: var(--berry); background: #fff0f0; }
    .mobile-toggle { display: none; font-size: 18px; }
    .mobile-panel { display: none; padding: 0 0 18px; }
    :focus-visible { outline: 3px solid rgba(223, 107, 114, .45); outline-offset: 3px; }

    .category-head {
      padding: 76px 0 58px;
      color: var(--white);
      background-color: var(--deep);
      position: relative;
      overflow: hidden;
    }
    .category-head::before,
    .category-head::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(255, 221, 214, .22);
      transform: rotate(18deg);
      pointer-events: none;
    }
    .category-head::before { width: 420px; height: 420px; right: -120px; top: -190px; }
    .category-head::after { width: 250px; height: 250px; left: 54%; bottom: -180px; }
    .head-inner { position: relative; z-index: 1; max-width: 850px; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      color: #ffc2bb;
      font-size: 13px;
      font-weight: 700;
    }
    .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--coral); }
    h1, h2, h3, p { margin-top: 0; }
    h1 {
      max-width: 780px;
      margin-bottom: 18px;
      font-size: clamp(34px, 5vw, 62px);
      line-height: 1.12;
      font-weight: 800;
      letter-spacing: 0;
    }
    .head-copy {
      max-width: 720px;
      margin-bottom: 28px;
      color: #ead9d7;
      font-size: 17px;
    }
    .head-meta { display: flex; flex-wrap: wrap; gap: 10px; }
    .meta-chip, .tag {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
    }
    .meta-chip { color: #ffd9d2; border: 1px solid rgba(255, 217, 210, .34); }
    .tag { color: var(--wine); background: #f9dfdd; }
    .tag.soft { color: #755062; background: #f1e6e4; }

    .section { padding: 76px 0; }
    .section.paper { background: var(--paper); }
    .section-title {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 30px;
    }
    .section-title h2 {
      margin-bottom: 6px;
      color: var(--deep);
      font-size: clamp(25px, 3vw, 38px);
      line-height: 1.25;
      font-weight: 800;
    }
    .section-title p { margin-bottom: 0; color: var(--muted); }
    .small-label {
      color: var(--berry);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .filter-bar {
      display: grid;
      grid-template-columns: 1.3fr .8fr .8fr auto;
      gap: 12px;
      padding: 16px;
      margin-bottom: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
      box-shadow: var(--shadow);
    }
    .field-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
    .field-control {
      width: 100%;
      min-height: 42px;
      padding: 7px 12px;
      border: 1px solid var(--line);
      border-radius: 5px;
      color: var(--ink);
      background: #fffdfb;
      outline: 0;
    }
    .field-control:focus { border-color: var(--berry); box-shadow: 0 0 0 3px rgba(181, 66, 101, .1); }
    .filter-action { align-self: end; }
    .btn-primary-custom, .btn-outline-custom {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 8px 17px;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 800;
      transition: all .2s ease;
    }
    .btn-primary-custom { border: 1px solid var(--berry); color: var(--white); background: var(--berry); }
    .btn-primary-custom:hover { color: var(--white); background: var(--wine); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(117, 47, 78, .2); }
    .btn-outline-custom { border: 1px solid #caaeb4; color: var(--wine); background: transparent; }
    .btn-outline-custom:hover { color: var(--wine); border-color: var(--berry); background: #fff0ef; }

    .directory-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start; }
    .index-panel {
      position: sticky;
      top: 102px;
      padding: 20px;
      border-left: 3px solid var(--coral);
      background: #fffaf7;
    }
    .index-panel h3 { margin-bottom: 12px; font-size: 17px; color: var(--deep); }
    .index-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
    .index-list a {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      color: var(--muted);
      border-bottom: 1px solid #efdfdc;
      font-size: 13px;
    }
    .index-list a:hover, .index-list a.active { color: var(--berry); }
    .directory-list { display: grid; gap: 12px; }
    .directory-item {
      display: grid;
      grid-template-columns: 66px minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      padding: 19px 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .directory-item:hover { border-color: #d29ca8; box-shadow: 0 10px 22px rgba(74, 37, 53, .09); transform: translateX(3px); }
    .directory-number {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      color: var(--berry);
      border: 1px solid #e8b9bd;
      background: #fff4f0;
      font-size: 20px;
      font-weight: 800;
    }
    .directory-item h3 { margin-bottom: 4px; font-size: 18px; color: var(--deep); }
    .directory-item p { margin-bottom: 7px; color: var(--muted); font-size: 13px; }
    .item-info { text-align: right; color: var(--muted); font-size: 12px; white-space: nowrap; }
    .item-info strong { display: block; color: var(--wine); font-size: 14px; }

    .featured-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; }
    .feature-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .feature-art {
      position: relative;
      min-height: 210px;
      background-color: var(--plum);
      overflow: hidden;
    }
    .feature-art::before {
      content: "";
      position: absolute;
      width: 210px;
      height: 290px;
      left: 18%;
      top: -45px;
      border: 1px solid rgba(255,255,255,.28);
      transform: rotate(28deg);
      box-shadow: 110px 55px 0 -45px rgba(223,107,114,.65), 170px -20px 0 -70px rgba(255,214,201,.45);
    }
    .feature-art::after {
      content: "18+";
      position: absolute;
      right: 22px;
      bottom: 18px;
      color: rgba(255,255,255,.75);
      font-size: 42px;
      font-weight: 900;
    }
    .feature-card.secondary .feature-art { min-height: 142px; background-color: var(--wine); }
    .feature-card.secondary .feature-art::before { left: 42%; transform: rotate(-25deg); }
    .feature-body { padding: 21px; }
    .feature-body h3 { margin: 8px 0 7px; color: var(--deep); font-size: 20px; }
    .feature-body p { margin-bottom: 15px; color: var(--muted); font-size: 14px; }
    .feature-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }

    .recommend-row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 15px; scrollbar-color: var(--coral) transparent; }
    .recommend-item {
      flex: 0 0 235px;
      min-height: 142px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
    }
    .recommend-item:hover { border-color: var(--berry); background: #fff4f1; }
    .recommend-item h3 { margin: 12px 0 4px; font-size: 16px; color: var(--deep); }
    .recommend-item p { margin: 0; color: var(--muted); font-size: 12px; }
    .recommend-controls { display: flex; gap: 8px; }
    .icon-btn {
      display: inline-grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: 5px;
      color: var(--wine);
      background: var(--white);
    }
    .icon-btn:hover { border-color: var(--berry); background: #fff0ef; }

    .share-band {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: center;
      padding: 30px 34px;
      color: var(--white);
      background: var(--wine);
      border-radius: var(--radius);
    }
    .share-band h2 { margin-bottom: 6px; font-size: 27px; }
    .share-band p { margin: 0; color: #f1d9d6; }
    .share-actions { display: flex; flex-wrap: wrap; gap: 9px; }
    .share-actions .btn-outline-custom { color: #fff1ed; border-color: rgba(255,255,255,.45); }
    .share-actions .btn-outline-custom:hover { color: var(--wine); background: #fff1ed; }

    .faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 52px; align-items: start; }
    .faq-intro h2 { margin-bottom: 14px; color: var(--deep); font-size: 34px; }
    .faq-intro p { color: var(--muted); }
    .accordion-item { border: 0; border-bottom: 1px solid var(--line); background: transparent; }
    .accordion-button {
      padding: 18px 0;
      color: var(--deep);
      background: transparent;
      box-shadow: none !important;
      font-weight: 800;
    }
    .accordion-button:not(.collapsed) { color: var(--berry); background: transparent; }
    .accordion-body { padding: 0 0 18px; color: var(--muted); font-size: 14px; }

    .cta-section { padding: 70px 0; background: #f0dcd8; }
    .cta-box { max-width: 760px; }
    .cta-box h2 { margin-bottom: 12px; color: var(--deep); font-size: clamp(27px, 4vw, 42px); }
    .cta-box p { margin-bottom: 22px; color: #66545d; }

    .site-footer { padding: 54px 0 20px; color: #d8c9cb; background: var(--deep); }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 50px; padding-bottom: 35px; }
    .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; color: #fff4ed; font-weight: 800; }
    .footer-text { max-width: 420px; margin: 0; color: #b9a8ad; font-size: 13px; }
    .footer-col { display: grid; align-content: start; gap: 8px; }
    .footer-col h3 { margin-bottom: 7px; color: #fff1ec; font-size: 15px; }
    .footer-col a { color: #b9a8ad; font-size: 13px; }
    .footer-col a:hover { color: #ffaaa5; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color: #a9959c; font-size: 12px; }
    .footer-bottom a { color: #ffd0c8; }

    .age-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(27, 17, 24, .84);
    }
    .age-modal {
      width: min(520px, 100%);
      padding: 34px;
      border-radius: 8px;
      background: var(--cream);
      box-shadow: 0 24px 70px rgba(0,0,0,.35);
      text-align: center;
    }
    .age-modal .brand-mark { margin: 0 auto 16px; }
    .age-modal h2 { margin-bottom: 10px; color: var(--deep); font-size: 26px; }
    .age-modal p { margin-bottom: 21px; color: var(--muted); font-size: 14px; }
    .age-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
    .age-modal[hidden] { display: none; }

    @media (max-width: 1100px) {
      .search-nav { gap: 10px; }
      .brand-text { max-width: 150px; }
      .nav-link-custom { padding-inline: 6px; }
      .filter-bar { grid-template-columns: 1fr 1fr; }
      .filter-action { align-self: center; }
    }
    @media (max-width: 820px) {
      .site-container { width: min(var(--container), calc(100% - 30px)); }
      .search-nav { min-height: 68px; }
      .search-nav > .nav-search, .search-nav > .nav-links, .search-nav > .nav-tools .tool-btn { display: none; }
      .mobile-toggle { display: inline-grid; }
      .mobile-panel.is-open { display: grid; gap: 15px; }
      .mobile-panel .nav-search { display: flex; }
      .mobile-panel .nav-links { display: flex; flex-wrap: wrap; }
      .category-head { padding: 58px 0 48px; }
      .directory-layout, .faq-layout { grid-template-columns: 1fr; gap: 26px; }
      .index-panel { position: static; }
      .index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
      .featured-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; }
    }
    @media (max-width: 580px) {
      .site-container { width: min(var(--container), calc(100% - 24px)); }
      .brand-text { max-width: 130px; font-size: 13px; line-height: 1.3; }
      .category-head { padding: 48px 0 38px; }
      h1 { font-size: 37px; }
      .head-copy { font-size: 15px; }
      .section { padding: 54px 0; }
      .section-title { display: block; }
      .section-title .recommend-controls { margin-top: 16px; }
      .filter-bar { grid-template-columns: 1fr; padding: 12px; }
      .filter-action { justify-self: start; }
      .directory-item { grid-template-columns: 48px minmax(0, 1fr); gap: 13px; padding: 15px; }
      .directory-number { width: 42px; height: 42px; font-size: 16px; }
      .directory-item h3 { font-size: 16px; }
      .item-info { grid-column: 2; text-align: left; }
      .featured-grid { grid-template-columns: 1fr; }
      .feature-art, .feature-card.secondary .feature-art { min-height: 175px; }
      .share-band { display: block; padding: 25px 20px; }
      .share-actions { margin-top: 20px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
      .footer-bottom { display: block; }
      .footer-bottom a { display: inline-block; margin-top: 8px; }
      .age-modal { padding: 27px 20px; }
    }