/* roulang page: index */
:root{
      --bg:#071018;
      --bg2:#0b1620;
      --panel:rgba(12,20,30,.72);
      --panel-strong:rgba(16,26,38,.88);
      --line:rgba(255,255,255,.10);
      --line-strong:rgba(46,242,208,.28);
      --text:#e7eef7;
      --muted:#94a3b8;
      --muted-2:#6b7a90;
      --cyan:#2ef2d0;
      --orange:#ff8a3d;
      --silver:#b8c4d1;
      --shadow:0 18px 45px rgba(0,0,0,.32);
      --shadow-soft:0 10px 28px rgba(0,0,0,.24);
      --radius:24px;
    }
    html{scroll-behavior:smooth}
    body{
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(46,242,208,.12), transparent 34%),
        radial-gradient(circle at 80% 8%, rgba(255,138,61,.13), transparent 28%),
        radial-gradient(circle at 15% 78%, rgba(184,196,209,.08), transparent 30%),
        linear-gradient(180deg, #071018 0%, #09131c 42%, #060b11 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 26px 26px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 90%);
      opacity:.55;
      z-index:-1;
    }
    ::selection{background:rgba(46,242,208,.26); color:#fff}
    ::-webkit-scrollbar{width:10px;height:10px}
    ::-webkit-scrollbar-track{background:#071018}
    ::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(46,242,208,.55), rgba(255,138,61,.55)); border-radius:999px}
    .dock-shell{
      background:linear-gradient(180deg, rgba(14,23,34,.84), rgba(10,16,24,.72));
      border:1px solid rgba(255,255,255,.10);
      box-shadow: 0 16px 40px rgba(0,0,0,.30);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .panel{
      background:linear-gradient(180deg, rgba(18,28,40,.78), rgba(12,18,27,.84));
      border:1px solid rgba(255,255,255,.09);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .panel-strong{
      background:linear-gradient(180deg, rgba(20,31,45,.92), rgba(12,19,28,.96));
      border:1px solid rgba(255,255,255,.12);
      box-shadow: var(--shadow);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .hover-rise{
      transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease, opacity .28s ease;
    }
    .hover-rise:hover{
      transform: translateY(-3px);
      border-color: rgba(46,242,208,.30);
      box-shadow: 0 20px 46px rgba(0,0,0,.34);
    }
    .shine-line{
      position:relative;
      overflow:hidden;
    }
    .shine-line::after{
      content:"";
      position:absolute;
      inset:-1px;
      background: linear-gradient(120deg, transparent 20%, rgba(46,242,208,.14) 45%, transparent 65%);
      transform: translateX(-120%);
      transition: transform .8s ease;
      pointer-events:none;
    }
    .shine-line:hover::after{transform: translateX(120%)}
    details summary::-webkit-details-marker{display:none}
    details[open] .faq-chevron{transform: rotate(180deg)}
    .gradient-text{
      background: linear-gradient(90deg, #ffffff 0%, #c9fef2 34%, #ffbe8d 68%, #ffffff 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .soft-border{
      border:1px solid rgba(255,255,255,.08);
    }
    .mini-shadow{
      box-shadow: 0 8px 22px rgba(0,0,0,.22);
    }

/* roulang page: category1 */
:root{
      --bg:#05090d;
      --bg-2:#091119;
      --panel:rgba(10,16,24,.76);
      --panel-2:rgba(14,22,33,.82);
      --line:rgba(255,255,255,.08);
      --line-2:rgba(46,242,208,.24);
      --text:#eef4fb;
      --muted:#9aa7b8;
      --brand:#2ef2d0;
      --accent:#ff8a3d;
      --shadow:0 16px 46px rgba(0,0,0,.34);
      --radius:22px;
      --radius-lg:28px;
    }
    html{background:var(--bg);}
    body{
      min-height:100vh;
      color:var(--text);
      background:
        radial-gradient(circle at 15% 12%, rgba(46,242,208,.12), transparent 22%),
        radial-gradient(circle at 82% 18%, rgba(255,138,61,.11), transparent 20%),
        radial-gradient(circle at 50% 78%, rgba(148,163,184,.08), transparent 26%),
        linear-gradient(180deg, #05090d 0%, #071018 42%, #05090d 100%);
      font-feature-settings:"ss01" 1,"ss02" 1;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:28px 28px;
      mask-image: radial-gradient(circle at center, rgba(0,0,0,.9), rgba(0,0,0,.35) 72%, transparent 100%);
      opacity:.18;
      z-index:0;
    }
    a,button,input,summary{transition:all .22s ease;}
    .dock-shell{
      background:linear-gradient(180deg, rgba(14,22,33,.84), rgba(8,13,20,.68));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 12px 36px rgba(0,0,0,.34);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .glass-card{
      background:linear-gradient(180deg, rgba(12,18,27,.82), rgba(10,16,24,.72));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .soft-border{border:1px solid rgba(255,255,255,.08);}
    .soft-border:hover{border-color:rgba(46,242,208,.32);}
    .chip{
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:#d9e2ee;
    }
    .chip:hover{
      background:rgba(46,242,208,.12);
      border-color:rgba(46,242,208,.32);
      color:#fff;
      transform:translateY(-1px);
    }
    .chip-active{
      background:linear-gradient(135deg, rgba(46,242,208,.18), rgba(255,138,61,.12));
      border-color:rgba(46,242,208,.42);
      color:#fff;
      box-shadow:0 0 0 1px rgba(46,242,208,.16) inset;
    }
    .btn-main{
      background:linear-gradient(135deg, rgba(46,242,208,.96), rgba(255,138,61,.94));
      color:#061017;
      box-shadow:0 12px 28px rgba(46,242,208,.12);
    }
    .btn-main:hover{transform:translateY(-1px); box-shadow:0 16px 32px rgba(46,242,208,.18);}
    .btn-ghost{
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:#e8eef8;
    }
    .btn-ghost:hover{
      background:rgba(255,255,255,.09);
      border-color:rgba(46,242,208,.28);
      transform:translateY(-1px);
    }
    .title-xl{
      letter-spacing:-.04em;
      text-wrap:balance;
    }
    .muted{color:var(--muted);}
    .scrollbar-hide::-webkit-scrollbar{display:none;}
    .scrollbar-hide{-ms-overflow-style:none; scrollbar-width:none;}
    details summary::-webkit-details-marker{display:none;}
    details[open] .faq-icon{transform:rotate(45deg);}
    .mini-grid{
      background-image:
        linear-gradient(transparent 0, transparent 20px, rgba(255,255,255,.03) 21px),
        linear-gradient(90deg, transparent 0, transparent 20px, rgba(255,255,255,.03) 21px);
      background-size:21px 21px;
    }
    .focus-ring:focus{
      outline:none;
      box-shadow:0 0 0 2px rgba(46,242,208,.34), 0 0 0 6px rgba(46,242,208,.08);
    }
    .card-hover:hover{
      transform:translateY(-3px);
      border-color:rgba(46,242,208,.26);
      box-shadow:0 18px 38px rgba(0,0,0,.34);
    }