/* roulang page: index */
:root{
      --primary:#12B76A;
      --primary-deep:#0E9F5B;
      --secondary:#A3E635;
      --accent:#F59E0B;
      --bg:#F6FAF5;
      --bg-soft:#EEF7EF;
      --card:#FFFFFF;
      --text:#10231A;
      --muted:#557165;
      --line:#D9EBDD;
      --dark:#07160F;
      --dark-2:#0B1F16;
      --radius-xl:28px;
      --radius-lg:20px;
      --radius-md:16px;
      --shadow-sm:0 10px 30px rgba(18,183,106,0.08);
      --shadow-md:0 18px 48px rgba(18,183,106,0.13);
      --shadow-lg:0 24px 70px rgba(7,22,15,0.20);
      --grad:linear-gradient(135deg,#12B76A 0%,#A3E635 55%,#FDE68A 100%);
      --grad-dark:linear-gradient(135deg,#0B1F16 0%,#123524 50%,#164C2F 100%);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
      background:
        radial-gradient(circle at top right, rgba(163,230,53,.18), transparent 24%),
        radial-gradient(circle at 10% 20%, rgba(18,183,106,.10), transparent 22%),
        var(--bg);
      color:var(--text);
      line-height:1.75;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%;height:auto}
    button,input,textarea,select{font:inherit}
    .site-shell{overflow:hidden}
    .container-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
    .glass-nav{
      backdrop-filter:saturate(180%) blur(14px);
      background:rgba(255,255,255,.84);
      border:1px solid rgba(217,235,221,.9);
      box-shadow:0 8px 30px rgba(16,35,26,.06);
    }
    .brand-badge{
      background:var(--grad);
      box-shadow:0 12px 30px rgba(18,183,106,.24);
    }
    .nav-link{
      position:relative;
      transition:.25s ease;
    }
    .nav-link:hover{color:var(--primary)}
    .nav-link.active{
      color:#0D5F37;
      background:#E8F8EC;
      border-color:#CFECD7;
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left:16px;
      right:16px;
      bottom:6px;
      height:2px;
      border-radius:999px;
      background:var(--grad);
      transform:scaleX(0);
      transform-origin:center;
      transition:.25s ease;
    }
    .nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
    .btn-main,.btn-sub,.btn-text{
      transition:all .25s ease;
      outline:none;
    }
    .btn-main{
      background:var(--grad);
      color:#fff;
      box-shadow:0 18px 40px rgba(18,183,106,.28);
    }
    .btn-main:hover{transform:translateY(-2px);filter:saturate(1.05);box-shadow:0 24px 50px rgba(18,183,106,.34)}
    .btn-sub{
      background:#fff;
      color:#0E5A35;
      border:1px solid #CFECD7;
      box-shadow:var(--shadow-sm);
    }
    .btn-sub:hover{transform:translateY(-2px);background:#F4FFE8;border-color:#BEE7C8}
    .btn-text:hover{color:var(--primary)}
    .btn-text:hover .arrow{transform:translateX(4px)}
    .btn-main:focus-visible,.btn-sub:focus-visible,.btn-text:focus-visible,.faq-trigger:focus-visible,.menu-toggle:focus-visible,.nav-link:focus-visible{
      box-shadow:0 0 0 4px rgba(18,183,106,.18);
      border-radius:999px;
    }
    .hero-bg{
      background:
        linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.86)),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
      position:relative;
    }
    .hero-bg::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 20% 25%, rgba(18,183,106,.16), transparent 18%),
        radial-gradient(circle at 80% 15%, rgba(163,230,53,.14), transparent 18%),
        linear-gradient(0deg, rgba(18,183,106,.06), rgba(18,183,106,.06));
      pointer-events:none;
    }
    .field-lines{
      position:absolute;
      inset:auto -10% -14% -10%;
      height:58%;
      opacity:.18;
      pointer-events:none;
      background:
        radial-gradient(circle at center, transparent 0 18%, rgba(18,183,106,.55) 18.2% 18.7%, transparent 19%),
        linear-gradient(rgba(18,183,106,.35),rgba(18,183,106,.35)) center/76% 2px no-repeat,
        linear-gradient(90deg, rgba(18,183,106,.28) 0 0) center/2px 100% no-repeat;
      border:2px solid rgba(18,183,106,.28);
      border-radius:42px;
    }
    .section-title{letter-spacing:-.02em}
    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-sm);
      transition:all .28s ease;
    }
    .card:hover{
      transform:translateY(-4px);
      border-color:#BFE9C8;
      box-shadow:var(--shadow-md);
    }
    .soft-card{
      background:linear-gradient(180deg,#FFFFFF 0%, #F7FCF7 100%);
      border:1px solid #D9EBDD;
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-sm);
    }
    .dark-card{
      background:var(--grad-dark);
      color:#EAF7EE;
      border:1px solid rgba(163,230,53,.15);
      border-radius:32px;
      box-shadow:var(--shadow-lg);
      position:relative;
      overflow:hidden;
    }
    .dark-card::before{
      content:"";
      position:absolute;
      width:320px;height:320px;
      right:-90px;top:-100px;
      background:radial-gradient(circle, rgba(163,230,53,.25), transparent 60%);
      pointer-events:none;
    }
    .pill{
      display:inline-flex;align-items:center;gap:8px;
      border-radius:999px;padding:8px 14px;
      font-size:13px;font-weight:700;line-height:1;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .pill-green{background:#E8F8EC;color:#0E6A3E;border-color:#CDEED7}
    .pill-lime{background:#F4FFE1;color:#527A10;border-color:#E3F6B5}
    .pill-amber{background:#FFF4DF;color:#A45B00;border-color:#F6D39A}
    .pill-dark{background:rgba(255,255,255,.10);color:#EAF7EE;border-color:rgba(255,255,255,.12)}
    .score-panel{
      background:linear-gradient(180deg,#0A1B13 0%,#0F291B 100%);
      border:1px solid rgba(163,230,53,.16);
      border-radius:32px;
      color:#F6FFF7;
      box-shadow:var(--shadow-lg);
      overflow:hidden;
      position:relative;
    }
    .score-panel::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(rgba(163,230,53,.06) 1px, transparent 1px) 0 0/100% 44px,
        linear-gradient(90deg, rgba(163,230,53,.04) 1px, transparent 1px) 0 0/44px 100%;
      pointer-events:none;
    }
    .score-item{
      position:relative;
      display:grid;
      grid-template-columns:1fr auto 1fr auto;
      gap:10px;
      align-items:center;
      padding:16px 18px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .score-item:last-child{border-bottom:0}
    .score-num{
      font-weight:800;
      font-size:28px;
      line-height:1;
      letter-spacing:-.04em;
      color:#DDFE86;
      min-width:60px;
      text-align:center;
    }
    .section-pattern{
      background:
        linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.95)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      border-radius:36px;
      border:1px solid #DDEEDF;
    }
    .cover-frame{
      border-radius:28px;
      overflow:hidden;
      position:relative;
      min-height:100%;
    }
    .cover-frame img{
      width:100%;height:100%;object-fit:cover;
      transform:scale(1.01);
    }
    .cover-frame::after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(180deg, rgba(7,22,15,.03), rgba(7,22,15,.34));
    }
    .stat-card h3{letter-spacing:-.03em}
    .timeline-step{
      position:relative;
      padding-left:34px;
    }
    .timeline-step::before{
      content:"";
      position:absolute;left:0;top:8px;
      width:16px;height:16px;border-radius:999px;
      background:var(--grad);
      box-shadow:0 0 0 6px rgba(18,183,106,.10);
    }
    .timeline-step::after{
      content:"";
      position:absolute;left:7px;top:30px;bottom:-30px;width:2px;
      background:linear-gradient(180deg, rgba(18,183,106,.42), rgba(18,183,106,.04));
    }
    .timeline-step:last-child::after{display:none}
    .review-grid{columns:4 260px;column-gap:20px}
    .review-card{
      break-inside:avoid;
      margin-bottom:20px;
    }
    .star{color:#F59E0B}
    .faq-item{
      border:1px solid #D9EBDD;
      background:#fff;
      border-radius:22px;
      overflow:hidden;
      box-shadow:var(--shadow-sm);
    }
    .faq-trigger{
      width:100%;
      text-align:left;
      background:#fff;
      border:0;
      padding:22px 24px;
      font-weight:800;
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      cursor:pointer;
    }
    .faq-trigger:hover{background:#FBFEFB}
    .faq-content{
      max-height:0;
      overflow:hidden;
      transition:max-height .28s ease;
      color:var(--muted);
    }
    .faq-item.active .faq-content{max-height:260px}
    .faq-item.active .faq-icon{transform:rotate(45deg)}
    .faq-icon{
      flex:0 0 auto;
      width:34px;height:34px;border-radius:999px;
      display:grid;place-items:center;
      color:#0D6A3D;background:#E8F8EC;border:1px solid #CDEED7;
      transition:.25s ease;
      font-size:20px;font-weight:700;
    }
    .cta-bg{
      background:
        linear-gradient(180deg, rgba(7,22,15,.85), rgba(7,22,15,.92)),
        url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
      position:relative;
      overflow:hidden;
    }
    .cta-bg::before{
      content:"";
      position:absolute;inset:-20% auto auto -10%;
      width:340px;height:340px;border-radius:999px;
      background:radial-gradient(circle, rgba(163,230,53,.26), transparent 60%);
    }
    .cta-bg::after{
      content:"";
      position:absolute;right:-80px;bottom:-120px;
      width:320px;height:320px;border-radius:999px;
      background:radial-gradient(circle, rgba(18,183,106,.28), transparent 60%);
    }
    .footer-link{color:#CFE3D6;transition:.25s ease}
    .footer-link:hover{color:#CFFB78}
    .mobile-panel{display:none}
    .metric-board{
      background:linear-gradient(180deg,#fff 0%, #F7FCF7 100%);
      border:1px solid #D9EBDD;
      border-radius:24px;
      box-shadow:var(--shadow-sm);
    }
    .mini-list li{
      position:relative;
      padding-left:18px;
    }
    .mini-list li::before{
      content:"";
      width:8px;height:8px;border-radius:999px;
      background:var(--primary);
      position:absolute;left:0;top:10px;
    }
    .floating-note{
      background:#FFFFFF;
      border:1px solid #D9EBDD;
      box-shadow:var(--shadow-md);
      border-radius:24px;
    }
    .tag-chip{
      display:inline-flex;
      align-items:center;
      padding:8px 12px;
      border-radius:999px;
      background:#F3FBF4;
      border:1px solid #D8EDD9;
      color:#2E5B44;
      font-size:13px;
      font-weight:700;
      transition:.25s ease;
    }
    .tag-chip:hover{background:#EAF9ED;border-color:#BFE9C8;color:#0E6A3E}
    @media (max-width: 1024px){
      .review-grid{columns:2 260px}
    }
    @media (max-width: 768px){
      .desktop-nav{display:none}
      .mobile-panel{display:block}
      .hero-title{font-size:34px!important}
      .section-space{padding-top:56px;padding-bottom:56px}
      .review-grid{columns:1 100%}
      .score-item{grid-template-columns:1fr auto 1fr}
      .score-item .score-status{grid-column:1/-1;justify-self:start;margin-top:4px}
    }
    @media (max-width: 520px){
      .container-wrap{padding:0 14px}
      .hero-title{font-size:30px!important}
      .card,.soft-card,.dark-card,.score-panel,.section-pattern{border-radius:22px}
      .faq-trigger{padding:18px}
    }

/* roulang page: category1 */
:root{
      --primary:#12B76A;
      --primary-dark:#0E8E54;
      --secondary:#A3E635;
      --accent:#F59E0B;
      --dark:#07160F;
      --dark-2:#0B1F16;
      --text:#10231A;
      --muted:#5D7468;
      --line:#DCECDF;
      --soft:#F6FAF5;
      --soft-2:#EEF7EF;
      --white:#ffffff;
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --shadow-sm:0 10px 30px rgba(18,183,106,.08);
      --shadow-md:0 16px 44px rgba(18,183,106,.12);
      --shadow-lg:0 24px 70px rgba(9,64,36,.18);
      --gradient:linear-gradient(135deg,#12B76A 0%,#7ED957 55%,#F6C453 100%);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(163,230,53,.15), transparent 28%),
        radial-gradient(circle at top right, rgba(18,183,106,.10), transparent 30%),
        linear-gradient(180deg,#F9FCF8 0%,#F4FAF3 60%,#ffffff 100%);
      line-height:1.75;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    .container-wrap{width:min(1280px,calc(100% - 32px));margin:0 auto}
    .glass-nav{
      background:rgba(255,255,255,.88);
      border:1px solid rgba(216,237,220,.95);
      box-shadow:0 16px 42px rgba(17,99,55,.08);
      backdrop-filter:blur(14px);
    }
    .brand-badge{
      background:var(--gradient);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 25px rgba(18,183,106,.28);
    }
    .nav-link{
      color:#1A3A2B;
      transition:.25s ease;
      position:relative;
    }
    .nav-link:hover{color:var(--primary-dark);background:#F1FBF4;border-color:#D9EBDD}
    .nav-link.active{
      background:#E8F8EC;
      color:#0B7A45;
      border-color:#CFEAD8;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
    }
    .btn-main{
      color:#fff;
      background:var(--gradient);
      box-shadow:0 14px 30px rgba(18,183,106,.22);
      transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
    }
    .btn-main:hover{transform:translateY(-2px);box-shadow:0 20px 38px rgba(18,183,106,.28);filter:saturate(1.05)}
    .btn-main:focus-visible,.btn-ghost:focus-visible,.faq-btn:focus-visible,.chip:focus-visible,.nav-link:focus-visible,.footer-link:focus-visible{
      outline:3px solid rgba(18,183,106,.22);
      outline-offset:2px;
    }
    .btn-ghost{
      background:#fff;
      color:#126B43;
      border:1px solid #CFE7D4;
      box-shadow:var(--shadow-sm);
      transition:.25s ease;
    }
    .btn-ghost:hover{background:#F3FDEA;border-color:#B8E07A;transform:translateY(-2px)}
    .pill{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700
    }
    .pill::before{content:"";width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.8}
    .pill-green{background:#E7F8ED;color:#0D7B46}
    .pill-amber{background:#FFF3E0;color:#B66807}
    .pill-dark{background:#103021;color:#BDF39D}
    .hero-score-bg{
      position:relative;overflow:hidden;
      background:
        linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.88)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      border:1px solid #DFEDE1;
      box-shadow:var(--shadow-md);
    }
    .hero-score-bg::before{
      content:"";
      position:absolute;inset:0;
      background:
        radial-gradient(circle at 15% 20%, rgba(163,230,53,.22), transparent 24%),
        radial-gradient(circle at 90% 15%, rgba(18,183,106,.14), transparent 26%),
        linear-gradient(135deg, rgba(18,183,106,.04) 0%, rgba(245,158,11,.04) 100%);
      pointer-events:none;
    }
    .field-lines::after{
      content:"";
      position:absolute;inset:14px;
      border:1px solid rgba(18,183,106,.08);
      border-radius:28px;
      pointer-events:none;
    }
    .section-title{font-size:clamp(28px,4vw,38px);line-height:1.15;font-weight:900;letter-spacing:-.02em}
    .section-desc{font-size:16px;color:var(--muted)}
    .card{
      background:#fff;border:1px solid #E3EFE4;border-radius:28px;box-shadow:var(--shadow-sm);
      transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
    }
    .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#C8E6D0}
    .scoreboard{
      background:linear-gradient(180deg,#0A1E15,#0F291C);
      color:#ECFFF1;border-radius:30px;padding:22px;border:1px solid rgba(177,236,197,.14);
      box-shadow:var(--shadow-lg);
      position:relative;overflow:hidden;
    }
    .scoreboard::before{
      content:"";
      position:absolute;inset:0;
      background:
        linear-gradient(90deg, transparent 0 10%, rgba(163,230,53,.06) 10% 10.5%, transparent 10.5% 20%, rgba(163,230,53,.04) 20% 20.5%, transparent 20.5%),
        radial-gradient(circle at top right, rgba(163,230,53,.15), transparent 22%);
      pointer-events:none;
    }
    .match-row{
      display:grid;grid-template-columns:1fr auto 1fr auto;gap:14px;align-items:center;
      padding:18px;border-radius:22px;background:#fff;border:1px solid #E2EFE4;box-shadow:var(--shadow-sm);
      transition:.25s ease;
    }
    .match-row:hover{border-color:#BBE3C5;box-shadow:var(--shadow-md);transform:translateY(-3px)}
    .team{
      display:flex;align-items:center;gap:12px;min-width:0
    }
    .team.right{justify-content:flex-end}
    .team .dot{
      width:14px;height:14px;border-radius:999px;flex:0 0 auto;
      background:var(--gradient);
      box-shadow:0 0 0 5px rgba(18,183,106,.10);
    }
    .score-box{
      min-width:90px;text-align:center;border-radius:18px;padding:10px 14px;
      background:#0C2418;color:#EAFFF0;font-weight:900;letter-spacing:.02em;
      box-shadow:inset 0 0 0 1px rgba(190,242,100,.15);
    }
    .status-badge{
      display:inline-flex;align-items:center;gap:6px;
      padding:7px 12px;border-radius:999px;font-size:12px;font-weight:800
    }
    .status-live{background:#EAFCE9;color:#0B884B}
    .status-focus{background:#FFF1D8;color:#B86B08}
    .status-upcoming{background:#EEF4EF;color:#476255}
    .status-end{background:#F2F6F3;color:#51675D}
    .chip{
      display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
      padding:11px 16px;border-radius:999px;border:1px solid #D7E8DA;background:#fff;color:#1C3E2F;
      font-weight:700;transition:.25s ease
    }
    .chip:hover,.chip.active{background:#EAF8EE;border-color:#BFE3C7;color:#0D7A46}
    .mini-stat{
      border-radius:22px;border:1px solid #E2EFE4;background:#fff;padding:18px 18px 16px;box-shadow:var(--shadow-sm)
    }
    .side-list a{
      display:flex;justify-content:space-between;align-items:center;
      padding:12px 0;border-bottom:1px dashed #DCE9DF;color:#173828;transition:.25s ease
    }
    .side-list a:hover{color:#0D8249;padding-left:4px}
    .content-card{
      overflow:hidden;border-radius:28px;background:#fff;border:1px solid #E1EFE3;box-shadow:var(--shadow-sm);transition:.28s ease
    }
    .content-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#C6E7CE}
    .content-card .thumb{height:220px;position:relative;overflow:hidden}
    .content-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
    .content-card:hover .thumb img{transform:scale(1.05)}
    .content-card .thumb::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(180deg,transparent 0%, rgba(8,28,18,.12) 100%);
    }
    .faq-item{
      border:1px solid #DFECE1;background:#fff;border-radius:22px;box-shadow:var(--shadow-sm);overflow:hidden
    }
    .faq-btn{
      width:100%;text-align:left;padding:22px 24px;background:#fff;border:none;cursor:pointer;
      display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:800;color:#143526;transition:.25s ease
    }
    .faq-btn:hover{background:#F7FCF7}
    .faq-content{
      padding:0 24px 22px;color:#52695E;display:none
    }
    .faq-item.open .faq-content{display:block}
    .faq-icon{
      width:34px;height:34px;border-radius:999px;background:#E9F8ED;color:#0E7E47;
      display:flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto
    }
    .cta-panel{
      background:
        linear-gradient(135deg, rgba(7,22,15,.95) 0%, rgba(11,31,22,.96) 100%),
        url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
      position:relative;overflow:hidden;border-radius:34px;border:1px solid rgba(186,238,196,.12);box-shadow:var(--shadow-lg)
    }
    .cta-panel::before{
      content:"";position:absolute;inset:0;
      background:
        radial-gradient(circle at 15% 30%, rgba(163,230,53,.18), transparent 22%),
        radial-gradient(circle at 85% 20%, rgba(245,158,11,.16), transparent 20%),
        linear-gradient(90deg, transparent 0 8%, rgba(163,230,53,.04) 8% 8.3%, transparent 8.3% 16.6%, rgba(163,230,53,.04) 16.6% 16.9%, transparent 16.9%);
      pointer-events:none;
    }
    .footer-link{color:#CFE3D6;transition:.25s ease}
    .footer-link:hover{color:#BDF39D}
    .mobile-panel{border-top:1px solid #E6F0E7;margin-top:14px}
    .score-scroll{display:grid;gap:16px}
    .aside-sticky{position:sticky;top:110px}
    @media (max-width: 1024px){
      .aside-sticky{position:static}
      .match-row{grid-template-columns:1fr auto 1fr;gap:10px}
      .match-row .status-wrap{grid-column:1/-1}
    }
    @media (max-width: 768px){
      .container-wrap{width:min(100% - 24px,1280px)}
      .section-title{font-size:30px}
      .scoreboard{padding:18px;border-radius:24px}
      .match-row{padding:16px;border-radius:18px}
      .score-box{min-width:78px}
    }
    @media (max-width: 520px){
      .team .name{font-size:15px}
      .score-box{padding:9px 10px;min-width:72px;font-size:15px}
      .faq-btn{padding:18px}
      .faq-content{padding:0 18px 18px}
    }

/* roulang page: category2 */
:root{
      --primary:#12B76A;
      --primary-dark:#0E8F54;
      --lime:#A3E635;
      --lime-soft:#E9FAD4;
      --amber:#F59E0B;
      --amber-soft:#FFF2D8;
      --text:#10231A;
      --muted:#5C7468;
      --bg:#F6FAF5;
      --bg-soft:#EEF7EF;
      --white:#FFFFFF;
      --line:#D9EBDD;
      --line-strong:#C5DEC9;
      --dark:#07160F;
      --dark-2:#0B1F16;
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --radius-sm:14px;
      --shadow-sm:0 8px 24px rgba(18,183,106,.08);
      --shadow-md:0 20px 60px rgba(18,183,106,.12);
      --shadow-lg:0 28px 90px rgba(8,45,25,.18);
      --gradient:linear-gradient(135deg,#12B76A 0%,#A3E635 62%,#FBBF24 100%);
      --gradient-dark:linear-gradient(135deg,#0D5F39 0%,#12824E 45%,#A3E635 100%);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
      background:
        radial-gradient(circle at top left, rgba(163,230,53,.12), transparent 30%),
        radial-gradient(circle at top right, rgba(18,183,106,.10), transparent 28%),
        linear-gradient(180deg,#F8FCF7 0%,#F2F9F2 100%);
      line-height:1.75;
    }
    a{text-decoration:none;color:inherit}
    img{display:block;max-width:100%}
    button,input,textarea,select{font:inherit}
    .container-wrap{max-width:1240px;margin:0 auto;padding:0 18px}
    .glass-nav{
      background:rgba(255,255,255,.86);
      backdrop-filter: blur(14px);
      border:1px solid rgba(217,235,221,.85);
      box-shadow:0 18px 50px rgba(18,183,106,.08);
    }
    .brand-badge{
      background:var(--gradient);
      box-shadow:0 10px 24px rgba(18,183,106,.24);
    }
    .nav-link{
      color:#204432;
      transition:all .25s ease;
      position:relative;
    }
    .nav-link:hover{
      color:var(--primary-dark);
      background:#F1FBF3;
      border-color:#D7EEDB;
    }
    .nav-link.active{
      background:#E8F8EC;
      color:#0E6A3E;
      border-color:#CFEAD7;
      box-shadow: inset 0 0 0 1px rgba(18,183,106,.04);
    }
    .btn-main{
      background:var(--gradient);
      color:#fff;
      box-shadow:0 14px 30px rgba(18,183,106,.24);
      transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
    }
    .btn-main:hover{transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 20px 40px rgba(18,183,106,.28)}
    .btn-main:focus-visible,.btn-ghost:focus-visible,.nav-link:focus-visible,.footer-link:focus-visible,.faq-btn:focus-visible,.chip-btn:focus-visible,.outline-btn:focus-visible,.timeline-link:focus-visible,.menu-toggle:focus-visible{
      outline:none;
      box-shadow:0 0 0 4px rgba(18,183,106,.20);
    }
    .btn-ghost{
      background:#fff;
      color:#0E6A3E;
      border:1px solid #D5EAD9;
      transition:all .25s ease;
    }
    .btn-ghost:hover{background:#F2FBEF;border-color:#BFE5C6;transform:translateY(-2px)}
    .outline-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:12px 18px;
      border-radius:999px;
      border:1px solid #CBE6D2;
      color:#0E6A3E;
      background:#fff;
      font-weight:700;
      transition:all .25s ease;
    }
    .outline-btn:hover{background:#F0FBF4;border-color:#9ED4AD;transform:translateY(-2px)}
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      font-size:12px;
      font-weight:700;
      line-height:1;
      white-space:nowrap;
    }
    .pill::before{
      content:"";
      width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.9;
    }
    .pill-green{background:#E8F8EC;color:#0E8F54}
    .pill-lime{background:#F1FADB;color:#5B7D10}
    .pill-amber{background:#FFF2D8;color:#B36A00}
    .section-card{
      background:rgba(255,255,255,.92);
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-sm);
    }
    .hero-wrap{
      position:relative;
      overflow:hidden;
      border-radius:40px;
      border:1px solid #D8ECD9;
      background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.88)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      box-shadow:var(--shadow-md);
    }
    .hero-wrap::before{
      content:"";
      position:absolute;inset:0;
      background:
        radial-gradient(circle at 18% 20%, rgba(163,230,53,.16), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(18,183,106,.14), transparent 26%),
        linear-gradient(135deg, rgba(18,183,106,.04), rgba(245,158,11,.06));
      pointer-events:none;
    }
    .field-lines{
      position:absolute;inset:auto 0 0 0;height:46%;
      background:
        linear-gradient(90deg, transparent 0, transparent 8%, rgba(255,255,255,.7) 8.2%, transparent 8.4%, transparent 50%, rgba(255,255,255,.7) 50.2%, transparent 50.4%, transparent 91.6%, rgba(255,255,255,.7) 91.8%, transparent 92%),
        linear-gradient(0deg, transparent 0, transparent 18%, rgba(255,255,255,.5) 18.2%, transparent 18.4%, transparent 81.6%, rgba(255,255,255,.5) 81.8%, transparent 82%);
      opacity:.35;
      pointer-events:none;
    }
    .score-panel{
      background:linear-gradient(180deg,#0A1D14,#10261B);
      color:#EFFAF2;
      border:1px solid rgba(255,255,255,.08);
      border-radius:30px;
      box-shadow:var(--shadow-lg);
      overflow:hidden;
      position:relative;
    }
    .score-panel::after{
      content:"";
      position:absolute;inset:0;
      background:
        radial-gradient(circle at top right, rgba(163,230,53,.16), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 20%);
      pointer-events:none;
    }
    .metric-card,.mini-card,.info-card,.tip-card,.match-card,.faq-card,.cta-card,.feature-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:26px;
      box-shadow:var(--shadow-sm);
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .metric-card:hover,.mini-card:hover,.info-card:hover,.tip-card:hover,.match-card:hover,.feature-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-md);
      border-color:#B9DEC2;
    }
    .chip-scroll{scrollbar-width:none;-ms-overflow-style:none}
    .chip-scroll::-webkit-scrollbar{display:none}
    .chip-btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;
      border:1px solid #D5EAD9;background:#fff;color:#24513B;
      transition:all .25s ease;white-space:nowrap;
    }
    .chip-btn:hover{background:#F0FBF4;border-color:#B8DDBF;color:#0E6A3E}
    .chip-btn.active{background:#E7F8EB;color:#0D6B3F;border-color:#C8E8CF}
    .time-line{
      position:relative;
      padding-left:28px;
    }
    .time-line::before{
      content:"";
      position:absolute;left:9px;top:10px;bottom:10px;width:3px;
      background:linear-gradient(180deg,#B5E9C2 0%,#12B76A 52%,#F59E0B 100%);
      border-radius:999px;
      opacity:.95;
    }
    .day-block{
      position:relative;
      margin-bottom:26px;
    }
    .day-block:last-child{margin-bottom:0}
    .day-title{
      position:relative;
      display:flex;align-items:center;gap:12px;
      margin-bottom:16px;
      padding-left:4px;
    }
    .day-title::before{
      content:"";
      position:absolute;left:-28px;top:14px;
      width:20px;height:20px;border-radius:999px;
      background:var(--gradient);
      box-shadow:0 0 0 5px #EAF9EE;
    }
    .match-card{
      display:grid;
      grid-template-columns:120px 1fr auto;
      gap:18px;
      padding:18px;
      margin-bottom:14px;
      align-items:center;
    }
    .match-time{
      border-radius:18px;
      background:#F5FBF6;
      border:1px solid #DEEFE1;
      padding:14px 12px;
      text-align:center;
    }
    .vs-row{
      display:grid;
      grid-template-columns:1fr auto 1fr;
      gap:14px;
      align-items:center;
    }
    .team{
      display:flex;align-items:center;gap:12px;
      min-width:0;
    }
    .team.right{justify-content:flex-end}
    .team-name{
      font-weight:800;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .team-dot{
      width:14px;height:14px;border-radius:999px;flex:0 0 auto;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
    }
    .versus{
      min-width:78px;
      text-align:center;
      border-radius:16px;
      padding:9px 12px;
      background:#F8FAF8;
      border:1px dashed #D0E4D4;
      font-weight:800;
      color:#355A45;
    }
    .timeline-link{
      display:inline-flex;align-items:center;gap:8px;
      color:#0E6A3E;font-weight:800;
      transition:all .25s ease;
    }
    .timeline-link:hover{gap:12px;color:#0A8A50}
    .stadium-thumb{
      position:relative;overflow:hidden;border-radius:30px;
      min-height:100%;
      background:#0B1F16;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-md);
    }
    .stadium-thumb img{
      width:100%;height:100%;object-fit:cover;min-height:420px;
      filter:saturate(1.05);
    }
    .stadium-thumb::after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(180deg, rgba(7,22,15,.1), rgba(7,22,15,.72));
    }
    .overlay-text{
      position:absolute;left:24px;right:24px;bottom:24px;color:#F5FFF8;z-index:1;
    }
    .strip-badge{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;border-radius:999px;font-size:12px;font-weight:800;
      color:#DFF9E7;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);
      backdrop-filter:blur(6px);
    }
    .faq-card{
      overflow:hidden;
      border-radius:22px;
    }
    .faq-btn{
      width:100%;text-align:left;background:#fff;border:0;
      padding:20px 22px;font-weight:800;color:var(--text);
      display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
    }
    .faq-btn:hover{background:#F7FCF7}
    .faq-content{
      display:none;
      padding:0 22px 22px 22px;
      color:var(--muted);
    }
    .faq-card.open .faq-content{display:block}
    .faq-icon{
      width:34px;height:34px;border-radius:999px;
      display:flex;align-items:center;justify-content:center;
      background:#EDF8F0;color:#0E6A3E;font-weight:900;flex:0 0 auto;
    }
    .cta-shell{
      position:relative;
      overflow:hidden;
      background:linear-gradient(135deg,#07160F 0%,#0B1F16 55%,#103323 100%);
      color:#EFFAF2;
      border-radius:36px;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-lg);
    }
    .cta-shell::before{
      content:"";
      position:absolute;inset:0;
      background:
        radial-gradient(circle at 16% 30%, rgba(163,230,53,.18), transparent 24%),
        radial-gradient(circle at 84% 20%, rgba(245,158,11,.12), transparent 22%),
        linear-gradient(90deg, transparent 0, transparent 10%, rgba(255,255,255,.06) 10.2%, transparent 10.4%, transparent 50%, rgba(255,255,255,.06) 50.2%, transparent 50.4%, transparent 89.6%, rgba(255,255,255,.06) 89.8%, transparent 90%);
      pointer-events:none;
    }
    .footer-link{
      color:#CFE3D6;
      transition:all .25s ease;
    }
    .footer-link:hover{color:#BDF56C}
    .mobile-panel .nav-link.active{background:#E8F8EC}
    .soft-title{
      letter-spacing:-.02em;
    }
    .subtle{
      color:var(--muted);
    }
    @media (max-width: 1024px){
      .match-card{grid-template-columns:110px 1fr}
      .match-card > :last-child{grid-column:1/-1}
    }
    @media (max-width: 768px){
      .hero-wrap{border-radius:28px}
      .section-card,.metric-card,.mini-card,.info-card,.tip-card,.match-card,.feature-card{border-radius:22px}
      .score-panel{border-radius:24px}
      .stadium-thumb img{min-height:300px}
    }
    @media (max-width: 520px){
      .container-wrap{padding:0 14px}
      .match-card{grid-template-columns:1fr;gap:14px}
      .match-time{text-align:left}
      .vs-row{grid-template-columns:1fr;gap:12px}
      .team.right{justify-content:flex-start}
      .versus{justify-self:start}
      .faq-btn{padding:18px}
      .faq-content{padding:0 18px 18px}
    }

/* roulang page: category3 */
:root{
      --primary:#12B76A;
      --primary-deep:#0E8F54;
      --secondary:#A3E635;
      --accent:#F59E0B;
      --accent-soft:#FFF1D6;
      --dark:#07160F;
      --dark-2:#0B1F16;
      --text:#10231A;
      --muted:#5E7468;
      --bg:#F6FAF5;
      --bg-soft:#EEF7EF;
      --card:#FFFFFF;
      --line:#DDECE0;
      --line-strong:#C8DECF;
      --shadow:0 18px 60px rgba(18,183,106,.12);
      --shadow-hover:0 26px 80px rgba(18,183,106,.18);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --radius-sm:14px;
      --container:1240px;
      --grad:linear-gradient(135deg,#12B76A 0%,#A3E635 58%,#FDBA74 100%);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,system-ui,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(163,230,53,.16), transparent 22%),
        radial-gradient(circle at right 10% top 8%, rgba(18,183,106,.14), transparent 20%),
        var(--bg);
      line-height:1.75;
    }
    a{text-decoration:none;color:inherit}
    img{display:block;max-width:100%;height:auto}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    .container-wrap{max-width:var(--container);margin:0 auto;padding:0 18px}
    .glass-nav{
      background:rgba(255,255,255,.9);
      border:1px solid rgba(219,237,224,.85);
      box-shadow:0 10px 35px rgba(16,35,26,.08);
      backdrop-filter:blur(12px);
    }
    .brand-badge{
      background:var(--grad);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 10px 30px rgba(18,183,106,.25);
    }
    .nav-link{
      position:relative;
      color:#274337;
      transition:.25s ease;
    }
    .nav-link:hover{color:var(--primary-deep);background:#F1FAF3}
    .nav-link.active{
      background:#E8F8EC;
      color:#0E6A3E;
      border-color:#D5EDD9;
    }
    .nav-link.active::after,.desktop-nav .nav-link:hover::after{
      content:"";
      position:absolute;
      left:18px;
      right:18px;
      bottom:8px;
      height:2px;
      border-radius:999px;
      background:var(--grad);
    }
    .btn-main{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      background:var(--grad);
      color:#fff;
      border:none;
      box-shadow:0 14px 34px rgba(18,183,106,.24);
      transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
    }
    .btn-main:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(18,183,106,.28);filter:saturate(1.05)}
    .btn-main:focus-visible,.btn-soft:focus-visible,.text-link:focus-visible,.menu-toggle:focus-visible,.faq-btn:focus-visible,.chip:focus-visible{
      outline:3px solid rgba(18,183,106,.22);
      outline-offset:3px;
    }
    .btn-soft{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      background:#fff;
      color:#0E6A3E;
      border:1px solid #CFE7D3;
      box-shadow:0 8px 20px rgba(16,35,26,.05);
      transition:.25s ease;
    }
    .btn-soft:hover{transform:translateY(-2px);background:#F5FDEB;border-color:#B6E07A}
    .pill{
      display:inline-flex;align-items:center;gap:8px;
      border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;
    }
    .pill::before{
      content:"";width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.9
    }
    .pill-green{background:#E8F8EC;color:#0E8F54}
    .pill-amber{background:#FFF4DE;color:#C77708}
    .pill-dark{background:rgba(255,255,255,.12);color:#E6FFF0;border:1px solid rgba(255,255,255,.14)}
    .hero-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:30px;
      align-items:stretch;
    }
    .hero-panel{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-xl);
      background:
        linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.92)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      border:1px solid rgba(207,231,211,.9);
      box-shadow:var(--shadow);
    }
    .hero-panel::before{
      content:"";
      position:absolute;inset:0;
      background:
        linear-gradient(135deg, rgba(18,183,106,.14), rgba(163,230,53,.08) 50%, rgba(245,158,11,.06));
      pointer-events:none;
    }
    .scoreboard-card,.card-soft,.table-card,.cta-shell,.faq-card,.insight-card,.league-card,.side-card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
      transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
    }
    .scoreboard-card:hover,.card-soft:hover,.table-card:hover,.faq-card:hover,.insight-card:hover,.league-card:hover,.side-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
      border-color:#B9E3C5;
    }
    .section-title{font-size:clamp(28px,3.2vw,40px);line-height:1.16;font-weight:900;letter-spacing:-.02em}
    .section-text{font-size:16px;color:var(--muted)}
    .data-card{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      background:linear-gradient(180deg,#fff,#F8FCF7);
      border:1px solid #DCEBDD;
      box-shadow:var(--shadow);
      transition:.25s ease;
    }
    .data-card:hover{transform:translateY(-4px);border-color:#B9E3C5;box-shadow:var(--shadow-hover)}
    .data-card::after{
      content:"";
      position:absolute;left:0;top:0;right:0;height:4px;background:var(--grad)
    }
    .rank-badge{
      width:34px;height:34px;border-radius:999px;
      display:flex;align-items:center;justify-content:center;
      font-weight:900;font-size:14px;background:#EAF8EE;color:#0E8F54
    }
    .trend-up{color:#0E8F54}
    .trend-flat{color:#7A8B82}
    .trend-down{color:#D46B08}
    .standings-table{
      width:100%;
      border-collapse:separate;
      border-spacing:0 10px;
    }
    .standings-table thead th{
      font-size:13px;
      color:#60756A;
      font-weight:800;
      text-align:left;
      padding:0 14px 8px;
      white-space:nowrap;
    }
    .standings-table tbody tr{
      background:#F9FCF9;
      border:1px solid #E0EEE3;
    }
    .standings-table tbody td{
      padding:16px 14px;
      font-size:15px;
      vertical-align:middle;
      border-top:1px solid #E3EFE5;
      border-bottom:1px solid #E3EFE5;
    }
    .standings-table tbody td:first-child{
      border-left:1px solid #E3EFE5;border-radius:18px 0 0 18px
    }
    .standings-table tbody td:last-child{
      border-right:1px solid #E3EFE5;border-radius:0 18px 18px 0
    }
    .team-dot{
      width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,#12B76A,#0E8F54);color:#fff;font-weight:900;font-size:12px;box-shadow:0 8px 18px rgba(18,183,106,.2)
    }
    .form-chip,.chip{
      display:inline-flex;align-items:center;justify-content:center;
      padding:10px 16px;border-radius:999px;border:1px solid #DCEBDD;background:#fff;
      font-weight:700;font-size:14px;color:#28503D;transition:.25s ease
    }
    .chip:hover,.form-chip:hover{background:#F3FCEB;border-color:#B6E07A;color:#0E6A3E}
    .chip.active{background:#E8F8EC;border-color:#BDE3C5;color:#0E6A3E}
    .number-xl{
      font-size:clamp(34px,5vw,58px);font-weight:900;line-height:1;letter-spacing:-.03em
    }
    .feature-list li{
      position:relative;padding-left:28px;color:#314B40
    }
    .feature-list li::before{
      content:"";position:absolute;left:0;top:11px;width:14px;height:14px;border-radius:999px;background:linear-gradient(135deg,#12B76A,#A3E635)
    }
    .faq-item{
      border:1px solid #DDECE0;border-radius:22px;background:#fff;overflow:hidden;
      box-shadow:0 10px 30px rgba(18,183,106,.07)
    }
    .faq-btn{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
      text-align:left;padding:22px 24px;background:#fff;border:none;font-weight:800;font-size:17px;color:#173126
    }
    .faq-answer{
      max-height:0;overflow:hidden;transition:max-height .3s ease;
    }
    .faq-item.open .faq-answer{max-height:240px}
    .faq-item.open .faq-icon{transform:rotate(45deg)}
    .faq-icon{
      flex:0 0 auto;width:34px;height:34px;border-radius:999px;background:#E8F8EC;color:#0E8F54;
      display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;transition:.25s ease
    }
    .cta-shell{
      position:relative;
      overflow:hidden;
      border-radius:32px;
      border:1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(135deg, rgba(7,22,15,.96), rgba(11,31,22,.95)),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
    }
    .cta-shell::before{
      content:"";position:absolute;inset:-10% auto auto -10%;width:360px;height:360px;border-radius:999px;
      background:radial-gradient(circle, rgba(163,230,53,.22), transparent 62%);
      pointer-events:none
    }
    .cta-shell::after{
      content:"";position:absolute;right:-40px;bottom:-60px;width:320px;height:320px;border-radius:999px;
      background:radial-gradient(circle, rgba(18,183,106,.24), transparent 62%);
      pointer-events:none
    }
    .footer-link{color:#CFE3D6;transition:.25s ease}
    .footer-link:hover{color:#BDF86D}
    .mobile-panel{border-top:1px solid #E3EFE5;margin-top:14px}
    .divider-line{height:1px;background:linear-gradient(90deg,transparent,#D5E8D7,transparent)}
    .hero-image{
      position:relative;overflow:hidden;border-radius:30px;min-height:100%;
      background:#0D1D14;
    }
    .hero-image img{width:100%;height:100%;object-fit:cover}
    .hero-image::after{
      content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,22,15,.06),rgba(7,22,15,.45))
    }
    .highlight-grid{
      display:grid;grid-template-columns:repeat(4,1fr);gap:18px
    }
    .league-scroll{
      display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px
    }
    .text-link{display:inline-flex;align-items:center;gap:10px;color:#0E8F54;font-weight:800;transition:.25s ease}
    .text-link:hover{gap:14px;color:#0E6A3E}
    @media (max-width:1024px){
      .hero-grid{grid-template-columns:1fr}
      .highlight-grid{grid-template-columns:repeat(2,1fr)}
      .league-scroll{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:768px){
      .container-wrap{padding:0 14px}
      .section-title{font-size:clamp(26px,7vw,34px)}
      .highlight-grid{grid-template-columns:1fr}
      .league-scroll{grid-template-columns:1fr}
      .standings-table{min-width:760px}
      .table-wrap{overflow:auto;padding-bottom:4px}
    }
    @media (max-width:520px){
      .faq-btn{padding:18px 18px;font-size:16px}
      .faq-answer .inner{padding:0 18px 18px}
      .hero-panel{border-radius:24px}
    }

/* roulang page: category4 */
:root{
      --primary:#12B76A;
      --primary-deep:#0E8A51;
      --lime:#A3E635;
      --lime-soft:#EAFAD6;
      --amber:#F59E0B;
      --amber-soft:#FFF1D6;
      --dark:#07160F;
      --dark-2:#0B1F16;
      --text:#10231A;
      --muted:#587062;
      --line:#D9EBDD;
      --line-2:#E8F3EA;
      --bg:#F6FAF5;
      --bg-soft:#EEF7EF;
      --white:#ffffff;
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:18px;
      --shadow-sm:0 8px 24px rgba(18,183,106,.08);
      --shadow-md:0 16px 40px rgba(18,183,106,.12);
      --shadow-lg:0 22px 60px rgba(10,76,42,.16);
      --grad-main:linear-gradient(135deg,#12B76A 0%,#7CD957 55%,#F6C453 100%);
      --grad-soft:linear-gradient(135deg,rgba(18,183,106,.12),rgba(163,230,53,.16) 60%,rgba(245,158,11,.10));
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(163,230,53,.18), transparent 28%),
        radial-gradient(circle at top right, rgba(18,183,106,.12), transparent 24%),
        var(--bg);
      line-height:1.75;
    }
    a{text-decoration:none;color:inherit}
    img{display:block;max-width:100%}
    button,input,textarea{font:inherit}
    .container-wrap{width:min(1220px,calc(100% - 32px));margin:0 auto}
    .glass-nav{
      background:rgba(255,255,255,.86);
      border:1px solid rgba(217,235,221,.95);
      box-shadow:0 10px 30px rgba(16,35,26,.08);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .brand-badge{
      background:var(--grad-main);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px rgba(18,183,106,.26);
    }
    .nav-link{
      color:#173227;
      transition:.25s ease;
      position:relative;
    }
    .nav-link:hover{color:var(--primary-deep);background:#F1FAF3;border-color:#DCEFE2}
    .nav-link.active{
      background:#E8F8EC;
      color:#0C6A3D;
      border-color:#D6EEDC;
      box-shadow:inset 0 0 0 1px rgba(18,183,106,.04);
    }
    .btn-main{
      color:#fff;
      background:var(--grad-main);
      box-shadow:0 12px 30px rgba(18,183,106,.25);
      transition:.25s ease;
    }
    .btn-main:hover{transform:translateY(-2px);filter:saturate(1.04) brightness(1.02);box-shadow:0 16px 34px rgba(18,183,106,.33)}
    .btn-sub{
      background:#fff;
      color:#0E6A3E;
      border:1px solid #D7EBDD;
      box-shadow:var(--shadow-sm);
      transition:.25s ease;
    }
    .btn-sub:hover{transform:translateY(-2px);background:#F3FCEB;border-color:#BDE39D}
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:8px 12px;
      font-size:12px;
      font-weight:700;
      line-height:1;
      white-space:nowrap;
    }
    .pill::before{
      content:"";
      width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.85;
    }
    .pill-green{background:#E8F8EC;color:#0E8A51}
    .pill-amber{background:#FFF1DB;color:#B56A00}
    .pill-dark{background:#133125;color:#C8F5D5}
    .hero-shell{
      position:relative;
      overflow:hidden;
      border-radius:36px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,248,240,.88)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      border:1px solid #DCEFE1;
      box-shadow:var(--shadow-md);
    }
    .hero-shell::before{
      content:"";
      position:absolute;inset:auto -120px -120px auto;
      width:340px;height:340px;border-radius:50%;
      background:radial-gradient(circle, rgba(163,230,53,.28), rgba(18,183,106,.08) 50%, transparent 72%);
      pointer-events:none;
    }
    .hero-shell::after{
      content:"";
      position:absolute;left:-40px;top:-20px;width:260px;height:260px;border-radius:50%;
      background:radial-gradient(circle, rgba(18,183,106,.14), transparent 68%);
      pointer-events:none;
    }
    .section-space{padding:36px 0 84px}
    .section-title{
      font-size:clamp(28px,4vw,42px);
      line-height:1.15;
      font-weight:900;
      letter-spacing:-.02em;
    }
    .section-desc{font-size:16px;color:var(--muted)}
    .card{
      background:#fff;
      border:1px solid var(--line-2);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-sm);
      transition:.28s ease;
    }
    .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CFE8D6}
    .card-soft{
      background:linear-gradient(180deg,#fff,#F8FCF7);
      border:1px solid #E3F0E5;
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-sm);
    }
    .headline-card{
      overflow:hidden;
      border-radius:32px;
      border:1px solid #DDEFE3;
      background:#fff;
      box-shadow:var(--shadow-md);
    }
    .headline-cover{position:relative;min-height:320px}
    .headline-cover img{
      width:100%;height:100%;object-fit:cover;
      filter:saturate(1.06);
    }
    .headline-cover::after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(7,22,15,.04),rgba(7,22,15,.48));
    }
    .headline-badge{
      position:absolute;left:24px;top:24px;z-index:2;
      background:rgba(255,255,255,.88);
      color:#0E6A3E;border:1px solid rgba(255,255,255,.45);
      backdrop-filter: blur(6px);
    }
    .floating-note{
      border-radius:24px;
      border:1px solid #DDEEE0;
      background:rgba(255,255,255,.92);
      box-shadow:var(--shadow-sm);
    }
    .stat-chip{
      border-radius:22px;
      border:1px solid #DCEEE0;
      background:#fff;
      box-shadow:var(--shadow-sm);
    }
    .article-card{
      display:grid;
      grid-template-columns:220px 1fr;
      gap:22px;
      padding:18px;
      border-radius:26px;
      border:1px solid #E2F1E5;
      background:#fff;
      box-shadow:var(--shadow-sm);
      transition:.28s ease;
    }
    .article-card:hover{
      transform:translateY(-4px);
      border-color:#CFE7D5;
      box-shadow:var(--shadow-md);
    }
    .article-thumb{
      border-radius:22px;
      overflow:hidden;
      min-height:170px;
      background:#EEF7EF;
    }
    .article-thumb img{width:100%;height:100%;object-fit:cover}
    .meta-line{
      display:flex;flex-wrap:wrap;gap:10px 12px;
      color:var(--muted);font-size:14px;
    }
    .tag{
      display:inline-flex;align-items:center;gap:8px;
      border-radius:999px;
      padding:7px 12px;
      font-size:12px;
      font-weight:700;
    }
    .tag-green{background:#EAF8EC;color:#0E8A51}
    .tag-amber{background:#FFF3DF;color:#B86F08}
    .tag-slate{background:#EEF3F0;color:#4F675A}
    .sidebar-card{
      background:linear-gradient(180deg,#fff,#F8FCF8);
      border:1px solid #E2F1E6;
      border-radius:26px;
      padding:24px;
      box-shadow:var(--shadow-sm);
    }
    .side-link{
      display:flex;justify-content:space-between;gap:16px;
      padding:14px 0;
      border-bottom:1px dashed #DDECE1;
      transition:.2s ease;
    }
    .side-link:last-child{border-bottom:none;padding-bottom:0}
    .side-link:hover{color:#0E8A51}
    .topic-cloud a{
      display:inline-flex;
      margin:0 10px 10px 0;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid #DDEEE1;
      background:#fff;
      font-size:14px;
      font-weight:700;
      color:#29543D;
      transition:.22s ease;
    }
    .topic-cloud a:hover{background:#F2FCEB;border-color:#BDE39D;color:#0E8A51;transform:translateY(-2px)}
    .timeline{
      position:relative;
      padding-left:22px;
    }
    .timeline::before{
      content:"";
      position:absolute;left:7px;top:4px;bottom:4px;width:2px;
      background:linear-gradient(180deg,#16A34A,#B5E94B,#F6BF54);
      border-radius:99px;
    }
    .timeline-item{
      position:relative;
      padding:0 0 18px 24px;
    }
    .timeline-item::before{
      content:"";
      position:absolute;left:-1px;top:7px;
      width:16px;height:16px;border-radius:50%;
      background:linear-gradient(135deg,#12B76A,#A3E635);
      box-shadow:0 0 0 4px #EAF8EC;
    }
    .mini-faq{
      border-radius:24px;
      border:1px solid #E1F0E4;
      background:#fff;
      box-shadow:var(--shadow-sm);
      overflow:hidden;
    }
    .faq-item{border-bottom:1px solid #E8F2EA}
    .faq-item:last-child{border-bottom:none}
    .faq-q{
      width:100%;
      text-align:left;
      padding:20px 22px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      font-weight:800;
      color:#173227;
      background:#fff;
      transition:.2s ease;
    }
    .faq-q:hover{background:#F8FCF8}
    .faq-a{
      padding:0 22px 22px;
      color:var(--muted);
      display:none;
    }
    .faq-item.active .faq-a{display:block}
    .faq-icon{
      flex:0 0 auto;
      width:28px;height:28px;border-radius:999px;
      display:grid;place-items:center;
      background:#EAF8EC;color:#0E8A51;font-weight:900;
    }
    .cta-panel{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      background:
        linear-gradient(135deg, rgba(7,22,15,.96), rgba(11,31,22,.95)),
        url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
      border:1px solid rgba(163,230,53,.12);
      box-shadow:var(--shadow-lg);
    }
    .cta-panel::before{
      content:"";
      position:absolute;right:-80px;top:-70px;width:280px;height:280px;border-radius:50%;
      background:radial-gradient(circle, rgba(163,230,53,.28), rgba(163,230,53,.06) 50%, transparent 74%);
    }
    .cta-panel::after{
      content:"";
      position:absolute;left:-60px;bottom:-90px;width:320px;height:320px;border-radius:50%;
      background:radial-gradient(circle, rgba(18,183,106,.22), transparent 70%);
    }
    .footer-link{color:#CFE3D6;transition:.2s ease}
    .footer-link:hover{color:#B7F36A}
    .menu-toggle{transition:.2s ease}
    .menu-toggle:hover{background:#F1FAF3}
    .mobile-panel .nav-link.active{background:#E8F8EC;color:#0C6A3D}
    .text-gradient{
      background:var(--grad-main);
      -webkit-background-clip:text;background-clip:text;
      color:transparent;
    }
    .strip-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
    }
    .reading-list li{
      display:flex;gap:12px;align-items:flex-start;
      padding:12px 0;border-bottom:1px dashed #E1EDE4;
    }
    .reading-list li:last-child{border-bottom:none}
    .num{
      width:30px;height:30px;border-radius:999px;
      display:grid;place-items:center;
      background:#EAF8EC;color:#0E8A51;font-weight:900;font-size:13px;flex:0 0 auto;
    }
    .hero-kicker{
      display:inline-flex;align-items:center;gap:10px;
      padding:10px 14px;border-radius:999px;
      border:1px solid #DDEEE1;background:#fff;
      box-shadow:var(--shadow-sm);
      font-size:13px;font-weight:800;color:#1B3A2B;
    }
    .hero-kicker::before{
      content:"";
      width:10px;height:10px;border-radius:999px;
      background:var(--grad-main);
    }
    .focus-outline:focus-visible,
    a:focus-visible,
    button:focus-visible{
      outline:3px solid rgba(18,183,106,.26);
      outline-offset:3px;
    }
    @media (max-width: 1024px){
      .article-card{grid-template-columns:1fr}
      .strip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media (max-width: 768px){
      .container-wrap{width:min(100% - 24px,1220px)}
      .section-space{padding:28px 0 64px}
      .hero-shell{border-radius:28px}
      .headline-cover{min-height:250px}
    }
    @media (max-width: 520px){
      .strip-grid{grid-template-columns:1fr}
      .article-card{padding:14px;border-radius:22px}
      .headline-card{border-radius:24px}
      .sidebar-card,.card,.card-soft,.mini-faq{border-radius:22px}
    }