/* roulang page: index */
:root {
        --bg-main: #0A0F1D;
        --bg-card: rgba(15, 23, 42, 0.72);
        --primary-blue: #1E60FF;
        --accent-cyan: #38BDF8;
        --text-dim: #94A3B8;
        --border-glass: rgba(255, 255, 255, 0.08);
      }
      * { box-sizing: border-box; scroll-behavior: smooth; }
      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
        background-color: var(--bg-main);
        color: #FFFFFF;
        line-height: 1.6;
        overflow-x: hidden;
      }
      .glass-panel {
        background: var(--bg-card);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--border-glass);
        border-radius: 16px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .glass-panel:hover {
        transform: translateY(-6px);
        border-color: rgba(56, 189, 248, 0.35);
        box-shadow: 0 12px 30px -10px rgba(30, 96, 255, 0.3);
      }
      .glow-btn {
        background: linear-gradient(135deg, #1E60FF 0%, #06B6D4 100%);
        box-shadow: 0 0 20px rgba(30, 96, 255, 0.45);
        transition: all 0.3s ease;
      }
      .glow-btn:hover {
        box-shadow: 0 0 30px rgba(56, 189, 248, 0.75);
        transform: scale(1.02);
      }
      .progress-ring-circle {
        transition: stroke-dashoffset 0.35s;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
      }
      details > summary { list-style: none; }
      details > summary::-webkit-details-marker { display: none; }
      details[open] summary svg { transform: rotate(180deg); }
      .bg-radial-gradient {
        background: radial-gradient(circle at 50% -20%, rgba(30, 96, 255, 0.25) 0%, rgba(10, 15, 29, 0) 70%);
      }