/* roulang page: index */
:root {
            --sm-bg-dark: #070b14;
            --sm-bg-surface: #0c1222;
            --sm-primary: #00d2ff;
            --sm-primary-deep: #0066ff;
            --sm-accent-neon: #8a2be2;
            --sm-accent-pink: #ff2a8d;
            --sm-glass-bg: rgba(15, 23, 42, 0.72);
            --sm-glass-border: rgba(255, 255, 255, 0.08);
            --sm-glass-hover-border: rgba(0, 210, 255, 0.35);
            --sm-text-main: #ffffff;
            --sm-text-muted: #94a3b8;
            --sm-text-dim: #64748b;
            --sm-card-radius: 14px;
            --sm-btn-radius: 8px;
            --sm-glow-shadow: 0 0 24px rgba(0, 210, 255, 0.28);
        }

        body {
            background-color: var(--sm-bg-dark);
            background-image: radial-gradient(circle at 50% 0%, #111d38 0%, #070b14 75%);
            color: var(--sm-text-main);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* 顶部工具栏导航 */
        .sm-toolbar-header {
            background: rgba(7, 11, 20, 0.88);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(0, 210, 255, 0.15);
            position: sticky;
            top: 0;
            z-index: 1040;
            padding: 10px 0;
            transition: all 0.3s ease;
        }

        .sm-brand-logo {
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            color: #ffffff;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .sm-logo-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent-neon));
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 12px rgba(0, 210, 255, 0.5);
        }

        .sm-logo-icon svg {
            fill: #ffffff;
            width: 18px;
            height: 18px;
        }

        .sm-nav-link {
            color: var(--sm-text-muted);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            padding: 8px 14px;
            border-radius: 6px;
            transition: all 0.25s ease;
        }

        .sm-nav-link:hover, .sm-nav-link.active {
            color: var(--sm-primary);
            background: rgba(0, 210, 255, 0.08);
        }

        .sm-status-indicator {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 4px 12px;
            border-radius: 30px;
            font-size: 0.8rem;
            color: var(--sm-text-muted);
        }

        .sm-status-dot {
            width: 8px;
            height: 8px;
            background-color: #10b981;
            border-radius: 50%;
            box-shadow: 0 0 8px #10b981;
            animation: pulseDot 2s infinite;
        }

        @keyframes pulseDot {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }

        /* 按钮与卡片样式 */
        .btn-glow-primary {
            background: linear-gradient(135deg, var(--sm-primary), var(--sm-primary-deep));
            color: #ffffff !important;
            font-weight: 600;
            font-size: 0.92rem;
            padding: 8px 20px;
            border-radius: var(--sm-btn-radius);
            border: none;
            box-shadow: 0 0 16px rgba(0, 210, 255, 0.35);
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .btn-glow-primary:hover {
            box-shadow: 0 0 24px rgba(0, 210, 255, 0.65);
            transform: translateY(-2px);
            color: #ffffff;
        }

        .btn-outline-glass {
            background: rgba(255, 255, 255, 0.04);
            color: var(--sm-text-main);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: var(--sm-btn-radius);
            padding: 8px 18px;
            font-size: 0.92rem;
            transition: all 0.25s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }

        .btn-outline-glass:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--sm-primary);
            border-color: var(--sm-primary);
        }

        .sm-glass-panel {
            background: var(--sm-glass-bg);
            border: 1px solid var(--sm-glass-border);
            border-radius: var(--sm-card-radius);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.65);
            transition: all 0.3s ease;
        }

        .sm-glass-panel:hover {
            border-color: var(--sm-glass-hover-border);
        }

        /* 影视卡片海湾排版 */
        .sm-poster-card {
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .sm-poster-card:hover {
            transform: translateY(-6px);
            border-color: var(--sm-primary);
            box-shadow: 0 16px 30px -8px rgba(0, 210, 255, 0.25);
        }

        .sm-poster-thumb {
            position: relative;
            padding-top: 140%;
            overflow: hidden;
            background-color: #0c1222;
        }

        .sm-poster-thumb img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .sm-poster-card:hover .sm-poster-thumb img {
            transform: scale(1.06);
        }

        .sm-badge-quality {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(7, 11, 20, 0.75);
            border: 1px solid rgba(0, 210, 255, 0.4);
            color: var(--sm-primary);
            font-size: 0.7rem;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            backdrop-filter: blur(8px);
        }

        .sm-badge-score {
            position: absolute;
            bottom: 8px;
            left: 8px;
            background: linear-gradient(135deg, #ff2a8d, #8a2be2);
            color: #ffffff;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(255, 42, 141, 0.4);
        }

        /* 标题与板块修饰 */
        .sm-section-heading {
            font-size: 1.85rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 0.5rem;
            position: relative;
            display: inline-block;
        }

        .sm-section-heading span {
            background: linear-gradient(135deg, #ffffff 40%, var(--sm-primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .sm-section-lead {
            color: var(--sm-text-muted);
            font-size: 0.95rem;
            max-width: 760px;
            line-height: 1.6;
        }

        /* Hero 视觉重塑 */
        .sm-hero-section {
            position: relative;
            padding: 70px 0 60px 0;
            background: linear-gradient(180deg, rgba(7, 11, 20, 0.3) 0%, rgba(7, 11, 20, 0.95) 100%),
                        url('/assets/images/4ab537e6e3ff2d0b.jpg') center center / cover no-repeat;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .sm-hero-h1 {
            font-size: 2.6rem;
            font-weight: 800;
            line-height: 1.25;
            letter-spacing: -0.5px;
            margin-bottom: 1.2rem;
            background: linear-gradient(135deg, #ffffff 0%, #c9e9ff 70%, var(--sm-primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .sm-stat-box {
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            padding: 16px;
            text-align: center;
        }

        .sm-stat-num {
            font-size: 1.7rem;
            font-weight: 800;
            color: var(--sm-primary);
            line-height: 1.1;
        }

        .sm-stat-label {
            font-size: 0.8rem;
            color: var(--sm-text-muted);
            margin-top: 4px;
        }

        /* 比较表格与卡片 */
        .sm-compare-card {
            background: rgba(15, 23, 42, 0.65);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            overflow: hidden;
        }

        .sm-compare-header {
            padding: 16px 20px;
            background: rgba(0, 210, 255, 0.06);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            font-weight: 700;
        }

        /* 标签与选项卡 */
        .sm-nav-tabs .nav-link {
            color: var(--sm-text-muted);
            border: 1px solid transparent;
            border-radius: 8px;
            padding: 8px 16px;
            font-weight: 600;
            margin-right: 6px;
            background: rgba(255, 255, 255, 0.03);
        }

        .sm-nav-tabs .nav-link.active {
            color: #ffffff;
            background: var(--sm-primary-deep);
            border-color: var(--sm-primary);
        }

        /* 折叠面板 Accordion 覆盖 */
        .accordion-item {
            background-color: var(--sm-glass-bg) !important;
            border: 1px solid var(--sm-glass-border) !important;
            margin-bottom: 12px;
            border-radius: 10px !important;
            overflow: hidden;
        }

        .accordion-button {
            background-color: transparent !important;
            color: #ffffff !important;
            font-weight: 600;
            box-shadow: none !important;
            padding: 16px 20px;
        }

        .accordion-button:not(.collapsed) {
            color: var(--sm-primary) !important;
            background-color: rgba(0, 210, 255, 0.05) !important;
        }

        .accordion-button::after {
            filter: invert(1) hue-rotate(180deg);
        }

        .accordion-body {
            color: var(--sm-text-muted);
            font-size: 0.92rem;
            line-height: 1.7;
            padding: 16px 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* 响应式排版 */
        @media (max-width: 991.98px) {
            .sm-hero-h1 {
                font-size: 2.1rem;
            }
            .sm-section-heading {
                font-size: 1.6rem;
            }
        }

        @media (max-width: 575.98px) {
            .sm-hero-h1 {
                font-size: 1.75rem;
            }
            .sm-hero-section {
                padding: 40px 0;
            }
        }

/* roulang page: category2 */
:root {
      --sm-bg-dark: #070b14;
      --sm-bg-surface: #0c1222;
      --sm-primary: #00d2ff;
      --sm-primary-deep: #0066ff;
      --sm-accent-neon: #8a2be2;
      --sm-accent-pink: #ff2a8d;
      --sm-glass-bg: rgba(15, 23, 42, 0.72);
      --sm-glass-border: rgba(255, 255, 255, 0.08);
      --sm-glass-hover-border: rgba(0, 210, 255, 0.35);
      --sm-text-main: #ffffff;
      --sm-text-muted: #94a3b8;
      --sm-text-dim: #64748b;
      --sm-card-radius: 14px;
      --sm-btn-radius: 8px;
      --sm-glow-shadow: 0 0 24px rgba(0, 210, 255, 0.28);
    }
    body {
      background-color: var(--sm-bg-dark);
      background-image: radial-gradient(circle at 50% 0%, #111d38 0%, #070b14 75%);
      color: var(--sm-text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
      overflow-x: hidden;
    }
    /* 顶部工具栏导航 */
    .sm-toolbar-header {
      background: rgba(7, 11, 20, 0.88);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(0, 210, 255, 0.15);
      position: sticky;
      top: 0;
      z-index: 1040;
      padding: 10px 0;
      transition: all 0.3s ease;
    }
    .sm-brand-logo {
      font-size: 1.35rem;
      font-weight: 800;
      letter-spacing: 0.5px;
      color: #ffffff;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .sm-logo-icon {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent-neon));
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 12px rgba(0, 210, 255, 0.5);
    }
    .sm-logo-icon svg {
      fill: #ffffff;
      width: 18px;
      height: 18px;
    }
    .sm-nav-link {
      color: var(--sm-text-muted);
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 500;
      padding: 8px 14px;
      border-radius: 6px;
      transition: all 0.25s ease;
    }
    .sm-nav-link:hover, .sm-nav-link.active {
      color: var(--sm-primary);
      background: rgba(0, 210, 255, 0.08);
    }
    .sm-status-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #10b981;
      display: inline-block;
      box-shadow: 0 0 8px #10b981;
      animation: smPulse 2s infinite;
    }
    @keyframes smPulse {
      0% { transform: scale(0.95); opacity: 0.75; }
      50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 14px #10b981; }
      100% { transform: scale(0.95); opacity: 0.75; }
    }

    /* 按钮样式 */
    .btn-glow-primary {
      background: linear-gradient(135deg, var(--sm-primary), var(--sm-primary-deep));
      color: #ffffff !important;
      font-weight: 600;
      font-size: 0.92rem;
      padding: 8px 20px;
      border-radius: var(--sm-btn-radius);
      border: none;
      box-shadow: 0 0 16px rgba(0, 210, 255, 0.35);
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .btn-glow-primary:hover {
      box-shadow: 0 0 24px rgba(0, 210, 255, 0.65);
      transform: translateY(-2px);
      color: #ffffff;
    }
    .btn-outline-glass {
      background: rgba(255, 255, 255, 0.04);
      color: var(--sm-text-main);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: var(--sm-btn-radius);
      padding: 8px 18px;
      font-size: 0.92rem;
      transition: all 0.25s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
    }
    .btn-outline-glass:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--sm-primary);
      border-color: var(--sm-primary);
    }

    /* 影视海报卡片 */
    .sm-poster-card {
      background: rgba(15, 23, 42, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .sm-poster-card:hover {
      transform: translateY(-6px);
      border-color: var(--sm-primary);
      box-shadow: 0 16px 30px -8px rgba(0, 210, 255, 0.25);
    }
    .sm-poster-thumb {
      position: relative;
      width: 100%;
      padding-top: 140%;
      background: #0d1527;
      overflow: hidden;
    }
    .sm-poster-thumb img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .sm-poster-card:hover .sm-poster-thumb img {
      transform: scale(1.06);
    }
    .sm-badge-quality {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(7, 11, 20, 0.82);
      border: 1px solid rgba(0, 210, 255, 0.4);
      color: var(--sm-primary);
      font-size: 0.72rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      backdrop-filter: blur(8px);
      z-index: 2;
    }
    .sm-badge-score {
      position: absolute;
      bottom: 8px;
      left: 8px;
      background: linear-gradient(135deg, #ff2a8d, #8a2be2);
      color: #ffffff;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(255, 42, 141, 0.4);
      z-index: 2;
    }
    .sm-poster-meta {
      padding: 12px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .sm-poster-title {
      font-size: 0.95rem;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sm-poster-desc {
      font-size: 0.78rem;
      color: var(--sm-text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 6px;
    }
    .sm-poster-tags {
      display: flex;
      gap: 5px;
      font-size: 0.7rem;
      color: var(--sm-text-dim);
    }

    /* 筛选标签条 */
    .sm-filter-box {
      background: var(--sm-glass-bg);
      border: 1px solid var(--sm-glass-border);
      border-radius: var(--sm-card-radius);
      backdrop-filter: blur(16px);
      padding: 16px 20px;
    }
    .sm-filter-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }
    .sm-filter-row:last-child {
      border-bottom: none;
    }
    .sm-filter-label {
      font-size: 0.85rem;
      color: var(--sm-text-dim);
      min-width: 46px;
      padding-top: 3px;
      font-weight: 600;
    }
    .sm-filter-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .sm-chip {
      font-size: 0.82rem;
      color: var(--sm-text-muted);
      background: rgba(255, 255, 255, 0.03);
      padding: 3px 12px;
      border-radius: 20px;
      text-decoration: none;
      transition: all 0.2s ease;
      border: 1px solid transparent;
    }
    .sm-chip:hover {
      color: var(--sm-primary);
      border-color: rgba(0, 210, 255, 0.3);
      background: rgba(0, 210, 255, 0.05);
    }
    .sm-chip.active {
      color: #ffffff;
      background: linear-gradient(135deg, rgba(0, 210, 255, 0.25), rgba(0, 102, 255, 0.35));
      border-color: var(--sm-primary);
      font-weight: 600;
    }

    /* 杂志分栏 Hero */
    .sm-mag-hero {
      background: var(--sm-glass-bg);
      border: 1px solid var(--sm-glass-border);
      border-radius: var(--sm-card-radius);
      backdrop-filter: blur(16px);
      padding: 32px;
      position: relative;
      overflow: hidden;
    }
    .sm-mag-hero::before {
      content: "";
      position: absolute;
      top: -50px;
      right: -50px;
      width: 260px;
      height: 260px;
      background: radial-gradient(circle, rgba(0, 210, 255, 0.15) 0%, rgba(138, 43, 226, 0.05) 70%, transparent 100%);
      pointer-events: none;
    }

    /* 排行榜卡片 */
    .sm-rank-card {
      background: rgba(15, 23, 42, 0.65);
      border: 1px solid var(--sm-glass-border);
      border-radius: 12px;
      padding: 14px;
      display: flex;
      align-items: center;
      gap: 14px;
      transition: all 0.25s ease;
    }
    .sm-rank-card:hover {
      border-color: rgba(0, 210, 255, 0.4);
      background: rgba(20, 32, 60, 0.55);
      transform: translateX(4px);
    }
    .sm-rank-num {
      font-size: 1.5rem;
      font-weight: 800;
      min-width: 32px;
      text-align: center;
      color: var(--sm-text-dim);
    }
    .sm-rank-num.top1 { color: #f59e0b; text-shadow: 0 0 10px rgba(245, 158, 11, 0.4); }
    .sm-rank-num.top2 { color: #94a3b8; }
    .sm-rank-num.top3 { color: #b45309; }

    /* 专题联播大卡 */
    .sm-topic-card {
      background: rgba(15, 23, 42, 0.7);
      border: 1px solid var(--sm-glass-border);
      border-radius: 14px;
      overflow: hidden;
      height: 100%;
      transition: all 0.3s ease;
    }
    .sm-topic-card:hover {
      border-color: var(--sm-primary);
      box-shadow: 0 12px 28px -6px rgba(0, 210, 255, 0.22);
    }
    .sm-topic-thumb {
      position: relative;
      height: 180px;
      overflow: hidden;
    }
    .sm-topic-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.45s ease;
    }
    .sm-topic-card:hover .sm-topic-thumb img {
      transform: scale(1.05);
    }
    .sm-topic-content {
      padding: 20px;
    }

    /* 折叠面板 FAQ */
    .sm-faq-item {
      background: rgba(15, 23, 42, 0.65);
      border: 1px solid var(--sm-glass-border);
      border-radius: 10px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .accordion-button {
      background: transparent !important;
      color: var(--sm-text-main) !important;
      font-weight: 600;
      border: none;
      box-shadow: none !important;
      padding: 16px 20px;
    }
    .accordion-button::after {
      filter: invert(1) brightness(0.8);
    }
    .accordion-body {
      color: var(--sm-text-muted);
      font-size: 0.92rem;
      padding: 0 20px 18px 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.04);
    }

    /* 页脚与品牌规范 */
    .sm-footer {
      background: #05080f;
      border-top: 1px solid rgba(0, 210, 255, 0.15);
      padding: 60px 0 30px;
      margin-top: 80px;
    }
    .sm-logo {
      font-size: 1.4rem;
      font-weight: 800;
      color: #ffffff;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .sm-logo-badge {
      background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent-neon));
      color: #ffffff;
      font-size: 0.75rem;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 700;
    }
    .sm-footer-title {
      font-size: 1rem;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 18px;
    }
    .sm-footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .sm-footer-links li {
      margin-bottom: 10px;
    }
    .sm-footer-links a {
      color: var(--sm-text-muted);
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.2s ease;
    }
    .sm-footer-links a:hover {
      color: var(--sm-primary);
    }
    .sm-footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding-top: 24px;
      margin-top: 40px;
      font-size: 0.85rem;
      color: var(--sm-text-dim);
    }

    /* 分页控制器 */
    .sm-pagination .page-link {
      background: rgba(15, 23, 42, 0.75);
      border: 1px solid var(--sm-glass-border);
      color: var(--sm-text-muted);
      margin: 0 4px;
      border-radius: 8px;
      padding: 8px 16px;
      transition: all 0.2s ease;
    }
    .sm-pagination .page-link:hover,
    .sm-pagination .page-item.active .page-link {
      background: linear-gradient(135deg, var(--sm-primary), var(--sm-primary-deep));
      color: #ffffff;
      border-color: var(--sm-primary);
    }

/* roulang page: category1 */
:root {
        --sm-bg-dark: #070b14;
        --sm-bg-surface: #0c1222;
        --sm-primary: #00d2ff;
        --sm-primary-deep: #0066ff;
        --sm-accent-neon: #8a2be2;
        --sm-accent-pink: #ff2a8d;
        --sm-glass-bg: rgba(15, 23, 42, 0.72);
        --sm-glass-border: rgba(255, 255, 255, 0.08);
        --sm-glass-hover-border: rgba(0, 210, 255, 0.35);
        --sm-text-main: #ffffff;
        --sm-text-muted: #94a3b8;
        --sm-text-dim: #64748b;
        --sm-card-radius: 14px;
        --sm-btn-radius: 8px;
        --sm-glow-shadow: 0 0 24px rgba(0, 210, 255, 0.28);
    }
    body {
        background-color: var(--sm-bg-dark);
        background-image: radial-gradient(circle at 50% 0%, #111d38 0%, #070b14 75%);
        color: var(--sm-text-main);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
        margin: 0;
        padding: 0;
        line-height: 1.6;
        overflow-x: hidden;
    }
    /* 顶部工具栏导航 */
    .sm-toolbar-header {
        background: rgba(7, 11, 20, 0.88);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(0, 210, 255, 0.15);
        position: sticky;
        top: 0;
        z-index: 1040;
        padding: 10px 0;
        transition: all 0.3s ease;
    }
    .sm-brand-logo {
        font-size: 1.35rem;
        font-weight: 800;
        letter-spacing: 0.5px;
        color: #ffffff;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .sm-logo-icon {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent-neon));
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 12px rgba(0, 210, 255, 0.5);
    }
    .sm-logo-icon svg {
        fill: #ffffff;
        width: 18px;
        height: 18px;
    }
    .sm-nav-link {
        color: var(--sm-text-muted);
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 500;
        padding: 8px 14px;
        border-radius: 6px;
        transition: all 0.25s ease;
    }
    .sm-nav-link:hover, .sm-nav-link.active {
        color: var(--sm-primary);
        background: rgba(0, 210, 255, 0.08);
    }
    .sm-status-indicator {
        width: 8px;
        height: 8px;
        background-color: #10b981;
        border-radius: 50%;
        display: inline-block;
        box-shadow: 0 0 8px #10b981;
        animation: sm-pulse 2s infinite;
    }
    @keyframes sm-pulse {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }
    .btn-glow-primary {
        background: linear-gradient(135deg, var(--sm-primary), var(--sm-primary-deep));
        color: #ffffff !important;
        font-weight: 600;
        font-size: 0.92rem;
        padding: 8px 20px;
        border-radius: var(--sm-btn-radius);
        border: none;
        box-shadow: 0 0 16px rgba(0, 210, 255, 0.35);
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .btn-glow-primary:hover {
        box-shadow: 0 0 24px rgba(0, 210, 255, 0.65);
        transform: translateY(-2px);
        color: #ffffff;
    }
    .btn-outline-glass {
        background: rgba(255, 255, 255, 0.04);
        color: var(--sm-text-main);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: var(--sm-btn-radius);
        padding: 8px 18px;
        font-size: 0.92rem;
        transition: all 0.25s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }
    .btn-outline-glass:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--sm-primary);
        border-color: var(--sm-primary);
    }
    /* 筛选器区域 */
    .sm-filter-box {
        background: var(--sm-glass-bg);
        border: 1px solid var(--sm-glass-border);
        border-radius: var(--sm-card-radius);
        backdrop-filter: blur(16px);
        padding: 24px;
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    }
    .sm-filter-row {
        display: flex;
        align-items: flex-start;
        margin-bottom: 12px;
    }
    .sm-filter-row:last-child {
        margin-bottom: 0;
    }
    .sm-filter-label {
        font-size: 0.88rem;
        color: var(--sm-text-dim);
        min-width: 60px;
        padding-top: 4px;
    }
    .sm-filter-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .sm-filter-chip {
        font-size: 0.85rem;
        padding: 4px 14px;
        border-radius: 20px;
        color: var(--sm-text-muted);
        text-decoration: none;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        transition: all 0.2s ease;
    }
    .sm-filter-chip:hover {
        color: #ffffff;
        background: rgba(0, 210, 255, 0.12);
        border-color: rgba(0, 210, 255, 0.3);
    }
    .sm-filter-chip.active {
        color: #ffffff;
        background: linear-gradient(135deg, rgba(0, 210, 255, 0.25), rgba(0, 102, 255, 0.25));
        border-color: var(--sm-primary);
        box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
    }
    /* 影视海报网格 */
    .sm-poster-card {
        background: rgba(15, 23, 42, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .sm-poster-card:hover {
        transform: translateY(-6px);
        border-color: var(--sm-primary);
        box-shadow: 0 16px 30px -8px rgba(0, 210, 255, 0.25);
    }
    .sm-poster-thumb {
        position: relative;
        width: 100%;
        padding-top: 140%;
        overflow: hidden;
        background: #0d1527;
    }
    .sm-poster-thumb img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .sm-poster-card:hover .sm-poster-thumb img {
        transform: scale(1.06);
    }
    .sm-badge-quality {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(7, 11, 20, 0.75);
        border: 1px solid rgba(0, 210, 255, 0.4);
        color: var(--sm-primary);
        font-size: 0.7rem;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 4px;
        backdrop-filter: blur(8px);
        z-index: 2;
    }
    .sm-badge-score {
        position: absolute;
        bottom: 8px;
        left: 8px;
        background: linear-gradient(135deg, #ff2a8d, #8a2be2);
        color: #ffffff;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(255, 42, 141, 0.4);
        z-index: 2;
    }
    .sm-poster-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(7, 11, 20, 0.95) 0%, rgba(7, 11, 20, 0.2) 60%, transparent 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .sm-poster-card:hover .sm-poster-overlay {
        opacity: 1;
    }
    .sm-play-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--sm-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 16px var(--sm-primary);
        transform: scale(0.8);
        transition: transform 0.3s ease;
    }
    .sm-poster-card:hover .sm-play-icon {
        transform: scale(1);
    }
    .sm-play-icon svg {
        fill: #070b14;
        width: 18px;
        height: 18px;
        margin-left: 2px;
    }
    .sm-poster-info {
        padding: 12px 14px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .sm-poster-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 4px;
    }
    .sm-poster-meta {
        font-size: 0.8rem;
        color: var(--sm-text-dim);
    }
    /* 排行榜卡片 */
    .sm-rank-card {
        background: var(--sm-glass-bg);
        border: 1px solid var(--sm-glass-border);
        border-radius: 12px;
        padding: 14px 18px;
        display: flex;
        align-items: center;
        gap: 16px;
        transition: all 0.25s ease;
    }
    .sm-rank-card:hover {
        border-color: var(--sm-glass-hover-border);
        background: rgba(20, 32, 60, 0.55);
        transform: translateX(4px);
    }
    .sm-rank-num {
        font-size: 1.4rem;
        font-weight: 800;
        font-style: italic;
        width: 32px;
        text-align: center;
        flex-shrink: 0;
    }
    .sm-rank-1 { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
    .sm-rank-2 { color: #e2e8f0; text-shadow: 0 0 10px rgba(226, 232, 240, 0.4); }
    .sm-rank-3 { color: #f97316; text-shadow: 0 0 10px rgba(249, 115, 22, 0.4); }
    .sm-rank-norm { color: var(--sm-text-dim); }
    /* 专题联播卡片 */
    .sm-topic-card {
        position: relative;
        border-radius: var(--sm-card-radius);
        overflow: hidden;
        border: 1px solid var(--sm-glass-border);
        min-height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 24px;
        background-size: cover;
        background-position: center;
        transition: all 0.35s ease;
    }
    .sm-topic-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(7, 11, 20, 0.2) 0%, rgba(7, 11, 20, 0.88) 100%);
        z-index: 1;
        transition: all 0.3s ease;
    }
    .sm-topic-card:hover {
        border-color: var(--sm-primary);
        box-shadow: 0 12px 30px -5px rgba(0, 210, 255, 0.3);
        transform: translateY(-4px);
    }
    .sm-topic-card:hover::before {
        background: linear-gradient(180deg, rgba(7, 11, 20, 0.1) 0%, rgba(7, 11, 20, 0.95) 100%);
    }
    .sm-topic-content {
        position: relative;
        z-index: 2;
    }
    /* 折叠面板 (FAQ) */
    .sm-accordion .accordion-item {
        background: var(--sm-glass-bg);
        border: 1px solid var(--sm-glass-border);
        border-radius: 12px !important;
        margin-bottom: 12px;
        overflow: hidden;
    }
    .sm-accordion .accordion-button {
        background: transparent;
        color: #ffffff;
        font-weight: 600;
        font-size: 1rem;
        box-shadow: none;
        padding: 18px 20px;
    }
    .sm-accordion .accordion-button:not(.collapsed) {
        background: rgba(0, 210, 255, 0.05);
        color: var(--sm-primary);
    }
    .sm-accordion .accordion-button::after {
        filter: invert(1);
    }
    .sm-accordion .accordion-body {
        color: var(--sm-text-muted);
        font-size: 0.92rem;
        padding: 0 20px 20px 20px;
        line-height: 1.7;
    }
    /* 标题与板块修饰 */
    .sm-section-heading {
        font-size: 1.75rem;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 0.5rem;
    }
    .sm-section-heading span {
        background: linear-gradient(135deg, #ffffff 40%, var(--sm-primary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .sm-section-lead {
        color: var(--sm-text-muted);
        font-size: 0.95rem;
    }
    /* 页脚 */
    .sm-footer {
        background: #04070d;
        border-top: 1px solid rgba(0, 210, 255, 0.15);
        padding: 60px 0 30px 0;
        color: var(--sm-text-muted);
        margin-top: 80px;
    }
    .sm-footer-title {
        color: #ffffff;
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 20px;
    }
    .sm-footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .sm-footer-links li {
        margin-bottom: 10px;
    }
    .sm-footer-links a {
        color: var(--sm-text-dim);
        text-decoration: none;
        font-size: 0.88rem;
        transition: color 0.2s ease;
    }
    .sm-footer-links a:hover {
        color: var(--sm-primary);
    }
    .sm-logo-badge {
        background: linear-gradient(135deg, var(--sm-primary), var(--sm-primary-deep));
        color: #070b14;
        font-weight: 800;
        font-size: 0.75rem;
        padding: 2px 6px;
        border-radius: 4px;
        margin-right: 6px;
    }
    .sm-cta-box {
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(12, 18, 34, 0.95));
        border: 1px solid rgba(0, 210, 255, 0.3);
        border-radius: var(--sm-card-radius);
        box-shadow: 0 0 35px rgba(0, 210, 255, 0.12);
        padding: 40px 30px;
    }
    .sm-pagination .page-link {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--sm-text-muted);
        padding: 8px 16px;
        margin: 0 4px;
        border-radius: 6px;
    }
    .sm-pagination .page-link:hover,
    .sm-pagination .page-item.active .page-link {
        background: var(--sm-primary);
        color: #070b14;
        font-weight: 700;
        border-color: var(--sm-primary);
    }

/* roulang page: category3 */
:root {
            --sm-bg-dark: #070b14;
            --sm-bg-surface: #0c1222;
            --sm-primary: #00d2ff;
            --sm-primary-deep: #0066ff;
            --sm-accent-neon: #8a2be2;
            --sm-accent-pink: #ff2a8d;
            --sm-glass-bg: rgba(15, 23, 42, 0.72);
            --sm-glass-border: rgba(255, 255, 255, 0.08);
            --sm-glass-hover-border: rgba(0, 210, 255, 0.35);
            --sm-text-main: #ffffff;
            --sm-text-muted: #94a3b8;
            --sm-text-dim: #64748b;
            --sm-card-radius: 14px;
            --sm-btn-radius: 8px;
            --sm-glow-shadow: 0 0 24px rgba(0, 210, 255, 0.28);
        }

        body {
            background-color: var(--sm-bg-dark);
            background-image: radial-gradient(circle at 50% 0%, #111d38 0%, #070b14 75%);
            color: var(--sm-text-main);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
            overflow-x: hidden;
        }

        .sm-toolbar-header {
            background: rgba(7, 11, 20, 0.88);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(0, 210, 255, 0.15);
            position: sticky;
            top: 0;
            z-index: 1040;
            padding: 10px 0;
            transition: all 0.3s ease;
        }

        .sm-brand-logo {
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            color: #ffffff;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .sm-logo-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent-neon));
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 12px rgba(0, 210, 255, 0.5);
        }

        .sm-logo-icon svg {
            fill: #ffffff;
            width: 18px;
            height: 18px;
        }

        .sm-logo-badge {
            background: linear-gradient(135deg, var(--sm-accent-pink), var(--sm-accent-neon));
            color: #ffffff;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            letter-spacing: 0.5px;
        }

        .sm-nav-link {
            color: var(--sm-text-muted);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            padding: 8px 14px;
            border-radius: 6px;
            transition: all 0.25s ease;
        }

        .sm-nav-link:hover, .sm-nav-link.active {
            color: var(--sm-primary);
            background: rgba(0, 210, 255, 0.08);
        }

        .sm-status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #00ff88;
            box-shadow: 0 0 10px #00ff88;
            display: inline-block;
            animation: sm-pulse 2s infinite;
        }

        @keyframes sm-pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.3); opacity: 0.6; }
        }

        .btn-glow-primary {
            background: linear-gradient(135deg, var(--sm-primary), var(--sm-primary-deep));
            color: #ffffff !important;
            font-weight: 600;
            font-size: 0.92rem;
            padding: 8px 20px;
            border-radius: var(--sm-btn-radius);
            border: none;
            box-shadow: 0 0 16px rgba(0, 210, 255, 0.35);
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .btn-glow-primary:hover {
            box-shadow: 0 0 24px rgba(0, 210, 255, 0.65);
            transform: translateY(-2px);
            color: #ffffff;
        }

        .btn-outline-glass {
            background: rgba(255, 255, 255, 0.04);
            color: var(--sm-text-main);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: var(--sm-btn-radius);
            padding: 8px 18px;
            font-size: 0.92rem;
            transition: all 0.25s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }

        .btn-outline-glass:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--sm-primary);
            border-color: var(--sm-primary);
        }

        .sm-glass-panel {
            background: var(--sm-glass-bg);
            border: 1px solid var(--sm-glass-border);
            border-radius: var(--sm-card-radius);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
        }

        .sm-filter-row {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 8px 0;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
        }

        .sm-filter-row:last-child {
            border-bottom: none;
        }

        .sm-filter-label {
            font-size: 0.85rem;
            color: var(--sm-text-dim);
            font-weight: 600;
            min-width: 58px;
            padding-top: 5px;
        }

        .sm-filter-chip-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .sm-filter-chip {
            font-size: 0.82rem;
            color: var(--sm-text-muted);
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 4px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-block;
        }

        .sm-filter-chip:hover {
            color: #ffffff;
            border-color: rgba(0, 210, 255, 0.3);
            background: rgba(0, 210, 255, 0.05);
        }

        .sm-filter-chip.active {
            background: linear-gradient(135deg, rgba(0, 210, 255, 0.2), rgba(0, 102, 255, 0.25));
            border-color: var(--sm-primary);
            color: var(--sm-primary);
            font-weight: 600;
        }

        .sm-poster-card {
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .sm-poster-card:hover {
            transform: translateY(-6px);
            border-color: var(--sm-primary);
            box-shadow: 0 16px 30px -8px rgba(0, 210, 255, 0.25);
        }

        .sm-poster-thumb {
            position: relative;
            width: 100%;
            padding-top: 140%;
            overflow: hidden;
            background: #0d1527;
        }

        .sm-poster-thumb img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .sm-poster-card:hover .sm-poster-thumb img {
            transform: scale(1.06);
        }

        .sm-badge-quality {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(7, 11, 20, 0.75);
            border: 1px solid rgba(0, 210, 255, 0.4);
            color: var(--sm-primary);
            font-size: 0.7rem;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            backdrop-filter: blur(8px);
        }

        .sm-badge-score {
            position: absolute;
            bottom: 8px;
            left: 8px;
            background: linear-gradient(135deg, #ff2a8d, #8a2be2);
            color: #ffffff;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(255, 42, 141, 0.4);
        }

        .sm-poster-meta {
            padding: 12px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .sm-poster-title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sm-poster-desc {
            font-size: 0.78rem;
            color: var(--sm-text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sm-section-heading {
            font-size: 1.75rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 0.5rem;
            position: relative;
        }

        .sm-section-heading span {
            background: linear-gradient(135deg, #ffffff 40%, var(--sm-primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .sm-section-lead {
            color: var(--sm-text-muted);
            font-size: 0.92rem;
        }

        .sm-rank-num {
            font-size: 1.25rem;
            font-weight: 900;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .sm-rank-1 {
            background: linear-gradient(135deg, #ffd700, #ff8c00);
            color: #070b14;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
        }

        .sm-rank-2 {
            background: linear-gradient(135deg, #e2e8f0, #94a3b8);
            color: #070b14;
        }

        .sm-rank-3 {
            background: linear-gradient(135deg, #d97706, #b45309);
            color: #ffffff;
        }

        .sm-rank-other {
            background: rgba(255, 255, 255, 0.08);
            color: var(--sm-text-muted);
        }

        .sm-accordion .accordion-item {
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid var(--sm-glass-border);
            border-radius: 10px !important;
            margin-bottom: 12px;
            overflow: hidden;
        }

        .sm-accordion .accordion-button {
            background: transparent;
            color: #ffffff;
            font-weight: 600;
            box-shadow: none;
            padding: 16px 20px;
        }

        .sm-accordion .accordion-button:not(.collapsed) {
            background: rgba(0, 210, 255, 0.06);
            color: var(--sm-primary);
        }

        .sm-accordion .accordion-button::after {
            filter: invert(1) brightness(1.5);
        }

        .sm-accordion .accordion-body {
            color: var(--sm-text-muted);
            font-size: 0.9rem;
            line-height: 1.7;
            padding: 16px 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .sm-pagination .page-link {
            background: rgba(15, 23, 42, 0.6);
            border-color: rgba(255, 255, 255, 0.1);
            color: var(--sm-text-muted);
            padding: 8px 16px;
            border-radius: 6px;
            margin: 0 3px;
        }

        .sm-pagination .page-link:hover {
            color: var(--sm-primary);
            border-color: var(--sm-primary);
            background: rgba(0, 210, 255, 0.1);
        }

        .sm-pagination .page-item.active .page-link {
            background: linear-gradient(135deg, var(--sm-primary), var(--sm-primary-deep));
            border-color: transparent;
            color: #ffffff;
            box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
        }

        .sm-footer {
            background: #04070d;
            border-top: 1px solid rgba(0, 210, 255, 0.15);
            padding: 60px 0 24px 0;
            margin-top: 60px;
        }

        .sm-logo {
            font-size: 1.25rem;
            font-weight: 800;
            color: #ffffff;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .sm-footer-title {
            font-size: 0.98rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 18px;
            position: relative;
            padding-left: 10px;
            border-left: 3px solid var(--sm-primary);
        }

        .sm-footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sm-footer-links li {
            margin-bottom: 10px;
        }

        .sm-footer-links a {
            color: var(--sm-text-muted);
            text-decoration: none;
            font-size: 0.88rem;
            transition: all 0.2s ease;
        }

        .sm-footer-links a:hover {
            color: var(--sm-primary);
            padding-left: 4px;
        }

        .sm-badge-pill {
            font-size: 0.72rem;
            background: rgba(0, 210, 255, 0.1);
            color: var(--sm-primary);
            border: 1px solid rgba(0, 210, 255, 0.25);
            padding: 2px 8px;
            border-radius: 20px;
        }

/* roulang page: category4 */
:root {
      --sm-bg-dark: #070b14;
      --sm-bg-surface: #0c1222;
      --sm-primary: #00d2ff;
      --sm-primary-deep: #0066ff;
      --sm-accent-neon: #8a2be2;
      --sm-accent-pink: #ff2a8d;
      --sm-glass-bg: rgba(15, 23, 42, 0.72);
      --sm-glass-border: rgba(255, 255, 255, 0.08);
      --sm-glass-hover-border: rgba(0, 210, 255, 0.35);
      --sm-text-main: #ffffff;
      --sm-text-muted: #94a3b8;
      --sm-text-dim: #64748b;
      --sm-card-radius: 14px;
      --sm-btn-radius: 8px;
      --sm-glow-shadow: 0 0 24px rgba(0, 210, 255, 0.28);
    }
    body {
      background-color: var(--sm-bg-dark);
      background-image: radial-gradient(circle at 50% 0%, #111d38 0%, #070b14 75%);
      color: var(--sm-text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
      overflow-x: hidden;
    }
    /* 顶部工具栏导航 */
    .sm-toolbar-header {
      background: rgba(7, 11, 20, 0.88);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(0, 210, 255, 0.15);
      position: sticky;
      top: 0;
      z-index: 1040;
      padding: 10px 0;
      transition: all 0.3s ease;
    }
    .sm-brand-logo {
      font-size: 1.35rem;
      font-weight: 800;
      letter-spacing: 0.5px;
      color: #ffffff;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .sm-logo-icon {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent-neon));
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 12px rgba(0, 210, 255, 0.5);
    }
    .sm-logo-icon svg {
      fill: #ffffff;
      width: 18px;
      height: 18px;
    }
    .sm-nav-link {
      color: var(--sm-text-muted);
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 500;
      padding: 8px 14px;
      border-radius: 6px;
      transition: all 0.25s ease;
    }
    .sm-nav-link:hover, .sm-nav-link.active {
      color: var(--sm-primary);
      background: rgba(0, 210, 255, 0.08);
    }
    .sm-status-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
      position: relative;
    }
    .sm-status-indicator.ready {
      background: #00ffaa;
      box-shadow: 0 0 10px #00ffaa;
    }
    .sm-status-indicator.ready::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      top: -4px;
      left: -4px;
      border-radius: 50%;
      border: 1px solid rgba(0, 255, 170, 0.4);
      animation: pulse 2s infinite ease-out;
    }
    @keyframes pulse {
      0% { transform: scale(0.6); opacity: 1; }
      100% { transform: scale(1.6); opacity: 0; }
    }

    /* 按钮与卡片样式 */
    .btn-glow-primary {
      background: linear-gradient(135deg, var(--sm-primary), var(--sm-primary-deep));
      color: #ffffff !important;
      font-weight: 600;
      font-size: 0.92rem;
      padding: 8px 20px;
      border-radius: var(--sm-btn-radius);
      border: none;
      box-shadow: 0 0 16px rgba(0, 210, 255, 0.35);
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .btn-glow-primary:hover {
      box-shadow: 0 0 24px rgba(0, 210, 255, 0.65);
      transform: translateY(-2px);
      color: #ffffff;
    }
    .btn-outline-glass {
      background: rgba(255, 255, 255, 0.04);
      color: var(--sm-text-main);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: var(--sm-btn-radius);
      padding: 8px 18px;
      font-size: 0.92rem;
      transition: all 0.25s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
    }
    .btn-outline-glass:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--sm-primary);
      border-color: var(--sm-primary);
    }
    .sm-glass-card {
      background: var(--sm-glass-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--sm-glass-border);
      border-radius: var(--sm-card-radius);
      box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
    }

    /* 分类筛选器与标签条 */
    .filter-chip-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
    }
    .filter-chip-label {
      color: var(--sm-text-dim);
      font-size: 0.85rem;
      min-width: 60px;
      font-weight: 600;
    }
    .filter-chip {
      color: var(--sm-text-muted);
      font-size: 0.82rem;
      padding: 4px 12px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .filter-chip:hover {
      color: var(--sm-primary);
      border-color: rgba(0, 210, 255, 0.4);
      background: rgba(0, 210, 255, 0.06);
    }
    .filter-chip.active {
      color: #ffffff;
      background: linear-gradient(135deg, rgba(0, 210, 255, 0.25), rgba(0, 102, 255, 0.35));
      border-color: var(--sm-primary);
      box-shadow: 0 0 10px rgba(0, 210, 255, 0.25);
    }

    /* 影视海报卡片网格 */
    .sm-poster-card {
      background: rgba(15, 23, 42, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .sm-poster-card:hover {
      transform: translateY(-6px);
      border-color: var(--sm-primary);
      box-shadow: 0 16px 30px -8px rgba(0, 210, 255, 0.25);
    }
    .sm-poster-thumb {
      position: relative;
      width: 100%;
      padding-top: 140%;
      overflow: hidden;
      background-color: #151f32;
    }
    .sm-poster-thumb img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .sm-poster-card:hover .sm-poster-thumb img {
      transform: scale(1.06);
    }
    .sm-badge-quality {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(7, 11, 20, 0.75);
      border: 1px solid rgba(0, 210, 255, 0.4);
      color: var(--sm-primary);
      font-size: 0.7rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      backdrop-filter: blur(8px);
    }
    .sm-badge-score {
      position: absolute;
      bottom: 8px;
      left: 8px;
      background: linear-gradient(135deg, #ff2a8d, #8a2be2);
      color: #ffffff;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(255, 42, 141, 0.4);
    }
    .sm-poster-info {
      padding: 12px 14px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .sm-poster-title {
      font-size: 0.95rem;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sm-poster-desc {
      font-size: 0.78rem;
      color: var(--sm-text-muted);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
      margin-bottom: 6px;
    }
    .sm-poster-meta {
      font-size: 0.72rem;
      color: var(--sm-text-dim);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* 排行榜单项 */
    .sm-rank-badge {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 0.9rem;
    }
    .sm-rank-1 { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #000; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
    .sm-rank-2 { background: linear-gradient(135deg, #e0e0e0, #9e9e9e); color: #000; }
    .sm-rank-3 { background: linear-gradient(135deg, #cd7f32, #8b4513); color: #fff; }
    .sm-rank-normal { background: rgba(255, 255, 255, 0.08); color: var(--sm-text-dim); }

    /* 专题大卡 */
    .sm-topic-card {
      position: relative;
      border-radius: var(--sm-card-radius);
      overflow: hidden;
      height: 240px;
      border: 1px solid var(--sm-glass-border);
      transition: all 0.3s ease;
    }
    .sm-topic-card:hover {
      border-color: var(--sm-primary);
      transform: translateY(-4px);
    }
    .sm-topic-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
    .sm-topic-card:hover img {
      transform: scale(1.05);
    }
    .sm-topic-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(7, 11, 20, 0.95) 10%, rgba(7, 11, 20, 0.35) 60%, transparent 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 20px;
    }

    /* 手风琴常见问答 */
    .accordion-item {
      background: var(--sm-glass-bg);
      border: 1px solid var(--sm-glass-border);
      border-radius: 10px !important;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .accordion-button {
      background: transparent;
      color: var(--sm-text-main);
      font-weight: 600;
      font-size: 0.98rem;
      box-shadow: none !important;
    }
    .accordion-button:not(.collapsed) {
      background: rgba(0, 210, 255, 0.08);
      color: var(--sm-primary);
    }
    .accordion-button::after {
      filter: invert(1);
    }
    .accordion-body {
      color: var(--sm-text-muted);
      font-size: 0.9rem;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* 页脚与品牌徽章 */
    .sm-footer {
      background: #05080f;
      border-top: 1px solid rgba(0, 210, 255, 0.12);
      padding: 60px 0 28px;
    }
    .sm-logo {
      font-size: 1.35rem;
      font-weight: 800;
      color: #ffffff;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .sm-logo-badge {
      background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent-neon));
      color: #ffffff;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .sm-footer-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 16px;
    }
    .sm-footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .sm-footer-links li {
      margin-bottom: 8px;
    }
    .sm-footer-links a {
      color: var(--sm-text-muted);
      text-decoration: none;
      font-size: 0.88rem;
      transition: color 0.2s ease;
    }
    .sm-footer-links a:hover {
      color: var(--sm-primary);
    }

/* roulang page: category5 */
:root {
      --sm-bg-dark: #070b14;
      --sm-bg-surface: #0c1222;
      --sm-primary: #00d2ff;
      --sm-primary-deep: #0066ff;
      --sm-accent-neon: #8a2be2;
      --sm-accent-pink: #ff2a8d;
      --sm-gold: #ffb703;
      --sm-glass-bg: rgba(15, 23, 42, 0.72);
      --sm-glass-border: rgba(255, 255, 255, 0.08);
      --sm-glass-hover-border: rgba(0, 210, 255, 0.35);
      --sm-text-main: #ffffff;
      --sm-text-muted: #94a3b8;
      --sm-text-dim: #64748b;
      --sm-card-radius: 14px;
      --sm-btn-radius: 8px;
      --sm-glow-shadow: 0 0 24px rgba(0, 210, 255, 0.28);
    }
    body {
      background-color: var(--sm-bg-dark);
      background-image: radial-gradient(circle at 50% 0%, #111d38 0%, #070b14 75%);
      color: var(--sm-text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
      overflow-x: hidden;
    }
    a {
      text-decoration: none;
      transition: all 0.25s ease;
    }

    /* 顶部工具栏导航 */
    .sm-toolbar-header {
      background: rgba(7, 11, 20, 0.88);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(0, 210, 255, 0.15);
      position: sticky;
      top: 0;
      z-index: 1040;
      padding: 10px 0;
    }
    .sm-brand-logo {
      font-size: 1.35rem;
      font-weight: 800;
      letter-spacing: 0.5px;
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .sm-logo-icon {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent-neon));
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 12px rgba(0, 210, 255, 0.5);
    }
    .sm-logo-icon svg {
      fill: #ffffff;
      width: 18px;
      height: 18px;
    }
    .sm-nav-link {
      color: var(--sm-text-muted);
      font-size: 0.95rem;
      font-weight: 500;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .sm-nav-link:hover, .sm-nav-link.active {
      color: var(--sm-primary);
      background: rgba(0, 210, 255, 0.08);
    }
    .sm-status-indicator {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #00ff88;
      box-shadow: 0 0 8px #00ff88;
      animation: pulse-green 2s infinite;
    }
    @keyframes pulse-green {
      0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); }
      70% { box-shadow: 0 0 0 8px rgba(0, 255, 136, 0); }
      100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
    }

    /* 按钮与公共卡片 */
    .btn-glow-primary {
      background: linear-gradient(135deg, var(--sm-primary), var(--sm-primary-deep));
      color: #ffffff !important;
      font-weight: 600;
      font-size: 0.92rem;
      padding: 9px 22px;
      border-radius: var(--sm-btn-radius);
      border: none;
      box-shadow: 0 0 16px rgba(0, 210, 255, 0.35);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .btn-glow-primary:hover {
      box-shadow: 0 0 26px rgba(0, 210, 255, 0.65);
      transform: translateY(-2px);
      color: #ffffff;
    }
    .btn-outline-glass {
      background: rgba(255, 255, 255, 0.04);
      color: var(--sm-text-main);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: var(--sm-btn-radius);
      padding: 8px 18px;
      font-size: 0.92rem;
      display: inline-flex;
      align-items: center;
    }
    .btn-outline-glass:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--sm-primary);
      border-color: var(--sm-primary);
    }
    .sm-glass-box {
      background: var(--sm-glass-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--sm-glass-border);
      border-radius: var(--sm-card-radius);
    }

    /* 筛选器样式 */
    .filter-group-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
    }
    .filter-label {
      color: var(--sm-text-dim);
      font-size: 0.85rem;
      min-width: 72px;
      font-weight: 600;
    }
    .filter-badge {
      font-size: 0.82rem;
      padding: 4px 12px;
      border-radius: 20px;
      color: var(--sm-text-muted);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .filter-badge:hover, .filter-badge.active {
      color: #ffffff;
      background: rgba(0, 210, 255, 0.15);
      border-color: var(--sm-primary);
      box-shadow: 0 0 10px rgba(0, 210, 255, 0.25);
    }

    /* 影视网格卡片 */
    .sm-poster-card {
      background: rgba(15, 23, 42, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .sm-poster-card:hover {
      transform: translateY(-6px);
      border-color: var(--sm-primary);
      box-shadow: 0 16px 30px -8px rgba(0, 210, 255, 0.25);
    }
    .sm-poster-thumb {
      position: relative;
      width: 100%;
      padding-top: 140%;
      overflow: hidden;
      background: #0d1629;
    }
    .sm-poster-thumb img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .sm-poster-card:hover .sm-poster-thumb img {
      transform: scale(1.06);
    }
    .sm-badge-quality {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(7, 11, 20, 0.85);
      border: 1px solid rgba(0, 210, 255, 0.6);
      color: var(--sm-primary);
      font-size: 0.7rem;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 4px;
      backdrop-filter: blur(8px);
      letter-spacing: 0.5px;
    }
    .sm-badge-hdr {
      position: absolute;
      top: 8px;
      left: 8px;
      background: linear-gradient(135deg, var(--sm-accent-pink), var(--sm-accent-neon));
      color: #ffffff;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(255, 42, 141, 0.4);
    }
    .sm-badge-score {
      position: absolute;
      bottom: 8px;
      left: 8px;
      background: rgba(7, 11, 20, 0.85);
      color: var(--sm-gold);
      border: 1px solid rgba(255, 183, 3, 0.4);
      font-size: 0.75rem;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 4px;
    }
    .sm-poster-body {
      padding: 12px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .sm-poster-title {
      font-size: 0.95rem;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sm-poster-meta {
      font-size: 0.78rem;
      color: var(--sm-text-dim);
    }

    /* 排行榜卡片 */
    .top-rank-card {
      background: rgba(15, 23, 42, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 12px;
      padding: 12px;
      display: flex;
      align-items: center;
      gap: 14px;
      transition: all 0.25s ease;
    }
    .top-rank-card:hover {
      background: rgba(20, 32, 60, 0.65);
      border-color: rgba(0, 210, 255, 0.3);
      transform: translateX(4px);
    }
    .rank-number {
      font-size: 1.4rem;
      font-weight: 900;
      width: 32px;
      text-align: center;
      font-style: italic;
      color: var(--sm-text-dim);
    }
    .rank-top1 { color: #ff3366; text-shadow: 0 0 10px rgba(255, 51, 102, 0.5); }
    .rank-top2 { color: #ffb703; text-shadow: 0 0 10px rgba(255, 183, 3, 0.5); }
    .rank-top3 { color: var(--sm-primary); text-shadow: 0 0 10px rgba(0, 210, 255, 0.5); }

    /* 专题推荐卡 */
    .topic-card {
      position: relative;
      border-radius: var(--sm-card-radius);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: #0b1324;
      transition: all 0.3s ease;
    }
    .topic-card:hover {
      border-color: var(--sm-primary);
      box-shadow: 0 12px 28px -6px rgba(0, 210, 255, 0.3);
      transform: translateY(-4px);
    }
    .topic-img-wrapper {
      position: relative;
      height: 180px;
      overflow: hidden;
    }
    .topic-img-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .topic-card:hover .topic-img-wrapper img {
      transform: scale(1.05);
    }
    .topic-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, #0b1324 15%, transparent 90%);
    }

    /* FAQ 手风琴深度覆盖 */
    .accordion-item {
      background: rgba(15, 23, 42, 0.65) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-radius: 10px !important;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .accordion-button {
      background: transparent !important;
      color: #ffffff !important;
      font-weight: 600;
      box-shadow: none !important;
      padding: 16px 20px;
    }
    .accordion-button::after {
      filter: invert(1) brightness(1.5);
    }
    .accordion-button:not(.collapsed) {
      color: var(--sm-primary) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .accordion-body {
      color: var(--sm-text-muted);
      font-size: 0.92rem;
      line-height: 1.7;
      padding: 16px 20px;
    }

    /* 分页器 */
    .sm-pagination .page-link {
      background: rgba(15, 23, 42, 0.8);
      border-color: rgba(255, 255, 255, 0.1);
      color: var(--sm-text-muted);
      border-radius: 8px;
      margin: 0 4px;
      font-size: 0.9rem;
      padding: 8px 14px;
    }
    .sm-pagination .page-link:hover {
      background: rgba(0, 210, 255, 0.15);
      border-color: var(--sm-primary);
      color: #ffffff;
    }
    .sm-pagination .page-item.active .page-link {
      background: linear-gradient(135deg, var(--sm-primary), var(--sm-primary-deep));
      border-color: var(--sm-primary);
      color: #ffffff;
      box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
    }

    /* 页脚 */
    .sm-footer {
      background: #04070d;
      border-top: 1px solid rgba(0, 210, 255, 0.15);
      padding: 60px 0 30px;
      position: relative;
    }
    .sm-logo {
      font-size: 1.35rem;
      font-weight: 800;
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .sm-logo-badge {
      background: linear-gradient(135deg, var(--sm-primary), var(--sm-primary-deep));
      color: #ffffff;
      font-size: 0.72rem;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 4px;
    }
    .sm-footer-title {
      color: #ffffff;
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 18px;
      position: relative;
      padding-left: 10px;
    }
    .sm-footer-title::before {
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      bottom: 4px;
      width: 3px;
      background: var(--sm-primary);
      border-radius: 2px;
    }
    .sm-footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .sm-footer-links li {
      margin-bottom: 10px;
    }
    .sm-footer-links a {
      color: var(--sm-text-muted);
      font-size: 0.88rem;
    }
    .sm-footer-links a:hover {
      color: var(--sm-primary);
      padding-left: 4px;
    }
    .sm-footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding-top: 25px;
      margin-top: 45px;
    }

    /* 响应式微调 */
    @media (max-width: 991px) {
      .filter-label {
        width: 100%;
        margin-bottom: 4px;
      }
    }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}