/* roulang page: index */
:root {
            --color-primary: #D8405F;
            --color-primary-dark: #B62F4B;
            --color-accent: #4A2032;
            --color-bg: #FAF6F5;
            --color-surface: #FFFFFF;
            --color-soft: #F5E9EB;
            --color-text: #333333;
            --color-muted: #6B6B6B;
            --color-faint: #9B9B9B;
            --color-border: #EDE4E4;
            --radius-card: 1rem;
            --shadow-card: 0 4px 20px rgba(30, 10, 15, 0.06);
            --shadow-hover: 0 14px 32px rgba(74, 32, 50, 0.12);
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
            background: var(--color-bg);
            color: var(--color-text);
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }
        * {
            box-sizing: border-box;
        }
        img {
            max-width: 100%;
            display: block;
        }
        a {
            color: inherit;
            text-decoration: none;
            transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
        }
        button,
        input {
            font-family: inherit;
        }
        .container-site {
            width: 100%;
            max-width: 80rem;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem;
            padding-right: 1rem;
        }
        @media (min-width: 640px) {
            .container-site {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
            }
        }
        @media (min-width: 1024px) {
            .container-site {
                padding-left: 2rem;
                padding-right: 2rem;
            }
        }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 60;
            border-bottom: 1px solid var(--color-border);
            background: rgba(250, 246, 245, 0.92);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .top-brand {
            background: linear-gradient(135deg, #4A2032 0%, #631d33 100%);
            color: #fff;
        }
        .top-brand .container-site {
            min-height: 3.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        .brand {
            display: flex;
            align-items: center;
            gap: .7rem;
            min-width: 0;
        }
        .brand-mark {
            width: 2.3rem;
            height: 2.3rem;
            border-radius: .7rem;
            background: linear-gradient(135deg, #F26B85 4%, var(--color-primary) 68%, #B62F4B 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            color: #fff;
            font-size: 1.2rem;
            box-shadow: 0 4px 12px rgba(216, 64, 95, 0.35);
        }
        .brand-text {
            line-height: 1.15;
            font-weight: 800;
            font-size: 1.25rem;
            letter-spacing: .01em;
            white-space: nowrap;
        }
        .brand-text small {
            display: block;
            font-size: .7rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.72);
            letter-spacing: .14em;
            margin-top: .1rem;
        }
        .brand-text-light {
            color: #fff;
        }
        .header-soft {
            display: flex;
            align-items: center;
            gap: .8rem;
        }
        .version-pill {
            background: rgba(255, 255, 255, 0.14);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.22);
            padding: .25rem .7rem;
            border-radius: 999px;
            font-size: .75rem;
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            white-space: nowrap;
        }
        .version-pill i {
            color: #8EE6B0;
            font-size: .6rem;
        }
        .header-icon-btn {
            width: 2.35rem;
            height: 2.35rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            color: #fff;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            transition: all .25s ease;
        }
        .header-icon-btn:hover {
            background: rgba(255, 255, 255, 0.22);
        }
        .channel-bar {
            background: var(--color-surface);
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
        }
        .channel-bar .container-site {
            display: flex;
            align-items: center;
            gap: .2rem;
            min-height: 3rem;
            overflow-x: auto;
            scrollbar-width: none;
            flex-wrap: nowrap;
        }
        .channel-bar .container-site::-webkit-scrollbar {
            display: none;
        }
        .channel-label {
            font-size: .75rem;
            color: var(--color-faint);
            margin-right: .5rem;
            white-space: nowrap;
            letter-spacing: .06em;
        }
        .nav-channel-link {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            padding: .35rem .9rem;
            border-radius: 999px;
            font-size: .85rem;
            font-weight: 500;
            color: #5b5b5b;
            border: 1px solid transparent;
            transition: all .2s ease;
            white-space: nowrap;
        }
        .nav-channel-link i {
            font-size: .7rem;
            margin-right: .3rem;
            color: var(--color-primary);
            opacity: .85;
        }
        .nav-channel-link:hover {
            color: var(--color-primary);
            background: var(--color-soft);
        }
        .nav-channel-link.active {
            background: var(--color-primary);
            color: #fff;
        }
        .nav-channel-link.active i {
            color: #fff;
        }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            font-weight: 600;
            border-radius: 999px;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all .22s ease;
            white-space: nowrap;
            line-height: 1.2;
            text-align: center;
        }
        .btn:focus-visible,
        a:focus-visible,
        button:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(216, 64, 95, 0.35), 0 0 0 6px rgba(216, 64, 95, 0.08);
        }
        .btn-primary {
            background: var(--color-primary);
            color: #fff;
            box-shadow: 0 8px 20px rgba(216, 64, 95, 0.26);
        }
        .btn-primary:hover {
            background: var(--color-primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 12px 26px rgba(216, 64, 95, 0.32);
        }
        .btn-primary:active {
            transform: translateY(0);
            box-shadow: 0 4px 12px rgba(216, 64, 95, 0.2);
        }
        .btn-outline-light {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.6);
            color: #fff;
        }
        .btn-outline-light:hover {
            background: rgba(255, 255, 255, 0.18);
            border-color: #fff;
            transform: translateY(-2px);
        }
        .btn-outline {
            background: #fff;
            border-color: #E9B4BE;
            color: var(--color-primary-dark);
        }
        .btn-outline:hover {
            background: var(--color-soft);
            border-color: var(--color-primary);
            transform: translateY(-2px);
        }
        .btn-lg {
            min-height: 3rem;
            padding: 0 1.6rem;
            font-size: .95rem;
        }
        .btn-sm {
            min-height: 2.2rem;
            padding: 0 .9rem;
            font-size: .8rem;
            font-weight: 600;
        }
        .hero-section {
            position: relative;
            background: url('/assets/images/backpic/back-1.jpg') center center / cover no-repeat;
            min-height: 92vh;
            display: flex;
            align-items: center;
            isolation: isolate;
            overflow: hidden;
        }
        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, rgba(27, 6, 15, 0.92) 0%, rgba(64, 20, 38, 0.87) 48%, rgba(52, 14, 28, 0.72) 100%);
            z-index: -1;
        }
        .hero-grid {
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            gap: 2.5rem;
            padding-top: 4.5rem;
            padding-bottom: 5rem;
            z-index: 2;
        }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            border-radius: 999px;
            padding: .3rem .9rem;
            font-size: .78rem;
            font-weight: 600;
            letter-spacing: .02em;
        }
        .eyebrow-light {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.22);
            color: #fff;
        }
        .eyebrow-light span {
            color: #8EE6B0;
        }
        .hero-title {
            color: #fff;
            font-size: 2rem;
            line-height: 1.18;
            font-weight: 800;
            letter-spacing: -0.03em;
            margin-top: 1.4rem;
            margin-bottom: 1.2rem;
        }
        .hero-title .hl-primary {
            color: #FF8AA2;
        }
        .hero-sub {
            color: rgba(255, 255, 255, 0.86);
            max-width: 34rem;
            font-size: 1.05rem;
            line-height: 1.85;
            margin-bottom: 2rem;
        }
        .hero-meta {
            display: flex;
            flex-wrap: wrap;
            gap: .7rem;
            margin-top: 1.7rem;
        }
        .mini-pill {
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.9);
            border-radius: 999px;
            font-size: .75rem;
            padding: .32rem .8rem;
        }
        .panel-card {
            background: #fff;
            border-radius: 1.1rem;
            box-shadow: 0 18px 50px rgba(28, 6, 18, 0.2);
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.65);
        }
        .panel-head {
            background: linear-gradient(135deg, #4A2032, #6A2343);
            padding: 1rem 1.4rem;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .panel-head small {
            color: rgba(255, 255, 255, 0.7);
            font-size: .72rem;
            letter-spacing: .06em;
        }
        .rank-row {
            padding: .9rem 1.2rem;
            border-bottom: 1px solid #F3EAEC;
            display: flex;
            align-items: center;
            gap: .55rem;
        }
        .rank-row:last-child {
            border-bottom: none;
        }
        .rank-badge {
            width: 1.6rem;
            height: 1.6rem;
            border-radius: .5rem;
            background: var(--color-soft);
            color: var(--color-primary-dark);
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .75rem;
            flex: 0 0 auto;
        }
        .rank-main {
            flex: 1;
            min-width: 0;
        }
        .rank-rating {
            font-size: .72rem;
            color: #C27A4F;
        }
        .rank-tag {
            background: #FB8FA5;
            color: #fff;
            font-size: .68rem;
            border-radius: 999px;
            padding: .12rem .55rem;
            white-space: nowrap;
        }
        .section {
            padding: 5rem 0;
        }
        .section-soft {
            background: var(--color-soft);
        }
        .section-title {
            font-size: 1.6rem;
            line-height: 1.3;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--color-accent);
            margin-top: .8rem;
            margin-bottom: 1rem;
        }
        .section-lead {
            color: var(--color-muted);
            font-size: .98rem;
            line-height: 1.8;
            max-width: 42rem;
        }
        .straw-list {
            display: grid;
            gap: 1rem;
            margin-top: 2.5rem;
        }
        .pain-item {
            display: flex;
            align-items: center;
            gap: 1.1rem;
            background: #fff;
            border-radius: 1rem;
            padding: 1.15rem 1.4rem;
            box-shadow: var(--shadow-card);
            border: 1px solid var(--color-border);
            transition: transform .25s ease, box-shadow .25s ease;
        }
        .pain-item:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }
        .pain-num {
            background: var(--color-soft);
            color: var(--color-primary-dark);
            font-weight: 800;
            width: 2.1rem;
            height: 2.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: .88rem;
            flex: 0 0 auto;
        }
        .pain-icon {
            margin-left: auto;
            color: #D8B5BD;
            transition: transform .2s ease, color .2s ease;
        }
        .pain-item:hover .pain-icon {
            color: var(--color-primary);
            transform: translateX(3px);
        }
        .solution-step {
            display: flex;
            gap: 1rem;
            border-bottom: 1px dashed #E8D8DC;
            padding: 1rem 0;
        }
        .solution-step:last-child {
            border-bottom: none;
        }
        .step-index {
            font-size: 1.5rem;
            font-weight: 800;
            color: rgba(216, 64, 95, 0.55);
            line-height: 1.2;
            min-width: 2.4rem;
        }
        .offer-card {
            background: #fff;
            border-radius: 1.1rem;
            overflow: hidden;
            box-shadow: var(--shadow-card);
            border: 1px solid var(--color-border);
            transition: all .3s ease;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .offer-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-hover);
        }
        .offer-card-top {
            padding: 1.1rem 1.2rem;
            color: #fff;
            background: var(--color-accent);
        }
        .offer-card-top.o-red {
            background: linear-gradient(120deg, #D8405F, #F06A83);
        }
        .offer-card-top.o-dark {
            background: linear-gradient(120deg, #4A2032, #6B2945);
        }
        .offer-card-top.o-green {
            background: linear-gradient(120deg, #415950, #56786B);
        }
        .offer-card-body {
            padding: 1.3rem;
            display: flex;
            flex-direction: column;
            gap: .75rem;
            flex: 1;
        }
        .offer-tag {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            gap: .3rem;
            background: var(--color-soft);
            color: var(--color-primary-dark);
            font-size: .72rem;
            border-radius: 999px;
            padding: .2rem .65rem;
            font-weight: 600;
        }
        .big-number {
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--color-primary);
            letter-spacing: -0.04em;
            line-height: 1;
        }
        .rule-box {
            background: #fff;
            border-radius: 1.1rem;
            border: 1px solid var(--color-border);
            box-shadow: var(--shadow-card);
            padding: 1.6rem;
            position: relative;
            overflow: hidden;
        }
        .rule-box::before {
            content: "";
            position: absolute;
            right: -2rem;
            top: -2rem;
            width: 7rem;
            height: 7rem;
            background: radial-gradient(circle, rgba(216, 64, 95, 0.12), transparent 70%);
        }
        .rule-icon {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: .8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-soft);
            color: var(--color-primary);
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }
        .news-item {
            display: flex;
            gap: .9rem;
            align-items: flex-start;
            border-bottom: 1px solid var(--color-border);
            padding: 1.1rem 0;
        }
        .news-item:last-child {
            border-bottom: none;
        }
        .news-date {
            color: var(--color-faint);
            font-size: .73rem;
            flex: 0 0 auto;
            margin-top: .1rem;
        }
        .news-title {
            font-weight: 600;
            color: var(--color-text);
            font-size: .93rem;
            line-height: 1.6;
            transition: color .2s ease;
        }
        .news-title:hover {
            color: var(--color-primary);
        }
        .right-widget {
            background: #fff;
            border-radius: 1rem;
            border: 1px solid var(--color-border);
            box-shadow: var(--shadow-card);
            padding: 1.4rem 1.25rem;
        }
        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
        }
        .tag-cloud a {
            border: 1px solid #DCE0E2;
            padding: .25rem .8rem;
            border-radius: 999px;
            font-size: .78rem;
            color: #5D5D5D;
            transition: all .2s ease;
        }
        .tag-cloud a:hover {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: #fff;
        }
        .testimonial-card {
            background: #fff;
            border-radius: 1.1rem;
            border: 1.5px solid transparent;
            box-shadow: var(--shadow-card);
            padding: 1.5rem;
            height: 100%;
            transition: transform .25s ease, box-shadow .25s ease;
        }
        .testimonial-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: rgba(216, 64, 95, 0.25);
        }
        .user-avatar {
            width: 2.6rem;
            height: 2.6rem;
            border-radius: 50%;
            background: linear-gradient(135deg, #F38CA1, var(--color-primary));
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .9rem;
            font-weight: 700;
            flex: 0 0 auto;
        }
        .faq-item {
            background: #fff;
            border: 1px solid var(--color-border);
            border-radius: 1rem;
            padding: .2rem 1.35rem;
            box-shadow: var(--shadow-card);
            margin-bottom: .9rem;
            transition: box-shadow .2s ease;
        }
        .faq-item:hover {
            box-shadow: var(--shadow-hover);
        }
        .faq-q {
            display: flex;
            align-items: center;
            gap: .9rem;
            cursor: pointer;
            padding: 1rem 0;
            justify-content: space-between;
            font-weight: 600;
            color: #2A2A2A;
        }
        .faq-q i {
            color: var(--color-primary);
            transition: transform .25s ease;
        }
        .faq-a {
            color: var(--color-muted);
            font-size: .9rem;
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease, padding .3s ease;
        }
        .faq-item.open .faq-q i {
            transform: rotate(180deg);
        }
        .faq-item.open .faq-a {
            max-height: 300px;
            padding-bottom: 1rem;
        }
        .cta-band {
            background: url('/assets/images/backpic/back-2.jpg') center center / cover no-repeat;
            position: relative;
            isolation: isolate;
        }
        .cta-band .overlay-cta {
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(35, 8, 21, 0.9) 0%, rgba(74, 32, 50, 0.9) 100%);
            z-index: -1;
        }
        .footer-site {
            background: var(--color-accent);
            color: rgba(255, 255, 255, 0.82);
        }
        .footer-site .footer-links a {
            color: rgba(255, 255, 255, 0.66);
            font-size: .8rem;
            padding: .3rem .4rem;
            font-weight: 500;
            transition: all .2s ease;
            display: inline-block;
        }
        .footer-site .footer-links a:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 999px;
        }
        .footer-copy {
            border-top: 1px solid rgba(255, 255, 255, 0.14);
            color: rgba(255, 255, 255, 0.5);
            font-size: .75rem;
        }
        .search-panel {
            display: flex;
            align-items: center;
            background: #fff;
            border: 1px solid var(--color-border);
            border-radius: 999px;
            overflow: hidden;
            transition: border .2s ease, box-shadow .2s ease;
        }
        .search-panel:focus-within {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 4px rgba(216, 64, 95, 0.08);
        }
        .search-panel input {
            border: none;
            outline: none;
            flex: 1;
            min-width: 0;
            background: transparent;
            padding: .65rem 0 .65rem 1rem;
            font-size: .85rem;
        }
        .search-panel button {
            background: var(--color-primary);
            color: #fff;
            border: none;
            height: 2.4rem;
            margin-right: .3rem;
            width: 2.4rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            transition: all .2s ease;
        }
        .search-panel button:hover {
            background: var(--color-primary-dark);
        }
        .grid-2col {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
        }
        @media (min-width: 768px) {
            .grid-2col {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        .bg-faux {
            background-image: url('/assets/images/coverpic/cover-1.webp');
            background-size: cover;
            background-position: center 60%;
        }
        .img-cover {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
        @media (max-width: 767px) {
            .hero-section {
                min-height: auto;
                padding: 2.5rem 0 3rem;
            }
        }
        @media (max-width: 639px) {
            .brand-text {
                font-size: 1.08rem;
            }
            .hero-title {
                font-size: 1.7rem;
            }
            .section {
                padding: 3.8rem 0;
            }
            .hide-mobile {
                display: none !important;
            }
        }
        @media (min-width: 640px) {
            .hero-grid {
                grid-template-columns: minmax(0, 1fr) 27rem;
                align-items: center;
            }
        }
        @media (min-width: 1024px) {
            .hero-title {
                font-size: 3rem;
            }
            .section-title {
                font-size: 2.2rem;
            }
        }
        @media (max-width: 640px) {
            .hero-actions {
                flex-direction: column;
            }
            .hero-actions .btn {
                width: 100%;
            }
        }

/* roulang page: category1 */
:root {
  --color-primary: #D8405F;
  --color-primary-dark: #B62F4B;
  --color-accent: #4A2032;
  --color-bg: #FAF6F5;
  --color-surface: #FFFFFF;
  --color-soft: #F5E9EB;
  --color-text: #333333;
  --color-muted: #6B6B6B;
  --color-faint: #9B9B9B;
  --color-border: #EDE4E4;
  --radius-card: 1rem;
  --shadow-card: 0 4px 20px rgba(30, 10, 15, 0.06);
  --shadow-hover: 0 14px 32px rgba(74, 32, 50, 0.12);
}
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
button, input { font-family: inherit; }
.container-site { width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .container-site { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container-site { padding-left: 2rem; padding-right: 2rem; } }
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--color-border);
  background: rgba(250, 246, 245, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.top-brand {
  background: linear-gradient(135deg, #4A2032 0%, #631d33 100%);
  color: #fff;
}
.top-brand .container-site {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}
.brand-mark {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: .7rem;
  background: linear-gradient(135deg, #F26B85 4%, var(--color-primary) 68%, #B62F4B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(216, 64, 95, 0.35);
  flex: 0 0 auto;
}
.brand-text { line-height: 1.15; font-weight: 800; font-size: 1.25rem; letter-spacing: .01em; white-space: nowrap; }
.brand-text small { display: block; font-size: .7rem; font-weight: 500; color: rgba(255,255,255,.72); letter-spacing: .14em; margin-top: .1rem; }
.brand-text-light { color: #fff; }
.header-soft { display: flex; align-items: center; gap: .8rem; }
.version-pill {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.version-pill i { color: #8EE6B0; font-size: .6rem; }
.hide-mobile { display: none; }
@media (min-width: 640px) { .hide-mobile { display: inline-flex; } }
.channel-bar { background: #fff; }
.channel-bar .container-site {
  display: flex;
  align-items: center;
  gap: .2rem;
  min-height: 3rem;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.channel-bar .container-site::-webkit-scrollbar { display: none; }
.channel-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
  color: var(--color-accent);
  font-weight: 700;
  font-size: .85rem;
  padding: 0 .6rem 0 .2rem;
}
.nav-channel-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: .35rem .9rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  color: #5b5b5b;
  border: 1px solid transparent;
  transition: all .2s ease;
  white-space: nowrap;
}
.nav-channel-link i { font-size: .7rem; margin-right: .3rem; color: var(--color-primary); opacity: .85; }
.nav-channel-link:hover { color: var(--color-primary); background: var(--color-soft); }
.nav-channel-link.active { background: var(--color-primary); color: #fff; }
.nav-channel-link.active i { color: #fff; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .22s ease;
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
}
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(216,64,95,.35), 0 0 0 6px rgba(216,64,95,.08); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px rgba(216,64,95,.26); }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(216,64,95,.32); }
.btn-primary:active { background: #962a42; transform: translateY(0); }
.btn-soft { background: #fff; color: var(--color-primary); border: 1px solid rgba(216,64,95,.35); }
.btn-soft:hover { background: var(--color-soft); border-color: var(--color-primary); }
.btn-sm { min-height: 2.4rem; padding: 0 .95rem; font-size: .85rem; }
.cat-hero { position: relative; min-height: 300px; display: flex; align-items: center; overflow: hidden; }
.cat-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cat-hero__veil { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(30,10,15,.78), rgba(90,25,45,.55)); }
.cat-hero__inner { position: relative; z-index: 2; padding-top: 3rem; padding-bottom: 3rem; }
.cat-crumb { display: flex; gap: .6rem; align-items: center; font-size: .85rem; color: rgba(255,255,255,.75); margin-bottom: 1.4rem; }
.cat-crumb a { color: rgba(255,255,255,.85); display: inline-flex; align-items: center; gap: .3rem; }
.cat-crumb a:hover { color: #FFD1DA; }
.cat-hero__inner h1 { color: #fff; font-size: 2rem; line-height: 1.2; font-weight: 800; max-width: 860px; }
.cat-hero__inner .cat-head-text { color: rgba(255,255,255,.88); font-size: 1rem; line-height: 1.8; max-width: 720px; margin-top: .7rem; }
.cat-hero__facts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.7rem; }
.cat-hero__facts span {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: .78rem;
  border-radius: 999px;
  padding: .25rem .75rem;
  backdrop-filter: blur(4px);
}
@media (min-width: 768px) {
  .cat-hero { min-height: 340px; }
  .cat-hero__inner h1 { font-size: 2.6rem; line-height: 1.15; }
  .cat-hero__inner .cat-head-text { font-size: 1.08rem; }
}
.page-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, transform .25s ease;
}
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(216,64,95,.08);
  border-radius: 999px;
  padding: .22rem .7rem;
  letter-spacing: .02em;
  border: 1px solid rgba(216,64,95,.14);
}
.card-inner-title { font-size: 1.3rem; line-height: 1.35; font-weight: 800; color: var(--color-accent); margin: .8rem 0 .6rem; }
.step-list { counter-reset: step; display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.4rem; }
.step-item { counter-increment: step; display: flex; gap: 1rem; align-items: flex-start; }
.step-item__num {
  flex: 0 0 2.7rem;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #F5E9EB, #EAD2D8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--color-primary);
  font-size: .95rem;
  box-shadow: inset 0 0 0 1px rgba(216,64,95,.14);
}
.step-item h3 { font-weight: 700; color: var(--color-text); font-size: 1rem; line-height: 1.4; }
.step-item p { color: var(--color-muted); font-size: .9rem; line-height: 1.7; margin-top: .2rem; max-width: 620px; }
.version-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  border-bottom: 1px dashed #EFDFE2;
  padding: 1.1rem 0;
}
.version-row:last-child { border-bottom: 0; padding-bottom: 0; }
.version-row__badge { font-weight: 700; color: var(--color-accent); font-size: .98rem; display: flex; align-items: center; gap: .4rem; }
.version-row__badge i { color: var(--color-primary); font-size: .85rem; }
.version-row p { color: var(--color-muted); font-size: .9rem; line-height: 1.75; margin: 0; }
@media (min-width: 640px) {
  .version-row { grid-template-columns: 150px 1fr; align-items: baseline; gap: 1.2rem; }
}
.check-item { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 0; border-bottom: 1px solid #F4E8EA; }
.check-item:last-child { border-bottom: 0; }
.check-item i { color: var(--color-primary); background: rgba(216,64,95,.08); width: 1.8rem; height: 1.8rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: .9rem; flex: 0 0 auto; }
.check-item strong { display: block; font-size: .96rem; }
.check-item p { margin: .15rem 0 0; color: var(--color-muted); font-size: .88rem; }
.issue-list { margin-top: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.issue-item { display: flex; gap: .8rem; background: #FAF7F6; border-radius: .9rem; padding: .9rem 1rem; align-items: flex-start; }
.issue-item i { margin-top: .25rem; color: var(--color-primary); }
.issue-item strong { font-size: .92rem; }
.issue-item p { font-size: .87rem; color: var(--color-muted); line-height: 1.65; margin: .15rem 0 0; }
.aside-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.4rem 1.4rem;
  box-shadow: 0 3px 12px rgba(30,10,15,.04);
}
.aside-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.aside-card h3 i { color: var(--color-primary); }
.aside-list { margin-top: .8rem; display: flex; flex-direction: column; gap: .6rem; }
.aside-list span { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: #4b4b4b; }
.aside-list span i { margin-top: .32rem; font-size: .7rem; color: var(--color-primary); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.tag-cloud a {
  font-size: .76rem;
  background: #F6EEEF;
  color: #5E3440;
  border-radius: 999px;
  padding: .25rem .7rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all .2s ease;
}
.tag-cloud a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.timeline-card { display: flex; gap: .8rem; align-items: flex-start; padding: .6rem 0; }
.timeline-card i { color: var(--color-primary); margin-top: .28rem; font-size: .8rem; }
.timeline-card p { margin: 0; font-size: .86rem; color: var(--color-muted); line-height: 1.5; }
.mini-banner {
  position: relative;
  border-radius: 1.4rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.8rem;
  min-height: 180px;
  box-shadow: 0 8px 22px rgba(60, 15, 30, .12);
}
.mini-banner .banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.mini-banner .banner-shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(45,12,22,.82), rgba(120,25,48,.55)); }
.mini-banner .mini-banner__content { position: relative; z-index: 2; max-width: 640px; }
.FAQ-section { background: #fff; }
.faq-item {
  background: #FAF6F5;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-item:hover { border-color: rgba(216,64,95,.25); box-shadow: 0 4px 16px rgba(30,10,15,.06); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; font-weight: 700; color: var(--color-text); font-size: .96rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { font-size: .9rem; color: var(--color-primary); flex: 0 0 auto; transition: transform .3s ease; }
.faq-item[open] summary { color: var(--color-primary-dark); }
.faq-item[open] summary i { transform: rotate(180deg); }
.faq-item .faq-answer { padding: 0 1.2rem 1.1rem; color: var(--color-muted); font-size: .9rem; line-height: 1.8; }
.cta-banner {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 4.5rem 1.2rem;
}
.cta-banner .banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cta-banner .banner-veil { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(45,12,22,.88), rgba(90,22,42,.7)); }
.cta-banner .cta-content { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.cta-banner h2 { color: #fff; font-size: 1.9rem; line-height: 1.25; font-weight: 800; }
.cta-banner p { color: rgba(255,255,255,.85); margin-top: .6rem; }
.footer-site { background: #2E1420; color: rgba(255,255,255,.6); font-size: .85rem; }
.footer-links a { color: rgba(255,255,255,.68); padding: .15rem .35rem; border-radius: .35rem; font-size: .83rem; }
.footer-links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.footer-copy { border-top: 1px solid rgba(255,255,255,.08); }
.link-more { display: inline-flex; align-items: center; gap: .35rem; color: var(--color-primary); font-weight: 600; font-size: .9rem; margin-top: .6rem; }
.link-more i { transition: transform .2s ease; }
.link-more:hover i { transform: translate(3px, -2px); }
.btn-white { background: #fff; color: var(--color-primary-dark); box-shadow: 0 10px 22px rgba(0,0,0,.15); }
.btn-white:hover { background: var(--color-soft); transform: translateY(-2px); }
.cat-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 0; }
@media (min-width: 1024px) {
  .cat-layout { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 2.6rem; padding: 4rem 0; }
}