/**
 * 黑猫时光邮局 · 完整复古样式表
 * 复古未来主义 + 旧信件质感
 * 包含：CRT扫描线、霓虹发光、像素字体、5种信纸主题、媒体卡片样式
 */

/* ========== 基础重置 ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: 'ZCOOL KuaiLe', 'Microsoft YaHei', sans-serif; color: #e0d5c1; background: #1a1a1a; min-height: 100vh; line-height: 1.6; overflow-x: hidden; }
a { color: #d4a574; text-decoration: none; transition: color 0.3s; }
a:hover { color: #f0c784; text-shadow: 0 0 8px rgba(240,199,132,0.5); }
img, video { max-width: 100%; height: auto; }

/* ========== CRT 扫描线 ========== */
.hm-crt-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 2px, transparent 2px, transparent 4px); }
.hm-crt-overlay::after { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.3) 100%); pointer-events: none; }

/* ========== 背景 ========== */
.hm-bg { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 30%, #0f3460 60%, #1a1a2e 100%); background-attachment: fixed; }

/* ========== 容器 ========== */
.hm-container { max-width: 1100px; margin: 0 auto; padding: 20px; }

/* ========== 页头 ========== */
.hm-header { background: rgba(15,15,30,0.95); border-bottom: 2px solid #d4a574; padding: 10px 20px; backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10000; }
.hm-header-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.hm-logo { display: flex; align-items: center; gap: 8px; font-family: 'Press Start 2P', cursive; font-size: 14px; color: #f0c784; text-decoration: none; text-shadow: 0 0 10px rgba(240,199,132,0.6); }
.hm-logo-cat { font-size: 28px; }
.hm-logo-text { color: #f0c784; }
.hm-nav { display: flex; gap: 15px; flex-wrap: wrap; }
.hm-nav-link { font-size: 13px; color: #a0a0b0; transition: all 0.3s; padding: 4px 8px; border-radius: 4px; }
.hm-nav-link:hover { color: #f0c784; background: rgba(240,199,132,0.1); text-shadow: 0 0 8px rgba(240,199,132,0.5); }

/* ========== 主页英雄区 ========== */
.hm-hero { padding: 60px 20px 40px; text-align: center; }
.hm-hero-inner { max-width: 700px; margin: 0 auto; }
.hm-hero-cat { font-size: 80px; margin-bottom: 10px; filter: drop-shadow(0 0 20px rgba(240,199,132,0.5)); animation: hm-float 3s ease-in-out infinite; }
@keyframes hm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hm-hero-title { font-family: 'Press Start 2P', cursive; font-size: 28px; color: #f0c784; text-shadow: 0 0 15px rgba(240,199,132,0.7), 0 0 30px rgba(240,199,132,0.3); margin-bottom: 15px; }
.hm-hero-subtitle { font-size: 20px; color: #e0d5c1; margin-bottom: 8px; }
.hm-hero-desc { font-size: 14px; color: #a0a0b0; margin-bottom: 20px; }

/* 箴言卡片 */
.hm-quote-card { background: rgba(212,165,116,0.08); border: 1px solid rgba(212,165,116,0.3); border-radius: 12px; padding: 20px; max-width: 500px; margin: 0 auto; }
.hm-quote-text { font-size: 16px; color: #e0d5c1; font-style: italic; display: block; margin-bottom: 8px; }
.hm-quote-author { font-size: 12px; color: #d4a574; }

/* ========== 七大入口网格 ========== */
.hm-entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 30px 0; }
.hm-entry-card { display: block; background: rgba(15,15,30,0.8); border: 1px solid rgba(212,165,116,0.2); border-radius: 12px; padding: 24px 18px; text-align: center; transition: all 0.3s; }
.hm-entry-card:hover { border-color: #d4a574; background: rgba(212,165,116,0.08); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.hm-entry-icon { font-size: 40px; margin-bottom: 12px; }
.hm-entry-title { font-family: 'Press Start 2P', cursive; font-size: 13px; color: #f0c784; margin-bottom: 8px; }
.hm-entry-desc { font-size: 13px; color: #a0a0b0; margin-bottom: 10px; }
.hm-entry-tag { font-size: 11px; color: #d4a574; background: rgba(212,165,116,0.1); padding: 3px 8px; border-radius: 10px; display: inline-block; }

/* ========== 排行榜挂件 ========== */
.hm-rank-widget { background: rgba(15,15,30,0.8); border: 1px solid rgba(212,165,116,0.3); border-radius: 12px; padding: 20px; margin: 20px 0; }
.hm-rank-title { font-family: 'Press Start 2P', cursive; font-size: 12px; color: #f0c784; margin-bottom: 15px; text-align: center; }
.hm-rank-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(160,160,176,0.15); }
.hm-rank-num { font-family: 'Press Start 2P', cursive; font-size: 11px; color: #f0c784; min-width: 30px; }
.hm-rank-email { flex: 1; font-size: 13px; color: #e0d5c1; }
.hm-rank-score { font-size: 12px; color: #d4a574; }
.hm-rank-more { display: block; text-align: center; margin-top: 12px; font-size: 12px; color: #d4a574; }
.hm-rank-loading, .hm-rank-empty { text-align: center; padding: 20px; color: #666; font-size: 13px; }

/* ========== 底部功能区 ========== */
.hm-extras { margin: 30px 0; }
.hm-extras-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hm-extra-card { display: block; text-align: center; padding: 16px; background: rgba(15,15,30,0.6); border-radius: 8px; font-size: 14px; color: #e0d5c1; transition: all 0.3s; }
.hm-extra-card:hover { background: rgba(212,165,116,0.1); color: #f0c784; }

/* ========== 页脚 ========== */
.hm-footer { text-align: center; padding: 30px 20px; border-top: 1px solid rgba(212,165,116,0.15); margin-top: 40px; }
.hm-footer-inner p { font-size: 12px; color: #666; }
.hm-footer-small { margin-top: 4px; font-size: 11px; color: #444; }

/* ========== 通用卡片 ========== */
.hm-card { background: rgba(15,15,30,0.8); border: 1px solid rgba(212,165,116,0.2); border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.hm-card h3 { font-family: 'Press Start 2P', cursive; font-size: 13px; color: #f0c784; margin-bottom: 15px; }
.hm-page-title { font-family: 'Press Start 2P', cursive; font-size: 18px; color: #f0c784; text-align: center; margin: 30px 0; text-shadow: 0 0 10px rgba(240,199,132,0.5); }

/* ========== 表单元素 ========== */
.hm-form-group { margin-bottom: 15px; }
.hm-form-group label { display: block; font-size: 14px; color: #d4a574; margin-bottom: 5px; }
.hm-form-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.hm-input, .hm-textarea, .hm-select { background: rgba(0,0,0,0.4); border: 1px solid rgba(212,165,116,0.3); border-radius: 6px; padding: 10px 14px; color: #e0d5c1; font-size: 14px; width: 100%; font-family: inherit; transition: border-color 0.3s; }
.hm-input:focus, .hm-textarea:focus, .hm-select:focus { outline: none; border-color: #f0c784; box-shadow: 0 0 10px rgba(240,199,132,0.2); }
.hm-textarea { resize: vertical; min-height: 80px; }
.hm-select { cursor: pointer; }

.hm-btn { display: inline-block; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 14px; transition: all 0.3s; }
.hm-btn-primary { background: linear-gradient(135deg, #d4a574, #b8860b); color: #1a1a2e; font-weight: bold; }
.hm-btn-primary:hover { background: linear-gradient(135deg, #f0c784, #d4a574); box-shadow: 0 0 15px rgba(240,199,132,0.4); }
.hm-btn-secondary { background: rgba(212,165,116,0.1); border: 1px solid rgba(212,165,116,0.3); color: #d4a574; }
.hm-btn-secondary:hover { background: rgba(212,165,116,0.2); }
.hm-btn-lg { padding: 14px 30px; font-size: 16px; }
.hm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.hm-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e0d5c1; cursor: pointer; }
.hm-checkbox-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: #d4a574; }

/* ========== 状态提示 ========== */
.hm-status { padding: 10px; border-radius: 6px; font-size: 13px; margin: 10px 0; }
.hm-status.success { background: rgba(46,160,67,0.15); color: #2ea043; border: 1px solid rgba(46,160,67,0.3); }
.hm-status.error { background: rgba(248,81,73,0.15); color: #f85149; border: 1px solid rgba(248,81,73,0.3); }
.hm-empty { text-align: center; padding: 40px; color: #666; }

/* ========== 步骤描述 ========== */
.hm-step-desc { font-size: 13px; color: #a0a0b0; margin-bottom: 15px; }

/* ========== 独有功能面板 ========== */
.hm-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 20px 0; }
.hm-panel { background: rgba(0,0,0,0.2); border: 1px solid rgba(212,165,116,0.15); border-radius: 8px; padding: 15px; }
.hm-panel h4 { font-size: 14px; color: #f0c784; margin-bottom: 10px; }
.hm-mood-options { display: flex; gap: 8px; flex-wrap: wrap; }
.hm-mood-option { font-size: 13px; color: #a0a0b0; cursor: pointer; padding: 4px 10px; border-radius: 12px; background: rgba(160,160,176,0.1); transition: all 0.3s; }
.hm-mood-option:hover { background: rgba(240,199,132,0.2); color: #f0c784; }

/* 信纸主题预览 */
.hm-paper-options { display: flex; gap: 8px; flex-wrap: wrap; }
.hm-paper-option { cursor: pointer; padding: 6px 12px; border-radius: 6px; font-size: 12px; border: 2px solid transparent; transition: all 0.3s; }
.hm-paper-option:hover, .hm-paper-option.active { border-color: #f0c784; }
.hm-paper-preview.parchment { background: #f5e6c8; color: #5a3e2b; }
.hm-paper-preview.grid { background: #ffffff; color: #2c3e50; }
.hm-paper-preview.letter { background: #fdf6e3; color: #6d4c41; }
.hm-paper-preview.vintage { background: #c8a87c; color: #3e2723; }
.hm-paper-preview.dark { background: #1e1e2e; color: #c4a882; }

/* ========== 上传区域 ========== */
.hm-upload-area { margin: 10px 0; text-align: center; }
.hm-upload-hint { display: block; font-size: 11px; color: #666; margin-top: 6px; }
.hm-upload-progress { margin: 10px 0; }
.hm-progress-bar { background: rgba(160,160,176,0.2); height: 6px; border-radius: 3px; overflow: hidden; }
.hm-progress-fill { background: linear-gradient(90deg, #d4a574, #f0c784); height: 100%; width: 0%; transition: width 0.3s; border-radius: 3px; }
.hm-upload-preview { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.hm-upload-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(212,165,116,0.3); }

/* ========== 表格 ========== */
.hm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hm-table th { background: rgba(212,165,116,0.1); padding: 10px; text-align: left; color: #f0c784; border-bottom: 1px solid rgba(212,165,116,0.3); }
.hm-table td { padding: 10px; border-bottom: 1px solid rgba(160,160,176,0.15); }
.hm-table tr:hover td { background: rgba(212,165,116,0.05); }

/* ========== 公开信笺墙网格 ========== */
.hm-wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.hm-wall-card { display: block; padding: 20px; border-radius: 10px; transition: all 0.3s; border: 1px solid rgba(212,165,116,0.2); min-height: 120px; text-decoration: none; }
.hm-wall-card:hover { border-color: #d4a574; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.hm-wall-card h4 { font-size: 16px; color: #e0d5c1; margin-bottom: 8px; }
.hm-wall-meta { font-size: 12px; color: #777; }
.hm-media-badge { font-size: 18px; }

/* 信纸主题卡片 */
.paper-parchment { background: #f5e6c8; color: #5a3e2b !important; }
.paper-parchment h4 { color: #5a3e2b !important; }
.paper-grid { background: #f8f8f8; color: #2c3e50 !important; }
.paper-grid h4 { color: #2c3e50 !important; }
.paper-letter { background: #fdf6e3; color: #6d4c41 !important; }
.paper-letter h4 { color: #6d4c41 !important; }
.paper-vintage { background: #c8a87c; color: #3e2723 !important; }
.paper-vintage h4 { color: #3e2723 !important; }
.paper-dark { background: #1e1e2e !important; color: #c4a882 !important; }
.paper-dark h4 { color: #c4a882 !important; }

/* ========== 信件详情 ========== */
.hm-letter { padding: 30px; border-radius: 12px; max-width: 800px; margin: 0 auto; font-size: 16px; line-height: 1.8; }
.hm-letter h2 { font-size: 24px; color: inherit; margin-bottom: 15px; }
.hm-letter-meta { font-size: 13px; color: #a0a0b0; margin-bottom: 20px; }
.hm-letter-content { white-space: pre-wrap; }

/* 媒体画廊 */
.hm-media-gallery { margin: 20px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.hm-media-img { border-radius: 8px; border: 1px solid rgba(212,165,116,0.2); cursor: pointer; }
.hm-media-video { border-radius: 8px; width: 100%; border: 1px solid rgba(212,165,116,0.2); }

/* 解密框 */
.hm-decrypt-box { background: rgba(248,81,73,0.08); border: 1px solid rgba(248,81,73,0.3); border-radius: 8px; padding: 16px; margin: 15px 0; }
.hm-decrypt-box h4 { color: #f85149; margin-bottom: 10px; }

/* ========== 时间轴 ========== */
.hm-timeline { position: relative; padding: 20px 0; padding-left: 40px; }
.hm-timeline::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: rgba(212,165,116,0.3); }
.hm-timeline-item { position: relative; margin-bottom: 25px; }
.hm-timeline-dot { position: absolute; left: -28px; top: 8px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #d4a574; background: #1a1a2e; }
.hm-timeline-dot.sent { background: #2ea043; border-color: #2ea043; }
.hm-timeline-dot.pending { background: #d4a574; border-color: #d4a574; }
.hm-timeline-card { background: rgba(15,15,30,0.7); border: 1px solid rgba(212,165,116,0.15); border-radius: 8px; padding: 15px; }
.hm-timeline-card h4 { color: #f0c784; margin-bottom: 5px; }
.hm-timeline-meta { font-size: 12px; color: #888; }

/* ========== 信笺碑卡片 ========== */
.hm-steles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.hm-stele-card { background: rgba(15,15,30,0.7); border: 1px solid rgba(212,165,116,0.2); border-radius: 8px; padding: 16px; text-align: center; }
.hm-stele-hash { font-family: 'Press Start 2P', cursive; font-size: 9px; color: #f0c784; word-break: break-all; margin-bottom: 8px; }
.hm-stele-meta { font-size: 11px; color: #666; margin-top: 5px; }

/* ========== 排行榜标签 ========== */
.hm-rank-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.hm-rank-table { max-width: 600px; margin: 0 auto; }

/* ========== 管理端布局 ========== */
.hm-admin-layout { display: flex; min-height: 100vh; }
.hm-admin-sidebar { width: 220px; background: rgba(10,10,25,0.95); border-right: 1px solid rgba(212,165,116,0.2); padding: 20px 0; flex-shrink: 0; }
.hm-admin-logo { font-family: 'Press Start 2P', cursive; font-size: 11px; color: #f0c784; text-align: center; padding: 10px 15px 20px; border-bottom: 1px solid rgba(212,165,116,0.15); margin-bottom: 10px; }
.hm-admin-nav { display: flex; flex-direction: column; }
.hm-admin-nav-item { display: block; padding: 10px 20px; font-size: 13px; color: #a0a0b0; transition: all 0.3s; border-left: 3px solid transparent; }
.hm-admin-nav-item:hover, .hm-admin-nav-item.active { color: #f0c784; background: rgba(212,165,116,0.08); border-left-color: #d4a574; }
.hm-admin-logout { display: block; text-align: center; padding: 15px; font-size: 12px; color: #f85149; margin-top: auto; }
.hm-admin-content { flex: 1; padding: 30px; overflow-y: auto; }

/* ========== 登录卡片 ========== */
.hm-login-container { display: flex; justify-content: center; align-items: center; min-height: 80vh; }
.hm-login-card { max-width: 400px; width: 100%; }

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .hm-hero-title { font-size: 20px; }
    .hm-entry-grid { grid-template-columns: 1fr 1fr; }
    .hm-admin-layout { flex-direction: column; }
    .hm-admin-sidebar { width: 100%; }
    .hm-admin-nav { flex-direction: row; flex-wrap: wrap; }
    .hm-nav { justify-content: center; }
    .hm-nav-link { font-size: 11px; }
}

/* ========== 霓虹闪光动画 ========== */
@keyframes hm-neon { 0%, 100% { text-shadow: 0 0 10px #f0c784, 0 0 20px rgba(240,199,132,0.6); } 50% { text-shadow: 0 0 5px #f0c784, 0 0 10px rgba(240,199,132,0.3); } }
.hm-logo-text { animation: hm-neon 3s ease-in-out infinite; }

/* ========== 像素按钮动画 ========== */
.hm-btn-primary:active { transform: scale(0.97); }