﻿/* style block 1 from topic.html */
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: auto;
            background: #030407;
        }
        .responsive-page {
            display: block;
            width: 100%;
            height: 100vh;
            border: 0;
        }
        .responsive-page--mobile {
            display: none;
        }
        .responsive-page--pc {
            display: block;
        }
        @media (max-width: 767px) {
            .responsive-page--mobile {
                display: block;
            }
            .responsive-page--pc {
                display: none;
            }
        }
/* style block 2 from topic.html */
:root {
                    --bg-deep: #030407;
                    --bg-surface: #090B12;
                    --primary-glow: #00FF66;
                    --secondary-glow: #7B2CBF;
                    --text-high: #FFFFFF;
                }
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                }
                body {
                    background-color: var(--bg-deep);
                    font-family: sans-serif;
                    color: var(--text-high);
                }
                .original-main {
                    width: 60%;
                    margin: 30px auto;
                }
                .gallery-head {
                    font-size: 22px;
                    font-weight: 900;
                    margin-bottom: 20px;
                }
                /* 三列紧凑网格 */
                .slant-matrix {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 12px;
                }
                .slant-envelope {
                    height: 140px;
                    background: linear-gradient(135deg, #0E111F 0%, #05060A 100%);
                    border-radius: 12px;
                    padding: 16px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    border: 1px solid rgba(255, 255, 255, 0.03);
                }
                .envelope-title {
                    font-size: 16px;
                    font-weight: 800;
                    line-height: 1.4;
                }
                .envelope-bottom {
                    font-size: 16px;
                    color: #4A5568;
                }
/* style block 3 from topic.html */
:root {
                    --bg-main: #08090D;
                    --bg-card: #12141C;
                    --primary: #00FF66;
                    --secondary: #8A2BE2;
                    --text-main: #FFFFFF;
                    --text-muted: #64748B;
                }
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                }
                body {
                    background-color: var(--bg-main);
                    font-family: -apple-system, sans-serif;
                    color: var(--text-main);
                    padding-bottom: 90px;
                }
                /* 画廊式大专题卡片流 */
                .topic-gallery-container {
                    padding: 16px;
                    display: flex;
                    flex-direction: column;
                    gap: 14px;
                }
                .gallery-card {
                    width: 100%;
                    height: 130px;
                    border-radius: 20px;
                    overflow: hidden;
                    position: relative;
                    background: linear-gradient(45deg, #1C1E2A 0%, #0F111A 100%);
                    border: 1px solid rgba(255, 255, 255, 0.03);
                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
                }
                /* 内部磨砂暗纹背景遮罩替代图 */
                .gallery-abstract-bg {
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    background: radial-gradient(circle at 80% 20%, rgba(138, 43, 226, 0.15) 0%, transparent 50%);
                }
                .gallery-card-content {
                    position: absolute;
                    inset: 0;
                    padding: 18px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    z-index: 2;
                }
                .gallery-top-meta {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .league-capsule-badge {
                    font-size: 10px;
                    background: rgba(0, 255, 102, 0.1);
                    color: var(--primary);
                    padding: 2px 8px;
                    border-radius: 6px;
                    font-weight: bold;
                }
                .gallery-date {
                    font-size: 11px;
                    color: var(--text-muted);
                    font-family: monospace;
                }
                .gallery-main-title {
                    font-size: 16px;
                    font-weight: 800;
                    line-height: 1.4;
                    color: var(--text-main);
                    letter-spacing: 0.5px;
                }
                .gallery-sub-info {
                    font-size: 12px;
                    color: var(--text-muted);
                    display: flex;
                    align-items: center;
                    gap: 6px;
                }
                .gallery-sub-info span {
                    color: rgba(255, 255, 255, 0.4);
                }
/* responsive iframe shell */
html:has(body.responsive-shell),
body.responsive-shell {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
