/* ===== 主题切换 ===== */
.theme-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.theme-toggle-track {
    width: 48px;
    height: 28px;
    border-radius: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    position: relative;
    transition: background 0.3s var(--ease);
}
.theme-toggle-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    position: absolute;
    top: 3px;
    left: 3px;
    transition: left 0.3s var(--ease-spring);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="light"] .theme-toggle-thumb { left: 23px; }

/* ===== 弹窗 ===== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: overlayIn 0.2svar(--ease);
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 32px;
    width: 100%;
    max-width: 380px;
    position: relative;
    box-shadow: var(--shadow-lg);
    animation: modalIn 0.3s var(--ease-spring);
    transition: background 0.4s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-tabs { display: flex; margin-bottom: 22px; border-bottom: 1px solid var(--border-color); }
.mtab {
    flex: 1;
    text-align: center;
    padding: 13px;
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.96em;
    border-bottom: 2.5px solid transparent;
    transition: all 0.25s var(--ease);
}
.mtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.auth-error {
    background: var(--red-soft);
    color: var(--red);
    padding: 11px 16px;
    border-radius: var(--radius-xs);
    font-size: 0.86em;
    margin-bottom: 14px;
    font-weight: 500;
}
.modal-box input, .modal-box textarea {
    width: 100%;
    padding: 13px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 0.92em;
    margin-bottom: 12px;
    outline: none;
    transition: border-color 0.2s var(--ease), background 0.4s var(--ease);
}
.modal-box input:focus { border-color: var(--accent); }
.modal-box select option { background: var(--bg-card); }
.auth-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.96em;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
    box-shadow: 0 3px 12px var(--accent-glow);
    transition: all 0.2s var(--ease);
}
.auth-btn:active { transform: scale(0.97); filter: brightness(0.9); }
.modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 1.28em;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s var(--ease);
}
.modal-close:active { color: var(--text-primary); }

/* 确认弹窗 */
.confirm-box { max-width: 300px; text-align: center; }
.confirm-text { font-size: 0.96em; font-weight: 600; margin-bottom: 22px; line-height: 1.5; }
.confirm-actions { display: flex; gap: 12px; }
.confirm-cancel, .confirm-ok {
    flex: 1;
    padding: 13px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.92em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.confirm-cancel { background: var(--bg-elevated); color: var(--text-secondary); }
.confirm-cancel:active { background: var(--bg-hover); }
.confirm-ok { background: var(--accent); color: #fff; box-shadow: 0 2px 8px var(--accent-glow); }
.confirm-ok:active { background: var(--accent-dark); transform: scale(0.97); }

/* ===== 空状态 & 加载 ===== */
.empty-state { text-align: center; padding: 70px 24px; color: var(--text-dim); }
.empty-state .es-icon { font-size: 3.2em; margin-bottom: 14px; opacity: 0.8; }
.empty-state .es-text { font-size: 0.94em; font-weight: 500; }
.empty-state .es-sub { font-size: 0.82em; color: var(--text-muted); margin-top: 8px; }
.loading { text-align: center; padding: 48px; color: var(--text-dim); font-size: 0.92em; }

/* 图片预览项 */
.img-preview-item {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.img-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.img-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 0.65em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.img-remove:active { background: var(--red); }
.img-preview-add {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    border: 2px dashed var(--border-strong);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.img-preview-add:active { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }

/* 底部版本号 */
.menu-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 10px;
    font-size: 0.76em;
    color: var(--text-dim);
}