/* roulang page: index */
:root {
      --primary: #0052D9;
      --primary-hover: #003cab;
      --accent: #00A870;
      --dark-bg: #0B1528;
      --page-bg: #F2F5F9;
      --card-bg: #FFFFFF;
      --text-main: #1D2129;
      --text-body: #4E5969;
      --text-muted: #86909C;
      --shadow-normal: 0 4px 20px rgba(0, 82, 217, 0.06);
      --shadow-hover: 0 12px 32px rgba(0, 82, 217, 0.12);
      --radius-box: 12px;
    }
    html {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    }
    body {
      background-color: var(--page-bg);
      color: var(--text-body);
      overflow-x: hidden;
    }
    .custom-container {
      max-width: 1240px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 20px;
      padding-right: 20px;
    }
    .card-effect {
      background: #FFFFFF;
      border-radius: var(--radius-box);
      box-shadow: var(--shadow-normal);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid rgba(229, 230, 235, 0.8);
    }
    .card-effect:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-4px);
      border-color: rgba(0, 82, 217, 0.25);
    }
    .top-accent-line {
      position: relative;
    }
    .top-accent-line::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--primary);
      border-top-left-radius: var(--radius-box);
      border-top-right-radius: var(--radius-box);
    }
    /* 手风琴折叠动画 */
    details > summary {
      list-style: none;
    }
    details > summary::-webkit-details-marker {
      display: none;
    }
    details summary i {
      transition: transform 0.3s ease;
    }
    details[open] summary i {
      transform: rotate(180deg);
    }