/* roulang page: index */
:root {
      --brand-primary: #1F242D;
      --brand-dark: #121417;
      --brand-navy: #0F172A;
      --brand-green: #00E599;
      --brand-amber: #F59E0B;
      --brand-bg: #F8F9FA;
      --text-main: #0F172A;
      --text-body: #334155;
      --text-muted: #64748B;
      --border-color: #E2E8F0;
      --card-radius: 10px;
    }
    body {
      background-color: var(--brand-bg);
      color: var(--text-body);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.68;
      -webkit-font-smoothing: antialiased;
    }
    .custom-shadow {
      box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 20px 25px -5px rgba(0,0,0,0.03);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(0, 229, 153, 0.08) 0%, rgba(18, 20, 23, 0) 70%);
    }
    .scan-line {
      position: relative;
      overflow: hidden;
    }
    .scan-line::after {
      content: "";
      position: absolute;
      top: -100%;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, transparent 0%, rgba(0,229,153,0.18) 50%, rgba(0,229,153,0.4) 100%);
      animation: scanAnim 4s linear infinite;
    }
    @keyframes scanAnim {
      0% { top: -100%; }
      100% { top: 100%; }
    }
    .focus-ring:focus {
      outline: 2px solid var(--brand-green);
      outline-offset: 2px;
    }

/* roulang page: category2 */
:root {
      --brand-primary: #1F242D;
      --brand-dark: #121417;
      --brand-navy: #0F172A;
      --brand-green: #00E599;
      --brand-amber: #F59E0B;
      --brand-bg: #F8F9FA;
      --text-main: #0F172A;
      --text-body: #334155;
      --text-muted: #64748B;
      --border-color: #E2E8F0;
      --card-radius: 10px;
    }
    body {
      background-color: var(--brand-bg);
      color: var(--text-body);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.68;
      -webkit-font-smoothing: antialiased;
    }
    .custom-shadow {
      box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 20px 25px -5px rgba(0,0,0,0.03);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(0, 229, 153, 0.08) 0%, rgba(18, 20, 23, 0) 70%);
    }
    /* 分类页定制样式 */
    .hero-slant {
      clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
    }
    @media (max-width: 768px) {
      .hero-slant {
        clip-path: none;
      }
    }
    .tab-btn.active {
      background-color: #0F172A;
      color: #00E599;
      border-color: #0F172A;
    }

/* roulang page: category3 */
:root {
      --brand-primary: #1F242D;
      --brand-dark: #121417;
      --brand-navy: #0F172A;
      --brand-green: #00E599;
      --brand-amber: #F59E0B;
      --brand-bg: #F8F9FA;
      --text-main: #0F172A;
      --text-body: #334155;
      --text-muted: #64748B;
      --border-color: #E2E8F0;
      --card-radius: 10px;
    }
    body {
      background-color: var(--brand-bg);
      color: var(--text-body);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.68;
      -webkit-font-smoothing: antialiased;
    }
    .custom-shadow {
      box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 20px 25px -5px rgba(0,0,0,0.03);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(0, 229, 153, 0.08) 0%, rgba(18, 20, 23, 0) 70%);
    }
    .terminal-tag {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

/* roulang page: category1 */
:root {
      --brand-primary: #1F242D;
      --brand-dark: #121417;
      --brand-navy: #0F172A;
      --brand-green: #00E599;
      --brand-amber: #F59E0B;
      --brand-bg: #F8F9FA;
      --text-main: #0F172A;
      --text-body: #334155;
      --text-muted: #64748B;
      --border-color: #E2E8F0;
      --card-radius: 10px;
    }
    body {
      background-color: var(--brand-bg);
      color: var(--text-body);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.68;
      -webkit-font-smoothing: antialiased;
    }
    .custom-shadow {
      box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 20px 25px -5px rgba(0,0,0,0.03);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(0, 229, 153, 0.08) 0%, rgba(18, 20, 23, 0) 70%);
    }
    .compare-container {
      position: relative;
      overflow: hidden;
      border-radius: var(--card-radius);
    }
    .grid-lines {
      background-size: 24px 24px;
      background-image: linear-gradient(to right, rgba(226, 232, 240, 0.5) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(226, 232, 240, 0.5) 1px, transparent 1px);
    }

/* roulang page: category4 */
:root {
      --brand-primary: #1F242D;
      --brand-dark: #121417;
      --brand-navy: #0F172A;
      --brand-green: #00E599;
      --brand-amber: #F59E0B;
      --brand-bg: #F8F9FA;
      --text-main: #0F172A;
      --text-body: #334155;
      --text-muted: #64748B;
      --border-color: #E2E8F0;
      --card-radius: 10px;
    }
    body {
      background-color: var(--brand-bg);
      color: var(--text-body);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.68;
      -webkit-font-smoothing: antialiased;
    }
    .custom-shadow {
      box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 20px 25px -5px rgba(0,0,0,0.03);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(0, 229, 153, 0.08) 0%, rgba(18, 20, 23, 0) 70%);
    }
    .status-dot {
      animation: pulseGreen 2s infinite ease-in-out;
    }
    @keyframes pulseGreen {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.85); }
    }
    details summary::-webkit-details-marker {
      display: none;
    }