/* roulang page: index */
:root {
            --ink: #17121d;
            --ink-soft: #211827;
            --plum: #38233d;
            --plum-light: #684765;
            --rose: #b7797d;
            --coral: #d58a82;
            --ivory: #f5f0e9;
            --paper: #fbf9f5;
            --muted: #9c919d;
            --muted-dark: #6d626d;
            --line: rgba(255,255,255,.14);
            --line-dark: rgba(45,28,46,.14);
            --shadow: 0 18px 45px rgba(22,13,26,.12);
            --shadow-deep: 0 24px 60px rgba(0,0,0,.24);
            --radius-lg: 22px;
            --radius-md: 14px;
            --radius-sm: 9px;
            --ease: 240ms cubic-bezier(.2,.7,.2,1);
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 16px;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; transition: color var(--ease), background var(--ease), border-color var(--ease), transform var(--ease); }
        img { max-width: 100%; display: block; }
        button, input, select { font: inherit; }
        button { cursor: pointer; }
        ::selection { color: var(--paper); background: var(--plum-light); }
        .container { max-width: 1240px; padding-left: 24px; padding-right: 24px; }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(23,18,29,.96);
            border-bottom: 1px solid var(--line);
        }
        .navbar { min-height: 76px; padding: 12px 0; }
        .brand {
            color: var(--paper);
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -.04em;
            white-space: nowrap;
        }
        .brand-mark {
            display: inline-flex;
            width: 28px;
            height: 28px;
            margin-right: 8px;
            align-items: center;
            justify-content: center;
            color: var(--ink);
            background: var(--coral);
            border-radius: 8px;
            font-size: 13px;
            font-weight: 900;
            vertical-align: -2px;
        }
        .navbar-nav { gap: 8px; }
        .nav-link {
            position: relative;
            padding: 9px 14px !important;
            color: #cfc5d0 !important;
            font-size: 14px;
            font-weight: 600;
            border-radius: 8px;
        }
        .nav-link:hover, .nav-link:focus-visible, .nav-link.active {
            color: var(--paper) !important;
            background: rgba(255,255,255,.08);
        }
        .nav-link.active::after {
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 3px;
            height: 2px;
            content: "";
            background: var(--coral);
        }
        .navbar-toggler {
            border: 1px solid var(--line);
            padding: 8px 10px;
            color: var(--paper);
            border-radius: 8px;
        }
        .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(213,138,130,.3); }
        .nav-actions { display: flex; gap: 10px; align-items: center; }
        .btn {
            min-height: 44px;
            padding: 10px 18px;
            border-radius: 9px;
            font-size: 14px;
            font-weight: 750;
            letter-spacing: .01em;
            transition: transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
        }
        .btn:hover { transform: translateY(-2px); }
        .btn:active { transform: translateY(0); }
        .btn:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
            outline: 3px solid rgba(213,138,130,.55);
            outline-offset: 3px;
        }
        .btn-primary {
            color: var(--ink);
            background: var(--coral);
            border: 1px solid var(--coral);
            box-shadow: 0 8px 18px rgba(213,138,130,.18);
        }
        .btn-primary:hover { color: var(--ink); background: #e1a097; border-color: #e1a097; }
        .btn-outline {
            color: var(--paper);
            background: transparent;
            border: 1px solid rgba(255,255,255,.3);
        }
        .btn-outline:hover { color: var(--paper); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.58); }
        .btn-dark-outline {
            color: var(--plum);
            background: transparent;
            border: 1px solid var(--line-dark);
        }
        .btn-dark-outline:hover { color: var(--paper); background: var(--plum); border-color: var(--plum); }

        .hero {
            position: relative;
            overflow: hidden;
            color: var(--paper);
            background: var(--ink);
            padding: 96px 0 72px;
        }
        .hero::before {
            position: absolute;
            top: -160px;
            right: -90px;
            width: 540px;
            height: 540px;
            content: "";
            border: 1px solid rgba(213,138,130,.18);
            border-radius: 50%;
            box-shadow: 0 0 0 42px rgba(213,138,130,.025), 0 0 0 86px rgba(213,138,130,.02);
        }
        .eyebrow, .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--coral);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
        }
        .eyebrow::before, .section-kicker::before {
            width: 24px;
            height: 1px;
            content: "";
            background: currentColor;
        }
        .hero h1 {
            max-width: 720px;
            margin: 19px 0 20px;
            font-size: clamp(42px, 6vw, 78px);
            font-weight: 900;
            letter-spacing: -.075em;
            line-height: 1.08;
        }
        .hero-copy {
            max-width: 650px;
            margin-bottom: 29px;
            color: #cfc5d0;
            font-size: 17px;
        }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .hero-note { margin-top: 22px; color: var(--muted); font-size: 13px; }
        .hero-stage {
            position: relative;
            min-height: 390px;
            padding: 25px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, #2a1d31, #17121d 68%);
            box-shadow: var(--shadow-deep);
        }
        .stage-head { display: flex; justify-content: space-between; color: #d9cfd9; font-size: 12px; }
        .status { display: inline-flex; align-items: center; gap: 7px; color: var(--coral); font-weight: 750; }
        .status::before { width: 7px; height: 7px; content: ""; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 4px rgba(213,138,130,.13); }
        .stage-cover {
            position: absolute;
            top: 76px;
            left: 25px;
            width: 43%;
            height: 245px;
            overflow: hidden;
            border-radius: 12px;
            background: linear-gradient(150deg, #765162, #302136 60%, #17121d);
        }
        .stage-cover::after {
            position: absolute;
            inset: 20px;
            content: "91";
            color: rgba(255,255,255,.15);
            font-size: 90px;
            font-weight: 900;
            line-height: 1;
            border-top: 1px solid rgba(255,255,255,.22);
            padding-top: 18px;
        }
        .stage-info { position: absolute; top: 92px; right: 25px; width: 45%; }
        .stage-number { color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
        .stage-info h2 { margin: 10px 0 12px; color: var(--paper); font-size: 24px; line-height: 1.3; }
        .stage-info p { color: #a99daa; font-size: 13px; line-height: 1.7; }
        .progress { height: 4px; margin: 18px 0 10px; overflow: hidden; background: rgba(255,255,255,.12); border-radius: 10px; }
        .progress-bar { background: var(--coral); }
        .stage-foot { position: absolute; right: 25px; bottom: 23px; left: 25px; display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); padding-top: 14px; }

        .stats { color: var(--paper); background: var(--plum); }
        .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); }
        .stat { padding: 22px 26px; border-right: 1px solid var(--line); }
        .stat:last-child { border-right: 0; }
        .stat strong { display: block; font-size: 25px; line-height: 1.2; }
        .stat span { color: #c2b5c1; font-size: 13px; }

        .section { padding: 100px 0; }
        .section-alt { background: var(--ivory); }
        .section-heading { max-width: 670px; margin-bottom: 46px; }
        .section-heading h2 { margin: 13px 0 14px; color: var(--plum); font-size: clamp(29px, 4vw, 48px); font-weight: 850; letter-spacing: -.06em; line-height: 1.18; }
        .section-heading p { margin: 0; color: var(--muted-dark); font-size: 16px; }
        .feature-rail { border-top: 1px solid var(--line-dark); }
        .feature-item { display: grid; grid-template-columns: 90px 1fr 150px; align-items: center; gap: 24px; padding: 27px 0; border-bottom: 1px solid var(--line-dark); }
        .feature-num { color: var(--rose); font-size: 14px; font-weight: 900; letter-spacing: .1em; }
        .feature-item h3 { margin: 0 0 5px; color: var(--plum); font-size: 21px; }
        .feature-item p { margin: 0; color: var(--muted-dark); font-size: 14px; }
        .feature-tag { justify-self: end; color: var(--plum-light); font-size: 12px; font-weight: 800; text-align: right; }
        .feature-tag::after { display: block; width: 32px; height: 2px; margin: 8px 0 0 auto; content: ""; background: var(--coral); }

        .timeline { position: relative; padding-left: 34px; border-left: 1px solid #cdbbc1; }
        .timeline-item { position: relative; padding: 0 0 38px 22px; }
        .timeline-item:last-child { padding-bottom: 0; }
        .timeline-item::before { position: absolute; top: 8px; left: -40px; width: 13px; height: 13px; content: ""; background: var(--coral); border: 4px solid var(--ivory); border-radius: 50%; box-shadow: 0 0 0 1px var(--rose); }
        .timeline-label { color: var(--rose); font-size: 12px; font-weight: 850; letter-spacing: .08em; }
        .timeline-item h3 { margin: 6px 0 5px; color: var(--plum); font-size: 19px; }
        .timeline-item p { margin: 0; color: var(--muted-dark); font-size: 14px; }

        .feature-panel { height: 100%; padding: 32px; color: var(--paper); background: var(--plum); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
        .feature-panel h3 { margin: 12px 0 12px; font-size: 28px; letter-spacing: -.04em; }
        .feature-panel p { color: #d1c5d1; font-size: 14px; }
        .panel-list { margin: 27px 0 0; padding: 0; list-style: none; }
        .panel-list li { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; color: #e7dfe6; font-size: 14px; border-top: 1px solid var(--line); }
        .panel-list span { color: var(--coral); font-size: 12px; }

        .showcase { display: grid; grid-template-columns: 1.35fr .85fr; gap: 20px; }
        .showcase-main, .showcase-side { min-height: 350px; padding: 32px; border-radius: var(--radius-lg); overflow: hidden; }
        .showcase-main { position: relative; color: var(--paper); background: linear-gradient(135deg, #4b3047, #211827 70%); }
        .showcase-main::after { position: absolute; right: -40px; bottom: -80px; width: 270px; height: 270px; content: ""; border: 1px solid rgba(213,138,130,.42); border-radius: 50%; }
        .showcase-main h3 { position: relative; z-index: 1; max-width: 410px; margin: 18px 0 12px; font-size: 31px; line-height: 1.25; }
        .showcase-main p { position: relative; z-index: 1; max-width: 430px; color: #cfc1ce; font-size: 14px; }
        .showcase-main .btn { position: relative; z-index: 1; margin-top: 20px; }
        .showcase-side { display: flex; flex-direction: column; justify-content: space-between; background: #eadfe1; border: 1px solid #d9c8cc; }
        .side-entry { padding: 17px 0; border-bottom: 1px solid #cdbbc1; }
        .side-entry:last-child { border-bottom: 0; }
        .side-entry small { color: var(--rose); font-weight: 800; }
        .side-entry h4 { margin: 4px 0; color: var(--plum); font-size: 17px; }
        .side-entry p { margin: 0; color: var(--muted-dark); font-size: 13px; }

        .news-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; }
        .news-list { border-top: 1px solid var(--line-dark); }
        .news-link { display: grid; grid-template-columns: 92px 1fr 22px; gap: 18px; align-items: center; padding: 19px 0; border-bottom: 1px solid var(--line-dark); }
        .news-link:hover { padding-left: 7px; color: var(--plum-light); }
        .news-date { color: var(--rose); font-size: 12px; font-weight: 800; }
        .news-title { color: var(--plum); font-weight: 700; font-size: 15px; }
        .news-arrow { color: var(--rose); font-size: 20px; }
        .note-box { padding: 28px; background: var(--ivory); border-left: 3px solid var(--coral); }
        .note-box h3 { margin: 0 0 10px; color: var(--plum); font-size: 22px; }
        .note-box p { margin: 0; color: var(--muted-dark); font-size: 14px; }

        .entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
        .entry-card { display: flex; min-height: 155px; flex-direction: column; justify-content: space-between; padding: 22px; background: var(--paper); border: 1px solid var(--line-dark); border-radius: var(--radius-md); }
        .entry-card:hover { transform: translateY(-4px); border-color: var(--rose); box-shadow: var(--shadow); }
        .entry-card small { color: var(--rose); font-size: 11px; font-weight: 850; letter-spacing: .1em; }
        .entry-card h3 { margin: 9px 0; color: var(--plum); font-size: 18px; }
        .entry-card a { color: var(--plum-light); font-size: 13px; font-weight: 800; }
        .member-section { color: var(--paper); background: var(--ink); }
        .member-box { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; }
        .member-box h2 { margin: 14px 0; font-size: 40px; letter-spacing: -.06em; line-height: 1.2; }
        .member-box p { color: #cfc5d0; font-size: 15px; }
        .benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .benefit { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
        .benefit strong { display: block; margin-bottom: 4px; color: var(--coral); }
        .benefit span { color: #c2b5c1; font-size: 13px; }

        .faq-wrap { max-width: 860px; }
        .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--line-dark); }
        .accordion-button { padding: 21px 0; color: var(--plum); background: transparent; box-shadow: none !important; font-weight: 750; }
        .accordion-button::after { background-size: 14px; }
        .accordion-button:not(.collapsed) { color: var(--rose); background: transparent; }
        .accordion-body { padding: 0 35px 22px 0; color: var(--muted-dark); font-size: 14px; }
        .cta { padding: 70px 0; color: var(--paper); background: var(--plum); }
        .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
        .cta h2 { margin: 0 0 8px; font-size: 34px; letter-spacing: -.05em; }
        .cta p { margin: 0; color: #cfc1ce; font-size: 14px; }
        .footer { color: #cfc5d0; background: #120e16; padding: 54px 0 22px; }
        .footer-grid { display: grid; grid-template-columns: 1.3fr .7fr .7fr; gap: 50px; padding-bottom: 38px; }
        .footer .brand { display: inline-block; margin-bottom: 14px; }
        .footer p { max-width: 360px; margin: 0; color: var(--muted); font-size: 13px; }
        .footer h3 { margin: 5px 0 16px; color: var(--paper); font-size: 14px; }
        .footer a { display: block; width: fit-content; margin: 7px 0; color: var(--muted); font-size: 13px; }
        .footer a:hover { color: var(--coral); }
        .footer-bottom { display: flex; justify-content: space-between; gap: 15px; padding-top: 20px; color: #766c78; font-size: 12px; border-top: 1px solid var(--line); }

        @media (max-width: 1199px) {
            .hero { padding-top: 78px; }
            .hero-stage { min-height: 350px; }
        }
        @media (max-width: 991px) {
            .navbar-collapse { padding: 18px 0 8px; }
            .nav-actions { margin-top: 14px; justify-content: flex-start; }
            .hero-stage { margin-top: 35px; }
            .news-layout, .member-box { grid-template-columns: 1fr; gap: 38px; }
            .member-box h2 { font-size: 34px; }
        }
        @media (max-width: 767px) {
            .container { padding-left: 18px; padding-right: 18px; }
            .section { padding: 70px 0; }
            .hero { padding: 67px 0 52px; }
            .hero h1 { font-size: 47px; }
            .hero-copy { font-size: 15px; }
            .feature-item { grid-template-columns: 50px 1fr; gap: 15px; }
            .feature-tag { grid-column: 2; justify-self: start; text-align: left; }
            .feature-tag::after { margin-left: 0; }
            .showcase { grid-template-columns: 1fr; }
            .showcase-main, .showcase-side { min-height: 300px; }
            .entry-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
            .footer-grid > div:first-child { grid-column: 1 / -1; }
            .cta-inner { align-items: flex-start; flex-direction: column; }
            .stat { padding: 18px 12px; }
            .stat strong { font-size: 21px; }
            .stat span { font-size: 11px; }
        }
        @media (max-width: 575px) {
            .brand { font-size: 17px; }
            .brand-mark { width: 25px; height: 25px; margin-right: 5px; }
            .hero h1 { font-size: 39px; }
            .hero-actions .btn { width: 100%; }
            .stage-cover { width: 39%; }
            .stage-info { width: 50%; }
            .stage-info h2 { font-size: 19px; }
            .stage-info p { font-size: 12px; }
            .news-link { grid-template-columns: 72px 1fr 16px; gap: 10px; }
            .benefits { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-grid > div:first-child { grid-column: auto; }
            .footer-bottom { flex-direction: column; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
        }

/* roulang page: category1 */
:root{
      --ink:#17121d;
      --ink-soft:#211827;
      --plum:#38233d;
      --plum-light:#684765;
      --rose:#b7797d;
      --coral:#d58a82;
      --ivory:#f5f0e9;
      --paper:#fbf9f5;
      --muted:#9c919d;
      --muted-dark:#6d626d;
      --line:rgba(255,255,255,.14);
      --line-dark:rgba(45,28,46,.14);
      --shadow:0 18px 45px rgba(22,13,26,.12);
      --shadow-deep:0 24px 60px rgba(0,0,0,.24);
      --radius-lg:22px;
      --radius-md:14px;
      --radius-sm:9px;
      --ease:240ms cubic-bezier(.2,.7,.2,1);
    }

    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      background:var(--paper);
      font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
      font-size:16px;
      line-height:1.7;
      -webkit-font-smoothing:antialiased;
    }
    a{color:inherit;text-decoration:none;transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease)}
    img{display:block;max-width:100%}
    button,input,select{font:inherit}
    button{cursor:pointer}
    .container{max-width:1240px;padding-left:24px;padding-right:24px}
    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(23,18,29,.96);
      border-bottom:1px solid var(--line);
    }
    .navbar{min-height:76px;padding:12px 0}
    .brand{
      color:var(--paper);
      font-size:20px;
      font-weight:800;
      letter-spacing:-.04em;
      white-space:nowrap;
    }
    .brand-mark{
      display:inline-flex;
      width:28px;
      height:28px;
      margin-right:8px;
      align-items:center;
      justify-content:center;
      color:var(--ink);
      background:var(--coral);
      border-radius:8px;
      font-size:13px;
      font-weight:900;
      vertical-align:-2px;
    }
    .navbar-nav{gap:8px}
    .nav-link{
      position:relative;
      padding:9px 14px!important;
      color:#cfc5d0!important;
      font-size:14px;
      font-weight:600;
      border-radius:8px;
    }
    .nav-link:hover,.nav-link:focus-visible,.nav-link.active{
      color:var(--paper)!important;
      background:rgba(255,255,255,.08);
    }
    .nav-link.active::after{
      position:absolute;
      left:14px;
      right:14px;
      bottom:3px;
      height:2px;
      content:"";
      background:var(--coral);
    }
    .navbar-toggler{
      border:1px solid var(--line);
      padding:8px 10px;
      color:var(--paper);
      border-radius:8px;
    }
    .navbar-toggler:focus{box-shadow:0 0 0 3px rgba(213,138,130,.3)}
    .nav-actions{display:flex;gap:10px;align-items:center}
    .btn{
      min-height:44px;
      padding:10px 18px;
      border-radius:9px;
      font-size:14px;
      font-weight:750;
      letter-spacing:.01em;
      transition:transform var(--ease),background var(--ease),border-color var(--ease),color var(--ease),box-shadow var(--ease);
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(0)}
    .btn:focus-visible,.nav-link:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{
      outline:3px solid rgba(213,138,130,.55);
      outline-offset:3px;
    }
    .btn-primary{
      color:var(--ink);
      background:var(--coral);
      border:1px solid var(--coral);
      box-shadow:0 8px 18px rgba(213,138,130,.18);
    }
    .btn-primary:hover{color:var(--ink);background:#e1a097;border-color:#e1a097}
    .btn-outline{
      color:var(--paper);
      background:transparent;
      border:1px solid rgba(255,255,255,.3);
    }
    .btn-outline:hover{color:var(--paper);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.58)}
    .btn-dark-outline{
      color:var(--plum);
      background:transparent;
      border:1px solid var(--line-dark);
    }
    .btn-dark-outline:hover{color:var(--paper);background:var(--plum);border-color:var(--plum)}
    .hero{
      position:relative;
      overflow:hidden;
      color:var(--paper);
      background:var(--ink);
      padding:66px 0 70px;
    }
    .hero::before{
      position:absolute;
      top:-180px;
      right:-80px;
      width:540px;
      height:540px;
      content:"";
      border:1px solid rgba(213,138,130,.18);
      border-radius:50%;
      box-shadow:0 0 0 42px rgba(213,138,130,.025),0 0 0 86px rgba(213,138,130,.02);
    }
    .eyebrow,.section-kicker{
      display:inline-flex;
      align-items:center;
      gap:9px;
      color:var(--coral);
      font-size:12px;
      font-weight:800;
      letter-spacing:.14em;
    }
    .eyebrow::before,.section-kicker::before{
      width:24px;
      height:1px;
      content:"";
      background:currentColor;
    }
    .hero h1{
      max-width:720px;
      margin:18px 0 18px;
      font-size:clamp(40px,5.5vw,68px);
      font-weight:900;
      letter-spacing:-.075em;
      line-height:1.08;
    }
    .hero-copy{max-width:650px;margin-bottom:26px;color:#cfc5d0;font-size:17px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
    .hero-note{margin-top:20px;color:var(--muted);font-size:13px}
    .hero-panel{
      position:relative;
      min-height:355px;
      padding:25px;
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      background:linear-gradient(145deg,#2a1d31,#17121d 68%);
      box-shadow:var(--shadow-deep);
    }
    .panel-top,.panel-meta{display:flex;justify-content:space-between;gap:14px;align-items:center}
    .panel-index{color:var(--coral);font-size:13px;font-weight:800;letter-spacing:.12em}
    .status{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:5px 9px;
      color:#f7d3cc;
      background:rgba(213,138,130,.12);
      border:1px solid rgba(213,138,130,.3);
      border-radius:999px;
      font-size:12px;
      font-weight:700;
    }
    .status::before{width:6px;height:6px;content:"";background:var(--coral);border-radius:50%}
    .cover-block{
      display:flex;
      min-height:190px;
      margin:24px 0 20px;
      padding:22px;
      align-items:flex-end;
      border-radius:13px;
      background:
        linear-gradient(135deg,rgba(213,138,130,.2),transparent 48%),
        linear-gradient(160deg,#67445f,#2c2035 75%);
      border:1px solid rgba(255,255,255,.1);
    }
    .cover-block strong{display:block;max-width:260px;font-size:25px;line-height:1.2}
    .cover-caption{color:#d5c8d1;font-size:13px}
    .progress-label{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
    .progress-track{height:5px;margin-top:8px;background:rgba(255,255,255,.12);border-radius:10px;overflow:hidden}
    .progress-track span{display:block;width:68%;height:100%;background:var(--coral);border-radius:10px}
    .crumb-bar{padding:22px 0 0;background:var(--paper)}
    .breadcrumb{margin:0;font-size:13px;color:var(--muted-dark)}
    .breadcrumb-item+.breadcrumb-item::before{color:var(--rose)}
    .breadcrumb a:hover{color:var(--plum)}
    .section{padding:78px 0}
    .section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px}
    .section-heading h2{margin:10px 0 0;font-size:clamp(27px,4vw,42px);letter-spacing:-.055em;line-height:1.15}
    .section-heading p{max-width:440px;margin:0;color:var(--muted-dark)}
    .index-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);gap:28px;align-items:start}
    .topic-card{
      position:relative;
      display:grid;
      grid-template-columns:190px 1fr;
      gap:25px;
      padding:22px;
      margin-bottom:18px;
      background:#fff;
      border:1px solid var(--line-dark);
      border-radius:var(--radius-md);
      box-shadow:0 8px 25px rgba(28,17,31,.045);
      transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease);
    }
    .topic-card:hover{transform:translateY(-4px);border-color:rgba(104,71,101,.48);box-shadow:var(--shadow)}
    .topic-cover{
      position:relative;
      min-height:180px;
      overflow:hidden;
      border-radius:11px;
      background:linear-gradient(145deg,#67445f,#2e2036);
    }
    .topic-cover::after{
      position:absolute;
      inset:0;
      content:"";
      background:linear-gradient(180deg,transparent 38%,rgba(17,12,22,.7));
    }
    .topic-number{position:absolute;z-index:1;top:13px;left:14px;color:#f8d6cf;font-size:12px;font-weight:800;letter-spacing:.1em}
    .topic-cover-text{position:absolute;z-index:1;right:14px;bottom:13px;left:14px;color:#fff;font-size:19px;font-weight:800;line-height:1.25}
    .topic-body{display:flex;min-width:0;flex-direction:column}
    .topic-labels{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
    .tag{
      display:inline-flex;
      align-items:center;
      min-height:26px;
      padding:3px 9px;
      color:var(--plum);
      background:#f1e6e4;
      border-radius:999px;
      font-size:12px;
      font-weight:750;
    }
    .tag.muted{color:var(--muted-dark);background:#f2efec}
    .topic-body h3{margin:0 0 8px;font-size:23px;letter-spacing:-.035em;line-height:1.3}
    .topic-body p{margin:0;color:var(--muted-dark);font-size:14px;line-height:1.8}
    .topic-foot{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:auto;padding-top:20px;color:var(--muted-dark);font-size:12px}
    .topic-foot a{color:var(--plum);font-weight:800}
    .topic-foot a:hover{color:var(--coral)}
    .filter-panel{
      position:sticky;
      top:102px;
      padding:24px;
      background:var(--ivory);
      border:1px solid var(--line-dark);
      border-radius:var(--radius-md);
    }
    .filter-panel h2{margin:0 0 6px;font-size:21px;letter-spacing:-.03em}
    .filter-panel>p{margin:0 0 22px;color:var(--muted-dark);font-size:13px}
    .filter-label{display:block;margin:17px 0 7px;color:var(--plum);font-size:13px;font-weight:800}
    .form-control,.form-select{
      min-height:45px;
      color:var(--ink);
      background:#fff;
      border:1px solid var(--line-dark);
      border-radius:8px;
    }
    .form-control:focus,.form-select:focus{
      border-color:var(--rose);
      box-shadow:0 0 0 3px rgba(183,121,125,.18);
    }
    .filter-chips{display:flex;flex-wrap:wrap;gap:8px}
    .filter-chip{
      padding:7px 11px;
      color:var(--muted-dark);
      background:#fff;
      border:1px solid var(--line-dark);
      border-radius:8px;
      font-size:12px;
      transition:all var(--ease);
    }
    .filter-chip:hover,.filter-chip.active{color:var(--paper);background:var(--plum);border-color:var(--plum)}
    .filter-result{display:flex;justify-content:space-between;margin-top:23px;padding-top:18px;border-top:1px solid var(--line-dark);font-size:13px}
    .filter-result strong{color:var(--plum)}
    .compact-list{margin:0;padding:0;list-style:none}
    .compact-list li{display:grid;grid-template-columns:45px 1fr auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-dark)}
    .compact-list li:last-child{border-bottom:0}
    .list-no{color:var(--rose);font-size:13px;font-weight:900}
    .list-title{font-weight:750;line-height:1.35}
    .list-meta{color:var(--muted-dark);font-size:12px}
    .list-arrow{color:var(--plum);font-size:20px;transition:transform var(--ease)}
    .compact-list a:hover .list-arrow{transform:translateX(4px)}
    .related-strip{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:15px}
    .related-card{min-height:145px;padding:21px;background:var(--plum);color:var(--paper);border-radius:var(--radius-md);transition:transform var(--ease),background var(--ease)}
    .related-card:nth-child(2){background:#4b304b}
    .related-card:nth-child(3){background:#694650}
    .related-card:hover{transform:translateY(-4px);background:var(--ink-soft)}
    .related-card small{color:#e1b8b4;font-weight:800;letter-spacing:.1em}
    .related-card h3{margin:18px 0 5px;font-size:19px;line-height:1.3}
    .related-card p{margin:0;color:#d6c9d2;font-size:13px}
    .faq-wrap{max-width:900px}
    .accordion-item{background:#fff;border:1px solid var(--line-dark)!important;border-radius:10px!important;margin-bottom:10px;overflow:hidden}
    .accordion-button{padding:19px 20px;color:var(--ink);background:#fff;font-weight:750;box-shadow:none!important}
    .accordion-button:not(.collapsed){color:var(--plum);background:#f5ecea}
    .accordion-button::after{filter:sepia(.4) saturate(.8)}
    .accordion-body{padding:0 20px 20px;color:var(--muted-dark);font-size:14px}
    .cta{
      position:relative;
      overflow:hidden;
      padding:54px 0;
      color:var(--paper);
      background:var(--ink-soft);
    }
    .cta::after{position:absolute;right:8%;bottom:-90px;width:260px;height:260px;content:"";border:1px solid rgba(213,138,130,.25);border-radius:50%}
    .cta h2{margin:10px 0 10px;font-size:clamp(28px,4vw,43px);letter-spacing:-.06em;line-height:1.15}
    .cta p{max-width:580px;margin:0;color:#cfc5d0}
    .cta-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px}
    .footer{padding:52px 0 20px;color:#cfc5d0;background:var(--ink)}
    .footer-grid{display:grid;grid-template-columns:1.5fr .7fr .8fr;gap:48px;padding-bottom:40px}
    .footer .brand{display:inline-block;margin-bottom:16px}
    .footer p{max-width:360px;margin:0;color:var(--muted);font-size:13px}
    .footer h3{margin:4px 0 15px;color:var(--paper);font-size:14px}
    .footer-grid>div:not(:first-child) a{display:block;margin:8px 0;color:var(--muted);font-size:13px}
    .footer-grid>div:not(:first-child) a:hover{color:var(--coral)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
    .page-intro{padding:48px 0 38px;background:var(--paper)}
    .page-intro h1{max-width:760px;margin:15px 0 12px;font-size:clamp(34px,5vw,58px);font-weight:900;letter-spacing:-.07em;line-height:1.1}
    .page-intro p{max-width:700px;margin:0;color:var(--muted-dark);font-size:16px}
    .pagination{gap:7px;margin-top:35px}
    .page-link{min-width:42px;padding:8px 12px;color:var(--plum);text-align:center;background:#fff;border:1px solid var(--line-dark);border-radius:8px!important}
    .page-link:hover{color:var(--paper);background:var(--plum);border-color:var(--plum)}
    .page-item.active .page-link{color:var(--paper);background:var(--plum);border-color:var(--plum)}
    .page-item.disabled .page-link{color:#b8afb6;background:#f1eeeb}
    .age-note{margin-top:16px;color:var(--muted);font-size:12px}

    @media (max-width:1199px){
      .container{max-width:1080px}
      .topic-card{grid-template-columns:165px 1fr}
    }
    @media (max-width:991px){
      .navbar-collapse{padding-top:18px}
      .nav-actions{justify-content:flex-start;padding:8px 0 10px}
      .hero{padding-top:54px}
      .hero-panel{margin-top:30px}
      .index-layout{grid-template-columns:1fr}
      .filter-panel{position:static}
      .related-strip{grid-template-columns:1fr 1fr}
      .related-card:first-child{grid-column:span 2}
      .cta-actions{justify-content:flex-start;margin-top:25px}
    }
    @media (max-width:767px){
      .container{padding-left:18px;padding-right:18px}
      .section{padding:58px 0}
      .section-heading{display:block}
      .section-heading p{margin-top:14px}
      .topic-card{grid-template-columns:1fr;gap:17px}
      .topic-cover{min-height:155px}
      .topic-foot{align-items:flex-start;flex-direction:column}
      .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
      .footer-grid>div:first-child{grid-column:span 2}
      .footer-bottom{align-items:flex-start;flex-direction:column}
    }
    @media (max-width:575px){
      .brand{font-size:17px}
      .brand-mark{width:25px;height:25px;margin-right:5px}
      .nav-actions{display:grid;grid-template-columns:1fr 1fr}
      .nav-actions .btn{padding-left:10px;padding-right:10px;text-align:center}
      .hero h1{font-size:40px}
      .hero-copy{font-size:15px}
      .hero-actions{display:grid;grid-template-columns:1fr}
      .hero-actions .btn{width:100%;text-align:center}
      .hero-panel{min-height:320px;padding:18px}
      .cover-block{min-height:160px}
      .related-strip{grid-template-columns:1fr}
      .related-card:first-child{grid-column:auto}
      .filter-panel{padding:19px}
      .footer-grid{grid-template-columns:1fr}
      .footer-grid>div:first-child{grid-column:auto}
    }
    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
    }