/* =========================================================
   后台视觉统一层 —— 差异化动画体系
   每个板块使用与自身语义匹配的入场动画：
   主卡片=登场、面板=按板块区分方向、统计卡=交错弹入、
   队列/日志=交错滑入、下拉=顶部轻展、Toast=顶部滑入
   动画统一使用 backwards 填充：to 状态与元素静态样式一致，
   动画结束后不锁定，JS 后续改样式不受压制
   ========================================================= */

:root {
    --admin-accent: #0066ff;
    --admin-accent-hover: #0052d9;
    --admin-accent-light: #66a3ff;
    --admin-accent-sub: rgba(0, 102, 255, 0.08);
    --admin-accent-gradient: linear-gradient(135deg, #0066ff, #00b8ff);
    --admin-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --admin-ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* 柔和进入 */
    --admin-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性出场 */
}

body.dark-mode {
    --admin-accent: #7ab4ff;
    --admin-accent-hover: #9cc5ff;
    --admin-accent-light: #9cc5ff;
    --admin-accent-sub: rgba(122, 180, 255, 0.12);
    --admin-accent-gradient: linear-gradient(135deg, #4d94ff, #00c2ff);
}

/* ---------- 主卡片：登场仪式感 ---------- */
.main-card {
    animation: adminHero 0.6s var(--admin-ease-out) backwards;
}

@keyframes adminHero {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 面板切换：一板块一性格 ---------- */
/* 总览：聚焦放大（统计数字场景） */
#admin-panel-dashboard.active {
    animation: panelFadeScale 0.45s var(--admin-ease-out) backwards;
}
@keyframes panelFadeScale {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

/* 上传：从右侧滑入（呼应左表单右队列结构） */
#admin-panel-upload.active {
    animation: panelSlideRight 0.4s var(--admin-ease-out) backwards;
}
@keyframes panelSlideRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* 图片管理：底部上浮（列表延展方向） */
#admin-panel-images.active {
    animation: panelSlideUp 0.4s var(--admin-ease-out) backwards;
}
@keyframes panelSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 一致性检查：聚焦收缩展开（扫描聚焦感） */
#admin-panel-consistency.active {
    animation: panelFocus 0.4s var(--admin-ease-out) backwards;
}
@keyframes panelFocus {
    from { opacity: 0; transform: scaleY(0.97); }
    to   { opacity: 1; transform: scaleY(1); }
}

/* 收藏管理：轻淡入（内部卡片负责交错弹入） */
#admin-panel-favorites.active {
    animation: panelFade 0.35s var(--admin-ease-out) backwards;
}
@keyframes panelFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 打包下载：自上而下展开（呼应"列表逐条打包"的纵深感） */
#admin-panel-download.active {
    animation: panelSlideDown 0.4s var(--admin-ease-out) backwards;
}
@keyframes panelSlideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 标签管理：轻微上浮 + 微缩放（面板较长，位移过大会显得晃） */
#admin-panel-tags.active {
    animation: panelTagIn 0.4s var(--admin-ease-out) backwards;
}
@keyframes panelTagIn {
    from { opacity: 0; transform: translateY(10px) scale(0.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 统计卡：交错弹入 + 弹性缓动 ---------- */
.dash-stat-card {
    animation: statPop 0.5s var(--admin-ease-spring) backwards;
}
.dash-stat-card:nth-child(1) { animation-delay: 0.05s; }
.dash-stat-card:nth-child(2) { animation-delay: 0.12s; }
.dash-stat-card:nth-child(3) { animation-delay: 0.19s; }
.dash-stat-card:nth-child(4) { animation-delay: 0.26s; }

@keyframes statPop {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 总览内嵌面板：轻微上浮错开 ---------- */
.dash-panel {
    animation: dashPanelIn 0.45s var(--admin-ease-out) backwards;
}
.dash-grid > .dash-panel:nth-child(2) { animation-delay: 0.08s; }

@keyframes dashPanelIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 收藏卡片：交错弹入 ---------- */
.fav-card {
    animation: favPop 0.4s var(--admin-ease-spring) backwards;
}
.fav-card:nth-child(1) { animation-delay: 0.03s; }
.fav-card:nth-child(2) { animation-delay: 0.07s; }
.fav-card:nth-child(3) { animation-delay: 0.11s; }
.fav-card:nth-child(4) { animation-delay: 0.15s; }
.fav-card:nth-child(5) { animation-delay: 0.19s; }
.fav-card:nth-child(6) { animation-delay: 0.23s; }
.fav-card:nth-child(7) { animation-delay: 0.27s; }
.fav-card:nth-child(8) { animation-delay: 0.31s; }

@keyframes favPop {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 队列/日志条目：交错滑入（消除刷屏感） ---------- */
.q-item,
.log-entry {
    animation: listSlideIn 0.35s var(--admin-ease-out) backwards;
}
.q-item:nth-child(1), .log-entry:nth-child(1) { animation-delay: 0s; }
.q-item:nth-child(2), .log-entry:nth-child(2) { animation-delay: 0.04s; }
.q-item:nth-child(3), .log-entry:nth-child(3) { animation-delay: 0.08s; }
.q-item:nth-child(4), .log-entry:nth-child(4) { animation-delay: 0.12s; }
.q-item:nth-child(5), .log-entry:nth-child(5) { animation-delay: 0.16s; }
.q-item:nth-child(6), .log-entry:nth-child(6) { animation-delay: 0.20s; }
.q-item:nth-child(7), .log-entry:nth-child(7) { animation-delay: 0.24s; }
.q-item:nth-child(8), .log-entry:nth-child(8) { animation-delay: 0.28s; }

@keyframes listSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 下拉与搜索建议：从顶部轻快展开 ---------- */
.custom-select-dropdown.visible,
.tag-search-dropdown.visible {
    animation: adminPolishPop 0.2s var(--admin-ease-out) backwards;
    transform-origin: top center;
}

@keyframes adminPolishPop {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.custom-select-item,
.tag-search-item {
    transition: background 0.16s var(--admin-ease);
}

/* 悬停仅高亮背景，不做位移 —— 位移会让文字抖动，且使下拉框横向滚动条难以点中 */
.custom-select-item:hover,
.tag-search-item:hover {
    background: rgba(37, 99, 235, 0.10);
}
body.dark-mode .custom-select-item:hover,
body.dark-mode .tag-search-item:hover {
    background: rgba(96, 165, 250, 0.16);
}

/* ---------- Toast / 提示 ---------- */
.toast {
    animation: toastIn 0.3s var(--admin-ease-out) backwards;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.msg-alert {
    animation: adminPolishIn 0.3s var(--admin-ease-out) backwards;
}
@keyframes adminPolishIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 侧边导航 ---------- */
.admin-nav-item {
    transition: background 0.2s var(--admin-ease),
                color 0.2s var(--admin-ease),
                box-shadow 0.2s var(--admin-ease);
}

/* hover 仅变色，无位移/缩放 —— 避免形变再回来的闪烁感 */

.admin-nav-item.active {
    background: var(--admin-accent-gradient);
    color: #ffffff;
    box-shadow: 0 8px 18px -8px rgba(0, 102, 255, 0.6);
    animation: navActiveIn 0.3s var(--admin-ease-out) backwards;
}
@keyframes navActiveIn {
    from { opacity: 0.4; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

.admin-nav-item.active svg {
    color: #ffffff;
}

/* ---------- 按钮 ---------- */
.btn-submit {
    transition: transform 0.2s var(--admin-ease),
                box-shadow 0.2s var(--admin-ease),
                filter 0.2s ease;
    box-shadow: 0 8px 18px -8px rgba(0, 102, 255, 0.55);
}

.btn-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -8px rgba(0, 102, 255, 0.6);
}

.btn-submit:active:not(:disabled) {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

.btn-delete {
    box-shadow: 0 8px 18px -8px rgba(220, 38, 38, 0.55);
}

.btn-delete:hover:not(:disabled) {
    box-shadow: 0 12px 24px -8px rgba(220, 38, 38, 0.6);
}

body.dark-mode .btn-delete {
    box-shadow: 0 8px 18px -8px rgba(248, 113, 113, 0.55);
}

body.dark-mode .btn-delete:hover:not(:disabled) {
    box-shadow: 0 12px 24px -8px rgba(248, 113, 113, 0.6);
}

.btn-action,
.btn-reset {
    transition: transform 0.18s var(--admin-ease),
                background 0.18s var(--admin-ease),
                box-shadow 0.18s var(--admin-ease);
}

.btn-action:hover,
.btn-reset:hover {
    transform: translateY(-1px);
}

.btn-copy {
    transition: transform 0.18s var(--admin-ease),
                background 0.18s var(--admin-ease);
}

.btn-copy:hover {
    transform: translateY(-1px);
}

/* ---------- 输入框 ---------- */
.modern-input {
    transition: border-color 0.2s var(--admin-ease),
                background 0.2s var(--admin-ease),
                box-shadow 0.2s var(--admin-ease);
}

.modern-input:focus {
    border-color: var(--admin-accent); /* 宽度恒定 2px, 只变色 */
    box-shadow: none;
}

/* ---------- 卡片与悬浮微动效 ---------- */
.dash-stat-card {
    transition: transform 0.22s var(--admin-ease),
                box-shadow 0.22s var(--admin-ease),
                border-color 0.22s var(--admin-ease);
}

.dash-stat-card:hover {
    transform: translateY(-2px);
}

.dash-panel,
.fav-card {
    transition: transform 0.22s var(--admin-ease),
                box-shadow 0.22s var(--admin-ease),
                border-color 0.22s var(--admin-ease);
}

.fav-card:hover {
    transform: translateY(-2px);
}

/* ---------- 无障碍：尊重系统“减少动态效果”偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}