/* 🐉 龍魂系统 · 基础样式 */
/* DNA: #龍芯⚡️丙午·癸未·乙酉·坤卦-BASE-CSS-UID9622 */
/* License: MulanPSL v2 (https://license.coscl.org.cn/MulanPSL2) */

:root {
    --lh-gold: #d4af37;
    --lh-gold-dim: rgba(212, 175, 55, 0.2);
    --lh-gold-hover: rgba(212, 175, 55, 0.35);
    --lh-bg: #0a0a12;
    --lh-bg-deep: #06060c;
    --lh-card: #12121f;
    --lh-card-hover: #18182a;
    --lh-input: #1a1a2e;
    --lh-text: #e8e6e3;
    --lh-text-dim: #a8a6a3;
    --lh-text-muted: #6b6975;
    --lh-border: #2a2a3e;
    --lh-border-light: #363650;
    --lh-green: #4ade80;
    --lh-green-bg: rgba(74, 222, 128, 0.12);
    --lh-yellow: #fbbf24;
    --lh-yellow-bg: rgba(251, 191, 36, 0.12);
    --lh-red: #f87171;
    --lh-red-bg: rgba(248, 113, 113, 0.12);
    --lh-radius: 8px;
    --lh-radius-lg: 12px;
    --lh-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ── Reset ── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "MiSans", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--lh-bg);
    color: var(--lh-text);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--lh-gold);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover { color: #e8c547; }

/* ── 布局 ── */
.lh-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.lh-container-sm { max-width: 800px; margin: 0 auto; padding: 0 24px; }

/* ── 卡片 ── */
.lh-card {
    background: var(--lh-card);
    border-radius: var(--lh-radius-lg);
    padding: 24px;
    border: 1px solid var(--lh-border);
    transition: border-color 0.2s, background 0.2s;
}
.lh-card:hover {
    border-color: var(--lh-border-light);
    background: var(--lh-card-hover);
}

/* ── 三色状态卡片 ── */
.lh-card-green {
    border-left: 3px solid var(--lh-green);
    background: linear-gradient(90deg, var(--lh-green-bg), transparent);
}
.lh-card-yellow {
    border-left: 3px solid var(--lh-yellow);
    background: linear-gradient(90deg, var(--lh-yellow-bg), transparent);
}
.lh-card-red {
    border-left: 3px solid var(--lh-red);
    background: linear-gradient(90deg, var(--lh-red-bg), transparent);
}

/* ── 颜色工具 ── */
.lh-gold { color: var(--lh-gold); }
.lh-text-dim { color: var(--lh-text-dim); }
.lh-text-muted { color: var(--lh-text-muted); }
.lh-text-green { color: var(--lh-green); }
.lh-text-yellow { color: var(--lh-yellow); }
.lh-text-red { color: var(--lh-red); }

/* ── 徽章 ── */
.lh-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}
.lh-badge-green { background: var(--lh-green); color: #000; }
.lh-badge-yellow { background: var(--lh-yellow); color: #000; }
.lh-badge-red { background: var(--lh-red); color: #fff; }
.lh-badge-gold { background: var(--lh-gold); color: #000; }

/* ── 按钮 ── */
.lh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: var(--lh-radius);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    outline: none;
}
.lh-btn:focus-visible { box-shadow: 0 0 0 3px var(--lh-gold-dim); }

.lh-btn-primary {
    background: var(--lh-gold);
    color: #0a0a12;
}
.lh-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
}

.lh-btn-secondary {
    background: transparent;
    color: var(--lh-gold);
    border: 1px solid var(--lh-gold-dim);
}
.lh-btn-secondary:hover {
    background: var(--lh-gold-dim);
    border-color: var(--lh-gold);
}

.lh-btn-danger {
    background: var(--lh-red);
    color: #fff;
}
.lh-btn-danger:hover {
    background: #ef4444;
    box-shadow: 0 4px 16px rgba(248, 113, 113, 0.3);
}

.lh-btn-sm { padding: 6px 16px; font-size: 0.85rem; }
.lh-btn-lg { padding: 14px 32px; font-size: 1.1rem; }
.lh-btn-block { width: 100%; justify-content: center; }

/* ── 输入框 ── */
.lh-input {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius);
    background: var(--lh-input);
    color: var(--lh-text);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s;
    outline: none;
}
.lh-input:focus {
    border-color: var(--lh-gold);
    box-shadow: 0 0 0 3px var(--lh-gold-dim);
}
.lh-input::placeholder { color: var(--lh-text-muted); }

/* ── 表格 ── */
.lh-table {
    width: 100%;
    border-collapse: collapse;
}
.lh-table th, .lh-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--lh-border);
}
.lh-table th {
    font-weight: 600;
    color: var(--lh-text-dim);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lh-table tr:hover td { background: var(--lh-gold-dim); }

/* ── 分隔线 ── */
.lh-divider {
    border: none;
    height: 1px;
    background: var(--lh-border);
    margin: 24px 0;
}

/* ── 排版 ── */
.lh-title { font-size: 1.5rem; font-weight: 700; }
.lh-title-lg { font-size: 2rem; font-weight: 800; }
.lh-subtitle { font-size: 0.9rem; color: var(--lh-text-dim); }
.lh-code {
    background: rgba(212, 175, 55, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: "Fira Code", "Cascadia Code", monospace;
    font-size: 0.9em;
    color: var(--lh-gold);
}

/* ── 间距工具 ── */
.lh-mt-1 { margin-top: 8px; }   .lh-mt-2 { margin-top: 16px; }
.lh-mt-3 { margin-top: 24px; }   .lh-mt-4 { margin-top: 32px; }
.lh-mb-1 { margin-bottom: 8px; } .lh-mb-2 { margin-bottom: 16px; }
.lh-mb-3 { margin-bottom: 24px; }.lh-mb-4 { margin-bottom: 32px; }
.lh-gap-1 { gap: 8px; }          .lh-gap-2 { gap: 16px; }
.lh-gap-3 { gap: 24px; }

/* ── Flex 工具 ── */
.lh-flex { display: flex; }
.lh-flex-col { flex-direction: column; }
.lh-flex-center { align-items: center; justify-content: center; }
.lh-flex-between { align-items: center; justify-content: space-between; }
.lh-flex-wrap { flex-wrap: wrap; }

/* ── Grid ── */
.lh-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.lh-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lh-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 768px) {
    .lh-grid-2, .lh-grid-3, .lh-grid-4 { grid-template-columns: 1fr; }
}

/* ── 加载动画 ── */
@keyframes lh-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.lh-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lh-loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lh-gold);
    animation: lh-pulse 1.4s ease-in-out infinite;
}
.lh-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.lh-loading-dot:nth-child(3) { animation-delay: 0.4s; }

/* ── 响应式 ── */
@media (max-width: 600px) {
    .lh-container { padding: 0 16px; }
    .lh-card { padding: 16px; border-radius: var(--lh-radius); }
    .lh-btn { padding: 8px 16px; font-size: 0.9rem; }
    .lh-title { font-size: 1.25rem; }
    .lh-title-lg { font-size: 1.5rem; }
}