/* ========== 上传页面专用（支持日/夜双模式切换） ========== */
body { animation: pageFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

.container { max-width: 680px; margin: 40px auto; padding: 0 20px; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.title {
    font-size:28px;margin-bottom:12px;background:var(--primary-gradient);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    font-weight:600;display:flex;align-items:center;justify-content:center;gap:12px;
}
.upload-icon {
    font-size:64px;margin-bottom:20px;background:var(--primary-gradient);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center;
}
.form-group { margin-bottom: 25px; }
.file-input { display: none; }
.file-list { margin: 20px 0; }
.file-info { display:flex;align-items:center;gap:14px;overflow:hidden; }
.file-icon { color:var(--primary);flex-shrink:0;font-size:20px; }
.file-details { overflow:hidden; }
.submit-btn { width:100%; }
.remove-btn { color:var(--error);cursor:pointer;flex-shrink:0;padding:8px;border-radius:8px;transition:all 0.2s; }

.aux-buttons { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px; }
.aux-btn:active { transform:translateY(0); }
.aux-btn i { color:var(--primary);font-size:18px; }
.video-type-tabs { display:flex;gap:8px;margin-bottom:15px;padding:4px;border-radius:12px; }
/* 单/批量模式切换 tab */
.upload-mode-tabs { display:flex;gap:8px;margin-bottom:25px;padding:4px;border-radius:12px; }
.upload-mode-tab {
    flex:1;padding:10px;border:none;border-radius:10px;background:transparent;
    cursor:pointer;text-align:center;font-weight:500;font-size:13px;transition:all .2s;
}
.video-tab {
    flex:1;padding:10px;border:none;border-radius:10px;background:transparent;
    cursor:pointer;transition:all 0.2s cubic-bezier(.4,0,.2,1);
    text-align:center;font-weight:500;font-size:13px;
}
.video-tab i { display:block;font-size:18px;margin-bottom:4px; }

/* ====== 夜晚模式（默认，暗色毛玻璃） ====== */
.upload-card {
    background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);border-radius:28px;box-shadow:var(--glass-shadow);
    padding:40px;animation:fadeInUp .6s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;transition:var(--transition);
}
.upload-card > * { position:relative;z-index:1; }
label { display:block;margin-bottom:10px;font-weight:600;color:rgba(255,255,255,.95);font-size:15px; }
.input-field {
    width:100%;padding:14px 18px;border:1px solid rgba(255,255,255,.25);border-radius:12px;font-size:15px;
    transition:all .2s;background:rgba(255,255,255,.1);color:rgba(255,255,255,.95);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
}
.input-field:focus { border-color:var(--primary);outline:none;background:rgba(255,255,255,.2);box-shadow:0 0 0 3px rgba(124,58,237,.3); }
.input-field::placeholder { color:rgba(255,255,255,.5); }
.drop-area {
    border:2px dashed rgba(255,255,255,.3);border-radius:16px;padding:40px 20px;text-align:center;
    margin:20px 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);
    background:rgba(255,255,255,.08);position:relative;
}
.drop-area:hover, .drop-area.highlight {
    border-color:var(--primary);background:rgba(124,58,237,.15);transform:scale(1.01);
    box-shadow:0 0 0 4px rgba(124,58,237,.2);
}
/* 上传进度条 */
.upload-progress-bar {
    display:none; margin:16px 0; padding:16px 20px;
    background:rgba(255,255,255,0.06); border-radius:12px;
    border:1px solid rgba(255,255,255,0.1);
}
.upload-progress-bar.active { display:block; }
.progress-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.progress-label { font-size:13px; font-weight:500; color:rgba(255,255,255,0.8); }
.progress-percent { font-size:13px; font-weight:700; color:var(--primary-light); font-family:var(--font-mono); }
.progress-track { height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; }
.progress-fill-bar { height:100%; width:0%; background:var(--primary-gradient); border-radius:3px; transition:width 0.3s ease; }
.progress-detail { font-size:12px; color:var(--text-muted); margin-top:8px; }

.drop-icon { font-size:48px;color:var(--primary);margin-bottom:15px;opacity:.9; }
.drop-text { margin-bottom:10px;font-size:16px;font-weight:500;color:rgba(255,255,255,.95); }
.drop-hint { font-size:13px;color:rgba(255,255,255,.6); }
.file-item {
    display:flex;justify-content:space-between;align-items:center;padding:14px 18px;
    border:1px solid rgba(255,255,255,.15);border-radius:12px;margin-bottom:10px;
    background:rgba(255,255,255,.1);transition:all .2s;
    position: relative;
    overflow: hidden;
}
.file-name { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;font-weight:500;color:rgba(255,255,255,.95); }
.file-size { font-size:12px;color:rgba(255,255,255,.6); }
.message { padding:14px;margin-bottom:20px;border-radius:12px;text-align:center;display:none;font-weight:500; }
.message.info { background:rgba(79,110,246,.1);color:var(--primary);border:1px solid rgba(79,110,246,.2);display:block; }
.message.error { background:rgba(229,57,53,.1);color:var(--error);border:1px solid rgba(229,57,53,.3);display:block; }
.message.success { background:rgba(56,161,105,.1);color:var(--success);border:1px solid rgba(56,161,105,.3);display:block; }
.loading { display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:white;animation:spin 1s ease-in-out infinite;margin-right:10px; }
.aux-btn {
    padding:14px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);border-radius:12px;
    cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);
    display:flex;align-items:center;justify-content:center;gap:10px;
    font-size:14px;color:rgba(255,255,255,.95);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.aux-btn:hover { border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.25);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15); }
.video-type-tabs { background:rgba(0,0,0,.2); }
.video-tab { color:rgba(255,255,255,.7); }
.video-tab.active { background:rgba(255,255,255,.2);color:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3); }
.upload-mode-tabs { background:rgba(0,0,0,.2); }
.upload-mode-tab { color:rgba(255,255,255,.7); }
.upload-mode-tab.active { background:rgba(255,255,255,.2);color:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3); }

/* 支持平台提示区域 */
.platform-hint { margin-top:8px; font-size:12px; color:#34d399; display:flex; align-items:center; gap:6px; }
[data-theme="day"] .platform-hint { color:#16a34a; }
.platform-info {
    margin-top: 10px; padding: 14px 16px; border-radius: 12px;
    font-size: 13px; line-height: 1.7;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.75);
}
.platform-info strong { color: rgba(255,255,255,.95); }
.platform-info .p-ok { color: #4ade80; }
.platform-info .p-warn { color: #fbbf24; }
.platform-info .p-err { color: #f87171; }

[data-theme="day"] .upload-progress-bar { background:rgba(241,245,249,.8); border-color:#E2E8F0; }
[data-theme="day"] .progress-label { color:#475569; }
[data-theme="day"] .progress-percent { color: #4F6EF6; }
[data-theme="day"] .progress-track { background:#E2E8F0; }
[data-theme="day"] .progress-detail { color:#94A3B8; }
[data-theme="day"] .platform-hint { margin-top:8px; font-size:12px; color:#34d399; display:flex; align-items:center; gap:6px; }
[data-theme="day"] .platform-hint { color:#16a34a; }
.platform-info {
    background: rgba(241,245,249,.8); border-color: #E2E8F0;
    color: #475569;
}
[data-theme="day"] .platform-info strong { color: #1E293B; }
[data-theme="day"] .platform-info .p-ok { color: #16a34a; }
[data-theme="day"] .platform-info .p-warn { color: #d97706; }
[data-theme="day"] .platform-info .p-err { color: #dc2626; }

/* ====== 白天模式覆盖（统一导航栏颜色） ====== */
[data-theme="day"] .upload-card {
    background:rgba(255, 255, 255, 0.82);backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);
    border:1px solid #E2E8F0;
    box-shadow:0 2px 4px rgba(100,116,139,.06),0 8px 24px rgba(100,116,139,.08),
                0 16px 48px rgba(100,116,139,.04);
}
[data-theme="day"] .upload-card:hover { border-color:rgba(79,110,246,.20); }
[data-theme="day"] label { color:#1E293B; }
[data-theme="day"] .input-field { border-color:#E2E8F0;background:rgba(255,255,255,.9);color:#1E293B;box-shadow:inset 0 1px 2px rgba(100,116,139,.06); }
[data-theme="day"] .input-field:focus { background:#fff;border-color:#4F6EF6;box-shadow:0 0 0 3px rgba(79,110,246,.12); }
[data-theme="day"] .input-field::placeholder { color:#94A3B8; }
[data-theme="day"] .drop-area { border-color:#CBD5E1;background:rgba(241,245,249,.7); }
[data-theme="day"] .drop-area:hover,[data-theme="day"] .drop-area.highlight { background:#EEF1FE;border-color:#4F6EF6;box-shadow:0 0 0 4px rgba(79,110,246,.08); }
[data-theme="day"] .drop-icon { opacity:.80;color:#4F6EF6 !important; }
[data-theme="day"] .drop-text { color:#334155; }
[data-theme="day"] .drop-hint { color:#94A3B8; }
[data-theme="day"] .file-item { border-color:#E2E8F0;background:rgba(248,250,252,.9); }
[data-theme="day"] .file-item:hover { border-color:rgba(79,110,246,.20);background:#fff; }
[data-theme="day"] .file-name { color:#1E293B; }
[data-theme="day"] .file-size { color:#94A3B8; }
[data-theme="day"] .remove-btn:hover { background:rgba(239,68,68,.06); }
[data-theme="day"] .message.info { background:rgba(79,110,246,.06);border-color:rgba(79,110,246,.18);color:#4F6EF6; }
[data-theme="day"] .message.error { background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.18); }
[data-theme="day"] .message.success { background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.18); }
[data-theme="day"] .loading { border-color:rgba(79,110,246,.20);border-top-color:#4F6EF6; }
[data-theme="day"] .aux-btn { border-color:#E2E8F0;background:rgba(248,250,252,.8);color:#475569;box-shadow:0 1px 2px rgba(100,116,139,.04); }
[data-theme="day"] .aux-btn:hover { border-color:#4F6EF6;background:#fff;color:#4F6EF6;box-shadow:0 4px 12px rgba(79,110,246,.10); }
[data-theme="day"] .video-type-tabs { background:rgba(148,163,184,.12); }
[data-theme="day"] .video-tab { color:#64748B; }
[data-theme="day"] .video-tab.active { background:#fff;color:#1E293B;box-shadow:0 2px 8px rgba(100,116,139,.08),inset 0 1px 0 rgba(255,255,255,.9); }
[data-theme="day"] .upload-mode-tabs { background:rgba(148,163,184,.12); }
[data-theme="day"] .upload-mode-tab { color:#64748B; }
[data-theme="day"] .upload-mode-tab.active { background:#fff;color:#1E293B;box-shadow:0 2px 8px rgba(100,116,139,.08),inset 0 1px 0 rgba(255,255,255,.9); }
