:root {
      --main: #06b6d4;
      --accent: #ec4899;
      --bg: #0c0a1a;
      --text: #e0f2fe;
      --card-bg: #151329;
      --border: 2px solid #2a2740;
      --shadow: 6px 6px 0px 0px rgba(6, 182, 212, 0.3);
      --shadow-hover: 10px 10px 0px 0px rgba(236, 72, 153, 0.4);
      --radius: 0px; /* 全直角 */
    }
    * { border-radius: var(--radius) !important; }
    body {
      background-color: var(--bg);
      color: var(--text);
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      font-size: 14px;
      letter-spacing: 0.3px;
    }
    h1, h2, h3, h4, h5, h6 { color: #ffffff; font-weight: 800; }

    /* 全直角粗边框 */
    .card, .navbar, .footer, .hero-box, .badge-custom, .steps-card, .list-group-item, .topic-card {
      border: var(--border);
      box-shadow: var(--shadow);
      background-color: var(--card-bg);
    }
    .navbar { background: #0f0d22 !important; border-bottom: 3px solid var(--main); box-shadow: 0 4px 0 var(--accent); }
    .navbar-brand { font-weight: 900; font-size: 1.8rem; color: var(--text) !important; }
    .navbar-brand i { color: var(--accent); margin-right: 6px; }
    .nav-link { color: #b9c8e0 !important; font-weight: 600; }
    .nav-link:hover { color: var(--main) !important; }

    /* Hero 大数字 */
    .hero-box {
      background: linear-gradient(145deg, #131027, #0c0a1a);
      padding: 2rem 1.5rem;
      border-bottom: 4px solid var(--main);
    }
    .big-stat {
      font-size: 4.5rem;
      font-weight: 900;
      line-height: 1;
      color: var(--main);
      text-shadow: 0 0 20px var(--main);
    }
    .stat-label { color: var(--accent); font-weight: 700; letter-spacing: 1px; }

    /* 海报卡片 */
    .poster-card {
      background: var(--card-bg);
      border: 2px solid #33304a;
      transition: transform 0.15s ease-in-out, box-shadow 0.15s, border-color 0.15s;
      cursor: pointer;
      height: 100%;
      display: flex;
      flex-direction: column;
      box-shadow: 4px 4px 0 #00000040;
    }
    .poster-card:hover {
      transform: scale(1.02) translateY(-4px);
      box-shadow: 8px 8px 0 var(--accent);
      border-color: var(--main);
    }
    .poster-card img {
      width: 100%;
      aspect-ratio: 2/3;
      object-fit: cover;
      border-bottom: 2px solid #2a2740;
      display: block;
    }
    .card-body { padding: 0.6rem; background: #12101f; flex: 1; }
    .card-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-meta { font-size: 0.7rem; color: #9aa6c0; display: flex; justify-content: space-between; }
    .quality-badge {
      background: #000; color: var(--main);
      border: 1px solid var(--main);
      padding: 0 4px;
      font-size: 0.6rem;
      font-weight: 800;
      margin-left: 4px;
    }
    .rating { color: #facc15; font-weight: 700; }

    /* 分区标题 */
    .section-title {
      border-left: 8px solid var(--accent);
      padding-left: 0.8rem;
      font-weight: 900;
      font-size: 1.3rem;
      margin: 2rem 0 1rem;
      text-transform: uppercase;
    }
    .section-title i { color: var(--main); margin-right: 8px; }

    /* 横向滚动海报行 */
    .scroll-row {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 12px;
      padding-bottom: 12px;
      scrollbar-width: thin;
      scrollbar-color: var(--accent) #1a1730;
    }
    .scroll-row .poster-card { min-width: 150px; max-width: 160px; }

    /* 网格卡片 */
    .grid-poster {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 16px;
    }

    /* 步骤条/指南 */
    .steps-card {
      padding: 1.5rem;
      border-top: 4px solid var(--main);
      background: #0f0e20;
    }
    .step-item {
      background: #1b1830;
      border: 1px solid #3d3a5c;
      padding: 0.8rem 1rem;
      margin-bottom: 0.8rem;
      font-weight: 500;
      box-shadow: 3px 3px 0 #ec489966;
    }

    /* 弹窗样式(居中卡片) */
    .modal-mask {
      position: fixed; inset: 0; background: rgba(0,0,0,0.75);
      display: none; align-items: center; justify-content: center; z-index: 9999;
    }
    .modal-mask.show { display: flex; }
    .modal-card {
      background: #12101f;
      border: 3px solid var(--main);
      box-shadow: 12px 12px 0 var(--accent);
      width: min(720px, 92%);
      max-height: 88vh;
      overflow-y: auto;
      padding: 1.2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }
    .modal-card img { width: 180px; max-width: 100%; border: 2px solid var(--accent); }
    .modal-info { flex: 1 1 220px; }
    .modal-close {
      background: transparent; color: var(--accent); border: none;
      font-size: 2rem; position: absolute; right: 18px; top: 12px; font-weight: bold; cursor: pointer;
    }
    .modal-wrap { position: relative; }

    /* 回到顶部 */
    #toTop {
      position: fixed; bottom: 30px; right: 30px; z-index: 1000;
      background: var(--accent); color: #fff; border: 3px solid var(--text);
      width: 48px; height: 48px; font-size: 1.5rem; display: none;
      box-shadow: 4px 4px 0 var(--main); cursor: pointer;
    }

    /* 友情链接 */
    .friend-links { border-top: 3px solid var(--main); margin-top: 2rem; padding: 1rem; background: #0e0c1d; }

    /* 滚动渐显 */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }