/* ==========================================
   BG7PKD 火腿展示站 · 自定义样式
   ========================================== */

/* ── 深色模式（默认） ── */
:root {
    --bg-primary: #0f172a;
    --bg-card: #1e293b;
    --bg-card-hover: #1e293b;
    --bg-nav: rgba(30, 41, 59, 0.8);
    --bg-input: #334155;
    --bg-input-border: #475569;
    --bg-table-head: rgba(51, 65, 85, 0.5);
    --bg-badge: #334155;
    --bg-footer: #1e293b;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-accent: #06b6d4;
    --text-gold: #f59e0b;
    --border-color: #334155;
    --border-card: #334155;
    --shadow-card: 0 4px 20px rgba(6, 182, 212, 0.15);
    --gradient-card: linear-gradient(to right, #1e293b, rgba(30, 41, 59, 0.5));
}

/* ── 明亮模式 ── */
html.light {
    --bg-primary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-nav: rgba(255, 255, 255, 0.9);
    --bg-input: #f1f5f9;
    --bg-input-border: #cbd5e1;
    --bg-table-head: #f1f5f9;
    --bg-badge: #e2e8f0;
    --bg-footer: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-accent: #0891b2;
    --text-gold: #d97706;
    --border-color: #e2e8f0;
    --border-card: #e2e8f0;
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --gradient-card: linear-gradient(to right, #ffffff, #f8fafc);
}

/* ── 全局颜色覆盖 ── */
html.light .bg-ham-bg,
html.light .bg-slate-900 { background-color: var(--bg-primary) !important; }
html.light .bg-ham-card,
html.light .bg-slate-800 { background-color: var(--bg-card) !important; }
html.light .bg-slate-800\/80 { background-color: rgba(255,255,255,0.9) !important; }
html.light .bg-slate-800\/60 { background-color: rgba(248,250,252,0.6) !important; }
html.light .bg-slate-700 { background-color: #f1f5f9 !important; color: #1e293b !important; }
html.light .bg-slate-700\/50 { background-color: rgba(241,245,249,0.5) !important; }
html.light .bg-slate-600 { background-color: #e2e8f0 !important; color: #1e293b !important; }
html.light .bg-slate-500 { background-color: #cbd5e1 !important; }
html.light .text-slate-200 { color: var(--text-primary) !important; }
html.light .text-slate-300 { color: var(--text-secondary) !important; }
html.light .text-slate-400 { color: var(--text-muted) !important; }
html.light .text-slate-500 { color: #94a3b8 !important; }
html.light .text-slate-600 { color: #64748b !important; }
html.light .text-white { color: var(--text-primary) !important; }
html.light .text-ham-accent { color: var(--text-accent) !important; }
html.light .text-ham-gold { color: var(--text-gold) !important; }
html.light .text-cyan-400 { color: #0891b2 !important; }
html.light .text-green-400 { color: #059669 !important; }
html.light .text-purple-400 { color: #7c3aed !important; }
html.light .text-amber-400 { color: #d97706 !important; }
html.light .text-red-400 { color: #dc2626 !important; }
html.light .text-green-500 { color: #16a34a !important; }
html.light .border-slate-700 { border-color: var(--border-color) !important; }
html.light .border-slate-600 { border-color: #cbd5e1 !important; }
html.light .divide-slate-700\/50 > * { border-color: rgba(226,232,240,0.5) !important; }
html.light .from-slate-800 { --tw-gradient-from: #ffffff !important; }
html.light .to-slate-800\/50 { --tw-gradient-to: rgba(248,250,252,0.5) !important; }
html.light .hover\:bg-slate-700:hover { background-color: #e2e8f0 !important; color: #1e293b !important; }
html.light .hover\:bg-slate-700\/30:hover { background-color: rgba(226,232,240,0.5) !important; }
html.light .hover\:bg-slate-600:hover { background-color: #cbd5e1 !important; }
html.light .hover\:text-white:hover { color: #0f172a !important; }
html.light .hover\:text-ham-accent:hover { color: var(--text-accent) !important; }
html.light .hover\:text-cyan-400:hover { color: #0891b2 !important; }
html.light .hover\:bg-cyan-400:hover { background-color: #06b6d4 !important; }
html.light .bg-cyan-600 { background-color: #0891b2 !important; }
html.light .bg-ham-accent { background-color: #0891b2 !important; color: #fff !important; }
html.light .bg-ham-accent\/20 { background-color: rgba(8,145,178,0.15) !important; }
html.light .bg-purple-400\/20 { background-color: rgba(124,58,237,0.1) !important; }
html.light .text-purple-300 { color: #7c3aed !important; }
html.light .bg-green-400\/10 { background-color: rgba(5,150,105,0.1) !important; }
html.light .bg-red-400\/10 { background-color: rgba(220,38,38,0.1) !important; }
html.light .border-ham-accent\/30 { border-color: rgba(8,145,178,0.3) !important; }
html.light .border-green-400\/30 { border-color: rgba(5,150,105,0.3) !important; }
html.light .border-red-400\/30 { border-color: rgba(220,38,38,0.3) !important; }
html.light .bg-green-500 { background-color: #16a34a !important; }
html.light .hover\:bg-green-400:hover { background-color: #22c55e !important; }
html.light .bg-green-500\/20 { background-color: rgba(22,163,74,0.15) !important; }
html.light .bg-green-500\/80 { background-color: rgba(22,163,74,0.8) !important; }
html.light .bg-white { background-color: #fff !important; }
html.light .from-ham-card { --tw-gradient-from: #ffffff !important; }

/* ── 输入框 ── */
html.light input, html.light select, html.light textarea {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}
html.light input::placeholder, html.light textarea::placeholder { color: #94a3b8 !important; }
html.light input:focus, html.light select:focus, html.light textarea:focus {
    border-color: #0891b2 !important;
}
html.light .file\:bg-slate-700::file-selector-button { background-color: #e2e8f0 !important; color: #1e293b !important; }
html.light .hover\:file\:bg-slate-600:hover::file-selector-button { background-color: #cbd5e1 !important; }

/* ── 导航 ── */
html.light nav { background-color: rgba(255,255,255,0.9) !important; backdrop-filter: blur(8px); border-bottom-color: #e2e8f0 !important; }
html.light nav a { color: #475569 !important; }
html.light nav a:hover { background-color: #f1f5f9 !important; color: #1e293b !important; }
html.light nav .text-ham-gold { color: #d97706 !important; }

/* ── 模态框背景 ── */
html.light .bg-black\/70 { background-color: rgba(0,0,0,0.4) !important; }

/* ── 基础 ── */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
}

/* ── 摩尔斯电码闪烁动画 ── */
@keyframes morse-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.morse-dot { animation: morse-blink 1.5s ease-in-out infinite; }

/* ── 信号波纹动画 ── */
@keyframes signal-wave { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(1.2); opacity: 0; } }
.signal-ring { animation: signal-wave 2s ease-out infinite; }
.signal-ring:nth-child(2) { animation-delay: 0.5s; }
.signal-ring:nth-child(3) { animation-delay: 1s; }

/* ── 卡片悬停效果 ── */
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

\n/\*\ ──\ QSL\ 卡片网格\ ──\ \*/\n\.qsl-grid\ \{\ columns:\ 4\ 280px;\ column-gap:\ 1rem;\ }\n\.qsl-grid\ >\ \*\ \{\ break-inside:\ avoid;\ margin-bottom:\ 1rem;\ }\n\.qsl-grid\ img\ \{\ width:\ 100%\ !important;\ display:\ block\ !important;\ min-height:\ 80px;\ object-fit:\ cover;\ }\n\.qsl-grid\ \.relative\ \{\ display:\ block;\ }


/* ── 灯箱 ── */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; }

/* ── 管理后台侧边栏 ── */
.admin-sidebar { width: 220px; }
.admin-content { flex: 1; }
html.light .admin-sidebar { background-color: #fff !important; border-right-color: #e2e8f0 !important; }

/* ── 滚动条美化 ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }
html.light ::-webkit-scrollbar-track { background: #e2e8f0; }
html.light ::-webkit-scrollbar-thumb { background: #94a3b8; }
html.light ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ── 脉冲点 ── */
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* ── 明亮切换按钮 ── */
.theme-toggle {
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s ease;
}
.theme-toggle:hover { transform: scale(1.1); }
.theme-toggle:active { transform: scale(0.95); }
/* QSL image fix */
.qsl-grid img {
    width: 100% !important;
    display: block !important;
    min-height: 80px;
}

/* QSL Grid Layout Fix */
.qsl-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 1rem !important;
    columns: unset !important;
}
.qsl-grid > * {
    break-inside: unset !important;
    margin-bottom: 0 !important;
}
.qsl-grid img {
    width: 100% !important;
    display: block !important;
    min-height: 120px !important;
    object-fit: cover !important;
    aspect-ratio: 3/4 !important;
}