/* ============================================
   AI 领创研习社 - 样式表 v4 (品牌升级)
   双主题：日间(纸张质感) / 夜间(科技深色)
   全部零 Emoji，纯 SVG
   ============================================ */

/* ==================== 主题变量 ==================== */
:root,
[data-theme="light"] {
  --bg-primary: #f8f5ee;
  --bg-secondary: #ede9df;
  --bg-card: #fffef9;
  --bg-card-hover: #ffffff;
  --bg-card-active: #faf7ef;
  --body-bg: linear-gradient(180deg, #f6f2e9 0%, #efe9db 50%, #f0ebe0 100%);

  --border-color: #e2dccb;
  --border-hover: #cfc4ad;
  --divider-color: #e5dfd3;

  --text-primary: #2c2416;
  --text-secondary: #5a5044;
  --text-muted: #938a7a;

  --accent: #74B1E6;
  --accent-strong: #4A8FCD;
  --accent-soft: #9CC5E8;
  --accent-gold: #D4A843;
  --accent-light: rgba(116,177,230,.08);
  --accent-text: #4A8FCD;

  --cat-course: #7b4fb5;    --cat-course-bg: rgba(123,79,181,.09);   --cat-course-border: rgba(123,79,181,.18);
  --cat-ref: #11907e;       --cat-ref-bg: rgba(17,144,126,.08);      --cat-ref-border: rgba(17,144,126,.16);
  --cat-news: #c97f10;      --cat-news-bg: rgba(201,127,16,.08);     --cat-news-border: rgba(201,127,16,.16);
  --cat-project: #b84c4c;   --cat-project-bg: rgba(184,76,76,.07);    --cat-project-border: rgba(184,76,76,.15);

  --fmt-html: #c23b22;      --fmt-html-bg: rgba(194,59,34,.08);
  --fmt-pdf: #c23b22;       --fmt-pdf-bg: rgba(194,59,34,.08);
  --fmt-pptx: #b87c1a;      --fmt-pptx-bg: rgba(184,124,26,.08);
  --fmt-docx: #74B1E6;      --fmt-docx-bg: rgba(116,177,230,.08);
  --fmt-md: #15803d;        --fmt-md-bg: rgba(21,128,61,.08);
  --fmt-xlsx: #15803d;      --fmt-xlsx-bg: rgba(21,128,61,.08);
  --fmt-csv: #15803d;       --fmt-csv-bg: rgba(21,128,61,.08);
  --fmt-link: #7b4fb5;      --fmt-link-bg: rgba(123,79,181,.08);
  --fmt-img: #7b4fb5;       --fmt-img-bg: rgba(123,79,181,.08);

  --shadow-card: 0 1px 3px rgba(44,36,22,.05), 0 8px 24px rgba(44,36,22,.04);
  --shadow-hover: 0 4px 12px rgba(44,36,22,.1), 0 20px 40px rgba(44,36,22,.06);
  --shadow-nav: 0 1px 3px rgba(44,36,22,.06);

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 999px;
  --font-mono: 'SF Mono','Fira Code','Consolas',monospace;

  --hero-from: #74B1E6; --hero-to: #4A8FCD;
}

/* ===== 夜间模式 ===== */
[data-theme="dark"] {
  --bg-primary: #0c1017; --bg-secondary: #131a24;
  --bg-card: #171f2e; --bg-card-hover: #1c2638; --bg-card-active: #151d2b;
  --body-bg: linear-gradient(180deg,#0a0e17 0%,#0f1621 50%,#0c1017 100%);

  --border-color: #1e2c42; --border-hover: #283954; --divider-color: #192337;

  --text-primary: #e4eaf4; --text-secondary: #8b9bbd; --text-muted: #556582;

  --accent: #74B1E6; --accent-strong: #4A8FCD; --accent-soft: #9CC5E8; --accent-gold: #E5B65A; --accent-light: rgba(116,177,230,.12); --accent-text: #9CC5E8;

  --cat-course: #a78bfa;   --cat-course-bg: rgba(139,92,246,.10);  --cat-course-border: rgba(139,92,246,.25);
  --cat-ref: #22d3ee;      --cat-ref-bg: rgba(34,211,238,.10);     --cat-ref-border: rgba(34,211,238,.22);
  --cat-news: #fbbf24;     --cat-news-bg: rgba(245,158,11,.10);    --cat-news-border: rgba(245,158,11,.20);
  --cat-project: #f87171;  --cat-project-bg: rgba(249,113,113,.08); --cat-project-border: rgba(249,113,113,.18);

  --fmt-html: #ef4444;     --fmt-html-bg: rgba(239,68,68,.10);
  --fmt-pdf: #ef4444;      --fmt-pdf-bg: rgba(239,68,68,.10);
  --fmt-pptx: #f59e0b;     --fmt-pptx-bg: rgba(245,158,11,.10);
  --fmt-docx: #9CC5E8;     --fmt-docx-bg: rgba(116,177,230,.10);
  --fmt-md: #34d399;       --fmt-md-bg: rgba(52,211,99,.10);
  --fmt-xlsx: #34d399;     --fmt-xlsx-bg: rgba(52,211,99,.10);
  --fmt-csv: #34d399;       --fmt-csv-bg: rgba(52,211,99,.10);
  --fmt-link: #a78bfa;     --fmt-link-bg: rgba(167,139,250,.10);
  --fmt-img: #a78bfa;      --fmt-img-bg: rgba(167,139,250,.10);

  --shadow-card: 0 2px 6px rgba(0,0,0,.2), 0 12px 32px rgba(0,0,0,.14);
  --shadow-hover: 0 6px 20px rgba(0,0,0,.3), 0 28px 56px rgba(0,0,0,.16);
  --shadow-nav: 0 1px 4px rgba(0,0,0,.18);

  --hero-from: #74B1E6; --hero-to: #4A8FCD;
}


/* ==================== 基础重置 ==================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  background: var(--body-bg); color: var(--text-primary); line-height:1.65; min-height:100vh;
  transition: background .35s ease,color .3s ease;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font:inherit; color:inherit; }
table { border-collapse:collapse; width:100%; }


/* ==================== 导航栏 ==================== */
.navbar {
  position:sticky; top:0; z-index:100;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  transition: background .3s ease,border-color .3s ease;
}
[data-theme="dark"] .navbar { background: rgba(12,16,23,.90); backdrop-filter: blur(16px) saturate(1.4); }

.nav-container {
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; height:60px; gap:16px;
  padding:0 24px;
}

/* --- Logo --- */
.logo { display:flex; align-items:center; gap:9px; flex-shrink:0; text-decoration:none!important; }
.logo-icon { width:28px;height:28px;border-radius:6px;flex-shrink:0;transition:transform .3s ease;object-fit:contain; }
.logo:hover .logo-icon { transform:rotate(-8deg) scale(1.06); }
.logo-text { font-size:17px; font-weight:700; letter-spacing:-.3px; color:var(--text-primary); }
.logo-dot { color:var(--accent); font-weight:400; }

/* --- 导航项（改用 button） --- */
.nav-links { display:flex; gap:2px; flex-wrap:nowrap; }
.nav-item {
  color:var(--text-secondary); padding:7px 15px;
  border-radius:var(--radius-full); font-size:13.5px; font-weight:500;
  transition:all .22s ease; white-space:nowrap; background:none; border:none; cursor:pointer;
}
.nav-item:hover { color:var(--text-primary); background:var(--accent-light); }
.nav-item.active { color:var(--accent); background:var(--accent-light); font-weight:600; box-shadow:inset 0 0 0 1px rgba(74,144,205,.12); }
[data-theme="dark"] .nav-item.active { box-shadow:inset 0 0 0 1px rgba(116,177,230,.18); }

/* --- 子分类导航 --- */
.sub-nav {
  display:flex; gap:4px; flex-wrap:nowrap; overflow-x:auto;
  padding:0 0 16px; margin-bottom:2px;
  -webkit-overflow-scrolling:touch;
}
.sub-nav::-webkit-scrollbar { height:0; }
.sub-nav-item {
  padding:5px 14px; font-size:12px; font-weight:500; white-space:nowrap;
  border:1px solid var(--border-color); border-radius:var(--radius-sm);
  background:var(--bg-card); color:var(--text-secondary); cursor:pointer;
  transition:all .18s ease; user-select:none; flex-shrink:0;
}
.sub-nav-item:hover { color:var(--text-primary); background:var(--accent-light); border-color:var(--accent-light); }
.sub-nav-item.active { color:var(--accent); background:var(--accent-light); border-color:var(--accent); font-weight:600; }
[data-theme="dark"] .sub-nav-item.active { border-color:rgba(116,177,230,.35); }

/* --- 右侧工具区 --- */
.nav-right { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto; }

/* 视图切换（导航栏 + 工具栏两用） */
.view-toggle { display:flex; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:2px; }
.view-toggle .view-btn { width:30px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:4px;color:var(--text-muted);transition:all .2s ease; }
.view-toggle .view-btn:hover { color:var(--text-secondary); }
.view-toggle .view-btn.active { background:var(--accent); color:#fff; }
/* 工具栏内的视图切换更紧凑 */
.toolbar-left > .view-toggle { flex-shrink:0; }
.toolbar-left > .view-toggle .view-btn { width:28px;height:26px; }

/* 搜索框 */
.search-form { display:inline-block; margin:0; padding:0; } /* form 包裹, 不破坏 layout */
.search-box { position:relative; }
.search-box input {
  background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-full);
  padding:7px 34px 7px 14px; color:var(--text-primary); font-size:13px; width:190px; outline:none;
  transition:all .25s ease;
}
.search-box input::placeholder { color:var(--text-muted); }
.search-box input:focus { width:240px; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
/* 隐藏 chrome 自身的 search 清空 X 按钮 (type="search" 默认的) - 避免与自定义 .search-clear 双 X */
.search-box input::-webkit-search-cancel-button,
.search-box input::-webkit-search-decoration,
.search-box input::-webkit-search-results-button,
.search-box input::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
}
.search-icon { position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-muted); }
.search-clear {
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;border:none;background:transparent;
  color:var(--text-muted);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:all .18s ease;padding:0;z-index:1;
}
.search-clear:hover{color:var(--text-primary);background:var(--bg-card-hover);}
/* 有清空按钮时，搜索图标左移 */
.search-box input:not(:placeholder-shown) ~ .search-icon{right:32px;}

/* 主题切换按钮 */
.theme-toggle {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); color:var(--text-muted);
  border:1px solid var(--border-color); background:var(--bg-card); transition:all .22s ease;
}
.theme-toggle:hover { color:var(--text-secondary); border-color:var(--border-hover); }
[data-theme="dark"] .theme-toggle { color:#c9d1e0; border-color:#2a3a52; }
[data-theme="dark"] .theme-toggle:hover { color:#fff; border-color:var(--accent); }
.theme-icon { display:none; }
.theme-icon-sun[data-visible="true"],
.theme-icon-moon[data-visible="true"] { display:block; }

/* 上传按钮 */
.upload-btn {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); color:var(--text-muted);
  border:1px solid var(--border-color); background:var(--bg-card);
  transition:all .22s ease; cursor:pointer; padding:0;
}
.upload-btn:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-light); }
[data-theme="dark"] .upload-btn { color:#c9d1e0; border-color:#2a3a52; }
[data-theme="dark"] .upload-btn:hover { color:var(--accent); border-color:var(--accent); background:rgba(232,160,76,.08); }

/* ========== 模态框 ========== */
.modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center;
  animation:modalFadeIn .2s ease;
}
@keyframes modalFadeIn { from{opacity:0} to{opacity:1} }

.modal {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--radius-lg); padding:28px 32px; width:90%; max-width:420px;
  box-shadow:var(--shadow-md); animation:modalSlideIn .25s ease;
}
@keyframes modalSlideIn { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
.modal-upload { max-width:480px; position:relative; }
.modal-close-x {
  position:absolute; top:12px; right:14px; z-index:10;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-color); border-radius:50%;
  background:var(--bg-primary); color:var(--text-muted);
  font-size:18px; line-height:1; cursor:pointer;
  transition:all .15s ease;
}
.modal-close-x:hover { color:var(--text-primary); border-color:var(--text-muted); background:var(--bg-card); }
[dir="rtl"] .modal-close-x { right:auto; left:14px; }

.stats-categories { display:none!important; }

.modal-title { font-size:17px; font-weight:700; color:var(--text-primary); margin-bottom:20px; }

.modal-label { display:block; font-size:12.5px; font-weight:600; color:var(--text-secondary); margin-bottom:5px; margin-top:14px; }
.modal-label:first-of-type { margin-top:0; }

.modal-input, .modal-select {
  width:100%; padding:9px 12px; font-size:13.5px; font-family:inherit;
  border:1px solid var(--border-color); border-radius:var(--radius-sm);
  background:var(--bg-page); color:var(--text-primary); outline:none;
  transition:border-color .2s; box-sizing:border-box;
}
.modal-input:focus, .modal-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.modal-select { cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23938a7a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}

.modal-error { color:#e74c3c; font-size:12.5px; margin-top:6px; }

.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.modal-btn {
  padding:8px 20px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; font-family:inherit;
  border:none; cursor:pointer; transition:all .18s ease;
}
.modal-btn-primary { background:var(--accent); color:#fff; }
.modal-btn-primary:hover { opacity:.88; }
.modal-btn-primary:disabled { opacity:.45; cursor:not-allowed; }
.modal-btn-cancel { background:transparent; color:var(--text-muted); border:1px solid var(--border-color); }
.modal-btn-cancel:hover { color:var(--text-primary); border-color:var(--border-hover); }

/* 拖放区 */
.drop-zone {
  border:2px dashed var(--border-color); border-radius:var(--radius-md);
  padding:28px 20px; text-align:center; cursor:pointer;
  transition:all .2s ease; background:var(--bg-page);
}
.drop-zone:hover, .drop-zone.drag-active { border-color:var(--accent); background:var(--accent-light); }
.drop-icon { color:var(--text-muted); margin-bottom:8px; }
.drop-text { font-size:13px; color:var(--text-secondary); }
.drop-text span { color:var(--accent); font-weight:600; text-decoration:underline; cursor:pointer; }
.drop-hint { font-size:11.5px; color:var(--text-muted); margin-top:6px; }
.file-name {
  font-size:12.5px; color:var(--accent); margin-top:8px; font-weight:500;
  display:flex; align-items:center; gap:5px;
}

.upload-status { font-size:13px; margin-top:10px; padding:8px 12px; border-radius:var(--radius-sm); }
.upload-status.success { color:#27ae60; background:rgba(39,174,96,.08); }
.upload-status.error { color:#e74c3c; background:rgba(231,76,60,.08); }
.upload-status.loading { color:var(--accent); background:var(--accent-light); }

/* 模态框标签切换 */
.modal-tabs { display:flex; gap:0; margin-bottom:18px; border-bottom:1px solid var(--border-color); }
.modal-tab {
  flex:1; padding:9px 0; font-size:14px; font-weight:600; font-family:inherit;
  border:none; background:none; color:var(--text-muted); cursor:pointer;
  border-bottom:2px solid transparent; transition:all .2s ease;
}
.modal-tab:hover { color:var(--text-primary); }
.modal-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.modal-panel { animation:modalFadeIn .2s ease; }

/* 文件管理列表 */
.file-manage-list { max-height:360px; overflow-y:auto; margin:0 -4px; }
.file-manage-list::-webkit-scrollbar { width:4px; }
.file-manage-list::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:2px; }
.manage-loading { text-align:center; color:var(--text-muted); font-size:13px; padding:20px 0; }
.manage-empty { text-align:center; color:var(--text-muted); font-size:13px; padding:20px 0; }

.manage-row {
  display:flex; align-items:center; gap:10px; padding:10px 8px;
  border-bottom:1px solid var(--border-color); transition:background .15s;
}
.manage-row:hover { background:var(--bg-page); }
.manage-row-info { flex:1; min-width:0; }
.manage-row-name {
  font-size:13px; font-weight:600; color:var(--text-primary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.manage-row-meta { font-size:11px; color:var(--text-muted); margin-top:2px; }
.manage-row-desc {
  font-size:11.5px; color:var(--text-secondary); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:280px;
}
.manage-row-actions { display:flex; gap:4px; flex-shrink:0; }
.manage-btn {
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:4px; border:1px solid var(--border-color); background:var(--bg-card);
  color:var(--text-muted); cursor:pointer; transition:all .15s; padding:0;
}
.manage-btn:hover { color:var(--accent); border-color:var(--accent); }
.manage-btn-del:hover { color:#e74c3c; border-color:#e74c3c; }

/* 编辑描述行内 */
.manage-edit-row { display:flex; gap:6px; align-items:center; padding:4px 0; }
.manage-edit-input {
  flex:1; padding:5px 8px; font-size:12px; font-family:inherit;
  border:1px solid var(--accent); border-radius:4px; background:var(--bg-page);
  color:var(--text-primary); outline:none;
}
.manage-edit-save, .manage-edit-cancel {
  padding:4px 10px; font-size:11.5px; font-weight:600; font-family:inherit;
  border-radius:4px; cursor:pointer; border:none; transition:all .15s;
}
.manage-edit-save { background:var(--accent); color:#fff; }
.manage-edit-cancel { background:transparent; color:var(--text-muted); border:1px solid var(--border-color); }

/* 子分类管理面板 */
.subcat-select-row {
  display:flex; gap:6px; align-items:center;
}
.subcat-select-inline { flex:1; }
.subcat-mgmt-toggle {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-color); border-radius:var(--radius-sm);
  background:var(--bg-card); color:var(--text-muted); cursor:pointer;
  transition:all .15s; flex-shrink:0; padding:0;
}
.subcat-mgmt-toggle:hover, .subcat-mgmt-toggle.active {
  color:var(--accent); border-color:var(--accent);
}
.subcat-mgmt-panel {
  margin-top:8px; padding:10px; border:1px solid var(--border-color);
  border-radius:var(--radius-sm); background:var(--bg-primary);
}
.subcat-mgmt-list { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.subcat-mgmt-item {
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
  border:1px solid var(--border-color); border-radius:var(--radius-full);
  background:var(--bg-card); font-size:11.5px; color:var(--text-secondary);
  transition:all .15s;
}
.subcat-mgmt-item:hover { border-color:var(--accent-light); }
.subcat-mgmt-item-del {
  width:16px; height:16px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%; background:transparent; color:var(--text-muted);
  cursor:pointer; transition:all .12s; padding:0; flex-shrink:0;
}
.subcat-mgmt-item-del:hover { color:#e74c3c; background:rgba(231,76,60,.08); }
.subcat-mgmt-add { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px; }
.subcat-mgmt-input {
  padding:4px 8px; font-size:11.5px; font-family:inherit;
  border:1px solid var(--border-color); border-radius:4px;
  background:var(--bg-card); color:var(--text-primary); outline:none;
  width:100px; transition:border-color .15s;
}
.subcat-mgmt-input:focus { border-color:var(--accent); }
.subcat-mgmt-add-actions { display:flex; gap:4px; }
.subcat-add-btn {
  display:inline-flex; align-items:center; gap:4px; padding:4px 10px;
  font-size:11.5px; font-weight:500; font-family:inherit;
  border:1px dashed var(--border-color); border-radius:4px;
  background:transparent; color:var(--text-muted); cursor:pointer;
  transition:all .15s;
}
.subcat-add-btn:hover { color:var(--accent); border-color:var(--accent); }

/* 文件管理 - 子分类下拉 */
.manage-subcat-select {
  padding:3px 20px 3px 6px; font-size:11px; font-family:inherit;
  border:1px solid var(--border-color); border-radius:4px;
  background:var(--bg-card); color:var(--text-secondary); outline:none;
  cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23938a7a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 5px center;
  transition:border-color .15s; max-width:100px;
}
.manage-subcat-select:focus { border-color:var(--accent); }

/* 删除确认 */
.manage-confirm-overlay {
  position:fixed; inset:0; z-index:210; background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
.manage-confirm-box {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--radius-md); padding:20px 24px; max-width:340px;
  box-shadow:var(--shadow-md); text-align:center;
}
.manage-confirm-text { font-size:13.5px; color:var(--text-primary); margin-bottom:6px; }
.manage-confirm-file { font-size:12px; color:var(--text-muted); margin-bottom:16px; word-break:break-all; }
.manage-confirm-actions { display:flex; gap:8px; justify-content:center; }
.manage-confirm-actions button {
  padding:7px 18px; font-size:13px; font-weight:600; font-family:inherit;
  border-radius:4px; cursor:pointer; border:none; transition:all .15s;
}
.manage-confirm-btn-del { background:#e74c3c; color:#fff; }
.manage-confirm-btn-del:hover { opacity:.85; }
.manage-confirm-btn-cancel { background:transparent; color:var(--text-muted); border:1px solid var(--border-color); }


/* ==================== Hero 区域 ==================== */
.hero {
  position:relative; overflow:hidden; padding:80px 24px 70px; text-align:center;
  /* 蓝色深 15%: 从 #7ec4ff→#6aabe6 / #bce0ff→#9cc8e6 / #e8f5ff→#cce0f0 */
  background:linear-gradient(180deg,#6aabe6 0%,#9cc8e6 60%,#cce0f0 100%);
  color:#fff;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(800px 400px at 20% 20%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(700px 380px at 80% 30%, rgba(255,255,255,.25), transparent 65%);
}
.hero h1 {
  font-size:clamp(28px,4.5vw,42px); font-weight:800; letter-spacing:-.5px;
  color:#ffffff; margin-bottom:12px;
  text-shadow:0 2px 12px rgba(15,42,80,.25);
}
.hero-desc {
  color:#f0f7ff; font-size:15px; max-width:520px; margin:0 auto 32px; font-weight:500;
  text-shadow:0 1px 4px rgba(15,42,80,.18);
}
.hero-bg-grid {
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.5), transparent 80%);
}
.hero-content { position:relative; z-index:1; }

/* 原始 hero-bg-grid (CSS 网格装饰) 不再使用, 上层 DOM 元素也以隐藏 */
.hero-bg-grid { display:none !important; }

/* ==================== 分类统计条 ==================== */
.stats-row {
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px;
  max-width:880px; margin:0 auto; position:relative; z-index:1;
}
.stat-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px 8px; border-radius:14px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
  color:#ffffff; text-decoration:none;
  transition:all .25s ease;
}
.stat-item:hover{
  background:rgba(255,255,255,.26); transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(15,42,80,.18);
}
.stat-num {
  font-size:24px; font-weight:800; font-family:var(--font-mono);
  line-height:1.1; color:#ffffff;
  text-shadow:0 1px 6px rgba(15,42,80,.18);
}
.stat-num-date{ font-size:14px; font-weight:700; }
.stat-label {
  font-size:12px; margin-top:4px; color:rgba(255,255,255,.92);
  letter-spacing:.5px; font-weight:500;
}
.stat-item-date{ cursor:default; }


/* ==================== 分类标签入口 (Gateway) — 精致卡片风 ==================== */
.category-gateway {
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin-bottom:28px; animation:fadeIn .4s ease both;
}
.category-gateway.hidden { display:none !important; }

/* ==================== 分类卡 — 液态玻璃 (Liquid Glass) ====================
   设计: 4 分类统一玻璃质感, 不分分类色. 图标保留 4 色, 文件卡色条保留 4 色.
   玻璃 3 关键: 半透明+模糊 / 高光+阴影 / 边缘微光折射.
*/
.gateway-card {
  position:relative;
  background:linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.35) 100%);
  backdrop-filter:blur(24px) saturate(200%);
  -webkit-backdrop-filter:blur(24px) saturate(200%);
  border:1px solid rgba(255,255,255,.65);
  border-radius:var(--radius-lg); padding:0; cursor:pointer;
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(15,42,80,.05),
    0 4px 18px rgba(15,42,80,.08), 0 1px 3px rgba(15,42,80,.05);
  transition:transform .25s ease, box-shadow .3s ease, border-color .25s ease;
  text-decoration:none; display:block;
}
.gateway-card:hover {
  border-color:rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(15,42,80,.08),
    0 12px 36px rgba(15,42,80,.15), 0 3px 10px rgba(15,42,80,.08);
  transform:translateY(-3px);
}

/* 夜间模式玻璃 (深色 + 略亮 alpha, 边光改为白色) */
[data-theme="dark"] .gateway-card {
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.08) 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 4px 18px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.25);
}
[data-theme="dark"] .gateway-card:hover {
  border-color:rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 12px 36px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.3);
}

/* --- dark mode 必要卡片亮蓝细边框（提升边缘可读性，白天不变） --- */
[data-theme="dark"] .file-card { border-color:rgba(116,177,230,.32); }
[data-theme="dark"] .gateway-card { border-color:rgba(116,177,230,.32); }
[data-theme="dark"] .login-card { border-color:rgba(116,177,230,.32); }

/* 玻璃版 hero 区: 半透明 + 渐变光晕, 不再用主色块 */
.gateway-card-hero {
  padding:28px 24px 20px; text-align:center;
  background:transparent;
  position:relative; overflow:hidden;
}
.gateway-card-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 75% 25%, rgba(255,255,255,.25) 0%, transparent 60%);
  pointer-events:none;
}

/* 4 分类图标保留 4 色 (紫/青/琥珀/砖红), 用 CSS 变量驱动 */
.gw-courses    { --gw-accent: #7b4fb5; --icon-color: #7b4fb5; }
.gw-references { --gw-accent: #11907e; --icon-color: #11907e; }
.gw-news       { --gw-accent: #c97f10; --icon-color: #c97f10; }
.gw-projects   { --gw-accent: #b84c4c; --icon-color: #b84c4c; }
[data-theme="dark"] .gw-courses    { --gw-accent: #a78bfa; --icon-color: #a78bfa; }
[data-theme="dark"] .gw-references { --gw-accent: #22d3ee; --icon-color: #22d3ee; }
[data-theme="dark"] .gw-news       { --gw-accent: #fbbf24; --icon-color: #fbbf24; }
[data-theme="dark"] .gw-projects   { --gw-accent: #f87171; --icon-color: #f87171; }

.gateway-card-icon {
  width:48px; height:48px; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.65);
  border-radius:14px;
  color:var(--icon-color,var(--accent));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.gateway-card-icon svg { width:24px; height:24px; stroke-width:2.2; }

.gateway-card-name {
  font-size:16px; font-weight:700;
  color:var(--text-primary);
  letter-spacing:-.2px; margin-bottom:3px;
}
.gateway-card-num {
  font-size:12.5px; color:var(--text-muted);
  font-family:var(--font-mono); font-weight:500;
}

.gateway-card-divider {
  height:1px; margin:0 20px;
  background:linear-gradient(90deg, transparent, rgba(15,42,80,.12), transparent);
  opacity:.6;
}
[data-theme="dark"] .gateway-card-divider {
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}

.gateway-card-links {
  padding:14px 16px 16px;
}
.gateway-link {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 12px; border-radius:var(--radius-sm);
  font-size:13px; color:var(--text-secondary); font-weight:500;
  transition:all .16s ease; cursor:pointer; text-decoration:none;
}
.gateway-link:hover {
  color:var(--gw-accent,var(--accent));
  background:var(--accent-light);
}
.gateway-link + .gateway-link { margin-top:2px; }
.gateway-link-count {
  font-family:var(--font-mono); font-size:11px;
  color:var(--text-muted); margin-left:8px; flex-shrink:0;
}
.gateway-link:hover .gateway-link-count { color:var(--gw-accent,var(--accent)); }
.gateway-link-more {
  display:block; text-align:center; padding:5px 0 0;
  font-size:11.5px; color:var(--text-muted);
  opacity:.55; transition:opacity .15s; cursor:pointer;
}
.gateway-link-more:hover { opacity:1; color:var(--gw-accent,var(--accent)); }

/* Gateway 空态 */
.gateway-empty {
  grid-column:1/-1; text-align:center; padding:12px 0;
  color:var(--text-muted); font-size:13px;
}

/* ==================== 主内容区 ==================== */
.main-content { max-width:1280px; margin:0 auto; padding:24px; min-height:400px; position:relative; }

/* ==================== 液态玻璃专用彩色背景 ====================
   4 分类卡片要看到"玻璃"效果, 必须在主区有彩色光斑.
   Hero 已有蓝色渐变, 主区追加 4 个色斑径向渐变, 让玻璃透出色感.
*/
.main-content::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(450px 280px at 12% 20%, rgba(123, 79, 181, 0.22) 0%, transparent 70%),
    radial-gradient(450px 280px at 38% 20%, rgba(17, 144, 126, 0.20) 0%, transparent 70%),
    radial-gradient(450px 280px at 62% 20%, rgba(201, 127, 16, 0.18) 0%, transparent 70%),
    radial-gradient(450px 280px at 88% 20%, rgba(184, 76, 76, 0.18) 0%, transparent 70%);
}
.main-content > * { position:relative; z-index:1; }

/* 夜间玻璃背景 (更深的色斑, 玻璃的边光感更强) */
[data-theme="dark"] .main-content::before {
  background:
    radial-gradient(450px 280px at 12% 20%, rgba(167, 139, 250, 0.18) 0%, transparent 70%),
    radial-gradient(450px 280px at 38% 20%, rgba(34, 211, 238, 0.16) 0%, transparent 70%),
    radial-gradient(450px 280px at 62% 20%, rgba(251, 191, 36, 0.14) 0%, transparent 70%),
    radial-gradient(450px 280px at 88% 20%, rgba(248, 113, 113, 0.14) 0%, transparent 70%);
}

/* 工具栏 */
.toolbar {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:18px; padding:11px 16px;
  background:var(--bg-secondary); border:1px solid var(--border-color);
  border-radius:var(--radius-md); transition:background .3s ease,border-color .3s ease;
}
.result-count { font-size:13.5px; color:var(--text-secondary); }
.result-count span { color:var(--accent); font-weight:700; font-family:var(--font-mono); }
.toolbar-right { display:flex; gap:5px; align-items:center; }
.format-filter select {
  padding:6px 28px 6px 10px;border-radius:var(--radius-full);
  border:1px solid var(--border-color);background:var(--bg-card);
  color:var(--text-secondary);font-size:12px;font-family:inherit;
  cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23938a7a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  background-size:10px;transition:all .2s ease;max-width:130px;
}
[data-theme="dark"] .format-filter select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23556582' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.format-filter select:focus{border-color:var(--accent);color:var(--text-primary);}
.toolbar-btn {
  display:inline-flex; align-items:center; gap:5px;
  background:transparent; border:1px solid var(--border-color); color:var(--text-secondary);
  padding:6px 13px; border-radius:var(--radius-full); font-size:12.5px; font-weight:500; transition:all .2s ease;
}
.toolbar-btn svg { opacity:.65; }
.toolbar-btn:hover { border-color:var(--border-hover); color:var(--text-primary); background:var(--bg-card); }
.toolbar-btn.active { background:var(--accent-light); border-color:var(--accent); color:var(--accent-text); }
.toolbar-btn.active svg { opacity:1; }


/* ==================== 网格视图 ==================== */
.file-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px;
}
.file-grid.hidden { display:none !important; }

.file-card {
  background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md);
  padding:18px 20px; cursor:pointer; position:relative;
  animation:cardIn .35s ease both; text-decoration:none!important; display:block;
  transition:border-color .22s ease,box-shadow .25s ease,transform .2s ease,background .2s ease;
}
.file-card:nth-child(1){animation-delay:.02s}.file-card:nth-child(2){animation-delay:.04s}
.file-card:nth-child(3){animation-delay:.06s}.file-card:nth-child(4){animation-delay:.08s}
.file-card:nth-child(5){animation-delay:.10s}.file-card:nth-child(6){animation-delay:.12s}
.file-card:nth-child(7){animation-delay:.14s}.file-card:nth-child(8){animation-delay:.16s}
.file-card:nth-child(9){animation-delay:.18s}.file-card:nth-child(n+10){animation-delay:.20s}

@keyframes cardIn { from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} }

.file-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:var(--card-accent,var(--accent)); opacity:0; transition:opacity .25s ease;
}
.file-card:hover {
  border-color:var(--border-hover); background:var(--bg-card-hover);
  box-shadow:var(--shadow-hover); transform:translateY(-2px);
}
.file-card:hover::before { opacity:1; }

.card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:11px; }
.file-icon-wrap {
  width:42px; height:42px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-light); flex-shrink:0; transition:background .2s ease;
}
.file-card:hover .file-icon-wrap { background:var(--card-accent,var(--accent)); }
.card-badge { font-size:11px; padding:3px 10px; border-radius:var(--radius-full); font-weight:600; white-space:nowrap; letter-spacing:.2px; }
.badge-course{background:var(--cat-course-bg);color:var(--cat-course);border:1px solid var(--cat-course-border)}
.badge-ref{background:var(--cat-ref-bg);color:var(--cat-ref);border:1px solid var(--cat-ref-border)}
.badge-news{background:var(--cat-news-bg);color:var(--cat-news);border:1px solid var(--cat-news-border)}
.badge-project{background:var(--cat-project-bg);color:var(--cat-project);border:1px solid var(--cat-project-border)}

.file-title { font-size:14.5px; font-weight:650; color:var(--text-primary); margin-bottom:5px; line-height:1.45; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.file-desc { font-size:12.5px; color:var(--text-muted); line-height:1.55; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; margin-bottom:12px; }
.card-meta { display:flex; align-items:center; justify-content:space-between; padding-top:11px; border-top:1px solid var(--divider-color); font-size:11.5px; color:var(--text-muted); }
.meta-left { display:flex; align-items:center; gap:10px; }
.format-tag { padding:2px 7px; border-radius:4px; font-size:10px; font-family:var(--font-mono); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.fmt-html{background:var(--fmt-html-bg);color:var(--fmt-html)}.fmt-pdf{background:var(--fmt-pdf-bg);color:var(--fmt-pdf)}
.fmt-pptx{background:var(--fmt-pptx-bg);color:var(--fmt-pptx)}.fmt-docx{background:var(--fmt-docx-bg);color:var(--fmt-docx)}
.fmt-md{background:var(--fmt-md-bg);color:var(--fmt-md)}.fmt-xlsx{background:var(--fmt-xlsx-bg);color:var(--fmt-xlsx)}
.fmt-csv{background:var(--fmt-csv-bg);color:var(--fmt-csv)}.fmt-link{background:var(--fmt-link-bg);color:var(--fmt-link)}
.fmt-img{background:var(--fmt-img-bg);color:var(--fmt-img)}


/* ==================== 列表视图 ==================== */
.file-list { animation:fadeIn .3s ease both; }
.file-list.hidden { display:none !important; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.file-list table { width:100%; border-collapse:separate; border-spacing:0; }
.file-list thead th {
  padding:10px 16px; font-size:11.5px; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.8px; text-align:left;
  border-bottom:2px solid var(--border-color); background:var(--bg-secondary);
  position:sticky; top:60px; z-index:2;
}
.col-name{width:34%}.col-category{width:13%}.col-type{width:9%}.col-size{width:9%}.col-date{width:13%}.col-action{width:22%; text-align:right}

.file-list tbody tr { transition:background .14s ease; cursor:pointer; }
.file-list tbody tr:hover { background:var(--bg-card-active); }
.file-list tbody td {
  padding:11px 16px; font-size:13px; border-bottom:1px solid var(--divider-color);
  color:var(--text-secondary); vertical-align:middle;
}

.list-name-cell { display:flex; align-items:center; gap:11px; }
.list-icon { width:34px; height:34px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--accent-light); }
.list-filename { font-weight:550; color:var(--text-primary); font-size:13px; line-height:1.4; }
.list-filedesc { font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.list-cat-badge { font-size:11px; padding:2px 9px; border-radius:var(--radius-full); font-weight:500; white-space:nowrap; display:inline-block; }
.list-fmt-tag { font-size:10px; font-family:var(--font-mono); font-weight:700; text-transform:uppercase; letter-spacing:.3px; padding:2px 7px; border-radius:4px; display:inline-block; }
.list-actions { display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.action-btn {
  display:inline-flex; align-items:center; gap:4px; padding:5px 11px;
  border-radius:var(--radius-full); font-size:11.5px; font-weight:500;
  border:1px solid var(--border-color); color:var(--text-secondary); background:var(--bg-card);
  transition:all .18s ease; text-decoration:none!important; white-space:nowrap;
}
.action-btn:hover { border-color:var(--accent); color:var(--accent-text); }
.action-btn svg { width:14px; height:14px; flex-shrink:0; }


/* ==================== 加载 / 空 / 骨架屏 ==================== */
.loading-state { grid-column:1/-1; text-align:center; padding:40px 20px 32px; }

/* 骨架屏 */
.skeleton-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;max-width:1280px;margin:0 auto;
}
.skeleton-card{
  background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);
  padding:18px 20px;animation:skeleton-pulse 1.6s ease-in-out infinite;
}
.skeleton-line{background:linear-gradient(90deg,var(--bg-card) 25%,var(--border-color) 50%,var(--bg-card) 75%);background-size:200% 100%;border-radius:4px;animation:skeleton-shimmer 1.6s infinite;}
.skeleton-line.w-40{width:40%;}.skeleton-line.w-50{width:50%;}.skeleton-line.w-60{width:60%;}.skeleton-line.w-65{width:65%;}.skeleton-line.w-75{width:75%;}.skeleton-line.w-80{width:80%;}.skeleton-line.w-85{width:85%;}.skeleton-line.w-full{width:100%;}
.skeleton-line.h-8{height:8px;}.skeleton-line.h-12{height:12px;}.skeleton-line.h-14{height:14px;}.skeleton-line.h-16{height:16px;}
.skeleton-line.mb{margin-bottom:11px;}.skeleton-line.mt-a{margin-top:auto;}
@keyframes skeleton-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

.spinner { width:32px;height:32px;border:3px solid var(--border-color); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite;margin:0 auto 14px; }
@keyframes spin { to{transform:rotate(360deg)} }

.empty-state { grid-column:1/-1; text-align:center; padding:72px 20px; color:var(--text-muted); }
.empty-state.error-mode .empty-svg { color:var(--fmt-html,#c23b22); }
.empty-state.error-mode h3 { color:var(--fmt-html,#c23b22); }
.empty-svg { color:var(--text-muted); margin-bottom:16px; }
.empty-state h3 { color:var(--text-secondary); margin-bottom:6px; font-size:17px; font-weight:600; }
.empty-state p { font-size:13.5px; }


/* ==================== 页脚 ==================== */
.footer { border-top:1px solid var(--border-color); padding:24px; margin-top:48px; text-align:center; transition:border-color .3s ease; }
.footer-content p { color:var(--text-muted); font-size:12.5px; letter-spacing:.2px; }
.footer-inner { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.footer-brand { display:flex; align-items:center; }
.footer-logo-img { display:block; }
.footer-tagline { color:var(--text-muted); font-size:13px; letter-spacing:.5px; }
.footer-copyright { color:var(--text-muted); font-size:12.5px; letter-spacing:.2px; }


/* ==================== 响应式 ==================== */
@media(max-width:900px){
  .nav-container{flex-wrap:wrap;height:auto;padding:10px 16px;gap:8px;}
  .nav-links{order:3;width:100%;justify-content:center;padding-top:4px;gap:2px;}
  .nav-item{padding:6px 11px;font-size:12.5px;}
  .search-box input{width:140px;} .search-box input:focus{width:180px;}
  .col-name{width:28%;} .col-action{width:auto;min-width:80px;}
  .list-filedesc{display:none;}
}
@media(max-width:768px){
  .hero{padding:72px 16px 68px; min-height: 260px;}
  .file-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
  .main-content{padding:16px;}
  .toolbar{margin-bottom:14px;padding:10px 13px;}
  .category-gateway{grid-template-columns:repeat(2,1fr);gap:14px;}
  .gateway-card-hero{padding:22px 16px 16px;}
  .gateway-card-name{font-size:14px;}
  .gateway-card-num{font-size:11px;}
  .gateway-card-links{padding:10px 12px 14px;}
  .gateway-link{font-size:12px;padding:5px 10px;}
}
@media(max-width:580px){
  .hero h1{font-size:22px;}
  .hero-desc{font-size:13.5px;}
  .view-toggle{display:none;}
  .file-grid{grid-template-columns:1fr;gap:10px;}
  .list-filedesc,.file-list td:nth-child(2){display:none;}
  .toolbar{flex-direction:column;gap:10px;align-items:stretch;}
  .toolbar-right{justify-content:flex-start;}
  .file-card{padding:14px 16px;}
  .file-title{font-size:13.5px;}
  .category-gateway{grid-template-columns:1fr;gap:12px;}
  .gateway-card-hero{padding:20px 14px 14px;}
  .gateway-card-name{font-size:13px;}
  .gateway-card-num{font-size:10.5px;}
  .gateway-card-links{padding:10px 10px 12px;}
  .gateway-link{font-size:11.5px;padding:5px 8px;}
}

/* ============================================
   P3: 用户菜单 & 鉴权组件
   ============================================ */

/* 导航栏用户区 */
.nav-actions {
  display: flex; align-items: center; gap: 8px;
}

.login-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; font-size: 13px; font-family: inherit; font-weight: 600;
  border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff;
  cursor: pointer; transition: all .2s;
  white-space: nowrap;
}
.login-nav-btn:hover { opacity: .85; }

.upload-nav-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; font-size: 13px; font-family: inherit; font-weight: 500;
  border-radius: 8px; border: 1px solid var(--border-color);
  background: transparent; color: var(--text-secondary);
  cursor: pointer; transition: all .2s;
  white-space: nowrap;
}
.upload-nav-btn:hover {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-light);
}

/* 用户下拉菜单 */
.user-dropdown {
  position: relative; display: none;
}
.user-dropdown.show { display: inline-block; }
.user-dropdown-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px; border-radius: 8px;
  border: 1px solid var(--border-color); background: transparent;
  cursor: pointer; font-family: inherit; font-size: 13px;
  color: var(--text-primary); transition: all .2s;
}
.user-dropdown-toggle:hover,
.user-dropdown-toggle.open {
  border-color: var(--accent); background: var(--accent-light);
}
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.user-dropdown-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  width: 220px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(44,36,22,.10), 0 2px 6px rgba(44,36,22,.06);
  z-index: 100; padding: 4px 0;
  overflow: hidden;
}
.user-dropdown-menu.open { display: block; }

/* 一行一项：所有 .udm-row 都用这套布局 */
.udm-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  font-size: 13px; line-height: 1;
  color: var(--text-primary);
  text-decoration: none; cursor: pointer;
  background: transparent; border: 0; text-align: left;
  font-family: inherit; box-sizing: border-box;
}
.udm-row svg { flex-shrink: 0; color: var(--text-muted); }
.udm-row:hover { background: var(--accent-light); color: var(--accent); }
.udm-row:hover svg { color: var(--accent); }

/* 身份卡（首行） */
.udm-profile { padding: 10px 14px; }
.udm-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; flex-shrink: 0;
}
.udm-profile-text { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.udm-profile-name {
  font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100px;
}
.udm-profile-role {
  font-size: 11px; color: var(--accent);
  background: var(--accent-light);
  padding: 2px 6px; border-radius: 999px;
  font-weight: 500;
}

/* 分隔 */
.udm-divider { height: 1px; background: var(--divider-color); margin: 4px 0; }

/* 退出 */
.udm-logout { color: #DC2626; }
.udm-logout svg { color: #DC2626; }
.udm-logout:hover { background: #FEF2F2; color: #DC2626; }
.udm-logout:hover svg { color: #DC2626; }
[data-theme="dark"] .udm-logout { color: #F87171; }
[data-theme="dark"] .udm-logout svg { color: #F87171; }
[data-theme="dark"] .udm-logout:hover { background: rgba(220,38,38,.12); }

/* 改密弹窗 */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.5);
  align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.show { display: flex; }
.modal-dialog {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 14px; box-shadow: var(--shadow-md);
  width: 380px; max-width: 92vw; padding: 0;
}
.modal-header {
  padding: 18px 20px 12px; border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.modal-close {
  width: 28px; height: 28px; border-radius: 6px; border: none;
  background: transparent; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 16px; transition: all .15s;
}
.modal-close:hover { background: var(--bg-sidebar); color: var(--text-primary); }
.modal-body { padding: 18px 20px 24px; }
.form-group { margin-bottom: 14px; }
.form-label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 5px;
}
.form-input {
  width: 100%; padding: 9px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--border-color); border-radius: 8px;
  background: var(--bg-page); color: var(--text-primary);
  transition: border-color .2s; box-sizing: border-box;
}
.form-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.form-error {
  display: none; font-size: 12px; color: #dc2626;
  margin-top: 4px;
}
.form-hint {
  font-size: 11.5px; color: var(--text-muted); margin-top: 3px;
}
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.btn-primary {
  padding: 8px 20px; font-size: 13px; font-family: inherit; font-weight: 600;
  border: none; border-radius: 8px;
  background: var(--accent); color: #fff; cursor: pointer;
  transition: opacity .2s;
}
.btn-primary:hover { opacity: .85; }
.btn-secondary {
  padding: 8px 20px; font-size: 13px; font-family: inherit; font-weight: 500;
  border: 1px solid var(--border-color); border-radius: 8px;
  background: transparent; color: var(--text-secondary);
  cursor: pointer; transition: all .2s;
}
.btn-secondary:hover {
  border-color: var(--text-muted); color: var(--text-primary);
}

/* 登录页 */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-page); padding: 20px;
}
.login-card {
  width: 400px; max-width: 100%; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: 40px 36px;
}
.login-card-header {
  text-align: center; margin-bottom: 32px;
}
.login-logo {
  width: 56px; height: 56px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
}
.login-logo img { width: 100%; height: 100%; object-fit: contain; }
.login-card-title {
  font-size: 22px; font-weight: 800; color: var(--text-primary);
}
.login-card-subtitle {
  font-size: 13px; color: var(--text-muted); margin-top: 4px;
}
.login-form-group {
  margin-bottom: 18px;
}
.login-form-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 6px;
}
.login-form-input {
  width: 100%; padding: 10px 14px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--bg-page); color: var(--text-primary);
  transition: border-color .2s; box-sizing: border-box;
}
.login-form-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.login-form-checkbox {
  display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
  font-size: 13px; color: var(--text-muted);
}
.login-form-checkbox input[type="checkbox"] {
  accent-color: var(--accent); width: 15px; height: 15px;
}
.login-submit {
  width: 100%; padding: 11px; font-size: 15px; font-weight: 700;
  font-family: inherit; border: none; border-radius: 10px;
  background: var(--accent); color: #fff; cursor: pointer;
  transition: opacity .2s;
}
.login-submit:hover { opacity: .85; }
.login-submit:disabled { opacity: .5; cursor: not-allowed; }
.login-error {
  display: none; background: rgba(220,38,38,.1);
  color: #dc2626; font-size: 13px; padding: 10px 14px;
  border-radius: 8px; margin-bottom: 18px; text-align: center;
}
.login-back {
  display: block; text-align: center; margin-top: 18px;
  font-size: 13px; color: var(--text-muted);
  border-bottom: none;
}
.login-back:hover { color: var(--accent); }

@media (max-width: 480px) {
  .login-card { padding: 28px 20px; }
  .login-card-title { font-size: 19px; }
  .modal-dialog { width: 92vw; }
}