/* ux-comfort.css：UX 舒适度打磨共用样式（空状态 / 骨架屏 / 新手引导浮层）
   使用方：list.html / friends.html / account.html（空状态+骨架屏）、mindmap.html（新手引导） */

/* ===== 空状态：大号插画 emoji + 一句话 + 可选引导按钮（js/empty-state.js emptyStateHtml） ===== */
.empty-state { text-align: center; padding: 36px 16px; color: #718096; }
.empty-state-icon { font-size: 44px; line-height: 1.2; margin-bottom: 10px; }
.empty-state-text { font-size: 14px; line-height: 1.7; margin-bottom: 6px; }
.empty-state-btn {
    display: inline-block; margin-top: 10px; padding: 8px 22px;
    background: #5a67d8; color: #fff; border: none; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.empty-state-btn:hover { background: #4c51bf; }

/* ===== 骨架屏：feed 加载中先渲染灰色卡片（shimmer 扫光动画；js/empty-state.js feedSkeletonHtml） ===== */
.skeleton-card {
    background: #fff; border-radius: 12px; padding: 18px; margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.sk-line, .sk-block {
    border-radius: 6px;
    background: linear-gradient(90deg, #edf0f5 25%, #e0e5ef 37%, #edf0f5 63%);
    background-size: 400% 100%;
    animation: sk-shimmer 1.4s ease infinite;
}
.sk-line { height: 14px; margin-bottom: 10px; }
.sk-block { height: 110px; margin-bottom: 12px; border-radius: 10px; }
.sk-line:last-child { margin-bottom: 0; }
.sk-w40 { width: 40%; }
.sk-w50 { width: 50%; }
.sk-w70 { width: 70%; }
.sk-w90 { width: 90%; }
@keyframes sk-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* ===== 新手引导浮层：思维导图页三步引导（js/mindmap-onboard.js） ===== */
.onboard-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    animation: onboard-fade-in 0.25s ease;
}
.onboard-card {
    background: #fff; border-radius: 16px; padding: 34px 30px 26px;
    max-width: 360px; width: 88%; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.onboard-icon { font-size: 54px; line-height: 1.2; margin-bottom: 12px; }
.onboard-title { font-size: 18px; font-weight: 700; color: #2d3748; margin-bottom: 8px; }
.onboard-text { font-size: 14px; color: #718096; line-height: 1.8; margin-bottom: 20px; }
.onboard-dots { margin-bottom: 18px; }
.onboard-dots span {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #e2e8f0; margin: 0 4px;
}
.onboard-dots span.on { background: #5a67d8; }
.onboard-actions { display: flex; gap: 8px; justify-content: center; align-items: center; }
.onboard-next {
    padding: 10px 28px; background: #5a67d8; color: #fff; border: none;
    border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.onboard-next:hover { background: #4c51bf; }
.onboard-skip {
    padding: 10px 14px; background: transparent; color: #a0aec0; border: none;
    font-size: 13px; cursor: pointer;
}
.onboard-skip:hover { color: #718096; }
@keyframes onboard-fade-in { from { opacity: 0; } to { opacity: 1; } }