/* roulang page: index */
:root {
            --bg: #09090f;
            --bg-soft: #11111a;
            --panel: #151622;
            --panel-2: #1b1d2c;
            --text: #f7f8ff;
            --muted: #a7adbd;
            --line: rgba(255,255,255,.09);
            --brand: #ff5a2d;
            --brand-2: #ff8a1f;
            --brand-3: #ffd76a;
            --glow: rgba(255,90,45,.36);
            --shadow: 0 24px 60px rgba(0,0,0,.38);
            --radius: 22px;
            --radius-sm: 16px;
            --container: 1180px;
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--text);
            background:
                radial-gradient(circle at 20% 0%, rgba(255,90,45,.20), transparent 30%),
                radial-gradient(circle at 100% 10%, rgba(255,138,31,.16), transparent 26%),
                linear-gradient(180deg, #07070c 0%, #0b0c12 40%, #09090f 100%);
            font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.7;
            min-height: 100vh;
            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,.02) 1px, transparent 1px);
            background-size: 40px 40px;
            mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 88%);
            opacity: .32;
            z-index: 0;
        }
        ::selection { background: rgba(255,90,45,.35); color: #fff; }
        a, button, input, textarea, summary { transition: all .22s ease; }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input, textarea {
            font: inherit;
            outline: none;
        }
        :focus-visible {
            outline: 2px solid rgba(255,215,106,.9);
            outline-offset: 3px;
        }
        details summary { list-style: none; }
        details summary::-webkit-details-marker { display: none; }
        .site-shell { position: relative; z-index: 1; }
        .site-container { width: min(var(--container), calc(100% - 2rem)); margin: 0 auto; }
        .glass {
            background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
            backdrop-filter: blur(18px);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }
        .card {
            background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            border: 1px solid var(--line);
            box-shadow: 0 18px 45px rgba(0,0,0,.25);
        }
        .card:hover {
            transform: translateY(-3px);
            border-color: rgba(255,138,31,.42);
            box-shadow: 0 24px 55px rgba(0,0,0,.34);
        }
        .brand-mark {
            background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
            box-shadow: 0 0 0 6px rgba(255,90,45,.12), 0 0 25px rgba(255,90,45,.28);
        }
        .nav-link {
            color: rgba(247,248,255,.84);
            border: 1px solid transparent;
            background: rgba(255,255,255,.02);
        }
        .nav-link:hover { color: #fff; border-color: rgba(255,138,31,.35); background: rgba(255,90,45,.10); }
        .nav-link.active {
            color: #fff;
            background: linear-gradient(135deg, rgba(255,90,45,.22), rgba(255,138,31,.16));
            border-color: rgba(255,138,31,.42);
            box-shadow: 0 0 0 1px rgba(255,138,31,.14) inset;
        }
        .chip {
            border: 1px solid rgba(255,255,255,.10);
            background: rgba(255,255,255,.03);
            color: #f2f3f8;
        }
        .chip:hover {
            border-color: rgba(255,138,31,.45);
            background: rgba(255,90,45,.12);
            transform: translateY(-1px);
        }
        .btn-brand {
            background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
            color: #fff;
            box-shadow: 0 16px 35px rgba(255,90,45,.25);
        }
        .btn-brand:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 40px rgba(255,90,45,.34);
            filter: brightness(1.05);
        }
        .btn-soft {
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.12);
            color: #f8f9ff;
        }
        .btn-soft:hover {
            background: rgba(255,90,45,.13);
            border-color: rgba(255,138,31,.46);
            transform: translateY(-1px);
        }
        .section-title {
            font-size: clamp(1.4rem, 2vw, 2.1rem);
            font-weight: 900;
            letter-spacing: .02em;
            line-height: 1.15;
        }
        .section-subtitle { color: var(--muted); max-width: 68ch; }
        .tagline {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .35rem .75rem;
            border-radius: 999px;
            border: 1px solid rgba(255,138,31,.30);
            background: rgba(255,90,45,.10);
            color: #ffd7c7;
        }
        .stat-box {
            background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
            border: 1px solid rgba(255,255,255,.10);
            border-radius: 18px;
        }
        .metric {
            font-variant-numeric: tabular-nums;
            text-shadow: 0 0 18px rgba(255,138,31,.28);
        }
        .hero-cover {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 20% 20%, rgba(255,138,31,.30), transparent 30%),
                radial-gradient(circle at 80% 10%, rgba(255,90,45,.26), transparent 26%),
                linear-gradient(135deg, #141523, #0f1018 60%, #1a1220);
        }
        .hero-cover::after {
            content: '';
            position: absolute;
            inset: auto -10% -25% -10%;
            height: 56%;
            background: linear-gradient(180deg, transparent, rgba(255,90,45,.12), rgba(255,138,31,.20));
            transform: rotate(-6deg);
            filter: blur(8px);
        }
        .dot-grid {
            background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
            background-size: 18px 18px;
            opacity: .16;
        }
        .countdown-num {
            background: linear-gradient(180deg, #fff, #ffd3c2 70%, #ffb08d);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 24px rgba(255,138,31,.18);
        }
        .progress-bar {
            height: 10px;
            border-radius: 999px;
            background: rgba(255,255,255,.08);
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            width: 68%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--brand), var(--brand-2));
            box-shadow: 0 0 22px rgba(255,90,45,.35);
        }
        .entry-list li + li { border-top: 1px solid rgba(255,255,255,.08); }
        .footer-link:hover { color: #fff; opacity: 1; }
        @media (max-width: 1024px) {
            .site-container { width: min(var(--container), calc(100% - 1.25rem)); }
        }
        @media (max-width: 768px) {
            .section-title { font-size: 1.5rem; }
        }

/* roulang page: category1 */
:root{
      --bg:#07080c;
      --bg2:#0d1017;
      --panel:#11151f;
      --panel2:#151b27;
      --text:#f5f7fb;
      --muted:rgba(245,247,251,.68);
      --soft:rgba(245,247,251,.12);
      --line:rgba(255,255,255,.08);
      --brand:#ff4b24;
      --brand2:#ff8b2c;
      --gold:#ffd76a;
      --radius:18px;
      --radius2:24px;
      --shadow:0 20px 60px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      background:
        radial-gradient(circle at top left, rgba(255,75,36,.16), transparent 28%),
        radial-gradient(circle at top right, rgba(255,139,44,.12), transparent 24%),
        linear-gradient(180deg, #05060a 0%, #0a0c12 42%, #07080c 100%);
      color:var(--text);
      min-height:100vh;
    }
    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:100% 100%, 48px 48px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.45), transparent 88%);
      opacity:.18;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(255,75,36,.35);color:#fff}
    .site-container{width:min(1200px,calc(100% - 32px));margin:0 auto}
    .brand-mark{
      background:linear-gradient(135deg, rgba(255,75,36,1), rgba(255,139,44,1));
      box-shadow:0 10px 24px rgba(255,75,36,.35), inset 0 1px 0 rgba(255,255,255,.22);
    }
    .btn-brand{
      background:linear-gradient(135deg, var(--brand), var(--brand2));
      color:#fff;
      box-shadow:0 12px 26px rgba(255,75,36,.28);
      transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
    }
    .btn-brand:hover{
      transform:translateY(-1px);
      box-shadow:0 16px 32px rgba(255,75,36,.38);
      filter:brightness(1.06);
    }
    .btn-ghost{
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:#fff;
      transition:transform .22s ease, background .22s ease, border-color .22s ease;
    }
    .btn-ghost:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.16);
    }
    .chip, .nav-link, .footer-link{
      transition:all .22s ease;
    }
    .chip{
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
    }
    .chip:hover,.nav-link:hover,.footer-link:hover{
      color:#fff;
      border-color:rgba(255,255,255,.18);
      background:rgba(255,255,255,.06);
    }
    .nav-link{
      border:1px solid transparent;
      color:rgba(255,255,255,.78);
      background:transparent;
    }
    .nav-link.active{
      color:#fff;
      background:rgba(255,75,36,.14);
      border-color:rgba(255,75,36,.35);
      box-shadow:inset 0 0 0 1px rgba(255,139,44,.12);
    }
    .panel{
      background:linear-gradient(180deg, rgba(17,21,31,.92), rgba(11,14,20,.92));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
      border-radius:var(--radius2);
      backdrop-filter:blur(14px);
    }
    .panel-soft{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
    }
    .section-title{
      letter-spacing:.02em;
      text-shadow:0 8px 24px rgba(0,0,0,.28);
    }
    .ring-card{
      position:relative;
      overflow:hidden;
    }
    .ring-card::after{
      content:"";
      position:absolute;
      inset:auto -30% -60% auto;
      width:220px;
      height:220px;
      background:radial-gradient(circle, rgba(255,75,36,.28), transparent 68%);
      pointer-events:none;
    }
    .badge-hot{
      background:linear-gradient(135deg, rgba(255,75,36,.22), rgba(255,139,44,.16));
      border:1px solid rgba(255,139,44,.28);
      color:#ffd9c8;
    }
    .stat-num{
      background:linear-gradient(180deg, #fff, #ffc2b1);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .list-item{
      transition:transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .list-item:hover{
      transform:translateY(-2px);
      border-color:rgba(255,139,44,.24);
      background:rgba(255,255,255,.04);
    }
    details[open] summary .chev{transform:rotate(180deg)}
    summary::-webkit-details-marker{display:none}
    .scrollbar-none::-webkit-scrollbar{display:none}
    .scrollbar-none{scrollbar-width:none}
    @media (max-width: 768px){
      .site-container{width:min(100% - 20px, 1200px)}
    }