* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei","PingFang SC","Segoe UI",sans-serif; background:#f1f5f9; color:#1f2937; }
.muted { color:#6b7280; font-size:13px; }
a { color:var(--primary); }

/* ===== 登录页 ===== */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { background:#fff; padding:32px 28px; border-radius:12px; width:340px; box-shadow:0 8px 30px rgba(0,0,0,.08); }
.login-card h1 { font-size:20px; margin-bottom:6px; }
.login-card form { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.login-card label { font-size:13px; color:#374151; }
.login-card input[type=text], .login-card input[type=password] {
  padding:9px 10px; border:1px solid #d1d5db; border-radius:8px; font-size:14px;
}
.remember { display:flex; align-items:center; gap:6px; font-size:13px; }
.login-card button {
  margin-top:6px; padding:10px;
  background:var(--primary, #2563eb); color:#fff; border:none;
  border-radius:8px; font-size:15px; font-weight:600; cursor:pointer;
  box-shadow:0 2px 6px rgba(37,99,235,.25);
}
.login-card button:hover { background:var(--primary-dark, #1e4fd8); }
.alert { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; padding:8px 10px; border-radius:8px; font-size:13px; }
.hint { margin-top:12px; font-size:12px; color:#9ca3af; }

/* ===== 工作台布局 ===== */
.layout { display:flex; min-height:100vh; }
.sidebar { width:220px; background:#0f172a; color:#e2e8f0; padding:18px 0; }
.sidebar .logo { font-size:16px; font-weight:bold; padding:0 18px 16px; border-bottom:1px solid #1e293b; }
.sidebar nav { display:flex; flex-direction:column; margin-top:12px; }
.sidebar nav a { color:#cbd5e1; text-decoration:none; padding:10px 18px; font-size:14px; }
.sidebar nav a:hover, .sidebar nav a.active { background:#1e293b; color:#fff; }
.main { flex:1; display:flex; flex-direction:column; }
.topbar {
  height:56px; background:#fff; border-bottom:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:space-between; padding:0 22px;
}
.topbar .title { font-weight:bold; }
.topbar .user { font-size:13px; color:#6b7280; display:flex; align-items:center; gap:10px; }
.user-link { display:flex; align-items:center; gap:6px; color:#374151; text-decoration:none; }
.top-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.topbar .logout { color:var(--primary); text-decoration:none; }
.content { padding:22px; }

/* ===== 通用卡片 / 按钮 ===== */
.card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px; }
.card h2 { font-size:18px; margin-bottom:10px; }
.card h3 { font-size:15px; margin-bottom:8px; }
.card ul { margin:10px 0 10px 20px; }
.card li { margin:6px 0; }
.btn { padding:8px 14px; border:1px solid #d1d5db; border-radius:8px; background:#fff; cursor:pointer; font-size:14px; text-decoration:none; display:inline-block; color:#1f2937; }
.btn.primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn.primary:hover { background:var(--primary-dark); }
.btn.danger { color:#dc2626; border-color:#fecaca; }
.mini { padding:4px 9px; border:1px solid #d1d5db; border-radius:6px; background:#fff; cursor:pointer; font-size:12px; text-decoration:none; color:#374151; }
.mini:hover { background:#f3f4f6; }
.mini.danger { color:#dc2626; border-color:#fecaca; }
.badge { font-size:11px; padding:1px 7px; border-radius:10px; }
.badge.shared, .badge.on { background:#dcfce7; color:#15803d; }
.badge.off { background:#fee2e2; color:#b91c1c; }

/* ===== 仪表盘 ===== */
.dash-title { font-size:17px; margin:18px 0 10px; }
.stat-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.stat-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px; text-align:center; }
.stat-num { font-size:26px; font-weight:bold; color:var(--primary); }
.stat-label { font-size:13px; color:#6b7280; margin-top:4px; }
.dash-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.chart-card canvas { width:100%; max-width:340px; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.quick-btn { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:22px; text-align:center; text-decoration:none; color:#1f2937; font-size:15px; font-weight:500; }
.quick-btn:hover { border-color:var(--primary); color:var(--primary); }
.data-table { width:100%; border-collapse:collapse; font-size:14px; }
.data-table th, .data-table td { border-bottom:1px solid #eef1f5; padding:9px 10px; text-align:left; }
.data-table th { color:#6b7280; font-weight:600; font-size:13px; }

/* ===== 模块通用 ===== */
.module { }
.toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.filter-form { display:flex; gap:8px; align-items:center; margin-left:auto; }
.filter-form input, .filter-form select { padding:7px 9px; border:1px solid #d1d5db; border-radius:8px; font-size:13px; }
.filter-form input[type=text] { width:160px; }
.empty { color:#9ca3af; text-align:center; padding:40px; }

/* ===== 网格（图片/相册）===== */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.grid-item { overflow:hidden; }
.thumb { position:relative; width:100%; aspect-ratio:1/1; background:#f3f4f6; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.no-thumb { color:#9ca3af; font-size:36px; }
.item-meta { padding:8px 4px 4px; }
.item-name { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-sub { font-size:12px; color:#9ca3af; }
.item-actions { display:flex; flex-wrap:wrap; gap:5px; padding:6px 4px; }
.add-album { padding:0 4px 8px; }
.add-album select { width:100%; padding:5px; border:1px solid #d1d5db; border-radius:6px; font-size:12px; }
.album-card { text-decoration:none; color:inherit; }

/* ===== 上传区 ===== */
.upload-zone { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; margin-bottom:16px; }
.dropzone { border:2px dashed #cbd5e1; border-radius:10px; padding:26px; text-align:center; color:#6b7280; cursor:pointer; }
.dropzone.over { border-color:var(--primary); background:#eff6ff; }
.dropzone .link { color:var(--primary); cursor:pointer; }
.progress-list { margin-top:10px; }
.progress-item { display:flex; align-items:center; gap:10px; margin:6px 0; font-size:13px; }
.progress-item .pname { width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.progress-item .bar { flex:1; height:8px; background:#e5e7eb; border-radius:4px; overflow:hidden; }
.progress-item .fill { height:100%; width:0; background:var(--primary); transition:width .15s; }
.progress-item .pstat { width:60px; text-align:right; color:#6b7280; }
.progress-item.err .fill { background:#dc2626; }
.progress-item.err .pstat { color:#dc2626; }

/* ===== 弹窗 ===== */
.modal { position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal-box { background:#fff; border-radius:12px; padding:22px; width:520px; max-width:92vw; max-height:88vh; overflow:auto; position:relative; }
.modal-box.small { width:360px; }
.modal-box h3 { margin-bottom:12px; }
.modal-box input[type=text] { width:100%; padding:9px; border:1px solid #d1d5db; border-radius:8px; margin:8px 0; }
.modal-close { position:absolute; top:12px; right:14px; border:none; background:none; font-size:18px; cursor:pointer; color:#6b7280; }
.modal-cap { margin-top:10px; display:flex; justify-content:space-between; align-items:center; }

/* ===== 预览大图 ===== */
#previewModal .modal-box { width:auto; max-width:92vw; background:#0f172a; }
#previewModal img { max-width:84vw; max-height:78vh; border-radius:8px; }
#previewModal .modal-cap { color:#e2e8f0; }
#previewModal .modal-cap .mini { background:#1e293b; color:#fff; border-color:#334155; }
.nav-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); color:#fff; border:none; font-size:30px; width:46px; height:46px; border-radius:50%; cursor:pointer; }
.nav-btn.prev { left:14px; } .nav-btn.next { right:14px; }

/* ===== 个人资料 ===== */
.profile-wrap { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.profile-card { text-align:center; }
.avatar-preview img { width:120px; height:120px; border-radius:50%; object-fit:cover; margin:0 auto; }
.avatar-placeholder { width:120px; height:120px; border-radius:50%; background:var(--primary); color:#fff; font-size:44px; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.avatar-form { margin-top:12px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.avatar-form input[type=file] { font-size:13px; }
.ok-msg { background:#dcfce7; color:#15803d; padding:8px; border-radius:8px; margin:8px 0; font-size:13px; }
.err-msg { background:#fef2f2; color:#dc2626; padding:8px; border-radius:8px; margin:8px 0; font-size:13px; }
.profile-wrap .card form { display:flex; flex-direction:column; gap:10px; margin-top:10px; text-align:left; }
.profile-wrap label { font-size:13px; color:#374151; }
.profile-wrap input { padding:8px 10px; border:1px solid #d1d5db; border-radius:8px; }

/* ===== 相册候选列表 ===== */
.cand-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; max-height:50vh; overflow:auto; margin-bottom:12px; }
.cand { display:flex; flex-direction:column; align-items:center; font-size:11px; gap:4px; cursor:pointer; }
.cand img { width:100%; height:80px; object-fit:cover; border-radius:6px; }

/* ===== 音乐 ===== */
.music-layout { display:flex; gap:16px; }
.folder-tree { width:220px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; align-self:flex-start; }
.tree-head { display:flex; justify-content:space-between; align-items:center; font-weight:600; margin-bottom:8px; }
.folder-tree ul { list-style:none; }
.folder-tree li { padding:6px 8px; border-radius:6px; display:flex; justify-content:space-between; align-items:center; }
.folder-tree li.active { background:#eff6ff; }
.folder-tree li a { color:#374151; text-decoration:none; flex:1; }
.tree-act { display:flex; gap:4px; }
.music-main { flex:1; }
.music-table .mname { max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-table .ops { display:flex; gap:5px; flex-wrap:wrap; }
.music-table .ops select { padding:3px; border:1px solid #d1d5db; border-radius:6px; font-size:12px; }

/* 播放器 */
.player-bar { position:fixed; bottom:0; left:220px; right:0; background:#0f172a; color:#e2e8f0; display:flex; align-items:center; gap:12px; padding:10px 18px; z-index:40; }
.player-bar .mini { background:#1e293b; color:#fff; border-color:#334155; }
.pinfo { min-width:160px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#seek { flex:1; }
#vol { width:90px; }
#pTime { font-size:12px; color:#94a3b8; min-width:90px; text-align:right; }

/* ===== 分页 ===== */
.pager { display:flex; align-items:center; gap:14px; justify-content:center; margin-top:16px; font-size:14px; color:#6b7280; }
.pager a { color:var(--primary); text-decoration:none; padding:6px 12px; border:1px solid #d1d5db; border-radius:8px; }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .dash-row, .quick-grid, .profile-wrap { grid-template-columns:1fr; }
  .music-layout { flex-direction:column; }
  .player-bar { left:0; }
}

/* ===== 平板（≤1024px）：侧栏适度收窄、内容间距收紧 ===== */
@media (max-width: 1024px) {
  .sidebar { width:180px; }
  .player-bar { left:180px; }
  .content { padding:18px; }
}

/* ===== 手机端（≤768px）：侧栏默认离屏，汉堡按钮展开 ===== */
.menu-toggle {
  display:none;
  background:none; border:none; font-size:22px; cursor:pointer;
  color:#374151; margin-right:10px; line-height:1;
}
@media (max-width: 768px) {
  .menu-toggle { display:inline-block; }
  .sidebar {
    position:fixed; top:0; left:0; bottom:0; z-index:60;
    transform:translateX(-100%); transition:transform .22s ease;
    width:78%; max-width:280px;
  }
  body.menu-open .sidebar { transform:translateX(0); box-shadow:0 0 30px rgba(0,0,0,.35); }
  .player-bar { left:0; }
  .content { padding:14px; }
  /* 遮罩：菜单展开时覆盖内容区，点击关闭 */
  .sidebar-overlay {
    display:none; position:fixed; inset:0; z-index:55;
    background:rgba(15,23,42,.45);
  }
  body.menu-open .sidebar-overlay { display:block; }
}

/* ===== 全局轻量提示 toast ===== */
.toast-wrap {
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none;
}
.toast {
  pointer-events:auto;
  min-width:180px; max-width:88vw; padding:10px 16px; border-radius:10px;
  font-size:14px; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.18);
  animation:toastIn .18s ease; background:#1f2937;
}
.toast.success { background:#16a34a; }
.toast.error { background:#dc2626; }
.toast.info { background:#2563eb; }
.toast.warn { background:#d97706; }
.toast.leaving { animation:toastOut .2s ease forwards; }
@keyframes toastIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { to { opacity:0; transform:translateY(-8px); } }
@media (max-width:768px) {
  .toast-wrap { top:10px; }
  .toast { font-size:13px; padding:9px 14px; }
}

/* ===== 统一二次确认弹层（替代原生 confirm）===== */
.confirm-mask {
  position:fixed; inset:0; z-index:150; background:rgba(15,23,42,.5);
  display:flex; align-items:center; justify-content:center;
}
.confirm-box {
  background:#fff; border-radius:12px; width:340px; max-width:92vw;
  padding:20px 22px; box-shadow:0 20px 60px rgba(0,0,0,.22);
  animation:toastIn .16s ease;
}
.confirm-box h3 { margin:0 0 8px; font-size:16px; color:#1f2329; }
.confirm-box p { font-size:14px; color:#475569; margin:0 0 16px; line-height:1.6; }
.confirm-actions { display:flex; justify-content:flex-end; gap:10px; }
.confirm-actions button { padding:8px 16px; border-radius:8px; border:1px solid #d1d5db; background:#fff; cursor:pointer; font-size:14px; }
.confirm-actions .ok { background:var(--primary); color:#fff; border-color:var(--primary); }
.confirm-actions .ok.danger { background:#dc2626; border-color:#dc2626; }
@media (max-width:768px) {
  .confirm-box { width:auto; margin:0 16px; }
}