/* roulang page: index */
:root {
      --bg-dark: #0a0d14;
      --bg-card: rgba(22, 30, 46, 0.85);
      --border-line: rgba(74, 144, 226, 0.25);
      --radar-amber: #f5a623;
      --pulse-cyan: #00e5ff;
      --text-high: #f0f4f8;
      --text-body: #94a3b8;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      scroll-behavior: smooth;
    }

    body {
      background-color: var(--bg-dark);
      color: var(--text-body);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.6;
      position: relative;
      overflow-x: hidden;
    }

    /* 坐标经纬背景网格 */
    .geo-grid-bg {
      background-size: 36px 36px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    }

    /* 45度微切角 */
    .clip-corner {
      clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    }
    
    .clip-tag {
      clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    }

    /* HUD 卡片样式 */
    .hud-panel {
      background: var(--bg-card);
      border: 1px solid var(--border-line);
      backdrop-filter: blur(12px);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .hud-panel:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px -4px rgba(0, 229, 255, 0.2);
      border-color: rgba(0, 229, 255, 0.5);
    }

    /* 环形进度圈 */
    .progress-ring__circle {
      transition: stroke-dashoffset 0.35s;
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }

    /* 呼吸与雷达动效 */
    @keyframes radarSweep {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .radar-beam {
      animation: radarSweep 6s linear infinite;
    }

    @keyframes pulseGlow {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(1.15); }
    }
    .pulse-dot {
      animation: pulseGlow 2s ease-in-out infinite;
    }

    /* 常见异议手风琴 */
    details > summary {
      list-style: none;
      cursor: pointer;
    }
    details > summary::-webkit-details-marker {
      display: none;
    }
    details[open] summary .faq-icon {
      transform: rotate(180deg);
      color: #00e5ff;
    }

/* roulang page: category2 */
:root {
      --bg-dark: #0a0d14;
      --bg-card: rgba(22, 30, 46, 0.85);
      --border-line: rgba(74, 144, 226, 0.25);
      --radar-amber: #f5a623;
      --pulse-cyan: #00e5ff;
      --text-high: #f0f4f8;
      --text-body: #94a3b8;
    }
    body {
      background-color: var(--bg-dark);
      color: var(--text-body);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.6;
      position: relative;
      overflow-x: hidden;
    }
    /* 坐标经纬背景网格 */
    .geo-grid-bg {
      background-size: 36px 36px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    }
    .hud-panel {
      background: rgba(22, 30, 46, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(74, 144, 226, 0.25);
    }
    .clip-tag {
      clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    }
    .clip-card-corner {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    }
    .pulse-dot {
      animation: pulseAnim 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulseAnim {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: .3; transform: scale(0.85); }
    }
    details[open] summary .faq-icon {
      transform: rotate(180deg);
      color: #00e5ff;
    }

/* roulang page: category1 */
:root {
            --bg-dark: #0a0d14;
            --bg-card: rgba(22, 30, 46, 0.85);
            --border-line: rgba(74, 144, 226, 0.25);
            --radar-amber: #f5a623;
            --pulse-cyan: #00e5ff;
            --text-high: #f0f4f8;
            --text-body: #94a3b8;
        }
        body {
            background-color: var(--bg-dark);
            color: var(--text-body);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.6;
            position: relative;
            overflow-x: hidden;
        }
        .geo-grid-bg {
            background-size: 36px 36px;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        }
        .hud-panel {
            background: var(--bg-card);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--border-line);
        }
        .clip-tag {
            clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
        }
        .pulse-dot {
            animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes pulse-glow {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: .4; transform: scale(1.15); }
        }
        details[open] summary .faq-icon {
            transform: rotate(180deg);
            color: #00e5ff;
        }