* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary:#4f6ef7; --primary-dark:#3d5ae8; --bg:#f4f6fb; --card:#fff;
  --text:#1f2937; --muted:#6b7280; --danger:#e5484d; --border:#e5e7eb;
  --radius:14px; --shadow:0 1px 3px rgba(16,24,40,.08),0 4px 14px rgba(16,24,40,.06);
}
html, body { height:100%; }
body { font-family:"Segoe UI","Microsoft YaHei",system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
a { color:var(--primary); text-decoration:none; }
.container { max-width:1100px; margin:0 auto; padding:16px; }
.topbar { background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 16px; }
.brand { font-size:18px; font-weight:700; }
.topbar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.muted { color:var(--muted); }
.small { font-size:12.5px; }
h2 { margin:20px 0 14px; font-size:22px; }
h3 { margin:0 0 10px; font-size:16px; }
.btn { display:inline-block; border:1px solid var(--border); background:#fff; color:var(--text); padding:7px 14px; border-radius:9px; font-size:14px; cursor:pointer; transition:all .15s; font-family:inherit; }
.btn:hover { border-color:var(--primary); color:var(--primary); }
.btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); color:#fff; }
.btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-danger:hover { background:#d13438; color:#fff; }
.btn-ghost { background:transparent; border-color:transparent; color:var(--muted); }
.btn-ghost:hover { background:#f3f4f6; color:var(--text); }
.btn-block { width:100%; }
.card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; margin-bottom:24px; }
.album-card { cursor:pointer; overflow:hidden; position:relative; }
.album-card:hover { box-shadow:0 8px 24px rgba(16,24,40,.12); }
.album-cover { height:110px; background:linear-gradient(135deg,#6b8afd,#9f7bfd); display:flex; align-items:center; justify-content:center; font-size:38px; color:#fff; }
.album-body { padding:12px; }
.album-name { font-weight:600; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.album-desc { font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.album-meta { display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:12.5px; color:var(--muted); }
.badge { font-size:11px; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.badge-owner { background:#fde8e8; color:#c53030; }
.badge-users { background:#e6f4ff; color:#0b6bcb; }
.badge-specific { background:#f3e8ff; color:#7c3aed; }
.thumb { position:relative; display:block; border-radius:12px; overflow:hidden; background:#e5e7eb; aspect-ratio:1/1; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.thumb:hover img { transform:scale(1.05); }
.thumb-name { font-size:12.5px; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-card { position:relative; background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:8px; }
.media-card video, .media-card audio { width:100%; border-radius:8px; background:#000; display:block; }
.file-card { position:relative; display:flex; gap:10px; align-items:center; background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:12px; }
.file-card:hover { box-shadow:0 8px 24px rgba(16,24,40,.12); }
.ficon { font-size:26px; }
.fname { font-weight:500; word-break:break-all; }
.del-btn { position:absolute; top:6px; right:6px; background:rgba(0,0,0,.55); color:#fff; border:none; border-radius:8px; width:24px; height:24px; cursor:pointer; font-size:12px; opacity:0; transition:opacity .15s; z-index:5; }
.thumb:hover .del-btn, .media-card:hover .del-btn, .file-card:hover .del-btn { opacity:1; }
label { display:block; font-size:13.5px; margin:12px 0 5px; font-weight:600; }
input, select { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:9px; font-size:14px; background:#fff; font-family:inherit; }
input:focus, select:focus { outline:none; border-color:var(--primary); }
.error { background:#fdecec; color:#c53030; border-radius:9px; padding:9px 12px; font-size:13.5px; margin-top:12px; }
.auth-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px; }
.auth-card { width:100%; max-width:380px; background:#fff; border-radius:18px; box-shadow:var(--shadow); padding:32px 28px; text-align:center; }
.auth-logo { font-size:44px; margin-bottom:6px; }
.auth-card form { text-align:left; margin-top:8px; }
.auth-card h1 { font-size:22px; margin-bottom:4px; }
.modal { position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.modal-card { background:#fff; border-radius:16px; padding:24px; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; z-index:60; cursor:zoom-out; padding:24px; }
.lightbox img { max-width:100%; max-height:100%; border-radius:8px; }
.empty { text-align:center; color:var(--muted); padding:60px 0; }
.file-group { margin-bottom:28px; }
.file-group h3 { display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--border); padding-bottom:8px; margin-bottom:14px; }
.table-wrap { overflow-x:auto; background:#fff; border-radius:12px; box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); font-size:14px; }
th { background:#f9fafb; font-weight:600; }
tr:last-child td { border-bottom:none; }
.actions { display:flex; gap:8px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:#111827; color:#fff; padding:10px 18px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none; transition:all .25s; z-index:70; max-width:90vw; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.ok { background:#15803d; }
.toast.err { background:#b91c1c; }
.upload-panel { display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:14px 16px; margin-bottom:22px; }
@media (max-width:640px){ .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));} .topbar-actions .btn{padding:6px 10px;font-size:13px;} }
/* 修复：任何带 hidden 属性的元素都必须隐藏（否则会被 display 样式盖住） */
[hidden] { display: none !important; }
.dl-link { font-size: 12.5px; color: var(--primary); display: inline-block; margin-top: 6px; }
.dl-link:hover { text-decoration: underline; }