/* ============================================================
   听心格爱 · 静态模板全局样式（与 D:\codeX\tingxin\html\css\style.css 对齐）
   ============================================================ */

/* —— 自定义动画 —— */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
@keyframes breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.08) } }
@keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }

.animate-fade-in { animation: fadeIn .6s ease-out both; }
.animate-fade-in-up { animation: fadeInUp .6s ease-out both; }
.animate-breathe { animation: breathe 8s ease-in-out infinite; }
.animate-float { animation: floaty 6s ease-in-out infinite; }

/* —— 竖排文字（日签/节气名等东方排版）—— */
.writing-vertical-lr {
  writing-mode: vertical-lr;
  text-orientation: upright;
  letter-spacing: .1em;
}

/* —— 隐藏滚动条（横滑列表用）—— */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* —— 行数截断 —— */
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* —— 选中文字配色 —— */
::selection { background: #5e7d66; color: #fff; }

/* —— 衬线字体兜底 —— */
.font-serif { font-family: "Noto Serif SC", "Songti SC", "SimSun", serif; }
.font-sans { font-family: "Zen Maru Gothic", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
.font-mono { font-family: "JetBrains Mono", "Courier New", monospace; }

/* —— 全站背景纹理（宣纸感）—— */
body { background-color: #fdfbf7; }

/* —— 滚动条美化 —— */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #fdfbf7; }
::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #5e7d66; }

/* —— 分页按钮统一样式 —— */
.page-btn { width:40px; height:40px; border-radius:8px; font-size:14px; font-weight:700; transition: all .2s; }
.page-btn.active { background:#5e7d66; color:#fff; box-shadow:0 4px 6px -1px rgba(0,0,0,.1); }
.page-btn:not(.active) { background:#fff; color:#6b7280; border:1px solid #e5e7eb; }
.page-btn:not(.active):hover { background:#f9fafb; }
.page-btn:disabled { opacity:.3; cursor:not-allowed; }

/* —— 模态框（hkcms扩展）—— */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(26,26,26,0.6);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.modal-box {
    background: #fdfbf7;
    border-radius: 16px;
    max-width: 480px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* —— Toast（hkcms扩展）—— */
.toast-container {
    position: fixed; top: 80px; left: 50%;
    transform: translateX(-50%);
    z-index: 200; pointer-events: none;
}
.toast {
    background: #1a1a1a; color: #fdfbf7;
    padding: 12px 24px; border-radius: 9999px;
    font-size: 14px; margin-bottom: 8px;
    animation: fadeInUp 0.3s ease-out;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex; align-items: center; gap: 8px;
}
.toast.success { background: #5e7d66; }
.toast.error { background: #a65e53; }
.toast.info { background: #1a1a1a; }