/* roulang page: index */
:root {
            --primary: #2463a8;
            --primary-dark: #174a82;
            --primary-soft: #eaf3fc;
            --primary-pale: #f4f8fc;
            --accent: #147c86;
            --accent-soft: #e7f5f4;
            --warm: #9b6733;
            --warm-soft: #faf3e8;
            --ink: #172435;
            --text: #344356;
            --muted: #68778a;
            --line: #dce5ee;
            --line-strong: #c7d5e3;
            --white: #ffffff;
            --page: #f8fafc;
            --surface: #ffffff;
            --surface-alt: #f1f5f8;
            --danger: #a44343;
            --success: #24735c;
            --radius-sm: 5px;
            --radius: 8px;
            --shadow-sm: 0 5px 18px rgba(29, 57, 87, .06);
            --shadow: 0 14px 40px rgba(29, 57, 87, .10);
            --shadow-hover: 0 18px 46px rgba(29, 57, 87, .15);
            --container: 1180px;
            --transition: 200ms ease;
        }

        *, *::before, *::after { box-sizing: border-box; }

        html {
            scroll-behavior: smooth;
            background: var(--page);
        }

        body {
            margin: 0;
            color: var(--text);
            background: var(--page);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.78;
            letter-spacing: 0;
            -webkit-font-smoothing: antialiased;
        }

        body.is-reveal-open { padding-right: 0 !important; }

        h1, h2, h3, h4, p, ul, ol { margin-top: 0; }
        h1, h2, h3, h4 {
            color: var(--ink);
            font-weight: 750;
            line-height: 1.25;
            letter-spacing: 0;
        }

        h1 { font-size: 48px; margin-bottom: 24px; }
        h2 { font-size: 31px; margin-bottom: 16px; }
        h3 { font-size: 20px; margin-bottom: 10px; }
        p { margin-bottom: 18px; }
        a { color: var(--primary); text-decoration: none; transition: var(--transition); }
        a:hover { color: var(--primary-dark); }
        img { display: block; max-width: 100%; height: auto; }
        button, input, select, textarea { font: inherit; }
        button, a, input, select, textarea { outline: none; }

        :focus-visible {
            outline: 3px solid rgba(36, 99, 168, .28);
            outline-offset: 3px;
        }

        .site-container {
            width: min(calc(100% - 40px), var(--container));
            margin: 0 auto;
        }

        .section {
            padding: 92px 0;
            position: relative;
        }

        .section-white { background: var(--white); }
        .section-soft { background: var(--surface-alt); }

        .section-heading {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 32px;
            margin-bottom: 38px;
        }

        .section-heading-copy { max-width: 720px; }
        .section-heading p {
            color: var(--muted);
            max-width: 690px;
            margin-bottom: 0;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 13px;
            color: var(--primary-dark);
            font-size: 13px;
            font-weight: 700;
        }

        .eyebrow::before {
            width: 22px;
            height: 3px;
            content: "";
            background: var(--accent);
            border-radius: 2px;
        }

        .button {
            display: inline-flex;
            min-height: 46px;
            margin: 0;
            padding: 12px 20px;
            align-items: center;
            justify-content: center;
            gap: 9px;
            border: 1px solid var(--primary);
            border-radius: var(--radius-sm);
            background: var(--primary);
            color: var(--white);
            font-size: 15px;
            font-weight: 700;
            line-height: 1.2;
            box-shadow: 0 5px 14px rgba(36, 99, 168, .17);
            transition: transform var(--transition), background var(--transition),
                border-color var(--transition), box-shadow var(--transition);
        }

        .button:hover,
        .button:focus {
            transform: translateY(-1px);
            border-color: var(--primary-dark);
            background: var(--primary-dark);
            color: var(--white);
            box-shadow: 0 9px 21px rgba(36, 99, 168, .23);
        }

        .button:active {
            transform: translateY(0);
            box-shadow: 0 3px 9px rgba(36, 99, 168, .18);
        }

        .button.hollow {
            border-color: var(--line-strong);
            background: var(--white);
            color: var(--primary-dark);
            box-shadow: none;
        }

        .button.hollow:hover,
        .button.hollow:focus {
            border-color: var(--primary);
            background: var(--primary-soft);
            color: var(--primary-dark);
        }

        .button.clear {
            border-color: transparent;
            background: transparent;
            color: var(--primary);
            box-shadow: none;
        }

        .button.clear:hover {
            background: var(--primary-soft);
            color: var(--primary-dark);
        }

        .button[disabled],
        .button.disabled {
            opacity: .5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .icon {
            width: 18px;
            height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            line-height: 1;
        }

        .badge,
        .tag {
            display: inline-flex;
            min-height: 27px;
            padding: 4px 10px;
            align-items: center;
            border: 1px solid #cedfee;
            border-radius: 999px;
            background: var(--primary-soft);
            color: var(--primary-dark);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
        }

        .tag.accent {
            border-color: #c4e1df;
            background: var(--accent-soft);
            color: #11656e;
        }

        .tag.warm {
            border-color: #ead7bd;
            background: var(--warm-soft);
            color: #795028;
        }

        .notice-bar {
            border-bottom: 1px solid #d9e5ef;
            background: #edf5fb;
            color: #506379;
            font-size: 13px;
        }

        .notice-inner {
            min-height: 36px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }

        .notice-group {
            display: flex;
            align-items: center;
            gap: 18px;
            white-space: nowrap;
        }

        .notice-domain {
            color: var(--primary-dark);
            font-weight: 750;
        }

        .notice-dot {
            width: 6px;
            height: 6px;
            flex: 0 0 6px;
            border-radius: 50%;
            background: var(--accent);
        }

        .notice-action {
            color: var(--primary-dark);
            font-weight: 700;
        }

        .site-header {
            position: sticky;
            z-index: 50;
            top: 0;
            border-bottom: 1px solid rgba(213, 225, 236, .92);
            background: rgba(255, 255, 255, .97);
            box-shadow: 0 5px 22px rgba(25, 51, 78, .05);
        }

        .top-bar {
            min-height: 74px;
            padding: 0;
            background: transparent;
        }

        .top-bar,
        .top-bar ul { background: transparent; }

        .top-bar-left,
        .top-bar-right {
            display: flex;
            align-items: center;
        }

        .brand {
            display: inline-flex;
            max-width: 390px;
            min-height: 74px;
            align-items: center;
            gap: 12px;
            color: var(--ink);
            font-size: 18px;
            font-weight: 800;
            line-height: 1.3;
        }

        .brand:hover { color: var(--primary-dark); }

        .brand-mark {
            width: 37px;
            height: 37px;
            flex: 0 0 37px;
            position: relative;
            border: 1px solid #bcd1e3;
            border-radius: 7px;
            background: var(--primary-soft);
        }

        .brand-mark::before,
        .brand-mark::after {
            position: absolute;
            content: "";
            background: var(--primary);
            border-radius: 2px;
        }

        .brand-mark::before {
            width: 17px;
            height: 4px;
            top: 10px;
            left: 9px;
        }

        .brand-mark::after {
            width: 11px;
            height: 4px;
            top: 21px;
            left: 9px;
            box-shadow: 14px 0 0 var(--accent);
        }

        .main-menu {
            margin-left: 28px;
            gap: 5px;
        }

        .main-menu > li > a {
            min-height: 42px;
            padding: 11px 15px;
            position: relative;
            border-radius: 5px;
            color: #4b5b6e;
            font-size: 14px;
            font-weight: 650;
        }

        .main-menu > li > a:hover {
            background: var(--primary-pale);
            color: var(--primary-dark);
        }

        .main-menu > li.is-active > a {
            background: var(--primary-soft);
            color: var(--primary-dark);
        }

        .main-menu > li.is-active > a::after {
            width: 22px;
            height: 2px;
            position: absolute;
            bottom: 5px;
            left: 50%;
            content: "";
            transform: translateX(-50%);
            background: var(--primary);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .nav-search {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--line);
            border-radius: 6px;
            color: var(--primary-dark);
            background: var(--white);
            font-size: 21px;
        }

        .nav-search:hover {
            border-color: var(--primary);
            background: var(--primary-soft);
        }

        .nav-confirm {
            min-height: 42px;
            padding: 10px 15px;
        }

        .title-bar {
            padding: 12px 0;
            background: transparent;
            color: var(--ink);
        }

        .title-bar-title {
            max-width: calc(100% - 52px);
            font-size: 15px;
            font-weight: 750;
        }

        .menu-icon {
            width: 37px;
            height: 37px;
            margin-right: 10px;
            border: 1px solid var(--line);
            border-radius: 5px;
            background: var(--white);
        }

        .menu-icon::after {
            width: 18px;
            left: 9px;
            background: var(--primary-dark);
            box-shadow: 0 6px 0 var(--primary-dark), 0 12px 0 var(--primary-dark);
        }

        .mobile-nav {
            border-top: 1px solid var(--line);
            background: var(--white);
        }

        .mobile-nav a {
            padding: 14px 20px;
            color: var(--text);
            font-weight: 650;
        }

        .mobile-nav .is-active a {
            background: var(--primary-soft);
            color: var(--primary-dark);
        }

        .hero {
            min-height: 650px;
            padding: 76px 0 54px;
            overflow: hidden;
            background-color: #f5f9fd;
            background-image:
                linear-gradient(#dfeaf3 1px, transparent 1px),
                linear-gradient(90deg, #dfeaf3 1px, transparent 1px);
            background-size: 44px 44px;
        }

        .hero::before {
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0;
            content: "";
            background: linear-gradient(90deg, rgba(245, 249, 253, .99) 0%, rgba(245, 249, 253, .91) 55%, rgba(245, 249, 253, .68) 100%);
        }

        .hero .site-container { position: relative; z-index: 2; }

        .hero-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 410px;
            gap: 64px;
            align-items: center;
        }

        .hero-copy { max-width: 710px; }

        .hero-kicker {
            display: inline-flex;
            margin-bottom: 20px;
            padding: 7px 12px;
            align-items: center;
            gap: 8px;
            border: 1px solid #ccdfef;
            border-radius: 999px;
            background: rgba(255,255,255,.88);
            color: var(--primary-dark);
            font-size: 13px;
            font-weight: 700;
        }

        .hero-kicker::before {
            width: 7px;
            height: 7px;
            content: "";
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 0 4px rgba(20, 124, 134, .12);
        }

        .hero-summary {
            max-width: 660px;
            margin-bottom: 26px;
            color: #4c5f74;
            font-size: 17px;
            line-height: 1.9;
        }

        .hero-points {
            display: grid;
            margin: 0 0 30px;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 13px;
            list-style: none;
        }

        .hero-points li {
            min-height: 48px;
            display: flex;
            align-items: center;
            gap: 9px;
            color: var(--text);
            font-size: 14px;
            font-weight: 650;
        }

        .point-check {
            width: 25px;
            height: 25px;
            flex: 0 0 25px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--accent-soft);
            color: var(--accent);
            font-size: 13px;
            font-weight: 800;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 28px;
        }

        .trust-strip {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 9px 20px;
            color: var(--muted);
            font-size: 13px;
        }

        .trust-strip span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .trust-strip i {
            width: 6px;
            height: 6px;
            display: inline-block;
            border-radius: 50%;
            background: var(--primary);
        }

        .index-panel {
            border: 1px solid #d2e0eb;
            border-radius: var(--radius);
            background: rgba(255,255,255,.95);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .panel-head {
            padding: 19px 21px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--line);
        }

        .panel-head strong { color: var(--ink); font-size: 16px; }
        .panel-status {
            color: var(--success);
            font-size: 12px;
            font-weight: 700;
        }

        .panel-status::before {
            width: 7px;
            height: 7px;
            display: inline-block;
            margin-right: 6px;
            content: "";
            border-radius: 50%;
            background: var(--success);
        }

        .preview {
            padding: 18px 20px;
            display: grid;
            grid-template-columns: 112px minmax(0, 1fr);
            gap: 16px;
            border-bottom: 1px solid var(--line);
            transition: background var(--transition);
        }

        .preview:hover { background: var(--primary-pale); }

        .cover {
            min-height: 78px;
            position: relative;
            overflow: hidden;
            border: 1px solid #d3e0ea;
            border-radius: 6px;
            background:
                linear-gradient(145deg, rgba(36,99,168,.08), rgba(20,124,134,.20)),
                repeating-linear-gradient(45deg, #edf3f7 0, #edf3f7 10px, #e4edf4 10px, #e4edf4 20px);
        }

        .cover::after {
            position: absolute;
            right: 8px;
            bottom: 7px;
            padding: 2px 7px;
            content: "高清";
            border-radius: 3px;
            background: rgba(255,255,255,.88);
            color: var(--primary-dark);
            font-size: 10px;
            font-weight: 800;
        }

        .preview h3 { margin-bottom: 5px; font-size: 15px; }
        .preview p {
            margin: 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.65;
        }

        .panel-footer {
            padding: 14px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f8fbfd;
            color: var(--muted);
            font-size: 12px;
        }

        .metric-board {
            padding: 0 0 20px;
            background: var(--white);
        }

        .metric-wrap {
            position: relative;
            z-index: 3;
            margin-top: -27px;
            display: grid;
            grid-template-columns: 1.2fr 1fr 1fr 1.15fr;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .metric {
            min-height: 138px;
            padding: 24px 27px;
            border-right: 1px solid var(--line);
        }

        .metric:last-child { border-right: 0; }
        .metric-value {
            margin-bottom: 6px;
            color: var(--primary);
            font-size: 29px;
            font-weight: 800;
            line-height: 1.15;
        }

        .metric:nth-child(2) .metric-value { color: var(--accent); }
        .metric-label {
            margin-bottom: 4px;
            color: var(--ink);
            font-size: 14px;
            font-weight: 750;
        }

        .metric small {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .entry-grid {
            display: grid;
            grid-template-columns: 1.45fr .8fr .8fr;
            grid-template-rows: auto auto;
            gap: 18px;
        }

        .entry-card {
            min-height: 205px;
            padding: 26px;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
            box-shadow: var(--shadow-sm);
            transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
        }

        .entry-card:hover {
            transform: translateY(-3px);
            border-color: #9ebcd6;
            box-shadow: var(--shadow-hover);
        }

        .entry-main {
            min-height: 430px;
            grid-row: 1 / 3;
            padding: 34px;
            background: #f7fbfe;
        }

        .entry-wide { grid-column: 2 / 4; }

        .entry-card .tag { margin-bottom: 18px; }
        .entry-card h3 { font-size: 21px; }
        .entry-main h3 { max-width: 460px; font-size: 29px; }

        .entry-card p {
            max-width: 560px;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.8;
        }

        .entry-link {
            display: inline-flex;
            position: absolute;
            left: 26px;
            bottom: 24px;
            align-items: center;
            gap: 7px;
            color: var(--primary-dark);
            font-size: 14px;
            font-weight: 750;
        }

        .entry-main .entry-link { left: 34px; bottom: 32px; }

        .entry-visual {
            min-height: 175px;
            margin-top: 25px;
            padding: 18px;
            border: 1px solid #d7e4ee;
            border-radius: 7px;
            background: var(--white);
        }

        .filter-row {
            display: flex;
            margin-bottom: 10px;
            align-items: center;
            gap: 10px;
        }

        .filter-row:last-child { margin-bottom: 0; }
        .filter-line {
            height: 8px;
            flex: 1;
            border-radius: 2px;
            background: #e2eaf1;
        }

        .filter-line.active { background: #8db6da; }
        .filter-count {
            min-width: 36px;
            color: var(--muted);
            font-size: 11px;
            text-align: right;
        }

        .compare-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
        }

        .compare-panel {
            padding: 34px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
            box-shadow: var(--shadow-sm);
        }

        .compare-panel.featured {
            border-color: #b5d1e5;
            background: var(--primary-pale);
        }

        .compare-top {
            display: flex;
            margin-bottom: 24px;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
        }

        .compare-top p {
            max-width: 430px;
            margin-bottom: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .compare-list {
            margin: 0 0 25px;
            padding: 0;
            list-style: none;
        }

        .compare-list li {
            padding: 14px 0;
            display: grid;
            grid-template-columns: 120px 1fr;
            gap: 18px;
            border-bottom: 1px solid var(--line);
            font-size: 14px;
        }

        .compare-list strong { color: var(--ink); }
        .compare-list span { color: var(--muted); }

        .invite-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
            gap: 28px;
        }

        .milestone-card,
        .rank-card {
            padding: 32px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
            box-shadow: var(--shadow-sm);
        }

        .milestone-card p,
        .rank-card > p { color: var(--muted); font-size: 14px; }

        .progress-summary {
            display: flex;
            margin: 27px 0 12px;
            align-items: flex-end;
            justify-content: space-between;
            gap: 20px;
        }

        .progress-summary strong {
            color: var(--ink);
            font-size: 18px;
        }

        .progress-summary span {
            color: var(--primary);
            font-size: 14px;
            font-weight: 750;
        }

        .progress {
            height: 12px;
            margin-bottom: 24px;
            border-radius: 2px;
            background: #e4ebf1;
        }

        .progress-meter {
            border-radius: 2px;
            background: var(--primary);
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 26px;
        }

        .step {
            min-height: 94px;
            padding: 15px;
            border: 1px solid var(--line);
            border-radius: 6px;
            background: #fbfcfd;
        }

        .step.is-done {
            border-color: #bddbd7;
            background: var(--accent-soft);
        }

        .step b {
            display: block;
            margin-bottom: 4px;
            color: var(--ink);
            font-size: 14px;
        }

        .step span {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.5;
        }

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

        .rank-list {
            margin: 18px 0 0;
            padding: 0;
            list-style: none;
        }

        .rank-item {
            padding: 13px 0;
            display: grid;
            grid-template-columns: 31px minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--line);
        }

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

        .rank-no {
            color: var(--primary);
            font-size: 14px;
            font-weight: 800;
        }

        .rank-name {
            overflow: hidden;
            color: var(--ink);
            font-size: 14px;
            font-weight: 650;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rank-score {
            color: var(--muted);
            font-size: 12px;
        }

        .news-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr);
            gap: 26px;
        }

        .news-list {
            border-top: 1px solid var(--line-strong);
        }

        .news-item {
            padding: 19px 6px;
            display: grid;
            grid-template-columns: 100px minmax(0, 1fr) auto;
            align-items: center;
            gap: 18px;
            border-bottom: 1px solid var(--line);
            transition: background var(--transition), padding var(--transition);
        }

        .news-item:hover {
            padding-right: 12px;
            padding-left: 12px;
            background: var(--primary-pale);
        }

        .news-date {
            color: var(--muted);
            font-size: 13px;
        }

        .news-title {
            color: var(--ink);
            font-size: 15px;
            font-weight: 700;
        }

        .news-title:hover { color: var(--primary); }
        .news-status {
            color: var(--accent);
            font-size: 12px;
            font-weight: 700;
        }

        .trend-panel {
            padding: 25px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
            box-shadow: var(--shadow-sm);
        }

        .trend-panel h3 { font-size: 18px; }
        .trend-list {
            margin: 17px 0 0;
            padding: 0;
            list-style: none;
        }

        .trend-list li {
            padding: 12px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            border-bottom: 1px solid var(--line);
            font-size: 14px;
        }

        .trend-list li:last-child { border-bottom: 0; }
        .trend-list b { color: var(--ink); font-weight: 650; }
        .trend-up { color: var(--accent); font-size: 12px; font-weight: 750; }

        .assurance-strip {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
            box-shadow: var(--shadow-sm);
        }

        .assurance {
            min-height: 170px;
            padding: 27px;
            border-right: 1px solid var(--line);
        }

        .assurance:last-child { border-right: 0; }
        .assurance-icon {
            width: 39px;
            height: 39px;
            margin-bottom: 17px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #caddes;
            border-radius: 7px;
            background: var(--primary-soft);
            color: var(--primary-dark);
            font-size: 18px;
            font-weight: 800;
        }

        .assurance h3 { font-size: 17px; }
        .assurance p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .device-stage {
            padding: 44px;
            display: grid;
            grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
            align-items: center;
            gap: 56px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
            box-shadow: var(--shadow);
        }

        .device-copy p { color: var(--muted); }
        .device-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 11px;
        }

        .browser-frame {
            padding: 12px;
            border: 1px solid #bacbd9;
            border-radius: 8px;
            background: #e9f0f5;
            box-shadow: 0 22px 42px rgba(31, 59, 85, .16);
        }

        .browser-bar {
            height: 25px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .browser-bar i {
            width: 7px;
            height: 7px;
            display: inline-block;
            border-radius: 50%;
            background: #9eb0c0;
        }

        .browser-screen {
            min-height: 245px;
            padding: 20px;
            display: grid;
            grid-template-columns: 90px 1fr;
            gap: 15px;
            border-radius: 5px;
            background: var(--white);
        }

        .screen-side {
            border-radius: 4px;
            background: #edf3f7;
        }

        .screen-main {
            display: grid;
            grid-template-rows: 35px 1fr;
            gap: 13px;
        }

        .screen-search {
            border: 1px solid var(--line);
            border-radius: 4px;
            background: #f8fafc;
        }

        .screen-cards {
            display: grid;
            grid-template-columns: 1.3fr .8fr;
            gap: 12px;
        }

        .screen-card {
            border: 1px solid #dae5ed;
            border-radius: 4px;
            background:
                linear-gradient(145deg, rgba(36,99,168,.07), rgba(20,124,134,.15)),
                #edf3f7;
        }

        .faq-shell {
            display: grid;
            grid-template-columns: 320px minmax(0, 1fr);
            gap: 55px;
            align-items: start;
        }

        .faq-intro {
            position: sticky;
            top: 120px;
        }

        .faq-intro p { color: var(--muted); }
        .accordion {
            margin: 0;
            border: 0;
            background: transparent;
        }

        .accordion-item {
            margin-bottom: 11px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        .accordion-title {
            padding: 20px 54px 20px 22px;
            border: 0;
            color: var(--ink);
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5;
        }

        .accordion-title:hover,
        .accordion-title:focus {
            background: var(--primary-pale);
            color: var(--primary-dark);
        }

        .accordion-title::before {
            right: 22px;
            margin-top: -12px;
            color: var(--primary);
            font-size: 24px;
        }

        .accordion-content {
            padding: 0 22px 21px;
            border: 0;
            background: var(--white);
            color: var(--muted);
            font-size: 14px;
            line-height: 1.85;
        }

        .contact-layout {
            padding: 45px;
            display: grid;
            grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
            gap: 55px;
            border: 1px solid #cbddea;
            border-radius: var(--radius);
            background: #eef6fc;
            box-shadow: var(--shadow);
        }

        .contact-copy p { color: #5c6f82; }

        .contact-points {
            margin: 26px 0 0;
            padding: 0;
            list-style: none;
        }

        .contact-points li {
            padding: 9px 0;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text);
            font-size: 14px;
        }

        .contact-form {
            padding: 27px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
        }

        label {
            margin-bottom: 6px;
            color: var(--ink);
            font-size: 13px;
            font-weight: 700;
        }

        input[type="text"],
        input[type="email"],
        select,
        textarea {
            height: 47px;
            margin: 0 0 17px;
            padding: 10px 13px;
            border: 1px solid var(--line-strong);
            border-radius: 5px;
            background: var(--white);
            color: var(--ink);
            box-shadow: none;
            transition: border-color var(--transition), box-shadow var(--transition);
        }

        textarea {
            min-height: 108px;
            resize: vertical;
        }

        input::placeholder,
        textarea::placeholder { color: #91a0af; }

        input:focus,
        select:focus,
        textarea:focus {
            border-color: var(--primary);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(36, 99, 168, .12);
        }

        .is-invalid-input:not(:focus) {
            border-color: var(--danger);
            background: #fffafa;
        }

        .form-error {
            margin-top: -12px;
            margin-bottom: 13px;
            color: var(--danger);
            font-size: 12px;
        }

        .check-row {
            margin: 4px 0 19px;
            display: flex;
            align-items: flex-start;
            gap: 9px;
        }

        .check-row input {
            width: 17px;
            height: 17px;
            margin: 4px 0 0;
            accent-color: var(--primary);
        }

        .check-row label {
            margin: 0;
            color: var(--muted);
            font-size: 12px;
            font-weight: 500;
            line-height: 1.7;
        }

        .form-status {
            display: none;
            margin-top: 13px;
            padding: 10px 13px;
            border: 1px solid #bad8cc;
            border-radius: 5px;
            background: #edf8f3;
            color: var(--success);
            font-size: 13px;
        }

        .form-status.is-visible { display: block; }

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

        .footer-grid {
            display: grid;
            grid-template-columns: 1.7fr .8fr .9fr 1.1fr;
            gap: 50px;
        }

        .footer-brand {
            display: inline-flex;
            margin-bottom: 18px;
            align-items: center;
            gap: 11px;
            color: var(--ink);
            font-size: 17px;
            font-weight: 800;
        }

        .footer-about {
            max-width: 390px;
            color: var(--muted);
            font-size: 13px;
        }

        .footer-title {
            margin: 3px 0 16px;
            color: var(--ink);
            font-size: 14px;
            font-weight: 750;
        }

        .footer-links {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .footer-links li { margin-bottom: 9px; }
        .footer-links a {
            color: #596b7e;
            font-size: 13px;
        }

        .footer-links a:hover {
            color: var(--primary);
            padding-left: 2px;
        }

        .footer-note {
            padding: 13px;
            border: 1px solid #d2dee8;
            border-radius: 6px;
            background: rgba(255,255,255,.6);
            color: var(--muted);
            font-size: 12px;
            line-height: 1.7;
        }

        .footer-bottom {
            margin-top: 42px;
            padding-top: 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            border-top: 1px solid #d3dee7;
            color: #748293;
            font-size: 12px;
        }

        .footer-legal {
            display: flex;
            flex-wrap: wrap;
            gap: 17px;
        }

        .footer-legal a { color: #687789; }

        .reveal {
            max-width: 540px;
            padding: 35px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
            box-shadow: 0 28px 70px rgba(18, 37, 58, .22);
        }

        .reveal h2 { font-size: 25px; }
        .reveal p { color: var(--muted); font-size: 14px; }
        .reveal-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 24px;
        }

        .close-button {
            color: var(--muted);
            font-size: 30px;
        }

        .search-modal input { margin-bottom: 12px; }

        @media screen and (max-width: 1199px) {
            h1 { font-size: 41px; }
            .section { padding: 76px 0; }
            .hero-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 38px; }
            .main-menu { margin-left: 12px; }
            .main-menu > li > a { padding-right: 10px; padding-left: 10px; }
            .nav-confirm { padding-right: 11px; padding-left: 11px; }
            .entry-grid { grid-template-columns: 1.2fr 1fr; }
            .entry-main { grid-row: 1 / 3; }
            .entry-wide { grid-column: auto; }
            .assurance-strip { grid-template-columns: repeat(2, 1fr); }
            .assurance:nth-child(2) { border-right: 0; }
            .assurance:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
            .footer-grid { grid-template-columns: 1.4fr .7fr .8fr; }
            .footer-grid > div:last-child { grid-column: 1 / 4; }
        }

        @media screen and (max-width: 899px) {
            .hero { min-height: 0; padding-top: 60px; }
            .hero-layout { grid-template-columns: 1fr; }
            .hero-copy { max-width: 760px; }
            .index-panel { max-width: 680px; }
            .metric-wrap { grid-template-columns: repeat(2, 1fr); }
            .metric:nth-child(2) { border-right: 0; }
            .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
            .entry-grid { grid-template-columns: 1fr 1fr; }
            .entry-main {
                min-height: 390px;
                grid-column: 1 / 3;
                grid-row: auto;
            }
            .compare-grid,
            .invite-layout,
            .news-layout,
            .device-stage,
            .faq-shell,
            .contact-layout { grid-template-columns: 1fr; }
            .faq-intro { position: static; }
            .device-stage { gap: 36px; }
            .contact-layout { padding: 32px; gap: 28px; }
            .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; }
        }

        @media screen and (max-width: 767px) {
            body { font-size: 15px; }
            h1 { font-size: 34px; }
            h2 { font-size: 26px; }
            .site-container { width: min(calc(100% - 28px), var(--container)); }
            .section { padding: 58px 0; }
            .section-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 27px; }
            .notice-group .notice-extra { display: none; }
            .notice-inner { min-height: 34px; }
            .hero { padding: 48px 0 48px; }
            .hero-layout { gap: 34px; }
            .hero-summary { font-size: 16px; }
            .hero-points { grid-template-columns: 1fr; gap: 3px; }
            .hero-actions .button { flex: 1 1 180px; }
            .preview { grid-template-columns: 95px 1fr; padding: 15px; }
            .metric-wrap { margin-top: -17px; }
            .metric { min-height: 122px; padding: 20px; }
            .metric-value { font-size: 25px; }
            .entry-grid { grid-template-columns: 1fr; }
            .entry-main,
            .entry-wide { grid-column: auto; }
            .entry-main { min-height: 410px; padding: 27px; }
            .entry-main h3 { font-size: 25px; }
            .entry-main .entry-link { left: 27px; }
            .compare-panel,
            .milestone-card,
            .rank-card { padding: 25px; }
            .compare-list li { grid-template-columns: 100px 1fr; }
            .steps { grid-template-columns: 1fr; }
            .news-item { grid-template-columns: 78px minmax(0, 1fr); gap: 11px; }
            .news-status { display: none; }
            .assurance-strip { grid-template-columns: 1fr; }
            .assurance { border-right: 0; border-bottom: 1px solid var(--line); }
            .assurance:nth-child(2) { border-right: 0; }
            .assurance:last-child { border-bottom: 0; }
            .device-stage { padding: 27px; }
            .browser-screen { min-height: 200px; grid-template-columns: 60px 1fr; }
            .contact-form { padding: 21px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid > div:first-child,
            .footer-grid > div:last-child { grid-column: 1 / 3; }
            .footer-bottom { align-items: flex-start; flex-direction: column; }
        }

        @media screen and (max-width: 520px) {
            h1 { font-size: 29px; }
            h2 { font-size: 24px; }
            .brand { font-size: 14px; }
            .title-bar-title { font-size: 13px; }
            .hero { background-size: 34px 34px; }
            .hero-actions { flex-direction: column; }
            .hero-actions .button { width: 100%; flex: none; }
            .trust-strip { align-items: flex-start; flex-direction: column; gap: 7px; }
            .preview { grid-template-columns: 78px 1fr; gap: 11px; }
            .cover { min-height: 70px; }
            .metric { padding: 17px 14px; }
            .metric-value { font-size: 22px; }
            .metric small { font-size: 11px; }
            .entry-card { padding: 22px; }
            .entry-link { left: 22px; }
            .compare-panel { padding: 21px; }
            .compare-top { flex-direction: column; }
            .compare-list li { grid-template-columns: 1fr; gap: 3px; }
            .share-actions .button { width: 100%; }
            .news-item { grid-template-columns: 1fr; gap: 3px; }
            .device-stage { padding: 20px; }
            .browser-frame { padding: 8px; }
            .browser-screen { padding: 12px; grid-template-columns: 45px 1fr; }
            .screen-cards { grid-template-columns: 1fr; }
            .contact-layout { padding: 20px; }
            .contact-form { padding: 17px; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-grid > div:first-child,
            .footer-grid > div:last-child { grid-column: auto; }
            .reveal { width: calc(100% - 24px); padding: 26px 22px; }
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after {
                scroll-behavior: auto !important;
                transition-duration: .01ms !important;
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
            }
        }

/* roulang page: category1 */
:root{
--primary:#2463a8;--primary-dark:#174a82;--primary-soft:#eaf3fc;--primary-pale:#f4f8fc;
--accent:#147c86;--accent-soft:#e7f5f4;--warm:#9b6733;--warm-soft:#faf3e8;
--ink:#172435;--text:#344356;--muted:#68778a;--line:#dce5ee;--line-strong:#c7d5e3;
--white:#fff;--page:#f8fafc;--surface:#fff;--surface-alt:#f1f5f8;--danger:#a44343;--success:#24735c;
--radius-sm:5px;--radius:8px;--shadow-sm:0 5px 18px rgba(29,57,87,.06);--shadow:0 14px 40px rgba(29,57,87,.10);
--shadow-hover:0 18px 46px rgba(29,57,87,.15);--container:1180px;--transition:200ms ease
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--page)}
body{margin:0;background:var(--page);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.78;-webkit-font-smoothing:antialiased}
body.is-reveal-open{padding-right:0!important}
a{color:var(--primary);text-decoration:none;transition:color var(--transition),background var(--transition),border-color var(--transition)}
a:hover{color:var(--primary-dark)}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{outline:none}
button{cursor:pointer}
.site-container{width:min(calc(100% - 40px),var(--container));margin:0 auto}
.section{position:relative;padding:82px 0}
.section-white{background:var(--white)}
.section-soft{background:var(--surface-alt)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 13px;color:var(--primary-dark);font-size:13px;font-weight:750;letter-spacing:.04em}
.eyebrow:before{width:22px;height:3px;content:"";border-radius:2px;background:var(--accent)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:34px}
.section-heading h2{margin:0;color:var(--ink);font-size:29px;line-height:1.35;font-weight:780}
.section-heading p{max-width:590px;margin:0;color:var(--muted);font-size:15px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin:0;padding:11px 19px;border:1px solid var(--primary);border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-size:15px;font-weight:700;line-height:1.25;box-shadow:0 5px 14px rgba(36,99,168,.17);transition:transform var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition)}
.button:hover,.button:focus{transform:translateY(-1px);border-color:var(--primary-dark);background:var(--primary-dark);color:#fff;box-shadow:0 9px 21px rgba(36,99,168,.23)}
.button:active{transform:translateY(0);box-shadow:0 3px 9px rgba(36,99,168,.18)}
.button.hollow{border-color:var(--line-strong);background:#fff;color:var(--primary-dark);box-shadow:none}
.button.hollow:hover,.button.hollow:focus{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-dark)}
.button.clear{border-color:transparent;background:transparent;color:var(--primary);box-shadow:none}
.button.clear:hover{background:var(--primary-soft);color:var(--primary-dark)}
.button[disabled],.button.disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.badge,.tag{display:inline-flex;align-items:center;min-height:27px;padding:4px 10px;border:1px solid #cedfee;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);font-size:12px;font-weight:700;line-height:1.2}
.tag.accent{border-color:#c4e1df;background:var(--accent-soft);color:#11656e}
.tag.warm{border-color:#ead7bd;background:var(--warm-soft);color:#795028}
.notice-domain{color:var(--primary-dark);font-weight:750}
.top-notice{border-bottom:1px solid #dbe8f4;background:#edf5fb;color:#587087;font-size:13px}
.top-notice-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px}
.notice-left,.notice-middle,.notice-right{display:flex;align-items:center;gap:12px}
.notice-middle{color:#617a8f}
.notice-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.notice-link{color:var(--primary-dark);font-weight:700}
.site-header{position:sticky;z-index:50;top:0;border-bottom:1px solid rgba(213,225,236,.92);background:rgba(255,255,255,.97);box-shadow:0 5px 22px rgba(25,51,78,.05)}
.top-bar{padding:0;background:transparent}
.top-bar,.top-bar ul{background:transparent}
.top-bar-left{display:flex;align-items:center;min-width:0}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content;min-height:74px;margin-right:30px;color:var(--ink);font-size:18px;font-weight:790;letter-spacing:-.02em}
.brand:hover{color:var(--primary-dark)}
.brand-mark{position:relative;display:inline-block;width:25px;height:25px;flex:0 0 25px;border:2px solid var(--primary);border-radius:7px;background:var(--primary-soft)}
.brand-mark:before,.brand-mark:after{position:absolute;content:"";border-radius:2px;background:var(--primary)}
.brand-mark:before{width:10px;height:3px;left:5px;top:6px}
.brand-mark:after{width:14px;height:3px;left:5px;top:13px;background:var(--accent)}
.main-menu{display:flex;align-items:stretch;margin:0;padding:0;list-style:none}
.main-menu li{display:flex;align-items:stretch}
.main-menu a{display:flex;align-items:center;position:relative;padding:25px 15px 23px;color:#4e6173;font-size:15px;font-weight:650}
.main-menu a:after{position:absolute;right:15px;bottom:16px;left:15px;height:2px;content:"";border-radius:3px;background:transparent;transition:background var(--transition)}
.main-menu a:hover{background:#f7fafc;color:var(--primary-dark)}
.main-menu .is-active a{color:var(--primary-dark)}
.main-menu .is-active a:after{background:var(--primary)}
.top-bar-right{margin-left:auto}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-search{display:inline-flex;width:39px;height:39px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--primary-dark);font-size:25px;line-height:1;transition:var(--transition)}
.nav-search:hover,.nav-search:focus{border-color:var(--primary);background:var(--primary-soft)}
.nav-confirm{min-height:39px;padding:8px 14px;font-size:13px}
.title-bar{padding:12px 0;background:transparent;color:var(--ink)}
.title-bar-title{font-size:15px;font-weight:750}
.menu-icon{margin-right:11px}
.mobile-nav{padding:5px 0 18px;border-top:1px solid var(--line)}
.mobile-nav a{padding:12px 4px;color:var(--text);font-weight:650}
.mobile-nav .is-active a{color:var(--primary-dark);font-weight:750}
.page-hero{overflow:hidden;position:relative;padding:66px 0 58px;background:linear-gradient(135deg,#f2f8fe 0%,#f8fbfe 55%,#edf6f8 100%);border-bottom:1px solid #dce7f1}
.page-hero:after{position:absolute;top:-135px;right:6%;width:330px;height:330px;content:"";border:1px solid rgba(36,99,168,.12);border-radius:50%;box-shadow:0 0 0 28px rgba(36,99,168,.035),0 0 0 56px rgba(20,124,134,.025)}
.breadcrumbs{margin:0 0 20px;background:transparent}
.breadcrumbs li,.breadcrumbs a{color:#708196;font-size:13px}
.breadcrumbs li:not(:last-child):after{color:#9aaaba}
.breadcrumbs .current{color:var(--primary-dark);font-weight:650}
.hero-content{position:relative;z-index:1}
.hero-title{max-width:760px;margin:0 0 16px;color:var(--ink);font-size:42px;line-height:1.24;font-weight:800;letter-spacing:-.035em}
.hero-lead{max-width:690px;margin:0;color:#52677c;font-size:17px;line-height:1.85}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}
.status-card{position:relative;z-index:1;margin-left:auto;padding:24px;border:1px solid #d2e1ef;border-radius:var(--radius);background:rgba(255,255,255,.9);box-shadow:var(--shadow)}
.status-top{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.status-label{display:block;margin-bottom:3px;color:var(--muted);font-size:12px;font-weight:650}
.status-card strong{display:block;color:var(--ink);font-size:19px;line-height:1.35}
.status-live{display:inline-flex;align-items:center;gap:6px;color:var(--success);font-size:12px;font-weight:750}
.status-live:before{width:7px;height:7px;content:"";border-radius:50%;background:var(--success)}
.status-list{margin:15px 0 0;padding:0;list-style:none}
.status-list li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;color:#52677c;font-size:13px}
.status-list b{color:var(--primary-dark);font-weight:750}
.filter-section{padding:28px 0;background:#fff;border-bottom:1px solid var(--line)}
.filter-shell{padding:21px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm)}
.filter-title-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:15px}
.filter-title-row h2{margin:0;color:var(--ink);font-size:18px;font-weight:760}
.filter-note{color:var(--muted);font-size:13px}
.filter-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr 1fr 1.45fr auto;gap:11px;align-items:end}
.field-label{display:block;margin-bottom:6px;color:#596e82;font-size:12px;font-weight:720}
.filter-shell select,.filter-shell input,.feedback-form input,.feedback-form select,.feedback-form textarea{
width:100%;height:43px;margin:0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fbfdff;color:var(--text);font-size:14px;box-shadow:none;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)
}
.filter-shell input,.feedback-form input{padding:0 12px}
.filter-shell select,.feedback-form select{padding:0 31px 0 12px}
.filter-shell input::placeholder,.feedback-form input::placeholder,.feedback-form textarea::placeholder{color:#98a6b5}
.filter-shell input:focus,.filter-shell select:focus,.feedback-form input:focus,.feedback-form select:focus,.feedback-form textarea:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(36,99,168,.12)}
.clear-filter{height:43px;min-width:82px;padding:9px 12px;font-size:13px}
.content-area{padding:68px 0 82px}
.result-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}
.result-bar h2{margin:0;color:var(--ink);font-size:25px;font-weight:790}
.result-summary{color:var(--muted);font-size:14px}
.result-summary b{color:var(--primary-dark)}
.featured-entry{display:grid;grid-template-columns:36% 1fr;overflow:hidden;margin-bottom:17px;border:1px solid #cedfec;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.featured-entry:hover{transform:translateY(-3px);border-color:#aac6df;box-shadow:var(--shadow-hover)}
.cover-block{position:relative;min-height:255px;overflow:hidden;background:linear-gradient(135deg,#d9e8f5,#edf4f9)}
.cover-block:before{position:absolute;inset:0;content:"";background:linear-gradient(145deg,rgba(21,74,130,.78),rgba(20,124,134,.28))}
.cover-block:after{position:absolute;right:-44px;bottom:-58px;width:200px;height:200px;content:"";border:1px solid rgba(255,255,255,.45);border-radius:50%;box-shadow:0 0 0 22px rgba(255,255,255,.1),0 0 0 44px rgba(255,255,255,.08)}
.cover-caption{position:absolute;z-index:2;bottom:20px;left:20px;color:#fff}
.cover-caption small{display:block;opacity:.82;font-size:12px}
.cover-caption b{display:block;margin-top:3px;font-size:17px}
.entry-main{display:flex;flex-direction:column;justify-content:center;padding:28px 30px}
.entry-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:13px}
.entry-meta time{color:var(--muted);font-size:13px}
.entry-main h3,.compact-copy h3{margin:0;color:var(--ink);font-size:22px;line-height:1.42;font-weight:780}
.entry-main p{max-width:670px;margin:11px 0 18px;color:#607286;font-size:14px}
.entry-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}
.entry-detail{display:flex;align-items:center;gap:8px;color:#718398;font-size:13px}
.entry-detail span:before{margin-right:5px;color:var(--accent);content:"•"}
.entry-detail span:first-child:before{content:""}
.entry-button{min-height:40px;padding:9px 14px;font-size:13px}
.entry-list{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}
.compact-entry{display:grid;grid-template-columns:135px 1fr auto;align-items:center;gap:19px;padding:18px;border-bottom:1px solid var(--line);transition:background var(--transition)}
.compact-entry:last-child{border-bottom:0}
.compact-entry:hover{background:#f9fcff}
.compact-cover{position:relative;width:135px;aspect-ratio:16/10;overflow:hidden;border:1px solid #d3e0ea;border-radius:6px;background:linear-gradient(135deg,#dcebf7,#f4f8fb)}
.compact-cover:before{position:absolute;inset:0;content:"";background:linear-gradient(145deg,rgba(36,99,168,.52),rgba(20,124,134,.12))}
.compact-cover .mini-mark{position:absolute;right:9px;bottom:8px;z-index:1;padding:3px 7px;border-radius:3px;background:rgba(255,255,255,.9);color:var(--primary-dark);font-size:10px;font-weight:800}
.compact-copy h3{font-size:17px}
.compact-copy p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
.compact-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.compact-meta time{padding:4px 0;color:#77899b;font-size:12px}
.text-action{white-space:nowrap;color:var(--primary);font-size:13px;font-weight:750}
.text-action:hover{color:var(--primary-dark)}
.sidebar-card{margin-bottom:17px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}
.sidebar-card h2{margin:0 0 16px;color:var(--ink);font-size:18px;line-height:1.4;font-weight:780}
.popular-list,.update-list{margin:0;padding:0;list-style:none}
.popular-list li{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px 0;border-bottom:1px dashed #dce5ee}
.popular-list li:last-child{border-bottom:0}
.popular-list a{color:#4d6479;font-size:14px;font-weight:650}
.popular-list a:hover{color:var(--primary-dark)}
.count{color:#8192a3;font-size:12px}
.update-list li{position:relative;padding:0 0 15px 19px;color:#587087;font-size:13px}
.update-list li:last-child{padding-bottom:0}
.update-list li:before{position:absolute;top:7px;left:0;width:8px;height:8px;content:"";border:2px solid #9bc1df;border-radius:50%;background:#fff}
.update-list li:after{position:absolute;top:16px;bottom:0;left:3px;width:2px;content:"";background:#d9e7f1}
.update-list li:last-child:after{display:none}
.update-list b{display:block;color:var(--ink);font-size:14px;font-weight:700}
.update-list time{display:block;margin-top:2px;color:#8192a3;font-size:12px}
.assurance-card{border-color:#d1e6df;background:linear-gradient(145deg,#f9fdfc,#eff8f6)}
.assurance-card p{margin:0;color:#527369;font-size:13px;line-height:1.8}
.assurance-card .tag{margin-bottom:10px}
.pagination-wrap{display:flex;justify-content:center;margin-top:34px}
.pagination{margin:0}
.pagination li{margin-right:5px}
.pagination a,.pagination button{min-width:37px;height:37px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--primary-dark);font-size:14px;line-height:35px;transition:var(--transition)}
.pagination a:hover,.pagination button:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-dark)}
.pagination .current{min-width:37px;height:37px;padding:0;border-radius:5px;background:var(--primary);font-size:14px;line-height:37px}
.pagination .disabled{padding:0 8px;color:#a0adba}
.faq-section{padding:76px 0;background:#f0f5f8}
.faq-layout{display:grid;grid-template-columns:minmax(260px,.78fr) minmax(0,1.5fr);gap:54px;align-items:start}
.faq-intro h2{margin:0 0 15px;color:var(--ink);font-size:30px;line-height:1.35;font-weight:800}
.faq-intro p{margin:0;color:var(--muted);font-size:15px}
.accordion{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.accordion-item{border-bottom:1px solid var(--line)}
.accordion-item:last-child{border-bottom:0}
.accordion-title{padding:17px 48px 17px 19px;border:0;color:var(--ink);font-size:15px;font-weight:730;line-height:1.5}
.accordion-title:before{right:19px;margin-top:-11px;color:var(--primary);font-size:22px;font-weight:400}
.accordion-title:hover,.accordion-title:focus{background:var(--primary-pale);color:var(--primary-dark)}
.accordion-content{padding:0 20px 18px;border:0;background:#fff;color:#607286;font-size:14px;line-height:1.8}
.contact-section{padding:66px 0;background:#fff}
.contact-card{display:grid;grid-template-columns:.85fr 1.15fr;gap:42px;padding:37px 40px;border:1px solid #d2e1ee;border-radius:var(--radius);background:linear-gradient(135deg,#f4f9fd,#fff);box-shadow:var(--shadow)}
.contact-copy h2{margin:0 0 13px;color:var(--ink);font-size:28px;line-height:1.36;font-weight:800}
.contact-copy p{margin:0;color:#5e7185;font-size:15px}
.contact-points{margin:21px 0 0;padding:0;list-style:none}
.contact-points li{position:relative;padding:6px 0 6px 22px;color:#4f667c;font-size:14px}
.contact-points li:before{position:absolute;top:14px;left:1px;width:8px;height:8px;content:"";border-radius:50%;background:var(--accent)}
.feedback-form label{display:block;margin-bottom:6px;color:#52687d;font-size:13px;font-weight:720}
.feedback-form .grid-margin-x>.cell{margin-bottom:13px}
.feedback-form textarea{height:92px;padding:11px 12px;resize:vertical}
.form-consent{display:flex;align-items:flex-start;gap:9px;margin:3px 0 15px;color:#6d7e90;font-size:12px;line-height:1.65}
.form-consent input{width:16px;height:16px;flex:0 0 16px;margin:3px 0 0;accent-color:var(--primary)}
.form-state{display:none;margin-top:12px;padding:9px 12px;border:1px solid #b9dbc9;border-radius:5px;background:#edf8f2;color:var(--success);font-size:13px}
.form-state.is-visible{display:block}
.field-error{border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(164,67,67,.09)!important}
.site-footer{padding:55px 0 0;border-top:1px solid #dce6ed;background:#edf2f5}
.footer-grid{display:grid;grid-template-columns:1.6fr .9fr .9fr 1.1fr;gap:42px;padding-bottom:38px}
.footer-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:17px;font-weight:790}
.footer-brand:hover{color:var(--primary-dark)}
.footer-about{max-width:345px;margin:14px 0 0;color:#67798a;font-size:13px;line-height:1.8}
.footer-title{margin:0 0 13px;color:#344b61;font-size:14px;font-weight:790}
.footer-links{margin:0;padding:0;list-style:none}
.footer-links li{margin:7px 0}
.footer-links a{color:#667a8d;font-size:13px}
.footer-links a:hover{color:var(--primary-dark)}
.footer-note{color:#687b8d;font-size:13px;line-height:1.78}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid #d6e0e7;color:#778898;font-size:12px}
.footer-legal{display:flex;flex-wrap:wrap;gap:16px}
.footer-legal a{color:#65798c}
.footer-legal a:hover{color:var(--primary-dark)}
.reveal{width:min(94%,510px);padding:28px;border:0;border-radius:var(--radius);box-shadow:0 24px 80px rgba(20,45,70,.25)}
.reveal h2{margin:0 0 10px;color:var(--ink);font-size:24px;font-weight:800}
.reveal p{color:#607286;font-size:14px}
.close-button{color:var(--primary-dark)}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.search-input-wrap{position:relative;margin-top:18px}
.search-input-wrap input{height:47px;margin:0;padding:0 44px 0 13px;border:1px solid var(--line-strong);border-radius:5px;background:#f9fcff}
.search-input-wrap button{position:absolute;top:5px;right:5px;min-height:37px;padding:7px 12px;font-size:13px}
@media(max-width:1199px){
.hero-title{font-size:38px}.filter-grid{grid-template-columns:repeat(3,1fr)}.filter-grid .filter-action{grid-column:span 3;display:flex;justify-content:flex-end}.footer-grid{gap:28px}.compact-entry{grid-template-columns:120px 1fr auto}
}
@media(max-width:1024px){
.section{padding:68px 0}.page-hero{padding:52px 0}.status-card{margin-top:28px}.content-area{padding:52px 0 64px}.faq-layout,.contact-card{gap:30px}.footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
.site-container{width:min(calc(100% - 28px),var(--container))}.top-notice-inner{min-height:36px}.notice-middle{display:none}.top-notice{font-size:12px}.notice-right{margin-left:auto}.brand{min-height:0;margin-right:0;font-size:15px}.title-bar{display:flex;align-items:center}.top-bar-left{display:block}.section{padding:52px 0}.page-hero{padding:39px 0 42px}.breadcrumbs{margin-bottom:13px}.hero-title{font-size:31px;line-height:1.31}.hero-lead{font-size:15px}.status-card{padding:20px}.filter-section{padding:18px 0}.filter-shell{padding:17px}.filter-title-row{align-items:flex-start;flex-direction:column;margin-bottom:13px;gap:4px}.filter-grid{grid-template-columns:1fr}.filter-grid .filter-action{grid-column:auto;display:block}.clear-filter{width:100%}.content-area{padding:42px 0 52px}.result-bar{align-items:flex-start;flex-direction:column;gap:3px}.result-bar h2{font-size:23px}.featured-entry{grid-template-columns:1fr}.cover-block{min-height:180px}.entry-main{padding:21px}.entry-main h3{font-size:19px}.entry-bottom{align-items:flex-start;flex-direction:column}.compact-entry{grid-template-columns:92px 1fr;gap:13px;padding:14px}.compact-cover{width:92px}.compact-entry>.text-action{grid-column:2;justify-self:start}.compact-copy h3{font-size:15px}.compact-copy p{display:none}.sidebar-card{padding:19px}.faq-layout,.contact-card{grid-template-columns:1fr;gap:25px}.faq-intro h2,.contact-copy h2{font-size:25px}.contact-card{padding:25px 21px}.section-heading{display:block;margin-bottom:25px}.section-heading p{margin-top:10px}.footer-grid{grid-template-columns:1fr;gap:25px;padding-bottom:29px}.footer-bottom{align-items:flex-start;flex-direction:column;gap:9px}.footer-legal{gap:10px 15px}.reveal{padding:24px 20px}
}
@media(max-width:520px){
.hero-title{font-size:28px}.hero-tags{margin-top:17px}.entry-detail{flex-wrap:wrap}.compact-meta .tag{padding:3px 7px}.pagination li:nth-child(3),.pagination li:nth-last-child(3){display:none}.modal-actions .button{width:100%}
}