/* roulang page: index */
:root{
      --bg:#0a0c10;
      --bg-soft:#0f1319;
      --panel:#11161d;
      --panel-2:#151b23;
      --line:rgba(255,255,255,.09);
      --line-strong:rgba(255,255,255,.14);
      --text:#eef3f8;
      --muted:#a4afbd;
      --muted-2:#7e8b98;
      --accent:#66f0da;
      --accent-2:#b7ff63;
      --accent-3:#b28cff;
      --warn:#ffd36e;
      --shadow:0 18px 45px rgba(0,0,0,.34);
      --shadow-soft:0 10px 28px rgba(0,0,0,.24);
      --radius:8px;
      --radius-sm:6px;
      --container:1240px;
      --nav-h:76px;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 18%),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.02) 1px, transparent 1px),
        var(--bg);
      background-size:100% 100%, 64px 64px, 64px 64px, auto;
      color:var(--text);
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      padding-top:var(--nav-h);
    }

    a{
      color:inherit;
      text-decoration:none;
      transition:color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
    }
    a:hover{color:var(--accent)}
    img{max-width:100%;display:block}
    button,input,textarea,select{
      font:inherit;
      color:inherit;
    }
    ::selection{background:rgba(102,240,218,.24);color:#fff}

    .grid-container{
      width:min(var(--container), calc(100% - 2rem));
      max-width:var(--container);
    }

    .site-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:1000;
      background:rgba(8,10,14,.9);
      backdrop-filter:blur(14px);
      border-bottom:1px solid var(--line);
      box-shadow:0 1px 0 rgba(255,255,255,.03);
    }
    .site-header .grid-container{
      height:var(--nav-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }

    .brand{
      display:inline-flex;
      align-items:center;
      gap:.85rem;
      min-width:0;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:8px;
      background:
        linear-gradient(145deg, rgba(102,240,218,.18), rgba(178,140,255,.14)),
        var(--panel);
      border:1px solid var(--line-strong);
      display:grid;
      place-items:center;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
      flex:0 0 auto;
    }
    .brand-mark i{color:var(--accent);font-size:1rem}
    .brand-text{
      display:flex;
      flex-direction:column;
      min-width:0;
    }
    .brand-name{
      font-weight:800;
      letter-spacing:0;
      font-size:1rem;
      line-height:1.1;
      white-space:nowrap;
    }
    .brand-sub{
      margin-top:.15rem;
      font-size:.82rem;
      color:var(--muted-2);
      white-space:nowrap;
    }

    .header-nav{
      display:flex;
      align-items:center;
      gap:.8rem;
      flex-wrap:wrap;
      margin-left:auto;
    }
    .header-nav .menu{
      background:transparent;
      margin:0;
      display:flex;
      gap:.45rem;
      align-items:center;
    }
    .header-nav .menu a{
      padding:.72rem .95rem;
      border-radius:8px;
      border:1px solid transparent;
      color:var(--muted);
      font-weight:600;
      line-height:1;
    }
    .header-nav .menu a:hover,
    .header-nav .menu a:focus{
      color:var(--text);
      border-color:var(--line-strong);
      background:rgba(255,255,255,.03);
    }
    .header-nav .menu a.is-active{
      color:var(--text);
      background:rgba(102,240,218,.08);
      border-color:rgba(102,240,218,.25);
      box-shadow:inset 0 0 0 1px rgba(102,240,218,.05);
    }

    .header-tools{
      display:flex;
      align-items:center;
      gap:.55rem;
    }
    .button{
      border-radius:8px;
      border:1px solid transparent;
      padding:.8rem 1rem;
      line-height:1;
      font-weight:700;
      letter-spacing:0;
      box-shadow:none;
      transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
    }
    .button i{margin-right:.45rem}
    .button.primary{
      background:linear-gradient(135deg, rgba(102,240,218,.92), rgba(102,240,218,.75));
      color:#071016;
    }
    .button.primary:hover,
    .button.primary:focus{
      background:linear-gradient(135deg, rgba(102,240,218,1), rgba(183,255,99,.96));
      color:#041017;
      transform:translateY(-1px);
      box-shadow:0 12px 25px rgba(102,240,218,.16);
    }
    .button.secondary,
    .button.hollow{
      background:rgba(255,255,255,.02);
      border-color:var(--line-strong);
      color:var(--text);
    }
    .button.secondary:hover,
    .button.hollow:hover,
    .button.secondary:focus,
    .button.hollow:focus{
      background:rgba(255,255,255,.06);
      color:var(--text);
      transform:translateY(-1px);
      box-shadow:0 10px 24px rgba(0,0,0,.22);
    }
    .button.small{
      padding:.66rem .88rem;
      font-size:.92rem;
    }
    .button.tiny{
      padding:.55rem .72rem;
      font-size:.84rem;
    }
    .button.full{
      width:100%;
      justify-content:center;
      display:inline-flex;
      align-items:center;
    }

    main{
      display:block;
      overflow:hidden;
    }

    section{
      padding:4.2rem 0;
      position:relative;
    }
    .section-tight{padding-top:2.5rem}
    .section-muted{
      background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding:.38rem .72rem;
      border:1px solid rgba(102,240,218,.22);
      border-radius:999px;
      background:rgba(102,240,218,.06);
      color:#d8fff7;
      font-size:.86rem;
      font-weight:700;
      letter-spacing:0;
      text-transform:none;
    }
    .eyebrow::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(102,240,218,.12);
      flex:0 0 auto;
    }

    .hero{
      padding-top:2.2rem;
      padding-bottom:1.4rem;
      background:
        linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0)),
        radial-gradient(1200px 420px at 50% -120px, rgba(178,140,255,.16), transparent 58%);
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(280px, 1.1fr) minmax(300px, 1.25fr) minmax(250px, .9fr);
      gap:1.2rem;
      align-items:stretch;
    }
    .hero-copy{
      padding:1rem 0 1rem;
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:540px;
    }
    .hero h1{
      margin:.95rem 0 .95rem;
      font-size:clamp(2.2rem, 3vw, 4rem);
      line-height:1.04;
      font-weight:900;
      letter-spacing:0;
      max-width:11ch;
    }
    .hero-lead{
      max-width:42rem;
      color:#d7dee7;
      font-size:1.05rem;
      line-height:1.78;
      margin:0 0 1.4rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      margin-bottom:1.25rem;
    }
    .hero-metrics{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-top:.5rem;
    }
    .metric{
      padding:.8rem .92rem;
      border-radius:8px;
      background:rgba(255,255,255,.035);
      border:1px solid var(--line);
      min-width:120px;
    }
    .metric strong{
      display:block;
      font-size:1.12rem;
      line-height:1.15;
      color:#fff;
    }
    .metric span{
      display:block;
      margin-top:.25rem;
      color:var(--muted);
      font-size:.86rem;
    }

    .hero-stage{
      min-height:540px;
      border-radius:8px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0)),
        linear-gradient(180deg, #11161d, #0f1319);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      padding:1rem;
      display:flex;
      flex-direction:column;
      gap:.9rem;
      position:relative;
      overflow:hidden;
    }
    .hero-stage::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(102,240,218,.14), transparent 22%, transparent 78%, rgba(178,140,255,.12)),
        linear-gradient(180deg, transparent 0%, rgba(255,255,255,.02) 100%);
      pointer-events:none;
      opacity:.55;
    }
    .stage-topline{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      position:relative;
      z-index:1;
    }
    .stage-title{
      display:flex;
      flex-direction:column;
      gap:.15rem;
    }
    .stage-title strong{
      font-size:1.02rem;
      font-weight:800;
    }
    .stage-title span{
      color:var(--muted);
      font-size:.86rem;
    }
    .stage-badge{
      padding:.42rem .68rem;
      border-radius:999px;
      border:1px solid rgba(102,240,218,.2);
      background:rgba(102,240,218,.08);
      color:#dffef8;
      font-size:.82rem;
      font-weight:700;
      white-space:nowrap;
    }
    .stage-screen{
      flex:1 1 auto;
      border-radius:8px;
      border:1px solid var(--line-strong);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
        #0c1015;
      position:relative;
      z-index:1;
      padding:1rem;
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:.85rem;
      min-height:0;
    }
    .poster-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:.75rem;
      min-height:0;
    }
    .poster-card,
    .info-card,
    .mini-card{
      border-radius:8px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      padding:.9rem;
      min-height:0;
    }
    .poster-card{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:145px;
      position:relative;
      overflow:hidden;
    }
    .poster-card::after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:2px;
      background:linear-gradient(90deg, transparent, var(--accent), var(--accent-3), transparent);
      opacity:.85;
    }
    .poster-card strong{
      font-size:.94rem;
      display:block;
      margin-bottom:.35rem;
    }
    .poster-card p{
      margin:0;
      color:var(--muted);
      font-size:.84rem;
      line-height:1.55;
    }
    .poster-tag{
      align-self:flex-start;
      margin-top:.65rem;
      padding:.3rem .55rem;
      border-radius:999px;
      background:rgba(183,255,99,.11);
      border:1px solid rgba(183,255,99,.18);
      color:#e8ffd3;
      font-size:.78rem;
      font-weight:700;
    }
    .stage-side{
      display:flex;
      flex-direction:column;
      gap:.75rem;
      min-height:0;
    }
    .info-card{
      flex:1 1 auto;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .info-card .count{
      font-size:2rem;
      line-height:1;
      font-weight:900;
      color:#fff;
      margin:.1rem 0 .25rem;
    }
    .info-card small{
      color:var(--muted);
      display:block;
    }
    .mini-stack{
      display:grid;
      gap:.75rem;
    }
    .mini-card{
      display:flex;
      align-items:flex-start;
      gap:.8rem;
    }
    .mini-icon{
      width:38px;
      height:38px;
      border-radius:8px;
      display:grid;
      place-items:center;
      background:rgba(102,240,218,.08);
      border:1px solid rgba(102,240,218,.18);
      color:var(--accent);
      flex:0 0 auto;
    }
    .mini-card strong{
      display:block;
      margin-bottom:.15rem;
    }
    .mini-card p{
      margin:0;
      color:var(--muted);
      font-size:.84rem;
      line-height:1.55;
    }
    .stage-strip{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:.6rem;
    }
    .strip-item{
      border-radius:8px;
      padding:.72rem .78rem;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      min-height:78px;
    }
    .strip-item span{
      display:block;
      color:var(--muted);
      font-size:.8rem;
      margin-bottom:.12rem;
    }
    .strip-item strong{
      display:block;
      font-size:.96rem;
      line-height:1.35;
      color:#fff;
    }

    .hero-panel{
      padding:1rem;
      border-radius:8px;
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--panel);
      box-shadow:var(--shadow-soft);
      display:flex;
      flex-direction:column;
      gap:1rem;
      min-height:540px;
    }
    .hero-panel h2{
      margin:0;
      font-size:1.1rem;
      font-weight:800;
      line-height:1.2;
    }
    .checklist{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:.7rem;
    }
    .checklist li{
      display:flex;
      gap:.7rem;
      align-items:flex-start;
      padding:.7rem .75rem;
      border-radius:8px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.025);
    }
    .checklist i{
      color:var(--accent);
      margin-top:.15rem;
      flex:0 0 auto;
    }
    .checklist strong{
      display:block;
      font-size:.94rem;
      line-height:1.35;
      margin-bottom:.15rem;
    }
    .checklist p{
      margin:0;
      color:var(--muted);
      font-size:.84rem;
      line-height:1.56;
    }
    .panel-note{
      margin-top:auto;
      border-radius:8px;
      padding:.95rem;
      background:rgba(178,140,255,.08);
      border:1px solid rgba(178,140,255,.18);
      color:#f0eaff;
      font-size:.92rem;
      line-height:1.7;
    }

    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1.15rem;
    }
    .section-head h2{
      margin:0;
      font-size:1.65rem;
      line-height:1.16;
      font-weight:900;
      letter-spacing:0;
    }
    .section-head p{
      margin:0;
      color:var(--muted);
      max-width:44rem;
      line-height:1.75;
    }

    .entry-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:1rem;
    }
    .entry-card{
      border-radius:8px;
      border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
        var(--panel);
      padding:1rem;
      min-height:100%;
      display:flex;
      flex-direction:column;
      gap:.85rem;
      box-shadow:var(--shadow-soft);
      transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .entry-card:hover{
      transform:translateY(-2px);
      border-color:rgba(102,240,218,.26);
      box-shadow:0 18px 35px rgba(0,0,0,.24);
    }
    .entry-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:.75rem;
    }
    .entry-icon{
      width:42px;
      height:42px;
      border-radius:8px;
      display:grid;
      place-items:center;
      border:1px solid rgba(102,240,218,.2);
      background:rgba(102,240,218,.07);
      color:var(--accent);
      flex:0 0 auto;
    }
    .entry-card h3{
      margin:0;
      font-size:1.02rem;
      font-weight:800;
      line-height:1.25;
    }
    .entry-card p{
      margin:0;
      color:var(--muted);
      line-height:1.68;
      font-size:.92rem;
    }
    .entry-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-top:auto;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      padding:.31rem .55rem;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      color:#d9e2ec;
      font-size:.78rem;
      font-weight:700;
    }
    .tag.accent{
      background:rgba(102,240,218,.08);
      border-color:rgba(102,240,218,.22);
      color:#dcfff7;
    }
    .tag.green{
      background:rgba(183,255,99,.08);
      border-color:rgba(183,255,99,.2);
      color:#e8ffd4;
    }
    .tag.purple{
      background:rgba(178,140,255,.1);
      border-color:rgba(178,140,255,.22);
      color:#f2e9ff;
    }

    .table-wrap{
      border-radius:8px;
      border:1px solid var(--line);
      overflow:hidden;
      background:var(--panel);
      box-shadow:var(--shadow-soft);
    }
    table.compare-table{
      margin:0;
      background:transparent;
      border:none;
      color:var(--text);
    }
    .compare-table thead{
      background:rgba(255,255,255,.03);
      color:#fff;
    }
    .compare-table thead th{
      border-bottom:1px solid var(--line);
      font-weight:800;
      padding:1rem .9rem;
      white-space:nowrap;
    }
    .compare-table tbody td{
      border-bottom:1px solid rgba(255,255,255,.06);
      padding:1rem .9rem;
      vertical-align:middle;
      color:#dce5ef;
    }
    .compare-table tbody tr:hover{
      background:rgba(255,255,255,.02);
    }
    .status{
      display:inline-flex;
      align-items:center;
      gap:.38rem;
      padding:.34rem .56rem;
      border-radius:999px;
      font-size:.8rem;
      font-weight:700;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .status::before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:currentColor;
      opacity:.95;
    }
    .status.ok{
      color:#dfffe9;
      background:rgba(183,255,99,.08);
      border-color:rgba(183,255,99,.18);
    }
    .status.tip{
      color:#d8fff7;
      background:rgba(102,240,218,.08);
      border-color:rgba(102,240,218,.18);
    }
    .status.note{
      color:#f5ecff;
      background:rgba(178,140,255,.08);
      border-color:rgba(178,140,255,.18);
    }

    .topic-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:1rem;
      align-items:stretch;
    }
    .topic-tiles{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:1rem;
    }
    .tile{
      border-radius:8px;
      border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
        var(--panel-2);
      padding:1rem;
      display:flex;
      flex-direction:column;
      gap:.55rem;
      min-height:148px;
      position:relative;
      overflow:hidden;
    }
    .tile::after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:2px;
      background:linear-gradient(90deg, transparent, rgba(102,240,218,.95), rgba(178,140,255,.95), transparent);
      opacity:.8;
    }
    .tile .head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
    }
    .tile strong{
      font-size:1rem;
      font-weight:800;
      line-height:1.25;
    }
    .tile i{
      color:var(--accent);
      font-size:1rem;
    }
    .tile p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:.91rem;
    }
    .topic-aside{
      border-radius:8px;
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--panel);
      padding:1rem;
      display:flex;
      flex-direction:column;
      gap:1rem;
      box-shadow:var(--shadow-soft);
    }
    .topic-aside ul{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.75rem;
    }
    .topic-aside li{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      border-bottom:1px solid rgba(255,255,255,.06);
      padding-bottom:.75rem;
    }
    .topic-aside li:last-child{border-bottom:none;padding-bottom:0}
    .topic-aside .k{
      color:#fff;
      font-weight:700;
    }
    .topic-aside .v{
      color:var(--muted);
      white-space:nowrap;
    }
    .topic-aside .foot{
      padding-top:.6rem;
      border-top:1px solid rgba(255,255,255,.06);
      color:var(--muted);
      line-height:1.7;
      font-size:.92rem;
    }

    .news-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:1rem;
    }
    .news-list,
    .link-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:.75rem;
    }
    .news-item{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      padding:.9rem 1rem;
      border-radius:8px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
    }
    .news-item a{
      font-weight:700;
      line-height:1.55;
    }
    .news-item time{
      color:var(--muted-2);
      white-space:nowrap;
      font-size:.86rem;
    }
    .news-card{
      border-radius:8px;
      border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
        var(--panel);
      padding:1rem;
      box-shadow:var(--shadow-soft);
      display:flex;
      flex-direction:column;
      gap:.8rem;
      min-height:100%;
    }
    .news-card .score{
      display:flex;
      align-items:center;
      gap:.65rem;
      flex-wrap:wrap;
    }
    .score strong{
      font-size:1.9rem;
      line-height:1;
      font-weight:900;
      color:#fff;
    }
    .score span{
      color:var(--muted);
      font-size:.9rem;
    }
    .news-card p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
    }

    .social-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:1rem;
    }
    .quote{
      border-radius:8px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      padding:1rem;
      min-height:100%;
      display:flex;
      flex-direction:column;
      gap:.75rem;
    }
    .quote .stars{
      color:var(--warn);
      letter-spacing:.08em;
      font-size:.95rem;
    }
    .quote p{
      margin:0;
      color:#dce5ef;
      line-height:1.72;
    }
    .quote footer{
      margin-top:auto;
      color:var(--muted);
      font-size:.9rem;
    }

    .plans-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
    }
    .plan-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:1rem;
      align-items:stretch;
    }
    .plan{
      border-radius:8px;
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)), var(--panel);
      padding:1rem;
      display:flex;
      flex-direction:column;
      gap:.85rem;
      min-height:100%;
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
    }
    .plan.featured{
      border-color:rgba(102,240,218,.32);
      box-shadow:0 18px 42px rgba(102,240,218,.08), var(--shadow-soft);
    }
    .plan.featured::before{
      content:"";
      position:absolute;
      inset:0 0 auto 0;
      height:3px;
      background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
    }
    .plan h3{
      margin:0;
      font-size:1.16rem;
      font-weight:900;
      line-height:1.2;
    }
    .plan .price{
      display:flex;
      align-items:flex-end;
      gap:.35rem;
      color:#fff;
    }
    .plan .price strong{
      font-size:2rem;
      line-height:1;
      font-weight:900;
    }
    .plan .price span{
      color:var(--muted);
      padding-bottom:.15rem;
      font-size:.9rem;
    }
    .plan p{
      margin:0;
      color:var(--muted);
      line-height:1.72;
      font-size:.92rem;
    }
    .plan ul{
      list-style:none;
      padding:0;
      margin:.15rem 0 0;
      display:grid;
      gap:.55rem;
    }
    .plan li{
      display:flex;
      gap:.55rem;
      color:#dce5ef;
      font-size:.92rem;
      line-height:1.55;
    }
    .plan li i{
      color:var(--accent);
      margin-top:.2rem;
      flex:0 0 auto;
    }
    .plan .button{margin-top:auto}

    .steps{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:1rem;
      counter-reset:step;
    }
    .step{
      counter-increment:step;
      border-radius:8px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      padding:1rem;
      position:relative;
      min-height:160px;
    }
    .step::before{
      content:"0" counter(step);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:38px;
      height:38px;
      border-radius:8px;
      border:1px solid rgba(102,240,218,.22);
      background:rgba(102,240,218,.08);
      color:#dffff8;
      font-weight:900;
      margin-bottom:.85rem;
    }
    .step h3{
      margin:0 0 .45rem;
      font-size:1rem;
      font-weight:800;
      line-height:1.3;
    }
    .step p{
      margin:0;
      color:var(--muted);
      line-height:1.68;
      font-size:.91rem;
    }

    .accordion{
      background:transparent;
      border:none;
    }
    .accordion-item{
      margin-bottom:.75rem;
      border:1px solid var(--line);
      border-radius:8px;
      overflow:hidden;
      background:rgba(255,255,255,.03);
    }
    .accordion-title{
      background:transparent;
      border:none;
      color:var(--text);
      font-weight:800;
      font-size:1rem;
      padding:1rem 3rem 1rem 1rem;
      line-height:1.45;
    }
    .accordion-title:hover,
    .accordion-title:focus{
      background:rgba(255,255,255,.04);
      color:var(--accent);
    }
    .accordion-title::before{
      right:1rem;
      margin-top:-.75rem;
      color:var(--accent);
      font-size:1.3rem;
    }
    .accordion-content{
      border:none;
      border-top:1px solid rgba(255,255,255,.06);
      background:rgba(0,0,0,.08);
      color:var(--muted);
      line-height:1.78;
      padding:1rem;
    }

    .download-band{
      border-radius:8px;
      border:1px solid rgba(102,240,218,.22);
      background:
        linear-gradient(90deg, rgba(102,240,218,.12), rgba(178,140,255,.08), rgba(183,255,99,.08)),
        var(--panel);
      padding:1.25rem;
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:1rem;
      box-shadow:var(--shadow-soft);
    }
    .download-band h2{
      margin:0 0 .35rem;
      font-size:1.45rem;
      font-weight:900;
      line-height:1.2;
    }
    .download-band p{
      margin:0;
      color:#dce5ef;
      line-height:1.7;
      max-width:58rem;
    }
    .download-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
      justify-content:flex-end;
    }

    .site-footer{
      border-top:1px solid var(--line);
      background:#080a0e;
      padding:2rem 0 6rem;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:1.5rem;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      flex-direction:column;
      gap:.75rem;
    }
    .footer-brand strong{
      font-size:1.08rem;
      font-weight:900;
    }
    .footer-brand p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
      max-width:42rem;
    }
    .footer-links{
      display:flex;
      justify-content:flex-end;
      flex-wrap:wrap;
      gap:.55rem;
    }
    .footer-links a{
      padding:.55rem .72rem;
      border-radius:8px;
      color:var(--muted);
      border:1px solid transparent;
      font-weight:700;
    }
    .footer-links a:hover,
    .footer-links a:focus{
      color:var(--text);
      border-color:var(--line);
      background:rgba(255,255,255,.03);
    }
    .copyright{
      margin-top:1.25rem;
      padding-top:1rem;
      border-top:1px solid rgba(255,255,255,.06);
      color:var(--muted-2);
      font-size:.88rem;
      display:flex;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
    }

    .bottom-tabs{
      display:none;
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:1001;
      background:rgba(8,10,14,.94);
      border-top:1px solid var(--line);
      backdrop-filter:blur(14px);
      padding:.38rem .65rem calc(.38rem + env(safe-area-inset-bottom));
    }
    .bottom-tabs a{
      flex:1 1 0;
      min-width:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:.22rem;
      padding:.48rem .25rem;
      border-radius:8px;
      color:var(--muted);
      font-size:.72rem;
      font-weight:700;
      line-height:1.1;
    }
    .bottom-tabs i{font-size:1rem}
    .bottom-tabs a.is-active{
      color:#071016;
      background:var(--accent);
    }
    .bottom-tabs a:hover{color:var(--text)}

    @media screen and (max-width:1180px){
      .hero-grid{
        grid-template-columns:1fr 1.15fr;
      }
      .hero-panel{
        grid-column:1 / -1;
        min-height:auto;
      }
      .checklist{
        grid-template-columns:repeat(3, minmax(0, 1fr));
      }
      .entry-grid,
      .steps{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }
    @media screen and (max-width:900px){
      :root{--nav-h:68px}
      body{padding-top:var(--nav-h)}
      .site-header .grid-container{height:var(--nav-h)}
      .brand-mark{width:38px;height:38px}
      .brand-sub{display:none}
      .header-tools{display:none}
      .hero-grid,
      .topic-grid,
      .news-grid,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .hero-copy,
      .hero-stage,
      .hero-panel{
        min-height:auto;
      }
      .hero-copy{padding:.75rem 0}
      .hero h1{
        max-width:100%;
        font-size:2.45rem;
      }
      .stage-screen{
        grid-template-columns:1fr;
      }
      .stage-strip{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .plan-grid,
      .social-grid{
        grid-template-columns:1fr;
      }
      .download-band{
        grid-template-columns:1fr;
      }
      .download-actions,
      .footer-links{
        justify-content:flex-start;
      }
    }
    @media screen and (max-width:640px){
      body{padding-bottom:4.8rem}
      .grid-container{width:min(100% - 1rem, var(--container))}
      section{padding:3rem 0}
      .site-header .grid-container{gap:.5rem}
      .header-nav .menu{
        gap:.2rem;
      }
      .header-nav .menu a{
        padding:.62rem .55rem;
        font-size:.88rem;
      }
      .brand-name{font-size:.92rem}
      .brand-mark{width:34px;height:34px}
      .hero{
        padding-top:1.35rem;
      }
      .hero h1{
        font-size:2rem;
        line-height:1.08;
      }
      .hero-lead{
        font-size:.98rem;
        line-height:1.72;
      }
      .hero-actions .button{
        width:100%;
        justify-content:center;
      }
      .metric{
        flex:1 1 calc(50% - .5rem);
        min-width:0;
      }
      .poster-grid,
      .topic-tiles,
      .entry-grid,
      .steps,
      .checklist{
        grid-template-columns:1fr;
      }
      .stage-strip{
        grid-template-columns:1fr;
      }
      .section-head,
      .plans-head{
        align-items:flex-start;
        flex-direction:column;
      }
      .section-head h2{
        font-size:1.38rem;
      }
      .compare-table{
        min-width:680px;
      }
      .table-wrap{
        overflow-x:auto;
      }
      .news-item{
        flex-direction:column;
        gap:.35rem;
      }
      .bottom-tabs{display:flex}
      .site-footer{padding-bottom:6.2rem}
    }

/* roulang page: category1 */
:root{
      --bg:#0b0f14;
      --bg-soft:#10161d;
      --panel:#121922;
      --panel-2:#161f29;
      --line:#263142;
      --line-strong:#355065;
      --text:#edf3f8;
      --muted:#95a3b5;
      --muted-2:#718195;
      --accent:#38d8c8;
      --accent-2:#b4ff4a;
      --accent-3:#9a7dff;
      --danger:#ff6b7a;
      --shadow:0 16px 40px rgba(0,0,0,.34);
      --shadow-soft:0 10px 24px rgba(0,0,0,.22);
      --radius:8px;
      --radius-sm:6px;
      --space-1:8px;
      --space-2:12px;
      --space-3:16px;
      --space-4:24px;
      --space-5:32px;
      --space-6:44px;
      --max:1180px;
      --ring:0 0 0 3px rgba(56,216,200,.18);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      line-height:1.6;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(11,15,20,.96) 0%, rgba(11,15,20,.98) 100%),
        radial-gradient(circle at top left, rgba(56,216,200,.08), transparent 34%),
        radial-gradient(circle at top right, rgba(154,125,255,.06), transparent 32%);
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size:64px 64px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0) 36%, rgba(0,0,0,0) 72%, rgba(0,0,0,.36));
      opacity:.16;
      z-index:-1;
    }
    a{
      color:inherit;
      text-decoration:none;
      transition:color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }
    img{max-width:100%;display:block}
    button,input,select,textarea{
      font:inherit;
    }
    button, .button{
      border-radius:999px;
      min-height:44px;
      letter-spacing:0;
      font-weight:700;
      box-shadow:none;
    }
    .button{
      border:1px solid transparent;
      background:var(--panel-2);
      color:var(--text);
      padding:.85rem 1.15rem;
      line-height:1;
    }
    .button:hover,.button:focus{
      transform:translateY(-1px);
      box-shadow:var(--shadow-soft);
      color:var(--text);
    }
    .button:focus,.button:focus-visible{
      outline:none;
      box-shadow:var(--ring);
    }
    .button.primary{
      background:linear-gradient(135deg, rgba(56,216,200,.18), rgba(180,255,74,.14));
      border-color:rgba(56,216,200,.34);
    }
    .button.primary:hover{border-color:rgba(56,216,200,.55)}
    .button.secondary{
      background:#0f151c;
      border-color:var(--line);
      color:var(--text);
    }
    .button.secondary:hover{border-color:var(--line-strong)}
    .button.ghost{
      background:transparent;
      border-color:var(--line);
    }
    .button.small{
      padding:.68rem .95rem;
      min-height:38px;
      font-size:.92rem;
    }
    .button i{margin-right:.45rem}
    .grid-container{
      max-width:var(--max);
      padding-left:1rem;
      padding-right:1rem;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(11,15,20,.86);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .site-header .grid-container{
      min-height:76px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:.85rem;
      min-width:0;
      flex:0 0 auto;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:
        linear-gradient(135deg, rgba(56,216,200,.18), rgba(154,125,255,.16));
      border:1px solid rgba(56,216,200,.32);
      color:var(--accent);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .brand-mark i{font-size:1rem}
    .brand-text{
      display:flex;
      flex-direction:column;
      min-width:0;
      line-height:1.15;
    }
    .brand-name{
      font-weight:900;
      letter-spacing:0;
      font-size:1.02rem;
      white-space:nowrap;
    }
    .brand-sub{
      color:var(--muted);
      font-size:.82rem;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .header-nav .menu{
      margin:0;
      gap:.45rem;
      align-items:center;
      background:transparent;
    }
    .header-nav .menu > li{
      display:flex;
      align-items:center;
    }
    .header-nav .menu a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      padding:.62rem .98rem;
      color:var(--muted);
      border-radius:999px;
      border:1px solid transparent;
      font-weight:650;
    }
    .header-nav .menu a:hover,
    .header-nav .menu a:focus{
      color:var(--text);
      border-color:rgba(56,216,200,.22);
      background:rgba(255,255,255,.03);
    }
    .header-nav .menu a.is-active,
    .header-nav .menu a[aria-current="page"]{
      color:var(--text);
      background:rgba(56,216,200,.09);
      border-color:rgba(56,216,200,.28);
      box-shadow:inset 0 0 0 1px rgba(180,255,74,.08);
    }
    .header-tools{
      display:flex;
      align-items:center;
      gap:.65rem;
      flex:0 0 auto;
    }
    .hero{
      position:relative;
      padding:1.4rem 0 2.6rem;
    }
    .hero-shell{
      position:relative;
      overflow:hidden;
      border-bottom:1px solid rgba(255,255,255,.05);
    }
    .hero-shell:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(56,216,200,.06), transparent 18%),
        linear-gradient(135deg, rgba(255,255,255,.03), transparent 40%);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:1.18fr .92fr;
      gap:1.35rem;
      align-items:stretch;
      min-height:calc(100vh - 124px);
      padding:1rem 0 1.2rem;
    }
    .hero-copy,
    .hero-art{
      position:relative;
      border:1px solid var(--line);
      background:rgba(17,23,31,.72);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .hero-copy{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:2rem;
      overflow:hidden;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      color:var(--accent);
      font-weight:800;
      font-size:.82rem;
      text-transform:uppercase;
      letter-spacing:0;
    }
    .eyebrow:before{
      content:"";
      width:24px;
      height:2px;
      background:var(--accent);
      border-radius:99px;
    }
    .hero h1{
      margin:.85rem 0 .75rem;
      font-size:clamp(2.15rem, 4vw, 4.15rem);
      line-height:1.06;
      letter-spacing:0;
      font-weight:900;
      max-width:12ch;
    }
    .hero-lead{
      margin:0;
      color:#d9e1ea;
      font-size:1.04rem;
      max-width:34rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      margin-top:1.5rem;
    }
    .hero-kpis{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:.85rem;
      margin-top:1.6rem;
    }
    .kpi{
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      border-radius:var(--radius-sm);
      padding:1rem .95rem;
    }
    .kpi strong{
      display:block;
      font-size:1.05rem;
      color:var(--text);
      margin-bottom:.25rem;
    }
    .kpi span{
      color:var(--muted);
      font-size:.9rem;
      display:block;
    }
    .hero-art{
      padding:1rem;
      display:grid;
      grid-template-rows:auto 1fr auto;
      gap:1rem;
      background:
        linear-gradient(180deg, rgba(22,31,41,.88), rgba(15,20,27,.78));
    }
    .hero-player{
      position:relative;
      min-height:320px;
      border-radius:var(--radius);
      border:1px solid rgba(56,216,200,.18);
      background:
        linear-gradient(140deg, rgba(14,20,28,.98), rgba(10,14,19,.9)),
        radial-gradient(circle at 20% 22%, rgba(56,216,200,.17), transparent 28%),
        radial-gradient(circle at 80% 24%, rgba(154,125,255,.14), transparent 27%);
      overflow:hidden;
      isolation:isolate;
    }
    .hero-player:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), transparent 25%),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size:auto, 22px 22px;
      opacity:.65;
      mix-blend-mode:screen;
    }
    .hero-player:after{
      content:"";
      position:absolute;
      left:-10%;
      right:-10%;
      bottom:18%;
      height:2px;
      background:linear-gradient(90deg, transparent, rgba(56,216,200,.7), rgba(180,255,74,.9), rgba(56,216,200,.7), transparent);
      box-shadow:0 0 22px rgba(56,216,200,.45);
      opacity:.88;
    }
    .player-overlay{
      position:absolute;
      inset:0;
      padding:1rem;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .player-top,
    .player-bottom{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.75rem;
    }
    .status-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:999px;
      padding:.42rem .68rem;
      background:rgba(8,12,16,.72);
      border:1px solid rgba(255,255,255,.08);
      color:#dfe8f2;
      font-size:.8rem;
      font-weight:700;
    }
    .status-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent-2);
      box-shadow:0 0 0 5px rgba(180,255,74,.12);
    }
    .player-card{
      width:48%;
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius-sm);
      background:rgba(13,18,24,.66);
      padding:.75rem .8rem;
    }
    .player-card strong{
      display:block;
      font-size:.95rem;
      margin-bottom:.18rem;
    }
    .player-card span{
      color:var(--muted);
      font-size:.84rem;
    }
    .play-cta{
      position:absolute;
      inset:auto 0 50% 0;
      transform:translateY(50%);
      margin:auto;
      width:88px;
      height:88px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(10,15,20,.78);
      border:1px solid rgba(56,216,200,.35);
      color:var(--text);
      box-shadow:0 0 0 10px rgba(56,216,200,.07), 0 16px 34px rgba(0,0,0,.35);
    }
    .play-cta i{
      font-size:1.45rem;
      margin-left:4px;
      color:var(--accent);
    }
    .hero-matrix{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:.8rem;
    }
    .matrix-item{
      min-height:92px;
      border-radius:var(--radius-sm);
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
        rgba(10,15,20,.42);
      padding:.85rem;
    }
    .matrix-item strong{
      display:block;
      margin-bottom:.38rem;
      font-size:.93rem;
    }
    .matrix-item p{
      margin:0;
      color:var(--muted);
      font-size:.84rem;
      line-height:1.45;
    }
    .meter{
      margin-top:.65rem;
      height:6px;
      border-radius:999px;
      background:rgba(255,255,255,.07);
      overflow:hidden;
    }
    .meter span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--accent), var(--accent-2));
    }
    .hero-rail{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      border-top:1px solid rgba(255,255,255,.06);
      padding-top:.15rem;
    }
    .hero-rail p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }
    .hero-rail .rail-badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      color:#dfe7f0;
      font-weight:700;
      font-size:.84rem;
    }
    .section{
      padding:2.2rem 0;
    }
    .section-head{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      align-items:flex-end;
      margin-bottom:1rem;
    }
    .section-title{
      margin:0;
      font-size:1.55rem;
      line-height:1.15;
      font-weight:900;
      letter-spacing:0;
    }
    .section-lead{
      margin:.4rem 0 0;
      color:var(--muted);
      max-width:48rem;
      font-size:.98rem;
    }
    .neon-line{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(56,216,200,.92), rgba(180,255,74,.68), transparent);
      box-shadow:0 0 18px rgba(56,216,200,.24);
      margin:1rem 0;
    }
    .filter-bar{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      align-items:center;
      justify-content:space-between;
      border:1px solid var(--line);
      background:rgba(18,25,34,.8);
      border-radius:var(--radius);
      padding:1rem;
      box-shadow:var(--shadow-soft);
    }
    .chip-row{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      align-items:center;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      padding:.55rem .8rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.02);
      color:#d8e0e9;
      font-size:.88rem;
      font-weight:700;
      white-space:nowrap;
    }
    .chip.is-active{
      border-color:rgba(56,216,200,.34);
      background:rgba(56,216,200,.08);
      color:#fff;
    }
    .search-form{
      display:flex;
      gap:.55rem;
      align-items:center;
      flex:1 1 320px;
      max-width:420px;
      margin-left:auto;
    }
    .search-form input{
      margin:0;
      border-radius:999px;
      height:46px;
      background:#0d131a;
      border-color:var(--line);
      color:var(--text);
      box-shadow:none;
      padding-left:1rem;
    }
    .search-form input::placeholder{color:#7f8ea0}
    .search-form input:focus{
      border-color:rgba(56,216,200,.45);
      box-shadow:var(--ring);
    }
    .resource-grid{
      list-style:none;
      margin:0;
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:1rem;
    }
    .resource-card{
      border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
        rgba(18,25,34,.78);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow-soft);
      min-height:100%;
      display:flex;
      flex-direction:column;
    }
    .resource-head{
      padding:1rem 1rem .8rem;
      border-bottom:1px solid rgba(255,255,255,.05);
    }
    .resource-badges{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-bottom:.75rem;
    }
    .badge-mini{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.34rem .55rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:#dbe4ee;
      font-size:.76rem;
      font-weight:800;
    }
    .badge-mini.good{
      border-color:rgba(180,255,74,.25);
      background:rgba(180,255,74,.08);
      color:#efffd0;
    }
    .badge-mini.live{
      border-color:rgba(56,216,200,.28);
      background:rgba(56,216,200,.08);
      color:#dffdf8;
    }
    .badge-mini.hot{
      border-color:rgba(154,125,255,.26);
      background:rgba(154,125,255,.08);
      color:#efe6ff;
    }
    .resource-card h3{
      margin:0;
      font-size:1.1rem;
      font-weight:900;
      line-height:1.18;
    }
    .resource-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-top:.75rem;
      color:var(--muted);
      font-size:.84rem;
    }
    .resource-body{
      padding:1rem;
      flex:1 1 auto;
      display:flex;
      flex-direction:column;
      gap:.85rem;
    }
    .resource-body p{
      margin:0;
      color:#d6dee7;
      font-size:.92rem;
      line-height:1.55;
    }
    .mini-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:.45rem;
    }
    .mini-list li{
      display:flex;
      align-items:flex-start;
      gap:.5rem;
      color:#cfd9e3;
      font-size:.88rem;
    }
    .mini-list li i{
      color:var(--accent);
      margin-top:.2rem;
      font-size:.78rem;
    }
    .resource-foot{
      padding:0 1rem 1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
    }
    .inline-link{
      color:var(--accent);
      font-weight:800;
      font-size:.9rem;
    }
    .inline-link:hover{color:#7ff3e7}
    .score{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.4rem .6rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      color:#dfe7f0;
      font-size:.8rem;
      font-weight:800;
    }
    .three-up{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:1rem;
    }
    .info-card{
      border:1px solid var(--line);
      background:rgba(18,25,34,.72);
      border-radius:var(--radius);
      padding:1.1rem;
      box-shadow:var(--shadow-soft);
    }
    .info-card strong{
      display:block;
      font-size:1.02rem;
      margin-bottom:.45rem;
    }
    .info-card p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.6;
    }
    .info-card .rule{
      margin-top:.9rem;
      padding-top:.9rem;
      border-top:1px solid rgba(255,255,255,.06);
      color:#dfe7f0;
      font-size:.86rem;
    }
    .info-card .rule i{
      color:var(--accent-2);
      margin-right:.35rem;
    }
    .table-wrap{
      border:1px solid var(--line);
      background:rgba(18,25,34,.8);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow-soft);
    }
    .table-wrap table{
      margin:0;
      border:0;
      background:transparent;
    }
    .table-wrap thead{
      background:rgba(255,255,255,.03);
    }
    .table-wrap th,
    .table-wrap td{
      border-bottom:1px solid rgba(255,255,255,.06);
      color:var(--text);
      padding:1rem .95rem;
      vertical-align:top;
    }
    .table-wrap th{
      font-size:.88rem;
      text-transform:none;
      letter-spacing:0;
      color:#dce5ee;
      background:transparent;
    }
    .table-wrap td{
      color:#d4dde7;
      font-size:.92rem;
    }
    .table-wrap tr:last-child td{border-bottom:0}
    .table-wrap td em{
      font-style:normal;
      color:var(--accent);
      font-weight:800;
    }
    .accordion{
      margin:0;
      background:transparent;
      border:0;
    }
    .accordion-item{
      border:1px solid var(--line);
      background:rgba(18,25,34,.78);
      border-radius:var(--radius);
      overflow:hidden;
      margin-bottom:.8rem;
      box-shadow:var(--shadow-soft);
    }
    .accordion-title{
      color:var(--text);
      font-size:1rem;
      font-weight:800;
      border:0;
      background:transparent;
      padding:1rem 1rem;
    }
    .accordion-title:hover{
      background:rgba(255,255,255,.03);
      color:#fff;
    }
    .accordion-content{
      border:0;
      background:transparent;
      color:#d3dbe5;
      padding:0 1rem 1rem;
      font-size:.92rem;
      line-height:1.68;
    }
    .cta-band{
      border:1px solid rgba(56,216,200,.24);
      background:
        linear-gradient(135deg, rgba(56,216,200,.08), rgba(154,125,255,.06)),
        rgba(18,25,34,.9);
      border-radius:var(--radius);
      padding:1.25rem;
      box-shadow:var(--shadow);
    }
    .cta-band .grid-x{
      align-items:center;
    }
    .cta-band h2{
      margin:0 0 .4rem;
      font-size:1.3rem;
      font-weight:900;
      line-height:1.16;
    }
    .cta-band p{
      margin:0;
      color:#d6dee7;
      font-size:.95rem;
    }
    .cta-band .button-group{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:.65rem;
      margin:0;
    }
    .footer{
      margin-top:2rem;
      padding:1.5rem 0 7.5rem;
      border-top:1px solid rgba(255,255,255,.06);
      background:rgba(8,12,16,.52);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:1rem;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      flex-direction:column;
      gap:.55rem;
    }
    .footer-brand strong{
      font-size:1.02rem;
      font-weight:900;
    }
    .footer-brand p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.65;
      max-width:56ch;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:.55rem;
    }
    .footer-links a{
      display:inline-flex;
      align-items:center;
      min-height:38px;
      padding:.55rem .82rem;
      border:1px solid var(--line);
      border-radius:999px;
      color:#d7e0e9;
      background:rgba(255,255,255,.02);
      font-size:.88rem;
      font-weight:700;
    }
    .footer-links a:hover{
      border-color:rgba(56,216,200,.28);
      background:rgba(56,216,200,.06);
    }
    .footer-note{
      margin-top:1rem;
      color:var(--muted-2);
      font-size:.8rem;
    }
    .mobile-dock{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:60;
      display:none;
      background:rgba(8,12,16,.94);
      backdrop-filter:blur(18px);
      border-top:1px solid rgba(255,255,255,.07);
      padding:.45rem .55rem .55rem;
      box-shadow:0 -10px 28px rgba(0,0,0,.24);
    }
    .dock-row{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:.5rem;
    }
    .dock-link{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:.28rem;
      min-height:58px;
      border-radius:var(--radius-sm);
      border:1px solid transparent;
      background:transparent;
      color:var(--muted);
      font-size:.76rem;
      font-weight:700;
      padding:.35rem .3rem;
    }
    .dock-link i{
      font-size:1.02rem;
    }
    .dock-link.is-active{
      background:rgba(56,216,200,.08);
      border-color:rgba(56,216,200,.26);
      color:#fff;
    }
    .dock-link.action{
      background:rgba(154,125,255,.09);
      border-color:rgba(154,125,255,.24);
      color:#fff;
    }
    .dock-link:focus{
      outline:none;
      box-shadow:var(--ring);
    }
    .top-anchor{
      position:fixed;
      right:1rem;
      bottom:1rem;
      z-index:58;
      width:46px;
      height:46px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(18,25,34,.94);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
      color:var(--text);
    }
    .top-anchor:hover{
      border-color:rgba(56,216,200,.3);
      color:#fff;
    }
    .top-anchor i{margin:0}
    .callout{
      border-radius:var(--radius);
      border:1px solid rgba(180,255,74,.18);
      background:rgba(180,255,74,.05);
      color:#ecffcc;
      box-shadow:var(--shadow-soft);
    }
    .callout a{color:#fff;text-decoration:underline;text-underline-offset:2px}
    .callout p{margin:0}
    .pagination-mini{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin:0;
    }
    .pagination-mini a,
    .pagination-mini span{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:42px;
      height:42px;
      padding:0 .85rem;
      border-radius:999px;
      border:1px solid var(--line);
      color:#d8e0ea;
      background:rgba(255,255,255,.02);
      font-weight:800;
      font-size:.9rem;
    }
    .pagination-mini .current{
      background:rgba(56,216,200,.09);
      border-color:rgba(56,216,200,.28);
    }
    .screen-note{
      color:var(--muted);
      font-size:.86rem;
      margin-top:.65rem;
    }
    .sr-only{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      border:0;
    }
    .section-gap{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
      margin:1.8rem 0;
    }
    @media (max-width: 1024px){
      .hero-grid{grid-template-columns:1fr; min-height:auto}
      .hero-copy{padding:1.4rem}
      .resource-grid,
      .three-up{grid-template-columns:repeat(2, minmax(0,1fr))}
      .footer-grid{grid-template-columns:1fr}
      .footer-links{justify-content:flex-start}
      .search-form{max-width:none; width:100%; margin-left:0}
      .filter-bar{align-items:stretch}
    }
    @media (max-width: 768px){
      .site-header .grid-container{
        min-height:68px;
        gap:.7rem;
      }
      .header-nav{display:none}
      .header-tools{display:none}
      .hero{
        padding-top:1rem;
      }
      .hero-grid{
        gap:1rem;
      }
      .hero h1{
        max-width:none;
      }
      .hero-kpis,
      .resource-grid,
      .three-up{
        grid-template-columns:1fr;
      }
      .hero-player{min-height:260px}
      .hero-matrix{grid-template-columns:1fr 1fr}
      .section{padding:1.7rem 0}
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .cta-band .button-group{
        justify-content:flex-start;
        margin-top:1rem;
      }
      .mobile-dock{display:block}
      .footer{padding-bottom:8.6rem}
    }
    @media (max-width: 520px){
      .hero-copy{padding:1.05rem}
      .hero h1{font-size:1.9rem}
      .hero-lead{font-size:.96rem}
      .hero-actions .button{width:100%; justify-content:center}
      .hero-matrix{grid-template-columns:1fr}
      .player-card{width:100%}
      .player-top,.player-bottom{
        flex-direction:column;
        align-items:flex-start;
      }
      .filter-bar{padding:.85rem}
      .search-form input{height:44px}
      .search-form .button{width:100%; justify-content:center}
      .cta-band{padding:1rem}
      .table-wrap th,.table-wrap td{padding:.85rem .72rem}
    }