/* ============================================================
   NavXD — single-navxd-model.php 样式 (.md-* prefix)
   · 对齐 home.css 视觉母题（坐标纸网格 + radial 光晕由 body 提供）
   · 全量走 home.css token，自动获得 dark/light 双态
   · 仅补 hero / section / card 组件层
   ============================================================ */

/* light 模式加强发丝线可见度（与其它组件 CSS 保持一致） */
[data-theme="light"] body { --hairline: rgba(15,16,20,.10); }

/* ─────────────────────────────────────────────
   Page wrapper
   ───────────────────────────────────────────── */
.md-page {
    position: relative;
    z-index: 2;                       /* 浮于 body::before 网格之上 */
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px var(--gutter, 24px) 96px;
    color: var(--text);
    font-family: var(--sans, system-ui, sans-serif);
    line-height: 1.7;
}

.md-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 20px;
    text-decoration: none;
    transition: color .18s;
}
.md-back:hover { color: var(--signal); }

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.md-hero {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 32px 36px;
    margin-bottom: 40px;
    box-shadow: 0 1px 0 var(--hairline), 0 14px 32px rgba(0,0,0,.12);
    overflow: hidden;
}

/* 左侧 signal 竖线 — 与首页 section-accent 同语义 */
.md-hero::after {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: var(--signal);
    border-radius: 2px;
}

/* 右上 radial 光晕 — 与 body::after 全局光晕呼应 */
.md-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 260px at 100% -40px,
            var(--signal-soft, rgba(0,229,176,.08)),
            transparent 60%),
        radial-gradient(420px 200px at -10% 110%,
            var(--indigo-soft, rgba(91,108,255,.06)),
            transparent 60%);
    pointer-events: none;
}
.md-hero > * { position: relative; z-index: 1; }

[data-theme="light"] .md-hero {
    box-shadow: 0 1px 0 var(--hairline), 0 10px 24px rgba(15,16,20,.08);
}

/* Folio 行：AI · MODEL / 分类 */
.md-folio {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.md-folio b {
    color: var(--signal);
    font-weight: 500;
    letter-spacing: .18em;
}

/* 主标题 */
.md-title {
    font-family: var(--serif, "Noto Serif SC", serif);
    font-weight: 500;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -.018em;
    margin: 0 0 14px;
    color: var(--text);
}

/* Hero meta 徽章行 */
.md-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 14px;
    font-size: 13px;
}
.md-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--surface-2, rgba(255,255,255,.03));
    color: var(--text-2);
    font-size: 12px;
    font-family: var(--mono, ui-monospace, monospace);
    letter-spacing: .02em;
}
.md-badge-level { font-weight: 600; letter-spacing: .04em; }

/* 描述 & 备注 */
.md-desc {
    margin-top: 18px;
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.75;
    max-width: 720px;
}
.md-notes {
    margin-top: 18px;
    padding: 14px 18px;
    background: var(--surface-2, rgba(255,255,255,.02));
    border-left: 2px solid var(--signal, var(--indigo));
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.75;
}

/* CTA 按钮 */
.md-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
.md-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    font-size: 13px;
    font-family: var(--sans);
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid var(--rule);
    background: var(--surface-2);
    color: var(--text);
    transition: all .18s;
}
.md-btn:hover {
    border-color: var(--signal);
    color: var(--signal);
}
.md-btn-primary {
    background: var(--indigo);
    color: #fff;
    border-color: var(--indigo);
}
.md-btn-primary:hover {
    background: color-mix(in srgb, var(--indigo) 82%, #000);
    border-color: color-mix(in srgb, var(--indigo) 82%, #000);
    color: #fff;
}

/* ─────────────────────────────────────────────
   SECTION
   ───────────────────────────────────────────── */
.md-section {
    margin-top: 56px;
    position: relative;
}
.md-section-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 24px;
}
/* signal 80px accent 线 — 与首页 .section__head::before 同款 */
.md-section-head::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 80px;
    height: 1px;
    background: var(--signal);
}
.md-section-head h2 {
    font-family: var(--serif, "Noto Serif SC", serif);
    font-weight: 500;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.2;
    margin: 0;
    color: var(--text);
    letter-spacing: -.012em;
}
.md-section-head .md-count {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: .12em;
    text-transform: uppercase;
    flex-shrink: 0;
    padding-bottom: 4px;
}

/* ─────────────────────────────────────────────
   GRID + CARDS
   ───────────────────────────────────────────── */
.md-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.md-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    transition: transform .2s cubic-bezier(.2,.7,.2,1),
                border-color .2s cubic-bezier(.2,.7,.2,1),
                box-shadow .2s cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
}
.md-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: transparent;
    transition: background .2s;
}
.md-card:hover {
    border-color: var(--rule-2, var(--rule));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--hairline), 0 1px 0 var(--hairline);
}
.md-card:hover::before { background: var(--signal); }

.md-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    letter-spacing: -.005em;
}
.md-card-sub {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.55;
}
.md-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    font-size: 10px;
    font-family: var(--mono, ui-monospace, monospace);
    letter-spacing: .04em;
    color: var(--text-3);
}
.md-card-meta span {
    padding: 2px 8px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--surface-2, rgba(255,255,255,.03));
}

/* ─────────────────────────────────────────────
   EMPTY STATE
   ───────────────────────────────────────────── */
.md-empty {
    padding: 36px 20px;
    background: var(--surface-2, var(--surface));
    border: 1px dashed var(--rule);
    border-radius: 12px;
    color: var(--text-3);
    text-align: center;
    font-size: 13px;
    font-family: var(--mono, ui-monospace, monospace);
    letter-spacing: .03em;
}

/* ─────────────────────────────────────────────
   Responsive — mobile
   ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .md-page    { padding: 20px 16px 72px; }
    .md-hero    { padding: 24px 24px 28px; }
    .md-section { margin-top: 44px; }
    .md-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .md-grid {
        grid-template-columns: 1fr;
    }
}