/* roulang page: index */
:root{
            --bg:#0b0d0f;
            --bg-2:#11161a;
            --panel:#141a1d;
            --panel-2:#171e22;
            --line:#273036;
            --line-2:#354046;
            --text:#edf2ef;
            --muted:#9aa7a4;
            --muted-2:#7c8784;
            --accent:#d8b56b;
            --accent-2:#79c6a0;
            --accent-3:#c5a7ff;
            --danger:#e38b7d;
            --shadow:0 16px 36px rgba(0,0,0,.32);
            --radius:8px;
        }

        html { scroll-behavior:smooth; }
        body{
            background:
                linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
                linear-gradient(135deg, rgba(255,255,255,.028) 1px, transparent 1px),
                linear-gradient(45deg, rgba(255,255,255,.018) 1px, transparent 1px),
                linear-gradient(180deg, var(--bg), #0c1012 55%, #0b0d0f);
            background-size: auto, 36px 36px, 36px 36px, auto;
            color: var(--text);
            font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            letter-spacing: 0;
        }

        *{ box-sizing:border-box; }
        ::selection{ background: rgba(216,181,107,.25); color: var(--text); }
        a{ color:inherit; text-decoration:none; }
        img{ display:block; max-width:100%; }
        button, input, select, textarea{ font: inherit; }
        button{
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
        }

        .container{
            width:min(1180px, calc(100% - 2rem));
            margin-inline:auto;
        }

        .panel{
            background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
            border:1px solid var(--line);
            box-shadow: var(--shadow);
            border-radius: var(--radius);
        }

        .panel-soft{
            background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.01));
            border:1px solid rgba(255,255,255,.08);
            border-radius: var(--radius);
        }

        .card{
            background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.09);
            border-radius: var(--radius);
            box-shadow: 0 8px 18px rgba(0,0,0,.22);
            transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
        }

        .card:hover{
            transform: translateY(-2px) scale(1.03);
            border-color: rgba(216,181,107,.45);
            box-shadow: 0 12px 24px rgba(0,0,0,.30);
        }

        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.5rem;
            min-height: 44px;
            padding: .72rem 1rem;
            border-radius: 7px;
            border:1px solid transparent;
            font-weight: 600;
            transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
            white-space: nowrap;
        }
        .btn:hover{ transform: translateY(-1px); }
        .btn:focus-visible,
        .nav-chip:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        summary:focus-visible{
            outline:2px solid rgba(216,181,107,.72);
            outline-offset:2px;
        }

        .btn-accent{
            background: linear-gradient(180deg, rgba(216,181,107,1), rgba(188,145,61,1));
            color:#121212;
            box-shadow: 0 10px 18px rgba(216,181,107,.14);
        }
        .btn-accent:hover{ background: linear-gradient(180deg, #e0bf79, #c59b48); }
        .btn-ghost{
            background: rgba(255,255,255,.02);
            color: var(--text);
            border-color: rgba(255,255,255,.12);
        }
        .btn-ghost:hover{
            border-color: rgba(216,181,107,.42);
            background: rgba(216,181,107,.06);
        }

        .nav-chip{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            min-height: 42px;
            padding: .55rem .82rem;
            border-radius: 7px;
            border:1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.02);
            color: var(--muted);
            transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
            white-space: nowrap;
        }
        .nav-chip:hover{
            transform: translateY(-1px);
            border-color: rgba(216,181,107,.38);
            color: var(--text);
            background: rgba(216,181,107,.05);
        }
        .nav-chip.active{
            color: var(--text);
            border-color: rgba(216,181,107,.5);
            background: rgba(216,181,107,.08);
            box-shadow: 0 0 0 1px rgba(216,181,107,.12) inset;
        }

        .badge{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.28rem .55rem;
            border-radius:999px;
            font-size:.74rem;
            line-height:1;
            border:1px solid rgba(255,255,255,.1);
            color: var(--muted);
            background: rgba(255,255,255,.03);
        }
        .badge-accent{
            border-color: rgba(216,181,107,.28);
            color: #f0d9aa;
            background: rgba(216,181,107,.08);
        }
        .badge-green{
            border-color: rgba(121,198,160,.28);
            color: #bfe7d0;
            background: rgba(121,198,160,.08);
        }

        .section{
            padding: 2rem 0;
        }

        .section-title{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:1rem;
            margin-bottom:1rem;
        }
        .section-title h2{
            font-size: 1.15rem;
            line-height:1.2;
            font-weight: 700;
            letter-spacing: 0;
        }
        .section-title p{
            color: var(--muted);
            max-width: 50rem;
            font-size: .94rem;
        }

        .track{
            display:grid;
            grid-auto-flow:column;
            grid-auto-columns:minmax(230px, 1fr);
            gap: .9rem;
            overflow-x:auto;
            padding-bottom:.25rem;
            scroll-snap-type: x proximity;
        }
        .track > *{ scroll-snap-align: start; }
        .track::-webkit-scrollbar{ height: 8px; }
        .track::-webkit-scrollbar-thumb{
            background: rgba(255,255,255,.18);
            border-radius:999px;
        }
        .track::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }

        .glass-line{
            position: relative;
        }
        .glass-line::before{
            content:"";
            position:absolute;
            inset:0;
            border-radius: inherit;
            padding:1px;
            background: linear-gradient(135deg, rgba(216,181,107,.16), rgba(255,255,255,.04), rgba(121,198,160,.1));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events:none;
        }

        .hero-grid{
            display:grid;
            grid-template-columns: 1.15fr .85fr;
            gap:1rem;
        }

        .hero-stage{
            position:relative;
            overflow:hidden;
            background:
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
                linear-gradient(135deg, rgba(216,181,107,.08), transparent 40%),
                linear-gradient(315deg, rgba(121,198,160,.06), transparent 42%);
        }
        .hero-stage::after{
            content:"";
            position:absolute;
            inset:auto -10% -20% auto;
            width: 360px;
            height: 220px;
            background:
                linear-gradient(135deg, rgba(255,255,255,.08) 25%, transparent 25%) 0 0/16px 16px,
                linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%) 0 0/16px 16px;
            opacity:.18;
            transform: rotate(-6deg);
            pointer-events:none;
        }

        .metric-grid{
            display:grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap:.75rem;
        }

        .mini-metric{
            background: rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.08);
            border-radius: 7px;
            padding:.85rem;
        }

        .meter{
            height:8px;
            border-radius:999px;
            background: rgba(255,255,255,.06);
            overflow:hidden;
            border:1px solid rgba(255,255,255,.08);
        }
        .meter > span{
            display:block;
            height:100%;
            border-radius:inherit;
            background: linear-gradient(90deg, var(--accent), #e6d6a4);
        }

        .table-shell{
            overflow:hidden;
        }
        table{
            width:100%;
            border-collapse:collapse;
        }
        th, td{
            padding:.85rem .9rem;
            text-align:left;
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        th{
            font-size:.8rem;
            color: var(--muted);
            background: rgba(255,255,255,.02);
        }

        .faq details{
            border-top:1px solid rgba(255,255,255,.08);
            padding:.95rem 0;
        }
        .faq details:last-child{
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .faq summary{
            list-style:none;
            cursor:pointer;
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:1rem;
            font-weight:600;
        }
        .faq summary::-webkit-details-marker{ display:none; }
        .faq p{
            color:var(--muted);
            margin-top:.75rem;
            max-width: 62rem;
            line-height:1.75;
        }

        .field{
            width:100%;
            min-height: 46px;
            padding:.8rem .9rem;
            border-radius: 7px;
            border:1px solid rgba(255,255,255,.1);
            background: rgba(255,255,255,.03);
            color: var(--text);
        }
        .field::placeholder{ color: #7f8a87; }
        .field:focus{
            border-color: rgba(216,181,107,.44);
            box-shadow: 0 0 0 3px rgba(216,181,107,.09);
            outline:none;
        }

        .foot-link{
            color: var(--muted);
            transition: color .18s ease, transform .18s ease;
        }
        .foot-link:hover{
            color: var(--text);
            transform: translateX(2px);
        }

        .news-list a{
            display:block;
            padding:.9rem 0;
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .news-list a:hover .news-title{
            color: #f2dfad;
        }

        .news-title{
            font-weight:600;
            line-height:1.45;
        }

        .content-chip{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.3rem .55rem;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            color: var(--muted);
            background: rgba(255,255,255,.02);
            font-size:.76rem;
        }

        .sticky-bar{
            position:sticky;
            top: .75rem;
            z-index: 40;
            backdrop-filter: blur(14px);
        }

        @media (max-width: 1024px){
            .hero-grid{ grid-template-columns: 1fr; }
        }
        @media (max-width: 768px){
            .section{ padding: 1.4rem 0; }
            .section-title{
                flex-direction:column;
                align-items:flex-start;
            }
            .metric-grid{
                grid-template-columns: 1fr;
            }
            .track{
                grid-auto-columns:minmax(210px, 82vw);
            }
            th, td{
                padding:.7rem .65rem;
                font-size:.9rem;
            }
        }
        @media (max-width: 520px){
            .container{ width: min(100% - 1rem, 1180px); }
            .btn{ width:auto; }
            .hero-stage::after{
                width: 260px;
                height: 170px;
            }
        }

/* roulang page: category2 */
:root {
      --bg: #0a0f0d;
      --panel: rgba(14, 20, 18, .92);
      --panel-2: rgba(20, 28, 25, .92);
      --line: rgba(216, 181, 107, .18);
      --line-strong: rgba(216, 181, 107, .34);
      --accent: #d8b56b;
      --accent-2: #7bc7a6;
      --text: #f4f1e8;
      --muted: rgba(244, 241, 232, .68);
      --soft: rgba(244, 241, 232, .08);
      --radius: 8px;
      --shadow: 0 18px 42px rgba(0, 0, 0, .34);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(1200px 700px at 20% -10%, rgba(123, 199, 166, .08), transparent 58%),
        radial-gradient(900px 600px at 110% 10%, rgba(216, 181, 107, .08), transparent 45%),
        linear-gradient(180deg, #0a0f0d 0%, #0b1110 48%, #0a0f0d 100%);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.6;
      letter-spacing: 0;
      overflow-x: hidden;
    }

    body:before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.06) 28%, rgba(0,0,0,0) 70%);
      opacity: .45;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, select, textarea {
      font: inherit;
    }
    ::selection { background: rgba(216,181,107,.28); color: #fff; }

    .container {
      width: min(1180px, calc(100% - 24px));
      margin: 0 auto;
    }

    .sticky-bar {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(16px);
    }

    .glass-line {
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
    }

    .panel {
      background: linear-gradient(180deg, rgba(21,29,26,.96), rgba(12,17,15,.96));
      border: 1px solid rgba(255,255,255,.06);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .hero-band, .section-band {
      position: relative;
      padding: 28px 0;
    }

    .section-band + .section-band {
      border-top: 1px solid rgba(255,255,255,.06);
    }

    .hero-band:before,
    .section-band:before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 28%, rgba(255,255,255,.01));
      pointer-events: none;
    }

    .nav-chip,
    .btn,
    .foot-link,
    .chip,
    .tab-pill {
      transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, opacity .18s ease;
    }

    .nav-chip {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .7rem .92rem;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.02);
      color: var(--muted);
      white-space: nowrap;
    }

    .nav-chip:hover {
      transform: translateY(-1px);
      border-color: var(--line-strong);
      color: var(--text);
      box-shadow: 0 10px 24px rgba(0,0,0,.22);
    }

    .nav-chip.active {
      background: rgba(216,181,107,.12);
      color: var(--text);
      border-color: rgba(216,181,107,.28);
      box-shadow: 0 0 0 1px rgba(216,181,107,.10) inset;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      min-height: 42px;
      padding: .7rem 1rem;
      border-radius: 8px;
      border: 1px solid transparent;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .btn:hover { transform: translateY(-1px); }
    .btn:focus-visible, .nav-chip:focus-visible, .foot-link:focus-visible, .chip:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 2px solid rgba(216,181,107,.7);
      outline-offset: 2px;
    }

    .btn-accent {
      background: linear-gradient(180deg, rgba(216,181,107,.98), rgba(189,151,70,.98));
      color: #16120a;
      box-shadow: 0 10px 24px rgba(216,181,107,.16);
    }

    .btn-accent:hover { box-shadow: 0 14px 28px rgba(216,181,107,.22); }
    .btn-ghost {
      background: rgba(255,255,255,.02);
      border-color: rgba(255,255,255,.1);
      color: var(--text);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      min-height: 28px;
      padding: .3rem .65rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      font-size: .82rem;
      line-height: 1;
      white-space: nowrap;
    }

    .badge-green {
      background: rgba(123,199,166,.08);
      color: #a9e7ce;
      border-color: rgba(123,199,166,.25);
    }

    .badge-gold {
      background: rgba(216,181,107,.1);
      color: #f1d99d;
      border-color: rgba(216,181,107,.22);
    }

    .kpi {
      padding: 1rem;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.02);
    }

    .kpi .value {
      font-size: 1.35rem;
      font-weight: 700;
      letter-spacing: 0;
    }

    .track-card {
      min-width: 240px;
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 10px 26px rgba(0,0,0,.2);
      transform-origin: center;
    }

    .track-card:hover {
      transform: translateY(-3px) scale(1.03);
      border-color: rgba(216,181,107,.25);
      box-shadow: 0 16px 34px rgba(0,0,0,.28);
    }

    .cover {
      position: relative;
      aspect-ratio: 16 / 9;
      background:
        linear-gradient(135deg, rgba(216,181,107,.32), rgba(123,199,166,.18)),
        linear-gradient(180deg, rgba(255,255,255,.08), transparent);
      overflow: hidden;
    }

    .cover:before {
      content: "";
      position: absolute;
      inset: 12px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 8px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      opacity: .45;
    }

    .cover .stripe {
      position: absolute;
      inset: auto 0 0 0;
      height: 24px;
      background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.34));
    }

    .track-meta {
      padding: .85rem .85rem .9rem;
    }

    .track-title {
      font-size: .96rem;
      font-weight: 700;
      line-height: 1.35;
      margin: 0 0 .45rem;
    }

    .track-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .5rem;
      margin-top: .7rem;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .45rem .65rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.02);
      color: var(--muted);
      font-size: .82rem;
      white-space: nowrap;
    }

    .chip.active {
      background: rgba(216,181,107,.12);
      color: var(--text);
      border-color: rgba(216,181,107,.26);
    }

    .tab-pill {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .5rem .78rem;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.02);
      color: var(--muted);
      font-size: .86rem;
    }

    .tab-pill.active {
      background: rgba(123,199,166,.12);
      border-color: rgba(123,199,166,.26);
      color: #d6f5e7;
    }

    .soft-list li {
      display: flex;
      gap: .6rem;
      align-items: flex-start;
      padding: .52rem 0;
      color: var(--muted);
      border-bottom: 1px dashed rgba(255,255,255,.08);
    }

    .soft-list li:last-child { border-bottom: 0; }

    .bar {
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      overflow: hidden;
    }

    .bar > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(216,181,107,.98), rgba(123,199,166,.95));
    }

    details.faq {
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 8px;
      background: rgba(255,255,255,.02);
      overflow: hidden;
    }

    details.faq + details.faq { margin-top: .75rem; }
    details.faq summary {
      cursor: pointer;
      list-style: none;
      padding: .95rem 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      font-weight: 600;
    }

    details.faq summary::-webkit-details-marker { display: none; }
    details.faq[open] summary {
      background: rgba(255,255,255,.03);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    details.faq .answer {
      padding: .95rem 1rem 1rem;
      color: var(--muted);
    }

    .field {
      width: 100%;
      min-height: 44px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.03);
      color: var(--text);
      padding: .7rem .85rem;
    }

    .field::placeholder { color: rgba(244,241,232,.42); }
    .field:focus {
      border-color: rgba(216,181,107,.34);
      box-shadow: 0 0 0 3px rgba(216,181,107,.12);
      outline: none;
    }

    .foot-link {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .4rem 0;
      color: var(--muted);
    }

    .foot-link:hover {
      color: var(--text);
      transform: translateX(2px);
    }

    .section-title {
      font-size: clamp(1.15rem, 1.15rem + .15vw, 1.35rem);
      font-weight: 700;
      letter-spacing: 0;
      margin: 0;
    }

    .section-sub {
      color: var(--muted);
      font-size: .92rem;
      margin-top: .35rem;
    }

    .scroll-track {
      overflow-x: auto;
      padding-bottom: .4rem;
      scrollbar-width: thin;
      scrollbar-color: rgba(216,181,107,.28) rgba(255,255,255,.06);
    }

    .scroll-track::-webkit-scrollbar { height: 10px; }
    .scroll-track::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 999px; }
    .scroll-track::-webkit-scrollbar-thumb { background: rgba(216,181,107,.25); border-radius: 999px; }

    .grid-rail {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr);
      gap: 1rem;
    }

    .compare-table {
      width: 100%;
      border-collapse: collapse;
      overflow: hidden;
      border-radius: 8px;
    }

    .compare-table th,
    .compare-table td {
      padding: .82rem .8rem;
      border-bottom: 1px solid rgba(255,255,255,.08);
      vertical-align: middle;
      text-align: left;
      font-size: .9rem;
    }

    .compare-table th {
      color: var(--text);
      background: rgba(255,255,255,.03);
      font-weight: 700;
    }

    .compare-table td {
      color: var(--muted);
    }

    .compare-table tr:last-child td { border-bottom: 0; }

    .ok {
      color: #c5f0dd;
    }

    .warn {
      color: #f1d99d;
    }

    @media (max-width: 1024px) {
      .grid-rail { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      .hero-band, .section-band { padding: 22px 0; }
      .container { width: min(100% - 16px, 1180px); }
      .nav-chip { padding: .62rem .82rem; }
      .track-card { min-width: 210px; }
    }

    @media (max-width: 520px) {
      .btn { width: 100%; }
      .track-card { min-width: 190px; }
      .kpi .value { font-size: 1.2rem; }
      .compare-table th, .compare-table td { padding: .72rem .62rem; }
    }

/* roulang page: category1 */
:root {
            --bg: #0b0d0e;
            --bg-soft: #101315;
            --panel: rgba(18, 21, 23, 0.92);
            --panel-2: rgba(255, 255, 255, 0.03);
            --text: #eef1eb;
            --muted: #a1a8a0;
            --subtle: #77807a;
            --line: rgba(255, 255, 255, 0.08);
            --line-strong: rgba(216, 181, 107, 0.22);
            --accent: #d8b56b;
            --accent-2: #82b39a;
            --accent-3: #8a7bc8;
            --danger: #d66b6b;
            --shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
            --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.22);
            --radius: 8px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            color: var(--text);
            background:
                linear-gradient(180deg, rgba(11,13,14,.98), rgba(11,13,14,.95)),
                radial-gradient(circle at top left, rgba(138,123,200,.08), transparent 28%),
                radial-gradient(circle at top right, rgba(130,179,154,.06), transparent 22%);
            min-height: 100vh;
            letter-spacing: 0;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
            background-size: 100% 100%, 22px 22px;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.12) 25%, rgba(0,0,0,0));
            opacity: .35;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

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

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

        ::selection {
            background: rgba(216,181,107,.28);
            color: #fff;
        }

        .container {
            width: min(1200px, calc(100% - 2rem));
            margin: 0 auto;
        }

        .panel {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(12px);
        }

        .glass-line {
            position: relative;
            overflow: hidden;
        }

        .glass-line::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            border: 1px solid rgba(216,181,107,.06);
        }

        .sticky-bar {
            position: sticky;
            top: 0;
            z-index: 50;
        }

        .nav-chip {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            min-height: 44px;
            padding: .65rem .9rem;
            border-radius: 8px;
            border: 1px solid var(--line);
            background: rgba(255,255,255,.02);
            color: var(--muted);
            transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
            white-space: nowrap;
        }

        .nav-chip:hover {
            transform: translateY(-1px);
            border-color: rgba(216,181,107,.34);
            color: var(--text);
            box-shadow: 0 10px 22px rgba(0,0,0,.24);
        }

        .nav-chip.active {
            color: #fff;
            border-color: rgba(216,181,107,.44);
            background: linear-gradient(180deg, rgba(216,181,107,.14), rgba(216,181,107,.06));
            box-shadow: 0 0 0 1px rgba(216,181,107,.08) inset;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            min-height: 44px;
            padding: .68rem 1rem;
            border-radius: 8px;
            border: 1px solid transparent;
            transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
            white-space: nowrap;
        }

        .btn:hover {
            transform: translateY(-1px);
        }

        .btn:focus-visible,
        .nav-chip:focus-visible,
        .foot-link:focus-visible,
        .chip:focus-visible,
        summary:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            outline: 2px solid rgba(216,181,107,.52);
            outline-offset: 2px;
        }

        .btn-accent {
            background: linear-gradient(180deg, rgba(216,181,107,.95), rgba(189,151,73,.92));
            color: #14110a;
            box-shadow: 0 14px 28px rgba(216,181,107,.12);
        }

        .btn-accent:hover {
            box-shadow: 0 16px 32px rgba(216,181,107,.2);
        }

        .btn-ghost {
            border-color: var(--line);
            background: rgba(255,255,255,.02);
            color: var(--text);
        }

        .btn-ghost:hover {
            border-color: rgba(216,181,107,.28);
            background: rgba(255,255,255,.04);
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            min-height: 28px;
            padding: .2rem .55rem;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(255,255,255,.03);
            color: var(--muted);
            font-size: .78rem;
            line-height: 1;
        }

        .badge-green {
            border-color: rgba(130,179,154,.24);
            color: #b8e5d0;
            background: rgba(130,179,154,.08);
        }

        .badge-gold {
            border-color: rgba(216,181,107,.24);
            color: #f1d8a1;
            background: rgba(216,181,107,.08);
        }

        .section-shell {
            padding: 1rem 0;
        }

        .section-title {
            display: flex;
            flex-wrap: wrap;
            align-items: end;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .section-title h2 {
            margin: 0;
            font-size: clamp(1.2rem, 1.1rem + .3vw, 1.45rem);
            line-height: 1.2;
            letter-spacing: 0;
        }

        .section-title p {
            margin: 0;
            color: var(--muted);
            line-height: 1.7;
            font-size: .95rem;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr);
            gap: 1rem;
        }

        .hero-card {
            border-radius: var(--radius);
            border: 1px solid var(--line);
            background:
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
                linear-gradient(135deg, rgba(216,181,107,.06), rgba(130,179,154,.04));
            box-shadow: var(--shadow);
        }

        .metric-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .75rem;
        }

        .metric {
            padding: .9rem;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            background: rgba(255,255,255,.03);
        }

        .metric .label {
            color: var(--muted);
            font-size: .78rem;
            margin-bottom: .45rem;
        }

        .metric .value {
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: .35rem;
        }

        .metric .note {
            color: var(--subtle);
            font-size: .8rem;
            line-height: 1.5;
        }

        .control-strip {
            display: flex;
            flex-wrap: wrap;
            gap: .55rem;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            min-height: 36px;
            padding: .45rem .75rem;
            border-radius: 8px;
            border: 1px solid var(--line);
            background: rgba(255,255,255,.02);
            color: var(--muted);
            transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
        }

        .chip:hover {
            transform: translateY(-1px);
            border-color: rgba(216,181,107,.28);
            color: var(--text);
        }

        .chip.active {
            border-color: rgba(216,181,107,.4);
            background: rgba(216,181,107,.08);
            color: #fff;
        }

        .track-scroll {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: minmax(18rem, 1fr);
            gap: .9rem;
            overflow-x: auto;
            padding-bottom: .35rem;
            scroll-snap-type: x mandatory;
            scrollbar-width: thin;
        }

        .track-scroll::-webkit-scrollbar {
            height: 10px;
        }

        .track-scroll::-webkit-scrollbar-track {
            background: rgba(255,255,255,.04);
            border-radius: 999px;
        }

        .track-scroll::-webkit-scrollbar-thumb {
            background: rgba(216,181,107,.2);
            border-radius: 999px;
        }

        .track-card {
            scroll-snap-align: start;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            background: rgba(255,255,255,.03);
            box-shadow: var(--shadow-soft);
            overflow: hidden;
            transform: translateZ(0);
            transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
        }

        .track-card:hover {
            transform: translateY(-2px) scale(1.03);
            border-color: rgba(216,181,107,.32);
            box-shadow: 0 18px 34px rgba(0,0,0,.3);
            z-index: 2;
            position: relative;
        }

        .cover {
            position: relative;
            aspect-ratio: 16 / 10;
            background:
                linear-gradient(135deg, rgba(138,123,200,.24), rgba(130,179,154,.18)),
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.12));
            border-bottom: 1px solid var(--line);
            overflow: hidden;
        }

        .cover::before {
            content: "";
            position: absolute;
            inset: 10px;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 8px;
            background:
                linear-gradient(90deg, rgba(255,255,255,.06), transparent 55%),
                radial-gradient(circle at 22% 32%, rgba(216,181,107,.18), transparent 16%),
                radial-gradient(circle at 80% 24%, rgba(130,179,154,.14), transparent 14%);
        }

        .cover-mark {
            position: absolute;
            inset: auto 12px 12px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
        }

        .track-body {
            padding: .95rem;
        }

        .track-title {
            font-size: 1rem;
            font-weight: 700;
            margin: 0 0 .35rem;
            line-height: 1.35;
        }

        .track-desc {
            margin: 0;
            color: var(--muted);
            line-height: 1.65;
            font-size: .9rem;
            min-height: 3.2em;
        }

        .tag-row {
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
            margin-top: .75rem;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: .22rem .55rem;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(255,255,255,.02);
            color: var(--muted);
            font-size: .76rem;
        }

        .track-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            margin-top: .85rem;
            padding-top: .85rem;
            border-top: 1px solid var(--line);
        }

        .track-action {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            color: #f1d8a1;
            font-size: .88rem;
        }

        .aside-sticky {
            position: sticky;
            top: 94px;
        }

        .stat-card {
            padding: .95rem;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            background: rgba(255,255,255,.03);
        }

        .stat-card .k {
            color: var(--subtle);
            font-size: .78rem;
            margin-bottom: .35rem;
        }

        .stat-card .v {
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.35;
        }

        .stat-card .s {
            margin-top: .3rem;
            color: var(--muted);
            font-size: .8rem;
            line-height: 1.55;
        }

        .range-bar {
            height: 8px;
            border-radius: 999px;
            background: rgba(255,255,255,.05);
            overflow: hidden;
        }

        .range-bar > span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, rgba(216,181,107,.8), rgba(130,179,154,.85));
        }

        .compare-table {
            width: 100%;
            border-collapse: collapse;
        }

        .compare-table th,
        .compare-table td {
            padding: .9rem .85rem;
            border-bottom: 1px solid var(--line);
            vertical-align: middle;
            text-align: left;
            font-size: .92rem;
        }

        .compare-table th {
            color: var(--muted);
            font-weight: 600;
            background: rgba(255,255,255,.02);
        }

        .compare-table td:nth-child(2) {
            color: #f7f0d6;
        }

        .compare-table td:nth-child(3) {
            color: var(--muted);
        }

        .score-wrap {
            display: grid;
            gap: .45rem;
        }

        .score-line {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
            font-size: .85rem;
            color: var(--muted);
        }

        .faq-grid {
            display: grid;
            gap: .75rem;
        }

        details.faq-item {
            border-radius: var(--radius);
            border: 1px solid var(--line);
            background: rgba(255,255,255,.03);
            overflow: hidden;
            transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
        }

        details.faq-item[open] {
            border-color: rgba(216,181,107,.3);
            background: rgba(255,255,255,.045);
            box-shadow: var(--shadow-soft);
        }

        details.faq-item summary {
            list-style: none;
            cursor: pointer;
            padding: 1rem 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            font-weight: 600;
        }

        details.faq-item summary::-webkit-details-marker { display: none; }

        .faq-answer {
            padding: 0 1rem 1rem;
            color: var(--muted);
            line-height: 1.8;
            font-size: .95rem;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: .85rem;
        }

        .field {
            grid-column: span 6;
            display: grid;
            gap: .45rem;
        }

        .field.full { grid-column: 1 / -1; }

        .field label {
            font-size: .86rem;
            color: #d8ddd7;
        }

        .field input,
        .field select,
        .field textarea {
            width: 100%;
            min-height: 46px;
            padding: .72rem .85rem;
            border-radius: 8px;
            border: 1px solid var(--line);
            background: rgba(255,255,255,.03);
            color: var(--text);
            transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
        }

        .field textarea {
            min-height: 116px;
            resize: vertical;
        }

        .field input::placeholder,
        .field textarea::placeholder {
            color: #7f8881;
        }

        .field input:hover,
        .field select:hover,
        .field textarea:hover {
            border-color: rgba(216,181,107,.2);
        }

        .radio-row,
        .check-row {
            display: flex;
            flex-wrap: wrap;
            gap: .75rem;
        }

        .choice {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            min-height: 40px;
            padding: .48rem .7rem;
            border-radius: 8px;
            border: 1px solid var(--line);
            background: rgba(255,255,255,.02);
            color: var(--muted);
        }

        .choice input {
            accent-color: var(--accent);
        }

        .foot-link {
            display: inline-flex;
            align-items: center;
            min-height: 40px;
            color: var(--muted);
            transition: color .18s ease, transform .18s ease;
        }

        .foot-link:hover {
            color: var(--text);
            transform: translateX(2px);
        }

        .clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .mini-rule {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(216,181,107,.35), transparent);
        }

        @media (max-width: 1024px) {
            .hero-grid { grid-template-columns: 1fr; }
            .aside-sticky { position: static; }
        }

        @media (max-width: 768px) {
            .container { width: min(100% - 1rem, 1200px); }
            .field { grid-column: 1 / -1; }
            .metric-grid { grid-template-columns: 1fr; }
            .section-title { align-items: start; }
            .track-scroll {
                grid-auto-columns: minmax(16rem, 86vw);
            }
            .compare-table th,
            .compare-table td {
                padding: .78rem .65rem;
            }
        }

        @media (max-width: 520px) {
            .btn {
                width: 100%;
            }
            .nav-chip {
                padding-inline: .75rem;
            }
            .choice {
                width: 100%;
                justify-content: flex-start;
            }
        }