/* ============================================================
   《元素主宰 · 反应之弈》Demo 试玩页样式
   复用 element.css 的下载卡片 / 版本历史组件，只做紧凑排版
   ============================================================ */

.dm-body {
    --text-muted: #667085;
}
.dark-mode .dm-body, .dark-mode.dm-body {
    --text-muted: #9aa1b8;
}

/* 顶部渐变光 */
body.dm-body {
    background-color: var(--bg);
    background-image:
        radial-gradient(900px 420px at 50% -10%, rgba(74, 144, 226, 0.16), transparent 62%),
        linear-gradient(rgba(74, 144, 226, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 144, 226, 0.05) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
    background-attachment: fixed;
}
body.dm-body.bg-flow {
    background-color: var(--bg);
    background-image:
        radial-gradient(900px 420px at 50% -10%, rgba(74, 144, 226, 0.16), transparent 62%),
        linear-gradient(rgba(74, 144, 226, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 144, 226, 0.05) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
    background-attachment: fixed;
    animation: none;
}

/* 主体 */
.dm-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 22px 40px;
    animation: elFadeUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.dm-wrap[hidden] { display: none; }

/* 门禁 */
.dm-gate { min-height: 72vh; }

/* 页头 */
.dm-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    padding: 20px 22px; margin-bottom: 22px;
    border-radius: var(--radius-lg);
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.dm-title-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dm-logo {
    width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--border); background: var(--surface-hover);
    display: flex; align-items: center; justify-content: center;
}
.dm-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-title {
    font-size: 1.24rem; line-height: 1.35;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dm-badge {
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
    padding: 2px 9px; border-radius: 999px;
    background: var(--primary-light); color: var(--primary);
    border: 1px solid var(--primary-border);
}
.dm-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }
.dm-head-meta {
    display: flex; gap: 8px 22px; flex-wrap: wrap;
    font-size: 0.82rem; color: var(--text-muted);
}
.dm-head-meta b { color: var(--text); font-family: var(--font-mono); }

/* 版本历史 */
.dm-history { margin-top: 34px; }
.dm-history-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.dm-history-head h2 { font-size: 1.04rem; }

/* 页脚 */
.dm-footer {
    margin-top: 40px; padding-top: 18px;
    border-top: 1px solid var(--border-light);
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    font-size: 0.78rem; color: var(--text-muted);
}
.dm-footer a { color: var(--text-muted); text-decoration: none; }
.dm-footer a:hover { color: var(--primary); text-decoration: underline; }

@media (max-width: 620px) {
    .dm-wrap { padding: 18px 16px 32px; }
    .dm-head { padding: 16px; }
    .dm-title { font-size: 1.08rem; }
    .dm-head-meta { width: 100%; }
}

/* ---- 移动端导航：站点通用导航在窄屏会溢出，这里针对 Demo 页收窄 ---- */
@media (max-width: 560px) {
    body.dm-body .nav-bar { padding: 0 12px; gap: 8px; }
    body.dm-body .nav-brand small { display: none; }
    body.dm-body .nav-brand span { font-size: 0.95rem; }
    body.dm-body .nav-actions { gap: 4px; }
    /* 主题按钮只留图标 */
    body.dm-body .nav-btn { font-size: 0; gap: 0; padding: 7px 9px; }
    body.dm-body .nav-btn svg,
    body.dm-body .nav-btn .icon { font-size: 1rem; width: 18px; height: 18px; }
    /* 用户徽章只留头像，避免长昵称撑宽 */
    body.dm-body .user-badge { padding: 3px; gap: 0; }
    body.dm-body .user-badge > span { display: none; }
    body.dm-body .user-avatar-mini { width: 26px; height: 26px; font-size: 0.72rem; }
    body.dm-body .dm-head-meta { font-size: 0.78rem; }
}