/* roulang page: index */
:root{
      --bg:#07110d;
      --bg-deep:#0b0d0c;
      --panel:#101813;
      --panel-2:#121b16;
      --panel-3:#0d1511;
      --line:rgba(255,255,255,.08);
      --line-strong:rgba(25,166,106,.45);
      --text:#f4f1e8;
      --muted:#b7b9ae;
      --soft:#7d8378;
      --green:#19a66a;
      --green-2:#0f8f5f;
      --green-soft:rgba(25,166,106,.12);
      --amber:#f2b84b;
      --amber-soft:rgba(242,184,75,.14);
      --wine:#a8324a;
      --shadow:0 18px 50px rgba(0,0,0,.35);
      --shadow-soft:0 10px 30px rgba(0,0,0,.24);
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:18px;
      --radius-sm:14px;
      --container:1240px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 20% 0%, rgba(25,166,106,.18), transparent 32%),
        radial-gradient(circle at 80% 12%, rgba(242,184,75,.08), transparent 25%),
        linear-gradient(180deg, #07110d 0%, #09120e 36%, #0b0d0c 100%);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      line-height:1.8;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.22;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size:58px 58px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 70%, transparent 100%);
      z-index:0;
    }
    a{
      color:inherit;
      text-decoration:none;
      transition:all .2s ease;
    }
    a:hover{color:#fff}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(25,166,106,.35);color:#fff}
    :focus-visible{
      outline:2px solid rgba(25,166,106,.75);
      outline-offset:2px;
    }
    .site-wrap{position:relative;z-index:1}
    .container-wide{max-width:var(--container)}
    .sticky-top{
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
    }
    .site-header{
      background:rgba(7,17,13,.64);
      border-bottom:1px solid rgba(255,255,255,.06);
      box-shadow:0 10px 30px rgba(0,0,0,.12);
      transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .site-header.scrolled{
      background:rgba(7,17,13,.94);
      border-bottom-color:rgba(255,255,255,.1);
      box-shadow:0 14px 34px rgba(0,0,0,.28);
    }
    .navbar{
      padding:.8rem 0;
    }
    .navbar-brand{
      display:flex;
      align-items:center;
      gap:.8rem;
      font-weight:800;
      letter-spacing:.02em;
      color:var(--text) !important;
      margin-right:1rem;
      white-space:nowrap;
    }
    .brand-mark{
      width:40px;height:40px;border-radius:14px;
      position:relative;
      flex:none;
      background:linear-gradient(145deg, rgba(25,166,106,.35), rgba(15,143,95,.12));
      border:1px solid rgba(255,255,255,.1);
      box-shadow:inset 0 0 0 1px rgba(25,166,106,.16);
      overflow:hidden;
    }
    .brand-mark::before,
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:9px;
      border-radius:11px 14px 11px 14px;
      border:1px solid rgba(242,184,75,.55);
      transform:rotate(12deg);
    }
    .brand-mark::after{
      inset:13px;
      border-color:rgba(25,166,106,.7);
      transform:rotate(-12deg);
    }
    .brand-name{
      font-size:1rem;
      line-height:1.1;
    }
    .brand-sub{
      display:block;
      color:var(--muted);
      font-size:.76rem;
      margin-top:.14rem;
      font-weight:500;
    }
    .menu-toggle{
      display:flex;
      align-items:center;
      gap:.55rem;
      padding:.72rem 1rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      color:var(--text);
      background:rgba(255,255,255,.03);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
    }
    .menu-toggle:focus{box-shadow:none}
    .menu-icon{
      width:1.15rem;height:.9rem;position:relative;display:inline-block;
    }
    .menu-icon::before,
    .menu-icon::after,
    .menu-icon span{
      content:"";
      position:absolute;left:0;right:0;height:2px;border-radius:999px;background:currentColor;
    }
    .menu-icon::before{top:0}
    .menu-icon span{top:50%;transform:translateY(-50%)}
    .menu-icon::after{bottom:0}
    .navbar-nav{
      gap:.4rem;
      align-items:center;
    }
    .nav-link{
      color:var(--muted) !important;
      padding:.72rem 1rem !important;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:600;
      line-height:1;
    }
    .nav-link:hover{
      color:#fff !important;
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.06);
    }
    .nav-link.active{
      color:#fff !important;
      background:linear-gradient(135deg, rgba(25,166,106,.28), rgba(15,143,95,.18));
      border-color:rgba(25,166,106,.34);
      box-shadow:inset 0 0 0 1px rgba(25,166,106,.12);
    }
    .header-status{
      margin-left:auto;
      display:flex;
      align-items:center;
      gap:.5rem;
      color:var(--muted);
      font-size:.86rem;
      white-space:nowrap;
    }
    .status-chip,
    .chip,
    .badge-soft{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      padding:.42rem .8rem;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.03);
      color:var(--muted);
      font-size:.8rem;
      line-height:1;
      white-space:nowrap;
    }
    .status-chip.green{
      color:#dcf6e7;
      background:rgba(25,166,106,.12);
      border-color:rgba(25,166,106,.28);
    }
    .status-chip.amber{
      color:#ffe8b4;
      background:rgba(242,184,75,.12);
      border-color:rgba(242,184,75,.26);
    }
    .site-main{
      padding:1.2rem 0 0;
    }
    section{
      position:relative;
      padding:84px 0;
    }
    .section-tight{padding:64px 0}
    .section-heading{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1.4rem;
    }
    .section-heading .title{
      max-width:760px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      color:#dff7eb;
      background:rgba(25,166,106,.1);
      border:1px solid rgba(25,166,106,.24);
      padding:.45rem .8rem;
      border-radius:999px;
      font-size:.82rem;
      font-weight:700;
      margin-bottom:1rem;
      letter-spacing:.03em;
    }
    h1,h2,h3,h4,p{margin:0}
    h1{
      font-size:clamp(2.1rem,4.4vw,3.65rem);
      line-height:1.15;
      font-weight:800;
      letter-spacing:-.02em;
    }
    h2{
      font-size:clamp(1.55rem,2.8vw,2.45rem);
      line-height:1.22;
      font-weight:800;
      letter-spacing:-.01em;
    }
    h3{
      font-size:clamp(1.18rem,1.7vw,1.45rem);
      line-height:1.35;
      font-weight:750;
    }
    .lead{
      color:var(--muted);
      font-size:1.05rem;
      line-height:1.9;
      max-width:54rem;
    }
    .section-desc{
      color:var(--muted);
      max-width:50rem;
      line-height:1.85;
      margin-top:.65rem;
      font-size:1rem;
    }
    .hero-shell{
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(18,27,22,.88), rgba(11,17,13,.95)),
        radial-gradient(circle at 20% 0%, rgba(25,166,106,.18), transparent 30%),
        radial-gradient(circle at 85% 18%, rgba(242,184,75,.09), transparent 22%);
      box-shadow:var(--shadow);
      overflow:hidden;
      padding:clamp(1.2rem,2.8vw,2rem);
    }
    .hero-shell::before,
    .hero-shell::after{
      content:"";
      position:absolute;
      inset:auto;
      pointer-events:none;
    }
    .hero-shell::before{
      inset:0;
      background:
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,.03) 20%, transparent 40%),
        linear-gradient(160deg, transparent 0%, rgba(25,166,106,.16) 45%, transparent 66%);
      mix-blend-mode:screen;
      opacity:.7;
    }
    .hero-shell::after{
      top:-80px;
      right:-60px;
      width:260px;height:260px;
      background:radial-gradient(circle, rgba(25,166,106,.2), transparent 68%);
      filter:blur(8px);
      border-radius:50%;
    }
    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.35fr .95fr;
      gap:1.4rem;
      align-items:stretch;
    }
    .hero-kicker{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-bottom:1rem;
    }
    .hero-copy{
      display:flex;
      flex-direction:column;
      gap:1.1rem;
      padding:clamp(.3rem,.6vw,.4rem) 0;
    }
    .hero-copy h1{
      max-width:12ch;
    }
    .hero-copy .lead{
      max-width:50rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      align-items:center;
    }
    .btn-modern{
      border-radius:999px;
      padding:.85rem 1.25rem;
      font-weight:700;
      border:1px solid transparent;
      transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
      box-shadow:none;
    }
    .btn-modern:hover{
      transform:translateY(-1px);
    }
    .btn-primary-modern{
      color:#f4f8f4;
      background:linear-gradient(135deg, var(--green), var(--green-2));
      box-shadow:0 14px 28px rgba(25,166,106,.22);
      border-color:rgba(25,166,106,.32);
    }
    .btn-primary-modern:hover{
      color:#fff;
      box-shadow:0 18px 34px rgba(25,166,106,.28);
      filter:brightness(1.04);
    }
    .btn-ghost-modern{
      color:#edf5ef;
      background:transparent;
      border-color:rgba(255,255,255,.15);
    }
    .btn-ghost-modern:hover{
      color:#fff;
      background:rgba(25,166,106,.11);
      border-color:rgba(25,166,106,.28);
    }
    .btn-warning-soft{
      color:#1d1606;
      background:linear-gradient(135deg, #ffdd8b, #f2b84b);
      border-color:rgba(255,222,140,.35);
    }
    .hero-form{
      margin-top:.4rem;
      display:flex;
      gap:.75rem;
      align-items:stretch;
      flex-wrap:wrap;
    }
    .hero-form .form-control{
      min-width:min(100%, 360px);
      flex:1 1 360px;
      background:rgba(16,24,19,.9);
      color:var(--text);
      border:1px solid rgba(255,255,255,.1);
      border-radius:999px;
      padding:.95rem 1.15rem;
      box-shadow:none;
    }
    .hero-form .form-control::placeholder{color:#8d9388}
    .hero-form .form-control:focus{
      border-color:rgba(25,166,106,.55);
      box-shadow:0 0 0 .22rem rgba(25,166,106,.14);
      background:rgba(16,24,19,.98);
    }
    .hero-form .btn{
      min-width:150px;
      border-radius:999px;
    }
    .hero-note{
      color:var(--soft);
      font-size:.92rem;
      display:flex;
      gap:.45rem;
      align-items:center;
      flex-wrap:wrap;
    }
    .hero-note strong{
      color:#e8f3e8;
      font-weight:700;
    }
    .hero-panel{
      position:relative;
      border:1px solid rgba(255,255,255,.08);
      border-radius:28px;
      background:
        linear-gradient(180deg, rgba(16,24,19,.95), rgba(13,21,17,.96));
      box-shadow:var(--shadow-soft);
      padding:1.2rem;
      overflow:hidden;
    }
    .hero-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(115deg, transparent 15%, rgba(25,166,106,.12) 16%, transparent 27%),
        linear-gradient(155deg, transparent 63%, rgba(242,184,75,.11) 64%, transparent 76%);
      pointer-events:none;
    }
    .panel-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:1rem;
      position:relative;
      z-index:1;
      margin-bottom:1rem;
    }
    .panel-head .small{
      color:var(--muted);
      font-size:.88rem;
    }
    .panel-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.8rem;
    }
    .metric-card{
      min-height:110px;
      border-radius:20px;
      padding:1rem;
      background:linear-gradient(180deg, rgba(17,25,20,.98), rgba(11,17,13,.98));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:.65rem;
    }
    .metric-label{
      color:var(--muted);
      font-size:.84rem;
    }
    .metric-value{
      font-weight:800;
      font-size:1.32rem;
      line-height:1.15;
    }
    .metric-foot{
      color:var(--soft);
      font-size:.82rem;
    }
    .thin-bars{
      margin-top:1rem;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:.75rem;
      position:relative;
      z-index:1;
    }
    .bar-item{
      border-radius:18px;
      padding:.85rem .95rem;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
    }
    .bar-item .name{color:var(--muted);font-size:.82rem}
    .bar-item .val{font-weight:750;margin-top:.2rem}
    .bar-line{
      margin-top:.65rem;
      height:4px;border-radius:99px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
    }
    .bar-line span{
      display:block;height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--green), rgba(242,184,75,.8));
    }
    .section-box{
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius-xl);
      background:linear-gradient(180deg, rgba(16,24,19,.92), rgba(11,17,13,.95));
      box-shadow:var(--shadow-soft);
      padding:1.3rem;
      overflow:hidden;
    }
    .section-box.soft{
      background:linear-gradient(180deg, rgba(18,27,22,.9), rgba(12,18,15,.95));
    }
    .scroll-track{
      display:flex;
      gap:1rem;
      overflow-x:auto;
      padding-bottom:.35rem;
      scroll-snap-type:x proximity;
      scrollbar-width:thin;
      scrollbar-color:rgba(25,166,106,.5) rgba(255,255,255,.04);
    }
    .scroll-track::-webkit-scrollbar{height:10px}
    .scroll-track::-webkit-scrollbar-thumb{
      background:linear-gradient(90deg, rgba(25,166,106,.55), rgba(242,184,75,.45));
      border-radius:999px;
      border:2px solid rgba(10,16,12,.88);
    }
    .scroll-track::-webkit-scrollbar-track{
      background:rgba(255,255,255,.03);
      border-radius:999px;
    }
    .mini-card{
      min-width:255px;
      flex:0 0 auto;
      scroll-snap-align:start;
      border-radius:24px;
      background:
        linear-gradient(180deg, rgba(17,25,20,.98), rgba(12,18,15,.98));
      border:1px solid rgba(255,255,255,.08);
      padding:1.05rem;
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
      transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .mini-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, transparent 20%, rgba(25,166,106,.1) 30%, transparent 42%),
        linear-gradient(170deg, transparent 60%, rgba(242,184,75,.08) 72%, transparent 82%);
      opacity:.8;
      pointer-events:none;
    }
    .mini-card:hover{
      transform:translateY(-4px);
      border-color:rgba(25,166,106,.36);
      box-shadow:0 16px 36px rgba(0,0,0,.4);
    }
    .mini-card .card-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      position:relative;
      z-index:1;
      margin-bottom:.9rem;
    }
    .status-dot{
      width:9px;height:9px;border-radius:50%;
      background:#6df0a3;
      box-shadow:0 0 0 5px rgba(25,166,106,.1);
      flex:none;
    }
    .mini-card h3{
      position:relative;
      z-index:1;
      font-size:1.1rem;
      margin-bottom:.55rem;
    }
    .mini-card p{
      position:relative;
      z-index:1;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.7;
      min-height:3.4rem;
    }
    .card-meta{
      position:relative;
      z-index:1;
      margin-top:1rem;
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      align-items:center;
      color:var(--soft);
      font-size:.82rem;
    }
    .progress-mini{
      position:relative;
      z-index:1;
      margin-top:1rem;
      height:4px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      overflow:hidden;
    }
    .progress-mini span{
      display:block;height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--green), rgba(242,184,75,.75));
    }
    .bento-grid{
      display:grid;
      grid-template-columns:1.45fr .75fr .75fr;
      gap:1rem;
    }
    .bento-large{
      min-height:100%;
      border-radius:30px;
      padding:1.4rem;
      background:
        linear-gradient(135deg, rgba(18,27,22,.98), rgba(13,20,16,.96)),
        radial-gradient(circle at 20% 10%, rgba(25,166,106,.18), transparent 26%);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
    }
    .bento-large::after{
      content:"";
      position:absolute;
      right:-60px; top:-45px;
      width:220px; height:220px;
      background:radial-gradient(circle, rgba(25,166,106,.16), transparent 68%);
      pointer-events:none;
    }
    .bento-large .tag-row,
    .bento-small .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-bottom:1rem;
    }
    .bento-large h3{font-size:1.7rem; margin-bottom:.75rem}
    .bento-large p{
      color:var(--muted);
      max-width:38rem;
      line-height:1.85;
      margin-bottom:1rem;
    }
    .bento-checks{
      display:grid;
      gap:.75rem;
      margin-top:1rem;
    }
    .check-line{
      display:flex;
      align-items:flex-start;
      gap:.7rem;
      color:var(--text);
      line-height:1.7;
      font-size:.96rem;
    }
    .check-bullet{
      width:22px;height:22px;border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex:none;
      color:#dff7eb;
      background:rgba(25,166,106,.12);
      border:1px solid rgba(25,166,106,.24);
      font-size:.85rem;
      margin-top:.05rem;
    }
    .bento-stack{
      display:grid;
      gap:1rem;
    }
    .bento-small{
      border-radius:24px;
      background:linear-gradient(180deg, rgba(16,24,19,.98), rgba(12,18,15,.96));
      border:1px solid rgba(255,255,255,.08);
      padding:1.1rem;
      box-shadow:var(--shadow-soft);
      min-height:100%;
    }
    .bento-small h3{font-size:1.15rem;margin-bottom:.4rem}
    .bento-small p{color:var(--muted);font-size:.92rem;line-height:1.7}
    .bento-small .number{
      display:inline-flex;
      width:34px;height:34px;border-radius:12px;
      align-items:center;
      justify-content:center;
      background:rgba(25,166,106,.1);
      border:1px solid rgba(25,166,106,.22);
      color:#ddf6e9;
      font-weight:800;
      margin-bottom:.8rem;
    }
    .chips-wrap{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      margin-top:.4rem;
    }
    .chip{
      padding:.5rem .88rem;
      font-weight:700;
    }
    .chip.active{
      color:#eafff3;
      background:rgba(25,166,106,.16);
      border-color:rgba(25,166,106,.34);
    }
    .topic-layout{
      display:grid;
      grid-template-columns:1.2fr .72fr;
      gap:1rem;
      align-items:start;
    }
    .topic-list{
      display:grid;
      gap:.9rem;
    }
    .topic-item{
      border-radius:22px;
      padding:1rem 1.05rem;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      display:grid;
      grid-template-columns:1fr auto;
      gap:.8rem;
      align-items:center;
      transition:transform .18s ease, border-color .18s ease;
    }
    .topic-item:hover{
      transform:translateY(-2px);
      border-color:rgba(25,166,106,.32);
    }
    .topic-item h3{
      margin-bottom:.35rem;
      font-size:1.08rem;
    }
    .topic-item p{
      color:var(--muted);
      font-size:.92rem;
      line-height:1.7;
      max-width:48rem;
    }
    .topic-item .action{
      align-self:center;
      white-space:nowrap;
    }
    .side-card{
      border-radius:24px;
      background:linear-gradient(180deg, rgba(18,27,22,.96), rgba(12,18,15,.98));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
      padding:1.15rem;
      position:sticky;
      top:92px;
    }
    .side-card h3{font-size:1.2rem;margin-bottom:.6rem}
    .side-card p{color:var(--muted);font-size:.94rem;line-height:1.75}
    .side-list{
      list-style:none;
      padding:0;margin:1rem 0 0;
      display:grid;
      gap:.7rem;
    }
    .side-list li{
      display:flex;
      gap:.6rem;
      align-items:flex-start;
      color:var(--text);
      line-height:1.7;
      font-size:.95rem;
    }
    .side-list li::before{
      content:"";
      width:9px;height:9px;border-radius:50%;
      margin-top:.45rem;
      background:linear-gradient(135deg, var(--green), var(--amber));
      flex:none;
      box-shadow:0 0 0 4px rgba(25,166,106,.09);
    }
    .news-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:1rem;
      align-items:start;
    }
    .news-list{
      display:grid;
      gap:.8rem;
    }
    .news-item{
      display:grid;
      grid-template-columns:auto 1fr auto;
      gap:.9rem;
      align-items:start;
      border-radius:20px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      padding:1rem 1.05rem;
    }
    .news-item:hover{border-color:rgba(25,166,106,.28)}
    .news-date{
      min-width:88px;
      color:#dde7df;
      font-weight:750;
      font-size:.9rem;
      padding-top:.1rem;
    }
    .news-content h3{
      font-size:1.02rem;
      margin-bottom:.32rem;
    }
    .news-content p{
      color:var(--muted);
      font-size:.92rem;
      line-height:1.7;
      margin-bottom:.2rem;
    }
    .news-action{
      align-self:center;
      color:#dff7eb;
      font-weight:700;
      white-space:nowrap;
      padding:.45rem .8rem;
      border:1px solid rgba(25,166,106,.24);
      background:rgba(25,166,106,.08);
      border-radius:999px;
      font-size:.86rem;
    }
    .update-card{
      border-radius:24px;
      background:
        linear-gradient(180deg, rgba(16,24,19,.98), rgba(12,18,15,.97));
      border:1px solid rgba(255,255,255,.08);
      padding:1.15rem;
      box-shadow:var(--shadow-soft);
    }
    .update-card h3{font-size:1.18rem;margin-bottom:.6rem}
    .update-card .note{
      color:var(--muted);
      font-size:.94rem;
      line-height:1.78;
    }
    .list-grid{
      display:grid;
      gap:.85rem;
      margin-top:1rem;
    }
    .list-line{
      display:flex;
      align-items:flex-start;
      gap:.7rem;
      color:var(--text);
      line-height:1.7;
      font-size:.95rem;
      padding:.72rem .82rem;
      border-radius:16px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
    }
    .list-line .index{
      min-width:28px;height:28px;border-radius:10px;
      display:inline-flex;align-items:center;justify-content:center;
      background:rgba(242,184,75,.12);
      color:#ffe3a0;
      font-weight:800;
      flex:none;
    }
    .notice-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1rem;
    }
    .notice-card{
      border-radius:24px;
      background:
        linear-gradient(180deg, rgba(16,24,19,.98), rgba(12,18,15,.98));
      border:1px solid rgba(255,255,255,.08);
      padding:1.2rem;
      box-shadow:var(--shadow-soft);
      min-height:100%;
    }
    .notice-card .icon{
      width:44px;height:44px;border-radius:15px;
      display:flex;align-items:center;justify-content:center;
      background:rgba(25,166,106,.12);
      border:1px solid rgba(25,166,106,.24);
      color:#dff7eb;
      margin-bottom:.9rem;
      font-weight:800;
    }
    .notice-card h3{
      font-size:1.12rem;
      margin-bottom:.45rem;
    }
    .notice-card p{
      color:var(--muted);
      line-height:1.75;
      font-size:.94rem;
    }
    .accordion{
      --bs-accordion-border-color: rgba(255,255,255,.08);
      --bs-accordion-border-radius: 20px;
      --bs-accordion-inner-border-radius: 20px;
      --bs-accordion-bg: transparent;
      --bs-accordion-btn-padding-x: 1.1rem;
      --bs-accordion-btn-padding-y: 1rem;
      --bs-accordion-btn-icon: none;
      --bs-accordion-btn-icon-transform: none;
      --bs-accordion-active-color: #fff;
      --bs-accordion-active-bg: transparent;
      --bs-accordion-btn-focus-box-shadow: 0 0 0 .22rem rgba(25,166,106,.13);
    }
    .accordion-item{
      background:linear-gradient(180deg, rgba(16,24,19,.98), rgba(12,18,15,.98));
      border:1px solid rgba(255,255,255,.08);
      border-radius:20px !important;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
      margin-bottom:.9rem;
    }
    .accordion-button{
      background:transparent !important;
      color:var(--text) !important;
      font-weight:750;
      box-shadow:none !important;
      border:none;
      border-radius:0 !important;
      padding:1rem 1.1rem;
    }
    .accordion-button:not(.collapsed){
      color:#fff !important;
      background:rgba(25,166,106,.08) !important;
    }
    .accordion-button::after{
      width:1rem;height:1rem;
      background-image:none !important;
      content:"+";
      font-size:1.1rem;
      line-height:1;
      color:var(--muted);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      transform:none !important;
    }
    .accordion-button:not(.collapsed)::after{
      content:"–";
      color:#dff7eb;
    }
    .accordion-body{
      padding:0 1.1rem 1.1rem;
      color:var(--muted);
      line-height:1.85;
    }
    .cta-band{
      border-radius:32px;
      background:
        linear-gradient(135deg, rgba(16,24,19,.98), rgba(12,18,15,.96)),
        radial-gradient(circle at 15% 20%, rgba(25,166,106,.18), transparent 28%);
      border:1px solid rgba(255,255,255,.08);
      padding:1.4rem;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .cta-band::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent 20%, rgba(25,166,106,.08) 30%, transparent 42%);
      pointer-events:none;
    }
    .cta-inner{
      position:relative;
      z-index:1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .cta-copy{
      max-width:56rem;
    }
    .cta-copy h2{
      font-size:clamp(1.5rem,2.8vw,2.2rem);
      margin-bottom:.55rem;
    }
    .cta-copy p{
      color:var(--muted);
      line-height:1.85;
      font-size:1rem;
    }
    .cta-actions{
      display:flex;
      gap:.75rem;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .cta-foot{
      margin-top:.9rem;
      color:var(--soft);
      font-size:.9rem;
    }
    footer{
      padding:34px 0 44px;
    }
    .site-footer{
      border-top:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(7,17,13,.9), rgba(9,13,12,.98));
    }
    .footer-shell{
      margin-top:1rem;
      border:1px solid rgba(255,255,255,.08);
      border-radius:28px;
      background:linear-gradient(180deg, rgba(16,24,19,.96), rgba(11,17,13,.98));
      padding:1.25rem;
      box-shadow:var(--shadow-soft);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.25fr .85fr .9fr;
      gap:1rem;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      gap:.85rem;
      align-items:flex-start;
    }
    .footer-brand .brand-copy h3{
      font-size:1.18rem;
      margin-bottom:.3rem;
    }
    .footer-brand .brand-copy p{
      color:var(--muted);
      line-height:1.8;
      font-size:.94rem;
      max-width:36rem;
    }
    .footer-links,
    .footer-notice{
      border-left:1px solid rgba(255,255,255,.07);
      padding-left:1rem;
    }
    .footer-links h4,
    .footer-notice h4{
      font-size:1rem;
      margin-bottom:.8rem;
      color:#fff;
    }
    .footer-links .link-list{
      display:grid;
      gap:.55rem;
    }
    .footer-links a{
      color:var(--muted);
      font-weight:600;
    }
    .footer-links a:hover{color:#fff}
    .footer-notice p{
      color:var(--muted);
      font-size:.92rem;
      line-height:1.82;
      margin-bottom:.6rem;
    }
    .footer-status{
      margin-top:.7rem;
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }
    .copyright{
      margin-top:1rem;
      color:var(--soft);
      font-size:.88rem;
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      justify-content:space-between;
      align-items:center;
      border-top:1px solid rgba(255,255,255,.06);
      padding-top:1rem;
    }
    .muted{color:var(--muted) !important}
    .section-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
      margin:1.3rem 0;
    }
    .tag-square{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.35rem .65rem;
      border-radius:12px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.07);
      color:var(--muted);
      font-size:.8rem;
      font-weight:700;
    }
    .tag-square.green{
      background:rgba(25,166,106,.1);
      color:#ddf6e9;
      border-color:rgba(25,166,106,.22);
    }
    .tag-square.amber{
      background:rgba(242,184,75,.11);
      color:#ffe4a5;
      border-color:rgba(242,184,75,.24);
    }
    .tag-square.wine{
      background:rgba(168,50,74,.12);
      color:#ffc6cf;
      border-color:rgba(168,50,74,.24);
    }
    .link-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      padding:.42rem .8rem;
      border-radius:999px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      color:var(--text);
      font-size:.84rem;
      font-weight:700;
      white-space:nowrap;
    }
    .link-pill:hover{
      background:rgba(25,166,106,.11);
      border-color:rgba(25,166,106,.24);
    }
    .list-clean{
      list-style:none;
      padding:0;margin:0;
      display:grid;
      gap:.7rem;
    }
    .list-clean li{
      color:var(--muted);
      line-height:1.7;
      font-size:.94rem;
    }
    .grid-note{
      color:var(--soft);
      font-size:.88rem;
      margin-top:.7rem;
    }
    @media (max-width:1199.98px){
      .hero-grid,
      .topic-layout,
      .news-grid,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .side-card{
        position:relative;
        top:auto;
      }
      .bento-grid{
        grid-template-columns:1fr 1fr;
      }
      .notice-grid{
        grid-template-columns:1fr 1fr;
      }
    }
    @media (max-width:991.98px){
      section{padding:64px 0}
      .hero-grid{grid-template-columns:1fr}
      .header-status{
        display:none;
      }
      .navbar-collapse{
        margin-top:.85rem;
        padding:1rem;
        border-radius:22px;
        background:rgba(8,14,11,.98);
        border:1px solid rgba(255,255,255,.08);
        box-shadow:var(--shadow-soft);
      }
      .navbar-nav{
        align-items:stretch;
      }
      .nav-link{
        padding:1rem 1rem !important;
        min-height:44px;
        display:flex;
        align-items:center;
      }
      .thin-bars{
        grid-template-columns:1fr;
      }
      .bento-grid{
        grid-template-columns:1fr;
      }
      .notice-grid{
        grid-template-columns:1fr;
      }
      .cta-inner{
        flex-direction:column;
        align-items:flex-start;
      }
      .cta-actions{
        width:100%;
        justify-content:flex-start;
      }
    }
    @media (max-width:575.98px){
      .site-header .container{
        padding-left:14px;
        padding-right:14px;
      }
      section{padding:54px 0}
      .hero-shell,
      .section-box,
      .cta-band,
      .footer-shell{
        border-radius:24px;
        padding:1rem;
      }
      .hero-actions,
      .cta-actions{
        flex-direction:column;
        align-items:stretch;
      }
      .btn-modern{
        width:100%;
        justify-content:center;
      }
      .hero-form{
        flex-direction:column;
      }
      .hero-form .form-control,
      .hero-form .btn{
        width:100%;
        min-width:0;
      }
      .panel-grid{
        grid-template-columns:1fr;
      }
      .mini-card{
        min-width:78vw;
      }
      .news-item{
        grid-template-columns:1fr;
      }
      .news-date{
        min-width:0;
      }
      .topic-item{
        grid-template-columns:1fr;
      }
      .footer-links,
      .footer-notice{
        border-left:none;
        padding-left:0;
        border-top:1px solid rgba(255,255,255,.07);
        padding-top:1rem;
      }
      .copyright{
        flex-direction:column;
        align-items:flex-start;
      }
    }

/* roulang page: category1 */
:root{
      --bg:#07110D;
      --bg-deep:#0B0D0C;
      --panel:#101813;
      --panel-2:#121B16;
      --panel-3:#0D1611;
      --line:rgba(255,255,255,.08);
      --line-strong:rgba(25,166,106,.28);
      --text:#F4F1E8;
      --muted:#B7B9AE;
      --soft:#7D8378;
      --green:#19A66A;
      --green-2:#0F8F5F;
      --amber:#F2B84B;
      --rose:#A8324A;
      --shadow:0 18px 50px rgba(0,0,0,.35);
      --shadow-soft:0 14px 30px rgba(0,0,0,.24);
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(25,166,106,.12), transparent 26%),
        radial-gradient(circle at 90% 14%, rgba(242,184,75,.10), transparent 20%),
        radial-gradient(circle at 50% 100%, rgba(168,50,74,.08), transparent 26%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
      line-height:1.8;
      min-height:100vh;
      overflow-x:hidden;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 100%),
        linear-gradient(245deg, rgba(255,255,255,.02) 0 1px, transparent 1px 100%);
      background-size:180px 180px;
      opacity:.18;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.35) 60%, transparent);
      z-index:-1;
    }
    ::selection{background:rgba(25,166,106,.34); color:#fff}
    a{color:inherit; text-decoration:none; transition:all .2s ease}
    a:hover{color:#ffffff}
    img{max-width:100%; display:block}
    button,input,select,textarea{font:inherit}
    .container-wide{max-width:1240px}
    .site-header{
      background:rgba(7,17,13,.86);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(255,255,255,.07);
      box-shadow:0 10px 30px rgba(0,0,0,.14);
    }
    .navbar{padding:.9rem 0}
    .navbar-brand{
      display:flex;
      align-items:center;
      gap:.85rem;
      color:var(--text);
      min-width:0;
    }
    .navbar-brand:hover{color:var(--text)}
    .brand-mark{
      width:46px;
      height:46px;
      border-radius:15px;
      background:
        linear-gradient(145deg, rgba(25,166,106,.26), rgba(242,184,75,.12)),
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.2), transparent 32%);
      border:1px solid rgba(255,255,255,.09);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
      position:relative;
      flex:0 0 auto;
    }
    .brand-mark::before,
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:10px 13px;
      border-radius:12px;
      border:1px solid rgba(244,241,232,.25);
    }
    .brand-mark::after{
      inset:15px 18px;
      border-radius:8px;
      background:linear-gradient(135deg, rgba(25,166,106,.35), rgba(255,255,255,.06));
      box-shadow:0 0 20px rgba(25,166,106,.16);
    }
    .brand-name{
      display:flex;
      flex-direction:column;
      font-size:1.04rem;
      font-weight:800;
      line-height:1.1;
      letter-spacing:.01em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-sub{
      font-size:.74rem;
      color:var(--muted);
      font-weight:600;
      margin-top:.18rem;
    }
    .menu-toggle{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding:.72rem 1rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      color:var(--text);
      background:rgba(255,255,255,.04);
      transition:all .2s ease;
      box-shadow:none;
    }
    .menu-toggle:hover{
      background:rgba(25,166,106,.15);
      border-color:rgba(25,166,106,.28);
      color:#fff;
      transform:translateY(-1px);
    }
    .menu-toggle:focus{
      box-shadow:0 0 0 .2rem rgba(25,166,106,.18);
    }
    .menu-icon{
      width:18px;
      height:12px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      position:relative;
    }
    .menu-icon span,
    .menu-icon::before,
    .menu-icon::after{
      content:"";
      position:absolute;
      left:0;
      width:18px;
      height:2px;
      border-radius:99px;
      background:currentColor;
      transition:transform .2s ease, opacity .2s ease;
    }
    .menu-icon::before{top:-5px}
    .menu-icon span{top:5px}
    .menu-icon::after{top:0}
    .navbar-nav{
      gap:.45rem;
      align-items:center;
    }
    .nav-link{
      padding:.75rem 1rem;
      border-radius:999px;
      color:var(--muted);
      font-weight:700;
      border:1px solid transparent;
      transition:all .2s ease;
    }
    .nav-link:hover,
    .nav-link:focus{
      color:#fff;
      background:rgba(255,255,255,.05);
      border-color:rgba(255,255,255,.08);
    }
    .nav-link.active{
      color:#f2fff8;
      background:rgba(25,166,106,.18);
      border-color:rgba(25,166,106,.35);
      box-shadow:inset 0 0 0 1px rgba(25,166,106,.18);
    }
    .header-status{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      justify-content:flex-end;
      align-items:center;
    }
    .status-chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.48rem .8rem;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      color:var(--muted);
      font-size:.78rem;
      font-weight:700;
      letter-spacing:.01em;
    }
    .status-chip::before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--muted);
      box-shadow:0 0 0 6px rgba(255,255,255,.03);
    }
    .status-chip.green{
      background:rgba(25,166,106,.16);
      color:#dbffef;
      border-color:rgba(25,166,106,.28);
    }
    .status-chip.green::before{background:#29d186; box-shadow:0 0 0 6px rgba(25,166,106,.1)}
    .status-chip.amber{
      background:rgba(242,184,75,.14);
      color:#ffe6b0;
      border-color:rgba(242,184,75,.25);
    }
    .status-chip.amber::before{background:#f0bf5a; box-shadow:0 0 0 6px rgba(242,184,75,.08)}
    .main-wrap{position:relative}
    .section-block{
      padding:clamp(44px,6vw,86px) 0;
      position:relative;
    }
    .hero-stage{
      padding:clamp(22px,4vw,36px) 0 18px;
    }
    .hero-panel{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-xl);
      background:
        linear-gradient(180deg, rgba(16,24,19,.98), rgba(10,15,12,.99)),
        radial-gradient(circle at top right, rgba(25,166,106,.12), transparent 28%);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
      padding:clamp(22px,4vw,36px);
    }
    .hero-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.05) 38% 39%, transparent 39% 100%),
        linear-gradient(160deg, transparent 0 52%, rgba(25,166,106,.12) 52% 53%, transparent 53% 100%),
        linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 100%);
      background-size:100% 100%,100% 100%,100% 42px;
      opacity:.75;
      pointer-events:none;
    }
    .hero-panel::after{
      content:"";
      position:absolute;
      inset:auto -10% -30% auto;
      width:420px;
      height:420px;
      background:radial-gradient(circle, rgba(25,166,106,.16), transparent 68%);
      pointer-events:none;
    }
    .breadcrumbs{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:.45rem;
      color:var(--muted);
      font-size:.92rem;
      position:relative;
      z-index:1;
      margin-bottom:1rem;
    }
    .breadcrumbs a{
      color:var(--muted);
    }
    .breadcrumbs a:hover{color:#fff}
    .breadcrumbs span.sep{
      color:rgba(255,255,255,.18);
    }
    .hero-kicker{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      position:relative;
      z-index:1;
      margin-bottom:1rem;
    }
    .mini-pill,
    .section-pill,
    .filter-chip,
    .tag{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.35rem;
      border-radius:999px;
      font-weight:700;
      white-space:nowrap;
    }
    .mini-pill{
      padding:.4rem .76rem;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:var(--muted);
      font-size:.76rem;
    }
    .mini-pill.green{
      color:#ddffef;
      border-color:rgba(25,166,106,.28);
      background:rgba(25,166,106,.14);
    }
    .mini-pill.amber{
      color:#ffe7b4;
      border-color:rgba(242,184,75,.24);
      background:rgba(242,184,75,.12);
    }
    .mini-pill.rose{
      color:#ffd7de;
      border-color:rgba(168,50,74,.25);
      background:rgba(168,50,74,.13);
    }
    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr);
      gap:clamp(20px,3vw,32px);
      align-items:stretch;
    }
    .hero-copy h1{
      margin:0 0 1rem;
      font-size:clamp(2rem,4.4vw,3.6rem);
      line-height:1.12;
      font-weight:800;
      letter-spacing:-.03em;
    }
    .hero-copy .lead{
      margin:0;
      max-width:46rem;
      color:var(--muted);
      font-size:clamp(1rem,1.6vw,1.08rem);
      line-height:1.9;
    }
    .hero-form{
      margin-top:1.35rem;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      border-radius:24px;
      padding:1rem;
      box-shadow:var(--shadow-soft);
    }
    .hero-form .form-label{
      color:var(--text);
      font-weight:700;
      margin-bottom:.5rem;
      font-size:.95rem;
    }
    .form-control,
    .form-select{
      background:var(--panel-3);
      color:var(--text);
      border:1px solid rgba(255,255,255,.08);
      border-radius:16px;
      min-height:48px;
      box-shadow:none;
    }
    .form-control::placeholder{
      color:rgba(183,185,174,.7);
    }
    .form-control:focus,
    .form-select:focus{
      background:var(--panel-3);
      color:var(--text);
      border-color:rgba(25,166,106,.45);
      box-shadow:0 0 0 .2rem rgba(25,166,106,.18);
    }
    .btn{
      border-radius:999px;
      font-weight:700;
      padding:.8rem 1.1rem;
      min-height:48px;
      transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:focus{box-shadow:0 0 0 .2rem rgba(25,166,106,.18)}
    .btn-primary-alt{
      color:#f9fff9;
      background:linear-gradient(135deg, var(--green-2), var(--green));
      border:1px solid rgba(25,166,106,.14);
      box-shadow:0 14px 28px rgba(25,166,106,.16);
    }
    .btn-primary-alt:hover{
      color:#fff;
      box-shadow:0 18px 34px rgba(25,166,106,.22);
      filter:brightness(1.04);
    }
    .btn-outline-alt{
      color:var(--text);
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.02);
    }
    .btn-outline-alt:hover{
      color:#fff;
      border-color:rgba(25,166,106,.34);
      background:rgba(25,166,106,.12);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-top:1.1rem;
      position:relative;
      z-index:1;
    }
    .hero-aside{
      display:grid;
      gap:1rem;
    }
    .metric-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.9rem;
    }
    .metric-card{
      background:linear-gradient(180deg, rgba(18,27,22,.96), rgba(13,22,17,.98));
      border:1px solid rgba(255,255,255,.08);
      border-radius:22px;
      padding:1rem 1rem .95rem;
      box-shadow:var(--shadow-soft);
      min-height:124px;
      position:relative;
      overflow:hidden;
    }
    .metric-card::after{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:3px;
      background:linear-gradient(90deg, rgba(25,166,106,.95), rgba(242,184,75,.78));
      opacity:.85;
    }
    .metric-label{
      color:var(--muted);
      font-size:.8rem;
      font-weight:700;
      margin-bottom:.4rem;
    }
    .metric-value{
      font-size:1.35rem;
      font-weight:800;
      line-height:1.2;
      margin-bottom:.35rem;
    }
    .metric-note{
      color:var(--soft);
      font-size:.82rem;
      line-height:1.55;
      margin:0;
    }
    .detail-band{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      border-radius:22px;
      padding:1rem 1.05rem;
      box-shadow:var(--shadow-soft);
    }
    .detail-band .label-row{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-bottom:.8rem;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1.2rem;
    }
    .section-title{
      margin:0;
      font-size:clamp(1.55rem,2.8vw,2.3rem);
      line-height:1.25;
      font-weight:800;
      letter-spacing:-.02em;
    }
    .section-desc{
      margin:.35rem 0 0;
      color:var(--muted);
      max-width:52rem;
      line-height:1.85;
    }
    .section-pill{
      padding:.45rem .8rem;
      font-size:.77rem;
      color:#ddffef;
      background:rgba(25,166,106,.14);
      border:1px solid rgba(25,166,106,.26);
    }
    .filter-shell{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      border-radius:26px;
      padding:1rem;
      box-shadow:var(--shadow-soft);
    }
    .filter-row{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      align-items:center;
    }
    .filter-chip{
      padding:.7rem 1rem;
      color:var(--muted);
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      cursor:pointer;
      transition:all .18s ease;
      min-height:40px;
    }
    .filter-chip:hover{
      color:#fff;
      border-color:rgba(25,166,106,.28);
      background:rgba(25,166,106,.09);
    }
    .filter-chip.active{
      color:#eafff4;
      background:rgba(25,166,106,.18);
      border-color:rgba(25,166,106,.34);
    }
    .scroll-shell{
      overflow-x:auto;
      padding-bottom:.5rem;
      scrollbar-width:thin;
      scrollbar-color:rgba(25,166,106,.5) rgba(255,255,255,.06);
    }
    .scroll-shell::-webkit-scrollbar{height:9px}
    .scroll-shell::-webkit-scrollbar-track{background:rgba(255,255,255,.06); border-radius:999px}
    .scroll-shell::-webkit-scrollbar-thumb{background:rgba(25,166,106,.45); border-radius:999px}
    .scroll-track{
      display:flex;
      gap:1rem;
      min-width:max-content;
    }
    .scroll-card{
      width:280px;
      flex:0 0 auto;
      background:linear-gradient(180deg, rgba(18,27,22,.98), rgba(12,18,14,.98));
      border:1px solid rgba(255,255,255,.08);
      border-radius:24px;
      padding:1.1rem;
      position:relative;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
      transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .scroll-card:hover{
      transform:translateY(-4px);
      border-color:rgba(25,166,106,.35);
      box-shadow:0 18px 42px rgba(0,0,0,.38);
    }
    .scroll-card .topline{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.5rem;
      margin-bottom:.95rem;
    }
    .state-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#29d186;
      box-shadow:0 0 0 6px rgba(25,166,106,.12);
    }
    .quality-badge{
      font-size:.74rem;
      padding:.34rem .58rem;
      border-radius:999px;
      background:rgba(242,184,75,.12);
      color:#ffe4ad;
      border:1px solid rgba(242,184,75,.2);
      font-weight:700;
    }
    .scroll-card h3{
      margin:0 0 .45rem;
      font-size:1.1rem;
      font-weight:800;
    }
    .scroll-card p{
      color:var(--muted);
      margin:0 0 1rem;
      font-size:.92rem;
      line-height:1.75;
    }
    .card-foot{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      font-size:.8rem;
      color:var(--soft);
    }
    .progress-line{
      position:absolute;
      left:0;
      bottom:0;
      height:3px;
      width:100%;
      background:linear-gradient(90deg, rgba(25,166,106,.2), rgba(25,166,106,.8), rgba(242,184,75,.55));
      opacity:.85;
    }
    .bento-grid{
      display:grid;
      grid-template-columns:1.35fr .8fr .8fr;
      gap:1rem;
    }
    .bento-main{
      grid-row:span 2;
      background:linear-gradient(180deg, rgba(16,24,19,.98), rgba(10,16,13,.98));
      border:1px solid rgba(255,255,255,.08);
      border-radius:28px;
      padding:1.5rem;
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
    }
    .bento-main::after{
      content:"";
      position:absolute;
      inset:auto -15% -35% auto;
      width:340px;
      height:340px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(25,166,106,.16), transparent 70%);
      pointer-events:none;
    }
    .bento-main h3{
      margin:0 0 .75rem;
      font-size:1.45rem;
      line-height:1.35;
      font-weight:800;
    }
    .bento-main p{
      margin:0;
      color:var(--muted);
      line-height:1.85;
      max-width:40rem;
    }
    .bento-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      margin-top:1.2rem;
    }
    .bento-box{
      background:linear-gradient(180deg, rgba(18,27,22,.95), rgba(12,18,14,.98));
      border:1px solid rgba(255,255,255,.08);
      border-radius:24px;
      padding:1.05rem 1.1rem;
      box-shadow:var(--shadow-soft);
      min-height:170px;
    }
    .bento-box h4{
      margin:0 0 .5rem;
      font-size:1.02rem;
      font-weight:800;
    }
    .bento-box p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
      font-size:.94rem;
    }
    .bento-box .stat-line{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      margin-top:.9rem;
      padding-top:.85rem;
      border-top:1px solid rgba(255,255,255,.08);
      color:var(--soft);
      font-size:.84rem;
    }
    .list-layout{
      display:grid;
      grid-template-columns:minmax(0,1.35fr) minmax(300px,.72fr);
      gap:1.25rem;
      align-items:start;
    }
    .content-list{
      display:grid;
      gap:1rem;
    }
    .entry-card{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      border-radius:24px;
      padding:1.15rem 1.2rem;
      box-shadow:var(--shadow-soft);
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:1rem;
      align-items:start;
      transition:transform .2s ease, border-color .2s ease;
    }
    .entry-card:hover{
      transform:translateY(-2px);
      border-color:rgba(25,166,106,.3);
    }
    .entry-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-bottom:.65rem;
    }
    .tag{
      font-size:.74rem;
      padding:.34rem .6rem;
      background:rgba(25,166,106,.12);
      color:#e3fff3;
      border:1px solid rgba(25,166,106,.2);
    }
    .tag.amber{
      background:rgba(242,184,75,.12);
      color:#ffe7b7;
      border-color:rgba(242,184,75,.22);
    }
    .tag.gray{
      background:rgba(255,255,255,.04);
      color:var(--muted);
      border-color:rgba(255,255,255,.08);
    }
    .entry-card h3{
      margin:0 0 .45rem;
      font-size:1.1rem;
      font-weight:800;
    }
    .entry-card p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
      font-size:.95rem;
    }
    .entry-side{
      display:grid;
      gap:1rem;
      position:sticky;
      top:92px;
    }
    .side-card{
      background:linear-gradient(180deg, rgba(18,27,22,.96), rgba(12,18,14,.98));
      border:1px solid rgba(255,255,255,.08);
      border-radius:22px;
      padding:1rem 1.05rem;
      box-shadow:var(--shadow-soft);
    }
    .side-card h4{
      margin:0 0 .7rem;
      font-size:1rem;
      font-weight:800;
    }
    .side-card p,
    .side-card li{
      color:var(--muted);
      line-height:1.75;
      font-size:.92rem;
    }
    .side-card ul{
      padding-left:1.15rem;
      margin:0;
    }
    .link-stack{
      display:grid;
      gap:.55rem;
    }
    .link-stack a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.7rem;
      padding:.75rem .85rem;
      border-radius:16px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      color:var(--text);
    }
    .link-stack a:hover{
      background:rgba(25,166,106,.1);
      border-color:rgba(25,166,106,.24);
    }
    .small-note{
      color:var(--soft);
      font-size:.84rem;
      line-height:1.65;
      margin-top:.75rem;
    }
    .cta-band{
      background:
        linear-gradient(135deg, rgba(15,143,95,.24), rgba(7,17,13,.96)),
        linear-gradient(180deg, rgba(255,255,255,.03), transparent);
      border:1px solid rgba(255,255,255,.08);
      border-radius:30px;
      padding:1.35rem 1.45rem;
      box-shadow:var(--shadow);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
    }
    .cta-band h2{
      margin:0 0 .35rem;
      font-size:clamp(1.5rem,2.8vw,2.25rem);
      line-height:1.25;
      font-weight:800;
    }
    .cta-band p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
    }
    .cta-actions{
      display:flex;
      gap:.75rem;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .accordion-shell .accordion-item{
      background:transparent;
      border:1px solid rgba(255,255,255,.08);
      border-radius:22px !important;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
      margin-bottom:.9rem;
    }
    .accordion-shell .accordion-button{
      background:rgba(255,255,255,.03);
      color:var(--text);
      font-weight:700;
      padding:1rem 1.15rem;
      box-shadow:none;
    }
    .accordion-shell .accordion-button:not(.collapsed){
      color:#ebfff2;
      background:rgba(25,166,106,.14);
      box-shadow:none;
    }
    .accordion-shell .accordion-button::after{
      filter:grayscale(1) brightness(1.4);
    }
    .accordion-shell .accordion-button:focus{
      box-shadow:0 0 0 .2rem rgba(25,166,106,.18);
      border-color:rgba(25,166,106,.32);
    }
    .accordion-shell .accordion-body{
      background:rgba(255,255,255,.02);
      color:var(--muted);
      line-height:1.85;
      padding:1rem 1.15rem 1.15rem;
    }
    .pagination-wrap{
      display:flex;
      justify-content:center;
      margin-top:1.2rem;
    }
    .pagination{
      gap:.35rem;
      flex-wrap:wrap;
    }
    .page-link{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      color:var(--muted);
      border-radius:999px !important;
      min-width:42px;
      text-align:center;
      padding:.68rem .95rem;
      box-shadow:none;
    }
    .page-link:hover{
      color:#fff;
      background:rgba(25,166,106,.12);
      border-color:rgba(25,166,106,.28);
    }
    .page-link:focus{
      box-shadow:0 0 0 .2rem rgba(25,166,106,.18);
    }
    .page-item.active .page-link{
      background:linear-gradient(135deg, var(--green-2), var(--green));
      border-color:transparent;
      color:#fff;
      box-shadow:0 12px 24px rgba(25,166,106,.18);
    }
    .site-footer{
      padding:0 0 1.2rem;
      background:transparent;
    }
    .footer-shell{
      background:linear-gradient(180deg, rgba(16,24,19,.92), rgba(9,13,11,.98));
      border:1px solid rgba(255,255,255,.08);
      border-radius:28px;
      padding:1.35rem;
      box-shadow:var(--shadow);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .75fr 1fr;
      gap:1.2rem;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      gap:.9rem;
      align-items:flex-start;
    }
    .footer-brand h3{
      margin:0 0 .35rem;
      font-size:1.16rem;
      font-weight:800;
    }
    .footer-brand p,
    .footer-notice p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
      font-size:.92rem;
    }
    .footer-links h4,
    .footer-notice h4{
      margin:0 0 .7rem;
      font-size:1rem;
      font-weight:800;
    }
    .link-list{
      display:grid;
      gap:.5rem;
    }
    .link-list a{
      color:var(--muted);
      padding:.3rem 0;
    }
    .link-list a:hover{color:#fff}
    .footer-status{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-top:.9rem;
    }
    .copyright{
      margin-top:1rem;
      padding-top:.9rem;
      border-top:1px solid rgba(255,255,255,.08);
      display:flex;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:.5rem;
      color:var(--soft);
      font-size:.85rem;
    }
    .content-anchor{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      color:#dbffef;
      font-size:.9rem;
      font-weight:700;
    }
    .content-anchor:hover{color:#fff}
    .content-anchor::before{
      content:"";
      width:6px;
      height:6px;
      border-radius:50%;
      background:#29d186;
      box-shadow:0 0 0 5px rgba(25,166,106,.12);
    }
    .page-divider{
      margin:0;
      border-color:rgba(255,255,255,.08);
      opacity:1;
    }
    .compact-text{
      color:var(--muted);
      line-height:1.8;
      font-size:.95rem;
    }
    @media (max-width: 1199.98px){
      .footer-grid{grid-template-columns:1fr 1fr}
      .footer-notice{grid-column:1 / -1}
    }
    @media (max-width: 991.98px){
      .navbar-collapse{
        margin-top:.85rem;
        padding:1rem;
        border-radius:24px;
        background:rgba(6,11,9,.98);
        border:1px solid rgba(255,255,255,.08);
        box-shadow:var(--shadow-soft);
      }
      .navbar-nav{
        align-items:stretch;
        gap:.45rem;
      }
      .nav-link{
        width:100%;
        min-height:44px;
        display:flex;
        align-items:center;
      }
      .header-status{
        justify-content:flex-start;
        margin-top:1rem;
      }
      .hero-grid,
      .list-layout{
        grid-template-columns:1fr;
      }
      .entry-side{
        position:static;
      }
      .bento-grid{
        grid-template-columns:1fr 1fr;
      }
      .bento-main{
        grid-row:auto;
        grid-column:1 / -1;
      }
      .cta-band{
        flex-direction:column;
        align-items:flex-start;
      }
      .cta-actions{
        width:100%;
        justify-content:flex-start;
      }
    }
    @media (max-width: 767.98px){
      .hero-panel{
        padding:1.2rem;
        border-radius:24px;
      }
      .hero-copy h1{
        font-size:clamp(1.8rem,8vw,2.55rem);
      }
      .hero-form{
        padding:.9rem;
      }
      .hero-actions .btn{
        width:100%;
      }
      .metric-grid{
        grid-template-columns:1fr 1fr;
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .scroll-card{
        width:76vw;
        min-width:250px;
      }
      .bento-grid{
        grid-template-columns:1fr;
      }
      .entry-card{
        grid-template-columns:1fr;
      }
      .footer-grid{
        grid-template-columns:1fr;
      }
      .copyright{
        flex-direction:column;
      }
      .accordion-shell .accordion-button{
        padding: .95rem 1rem;
      }
    }
    @media (max-width: 575.98px){
      .navbar-brand{gap:.7rem}
      .brand-mark{width:40px;height:40px;border-radius:13px}
      .brand-name{font-size:.96rem}
      .brand-sub{font-size:.7rem}
      .mini-pill,.status-chip{font-size:.72rem}
      .hero-kicker{gap:.4rem}
      .filter-chip{padding:.62rem .85rem}
      .metric-grid{
        grid-template-columns:1fr;
      }
      .hero-panel,
      .filter-shell,
      .footer-shell{
        border-radius:22px;
      }
      .bento-main,
      .bento-box,
      .side-card,
      .entry-card,
      .scroll-card,
      .cta-band{
        border-radius:20px;
      }
      .section-block{
        padding:42px 0;
      }
    }