/* roulang page: index */
:root {
      --bg-main: #090a0f;
      --bg-surface: #11131a;
      --border-color: #1f2430;
      --brand-emerald: #10B981;
    }
    body {
      background-color: var(--bg-main);
      color: #E2E8F0;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
      box-sizing: border-box;
      overflow-x: hidden;
    }
    .grid-dots {
      background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .code-console {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 40px -15px rgba(0,0,0,0.7);
    }
    .status-ping {
      box-shadow: 0 0 10px #10B981;
    }
    .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    .accordion-body.open {
      max-height: 300px;
    }
    .drawer-open {
      transform: translateX(0) !important;
    }

/* roulang page: category2 */
:root {
      --bg-main: #090a0f;
      --bg-surface: #11131a;
      --border-color: #1f2430;
      --brand-emerald: #10B981;
    }
    body {
      background-color: var(--bg-main);
      color: #E2E8F0;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
      box-sizing: border-box;
      overflow-x: hidden;
    }
    .grid-dots {
      background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    .accordion-body.open {
      max-height: 300px;
    }
    .drawer-open {
      transform: translateX(0) !important;
    }
    .font-mono-code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

/* roulang page: category1 */
:root {
        --bg-main: #090a0f;
        --bg-surface: #11131a;
        --border-color: #1f2430;
        --brand-emerald: #10B981;
    }
    body {
        background-color: var(--bg-main);
        color: #E2E8F0;
        font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .grid-dots {
        background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
        background-size: 24px 24px;
    }
    .accordion-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }
    .accordion-body.open {
        max-height: 400px;
    }
    .drawer-open {
        transform: translateX(0) !important;
    }

/* roulang page: category3 */
:root {
      --bg-main: #090a0f;
      --bg-surface: #11131a;
      --border-color: #1f2430;
      --brand-emerald: #10B981;
    }
    body {
      background-color: var(--bg-main);
      color: #E2E8F0;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
      box-sizing: border-box;
      overflow-x: hidden;
    }
    .grid-dots {
      background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    .accordion-body.open {
      max-height: 300px;
    }
    .drawer-open {
      transform: translateX(0) !important;
    }

/* roulang page: category4 */
:root {
      --bg-main: #090a0f;
      --bg-surface: #11131a;
      --border-color: #1f2430;
      --brand-emerald: #10B981;
    }
    body {
      background-color: var(--bg-main);
      color: #E2E8F0;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
      box-sizing: border-box;
      overflow-x: hidden;
    }
    .grid-dots {
      background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    .accordion-body.open {
      max-height: 400px;
    }
    .drawer-open {
      transform: translateX(0) !important;
    }
    .status-pulse {
      animation: pulseGlow 2s infinite ease-in-out;
    }
    @keyframes pulseGlow {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.92); }
    }