/* roulang page: index */
:root {
      --color-primary: #0f172a;
      --color-secondary: #334155;
      --color-accent-gold: #d97706;
      --color-accent-silver: #94a3b8;
      --color-accent-bronze: #b45309;
      --color-bg-light: #f8fafc;
      --color-border: #e2e8f0;
      --color-card-bg: #ffffff;
      --color-text-main: #0f172a;
      --color-text-muted: #64748b;
      --radius-sm: 0.375rem;
      --radius-md: 0.75rem;
      --radius-lg: 1.25rem;
      --radius-full: 9999px;
      --shadow-subtle: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
      --shadow-hover: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
    }
    html {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    body {
      background-color: var(--color-bg-light);
      color: var(--color-text-main);
      overflow-x: hidden;
    }
    .rank-gold {
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
      color: #92400e;
      border: 1px solid #f59e0b;
    }
    .rank-silver {
      background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
      color: #475569;
      border: 1px solid #cbd5e1;
    }
    .rank-bronze {
      background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
      color: #9a3412;
      border: 1px solid #fb923c;
    }
    .capsule-nav {
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
      border: 1px solid rgba(226, 232, 240, 0.8);
    }
    .bento-card {
      background: #ffffff;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      transition: all 0.25s ease;
    }
    .bento-card:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-2px);
      border-color: #cbd5e1;
    }
    .data-kpi-badge {
      font-feature-settings: "tnum";
      font-variant-numeric: tabular-nums;
    }
    details > summary {
      list-style: none;
    }
    details > summary::-webkit-details-marker {
      display: none;
    }

/* roulang page: category1 */
:root {
      --color-primary: #0f172a;
      --color-secondary: #334155;
      --color-accent-gold: #d97706;
      --color-accent-silver: #94a3b8;
      --color-accent-bronze: #b45309;
      --color-bg-light: #f8fafc;
      --color-border: #e2e8f0;
      --color-card-bg: #ffffff;
      --color-text-main: #0f172a;
      --color-text-muted: #64748b;
      --radius-sm: 0.375rem;
      --radius-md: 0.75rem;
      --radius-lg: 1.25rem;
      --radius-full: 9999px;
      --shadow-subtle: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
      --shadow-hover: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
    }
    html {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    body {
      background-color: var(--color-bg-light);
      color: var(--color-text-main);
      overflow-x: hidden;
    }
    .capsule-nav {
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
      border: 1px solid rgba(226, 232, 240, 0.8);
    }
    .bento-card {
      background: #ffffff;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      transition: all 0.25s ease;
    }
    .bento-card:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-2px);
      border-color: #cbd5e1;
    }
    .data-kpi-badge {
      font-feature-settings: "tnum";
      font-variant-numeric: tabular-nums;
    }
    .badge-rank-1 {
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
      border: 1px solid #f59e0b;
      color: #b45309;
    }
    .badge-rank-2 {
      background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
      border: 1px solid #94a3b8;
      color: #475569;
    }
    .badge-rank-3 {
      background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
      border: 1px solid #f97316;
      color: #c2410c;
    }
    .badge-rank-default {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #64748b;
    }