/* ============================================================
   3-components / empty-state.css
   空状态占位 —— 两种用法共存：

   用法 A（原 main.css 旧版，简约内联）:
     <div class="empty-state">
       <svg>...</svg>
       <p>No data</p>
       <span>Try again later</span>
     </div>

   用法 B（原 main.css 新版，圆形图标 + 标题 + 描述）:
     <div class="empty-state">
       <div class="empty-state-icon"><svg>...</svg></div>
       <h3 class="empty-state-title">Nothing here</h3>
       <p class="empty-state-desc">Try again later</p>
     </div>
   ============================================================ */

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-tertiary);
}

/* ===== 用法 A：简约内联 ===== */
.empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.empty-state span {
    font-size: 14px;
}

/* ===== 用法 B：圆形图标 + 标题 + 描述 ===== */
.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--bg-input);
    border-radius: 50%;
}

.empty-state-icon svg {
    width: 40px;
    height: 40px;
    color: var(--text-tertiary);
}

.empty-state-title {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
}

.empty-state-desc {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}