/* roulang page: index */
:root {
            --primary: #2563eb;
            --primary-dark: #1e40af;
            --bg-light: #f8fafc;
            --surface: #ffffff;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --border-color: #e2e8f0;
            --card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
            --hover-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.12);
        }
        body {
            font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background-color: var(--bg-light);
            color: #334155;
            line-height: 1.75;
            letter-spacing: 0.015em;
        }
        .custom-shadow {
            box-shadow: var(--card-shadow);
        }
        .custom-shadow:hover {
            box-shadow: var(--hover-shadow);
        }
        .indicator-pulse {
            animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.9); }
        }
        .code-grid {
            background-size: 24px 24px;
            background-image: linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
        }
        .badge-chip {
            display: inline-flex;
            align-items: center;
            padding: 0.2rem 0.65rem;
            font-size: 0.75rem;
            font-weight: 500;
            border-radius: 9999px;
            border: 1px solid #bfdbfe;
            background-color: #eff6ff;
            color: #1d4ed8;
        }

/* roulang page: category1 */
:root {
      --primary: #2563eb;
      --primary-dark: #1e40af;
      --bg-light: #f8fafc;
      --surface: #ffffff;
      --text-main: #0f172a;
      --text-muted: #64748b;
      --border-color: #e2e8f0;
      --card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
      --hover-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.12);
    }
    body {
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      background-color: var(--bg-light);
      color: #334155;
      line-height: 1.75;
      letter-spacing: 0.015em;
    }
    .custom-shadow {
      box-shadow: var(--card-shadow);
    }
    .custom-shadow:hover {
      box-shadow: var(--hover-shadow);
    }
    .code-grid {
      background-size: 24px 24px;
      background-image: linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
    }
    .badge-chip {
      display: inline-flex;
      align-items: center;
      padding: 0.2rem 0.65rem;
      font-size: 0.75rem;
      font-weight: 500;
      border-radius: 9999px;
      border: 1px solid #bfdbfe;
      background-color: #eff6ff;
      color: #1d4ed8;
    }
    .badge-gray {
      display: inline-flex;
      align-items: center;
      padding: 0.2rem 0.65rem;
      font-size: 0.75rem;
      font-weight: 500;
      border-radius: 9999px;
      border: 1px solid #e2e8f0;
      background-color: #f1f5f9;
      color: #475569;
    }

/* roulang page: category2 */
:root {
      --primary: #2563eb;
      --primary-dark: #1e40af;
      --bg-light: #f8fafc;
      --surface: #ffffff;
      --text-main: #0f172a;
      --text-muted: #64748b;
      --border-color: #e2e8f0;
      --card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
      --hover-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.12);
    }
    body {
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      background-color: var(--bg-light);
      color: #334155;
      line-height: 1.75;
      letter-spacing: 0.015em;
    }
    .custom-shadow {
      box-shadow: var(--card-shadow);
    }
    .custom-shadow:hover {
      box-shadow: var(--hover-shadow);
    }
    .code-grid {
      background-size: 24px 24px;
      background-image: linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
    }
    .badge-chip {
      display: inline-flex;
      align-items: center;
      padding: 0.2rem 0.65rem;
      font-size: 0.75rem;
      font-weight: 500;
      border-radius: 9999px;
      border: 1px solid #bfdbfe;
      background-color: #eff6ff;
      color: #1d4ed8;
    }
    .progress-circle {
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }

/* roulang page: category3 */
:root {
      --primary: #2563eb;
      --primary-dark: #1e40af;
      --bg-light: #f8fafc;
      --surface: #ffffff;
      --text-main: #0f172a;
      --text-muted: #64748b;
      --border-color: #e2e8f0;
      --card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
      --hover-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.12);
    }
    body {
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      background-color: var(--bg-light);
      color: #334155;
      line-height: 1.75;
      letter-spacing: 0.015em;
    }
    .custom-shadow {
      box-shadow: var(--card-shadow);
    }
    .custom-shadow:hover {
      box-shadow: var(--hover-shadow);
    }
    .code-grid {
      background-size: 24px 24px;
      background-image: linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
    }
    .badge-chip {
      display: inline-flex;
      align-items: center;
      padding: 0.2rem 0.65rem;
      font-size: 0.75rem;
      font-weight: 500;
      border-radius: 9999px;
      border: 1px solid #bfdbfe;
      background-color: #eff6ff;
      color: #1d4ed8;
    }