/* Studio Photo Manager Styles */
:root,[data-theme="dark"] {
  --bg: #0f1117;
  --bg2: #1a1d27;
  --bg3: #242836;
  --text: #e4e6ed;
  --text2: #9498a5;
  --text3: #5e6270;
  --accent: #5b8dee;
  --accent2: #7ba5ff;
  --green: #4caf84;
  --orange: #e8a840;
  --red: #e05555;
  --border: #2d3140;
  --radius: 8px;
}
[data-theme="light"] {
  --bg: #f8fafc;
  --bg2: #ffffff;
  --bg3: #f1f5f9;
  --text: #1e293b;
  --text2: #64748b;
  --text3: #94a3b8;
  --accent: #3b82f6;
  --accent2: #60a5fa;
  --green: #16a34a;
  --orange: #d97706;
  --red: #dc2626;
  --border: #e2e8f0;
}
* { margin:0; padding:0; box-sizing:border-box; }
/* ── SVG Icons ── */
.icon { display:inline-block; vertical-align:middle; flex-shrink:0; }
.nav-btn .icon, .filter-chip .icon, .btn .icon { margin-right:3px; }
body { font-family:'Segoe UI','Microsoft YaHei',sans-serif; background:var(--bg); color:var(--text); height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.topbar { display:flex; align-items:center; gap:16px; padding:0 16px; padding-top:max(0px, env(safe-area-inset-top)); height:52px; background:var(--bg2); border-bottom:1px solid var(--border); flex-shrink:0; position:relative; z-index:1101; }
.topbar-brand { font-weight:700; font-size:15px; }
.topbar-nav { display:flex; gap:4px; }
/* Desktop: center nav buttons in topbar */
@media (min-width: 769px) {
  .topbar-nav { position:absolute; left:50%; transform:translateX(-50%); }
}
.nav-btn { padding:6px 14px; border:none; background:transparent; color:var(--text2); border-radius:6px; cursor:pointer; font-size:13px; display:inline-flex; align-items:center; white-space:nowrap; }
.nav-btn.active { background:var(--accent); color:#fff; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text2); }
.token-input { background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:4px 10px; border-radius:4px; font-size:12px; width:180px; }
.main-layout { display:flex; flex:1; overflow:hidden; }
.sidebar { width:240px; background:var(--bg2); border-right:1px solid var(--border); overflow-y:auto; padding:12px; flex-shrink:0; display:flex; flex-direction:column; gap:4px; }
.sidebar.hidden { display:none; }
.content { flex:1; overflow-y:auto; padding:16px; position:relative; transition:background .2s; }
.content.drag-over::after { content:'松手上传'; position:fixed; inset:0; background:rgba(59,130,246,.12); border:3px dashed var(--accent); z-index:500; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:var(--accent); pointer-events:none; border-radius:12px; margin:16px; }
.sidebar-section { margin-bottom:12px; }
.sidebar-section h3 { font-size:11px; text-transform:uppercase; color:var(--text3); margin-bottom:6px; letter-spacing:0; }
.filter-group { display:flex; flex-direction:column; gap:2px; }
.filter-chip { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:6px; cursor:pointer; font-size:13px; color:var(--text2); }
.filter-chip:hover { background:var(--bg3); }
.filter-chip.active { background:var(--accent); color:#fff; }
.filter-chip .chip-count { margin-left:auto; font-size:10px; background:rgba(127,127,127,.15); padding:1px 6px; border-radius:10px; min-width:20px; text-align:center; }
.filter-chip.active .chip-count { background:rgba(255,255,255,.2); }
.filter-chip input { display:none; }
.range-row { display:flex; align-items:center; gap:8px; }
.range-row input[type=range] { flex:1; accent-color:var(--accent); }
.search-input, .sort-select { width:100%; background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:6px; font-size:13px; }
.sidebar-actions { margin-top:auto; display:flex; flex-direction:column; gap:6px; }
.batch-actions { display:flex; flex-wrap:wrap; gap:4px; }
.btn { padding:6px 12px; border:none; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; background:var(--bg3); color:var(--text2); }
.btn:hover { opacity:.85; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-danger { background:var(--red); color:#fff; }
.btn-outline { background:transparent; border:1px solid var(--border); }
.btn-sm { padding:4px 10px; font-size:11px; }
.badge { background:var(--accent); color:#fff; padding:1px 7px; border-radius:10px; font-size:11px; }
.hidden { display:none !important; }
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.photo-card { position:relative; background:var(--bg2); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); cursor:pointer; transition:transform .15s; }
.photo-card:hover { transform:translateY(-2px); }
.photo-card.selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.photo-card.picked { border-color:var(--green); box-shadow:0 0 0 2px var(--green); }
.photo-card.picked::after { content:'✓'; position:absolute; top:8px; left:8px; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.95); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; z-index:3; }
.photo-card .pick-tip { position:absolute; top:8px; left:8px; background:rgba(0,0,0,.72); color:#fff; border-radius:999px; padding:3px 8px; font-size:11px; z-index:2; pointer-events:none; }
.photo-card .thumb { width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--bg3); }
.photo-card .video-badge { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.72); color:#fff; border-radius:4px; padding:2px 6px; font-size:14px; pointer-events:none; }
.photo-card .card-info { padding:8px 10px; }
.photo-card .card-name { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.photo-card .card-meta { font-size:11px; color:var(--text2); display:flex; justify-content:space-between; gap:8px; margin-top:3px; }
.score-badge { padding:1px 6px; border-radius:4px; font-size:11px; font-weight:700; }
.score-high { background:var(--green); color:#fff; }
.score-mid { background:var(--orange); color:#fff; }
.score-low { background:var(--red); color:#fff; }
.pagination { display:flex; justify-content:center; align-items:center; gap:8px; padding:16px 0; }
.pagination button { padding:6px 14px; }
.empty-state { text-align:center; padding:60px; color:var(--text3); }
.empty-state p { margin:8px 0; font-size:14px; }
/* ── Loading Skeleton ── */
.loading-skeleton { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.skel-card { background:var(--bg2); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.skel-thumb { width:100%; aspect-ratio:3/2; background:var(--bg3); animation:skel-pulse 1.5s ease-in-out infinite; }
.skel-line { height:12px; margin:8px 10px; background:var(--bg3); border-radius:4px; animation:skel-pulse 1.5s ease-in-out infinite; }
.skel-line.short { width:50%; margin-bottom:10px; }
@keyframes skel-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes toast-in { from { opacity:0; transform:translateX(-50%) translateY(10px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.lightbox { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.lightbox-bg { position:absolute; inset:0; background:rgba(0,0,0,.85); }
.lightbox-content { position:relative; max-width:90vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; }
.lightbox-media { position:relative; width:90vw; height:75vh; overflow:auto; display:flex; align-items:center; justify-content:center; overscroll-behavior:contain; touch-action:none; }
.lightbox-media img, .lightbox-media video { display:block; width:auto; height:auto; max-width:none; max-height:none; object-fit:contain; border-radius:4px; user-select:none; -webkit-user-drag:none; }
.lightbox-info { display:flex; align-items:center; gap:10px; padding:10px; font-size:13px; color:var(--text2); }
.lightbox-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.lightbox-close { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); border:none; color:#fff; font-size:28px; cursor:pointer; z-index:1200; width:36px; height:36px; border-radius:999px; line-height:1; }
.lightbox-prev, .lightbox-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:none; color:#fff; font-size:32px; width:44px; height:80px; cursor:pointer; border-radius:4px; }
.lightbox-prev { left:-52px; }
.lightbox-next { right:-52px; }
.lightbox-prev:hover, .lightbox-next:hover { background:rgba(255,255,255,.2); }
#album-list { display:flex; flex-direction:column; gap:4px; }
.album-item { padding:8px 10px; background:var(--bg3); border-radius:6px; cursor:pointer; font-size:13px; }
.album-item:hover { background:var(--accent); color:#fff; }
.album-item .album-count { font-size:11px; color:var(--text3); }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.stat-card { background:var(--bg3); border-radius:8px; padding:16px; text-align:center; }
.stat-card .stat-value { font-size:28px; font-weight:700; color:var(--accent); }
.stat-card .stat-label { font-size:12px; color:var(--text2); margin-top:4px; }

/* ── Login Screen ── */
.login-screen { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); overflow-y:auto; }
.login-screen:not(.hidden) ~ .main-layout,
.login-screen:not(.hidden) ~ .mobile-tabs { display:none; }
.login-screen:not(.hidden) { overscroll-behavior:contain; }
body:has(.login-screen:not(.hidden)) { overflow:hidden; }
.login-screen.hidden { display:none; }
.login-container { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:32px 28px; width:380px; max-width:90vw; box-shadow:0 16px 48px rgba(0,0,0,.25); }
.login-logo { font-size:18px; font-weight:700; text-align:center; margin-bottom:20px; }
.login-tabs { display:flex; gap:0; margin-bottom:16px; border-radius:8px; overflow:hidden; border:1px solid var(--border); }
.login-tab-btn { flex:1; padding:10px; border:none; background:transparent; color:var(--text2); cursor:pointer; font-size:14px; font-weight:600; }
.login-tab-btn.active { background:var(--accent); color:#fff; }
.login-input { width:100%; padding:12px; margin-bottom:10px; background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:15px; outline:none; }
.login-input:focus { border-color:var(--accent); }
.login-error { color:var(--red); font-size:13px; margin-bottom:12px; }
.login-submit { width:100%; padding:12px; font-size:15px !important; }
.login-divider { display:flex; align-items:center; gap:12px; margin:18px 0; }
.login-divider::before, .login-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.login-divider span { font-size:12px; color:var(--text3); }
.login-browse { width:100%; padding:14px; font-size:15px; }
.login-browse-btns { display:flex; gap:8px; margin-top:10px; }
.login-tos { text-align:center; font-size:11px; color:var(--text3); margin-top:12px; }

/* Mobile: full-page opaque */
@media (max-width:768px) {
  .login-screen { background:var(--bg); align-items:flex-start; padding-top:max(60px,env(safe-area-inset-top)); }
  .login-container { width:100%; max-width:100%; min-height:100vh; border:none; border-radius:0; box-shadow:none; background:var(--bg); padding:24px 20px 100px; }
}

/* ── Modal (admin subscribe etc) ── */
.modal-overlay { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); }
.modal-overlay.hidden { display:none; }
.modal-box { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:28px; min-width:320px; max-width:90vw; box-shadow:0 16px 48px rgba(0,0,0,.25); }
.modal-title { font-size:16px; font-weight:700; margin-bottom:12px; }
.modal-message { font-size:14px; color:var(--text2); margin-bottom:16px; }
.modal-buttons { display:flex; gap:8px; justify-content:flex-end; }

/* ── User Area ── */
.user-area { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); }
.user-badge { display:flex; align-items:center; gap:6px; padding:4px 10px; background:var(--bg3); border-radius:20px; cursor:pointer; }
.user-badge .user-avatar { width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.user-badge .user-name { font-size:12px; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-badge .user-plan { font-size:10px; padding:1px 6px; border-radius:8px; }
.user-badge .user-plan.active { background:var(--green); color:#fff; }
.user-badge .user-plan.none { background:var(--text3); color:#fff; }

@media (max-width:768px) {
  .sidebar { display:none; position:fixed; top:0; left:0; bottom:0; width:280px; z-index:1200; transform:translateX(-100%); transition:transform .25s ease; box-shadow:4px 0 24px rgba(0,0,0,.15); }
  .sidebar.open { display:flex; transform:translateX(0); }
  .photo-grid { grid-template-columns:repeat(2,1fr); }
  .topbar { flex-wrap:wrap; height:auto; padding:8px; gap:8px; padding-top:max(8px, env(safe-area-inset-top,0px)); }
  .topbar-nav { order:3; width:100%; overflow-x:auto; }
  .topbar-right { font-size:11px; }
  .token-input { width:100px; }
  .lightbox-content { max-width:96vw; max-height:80vh; }
  .lightbox-prev { left:4px; }
  .lightbox-next { right:4px; }
  .lightbox-close { top:8px; right:8px; }
  .lightbox-media { width:96vw; height:60vh; }
  .main-layout { flex-direction:column; }
  .content { padding:8px; padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)); }
  .photo-card .thumb { aspect-ratio:4/3; }
  .pagination button { min-height:44px; min-width:44px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}
/* ── Mobile-only: hidden on desktop, shown via mobile.css media query ── */
.mobile-tabs { display: none; }

/* ── Mobile FAB (Upload) ── */
/* Base: hidden on desktop.  mobile.css media query overrides to display:flex on ≤768px. */
.mobile-fab {
  display: none;
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  width: 56px; min-width: 56px; max-width: 56px;  /* lock dimensions */
  height: 56px; min-height: 56px; max-height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(59,130,246,.4);
  z-index: 1050;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, box-shadow .15s;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
}
.mobile-fab.hidden { display: none !important; }

/* ── Focus visible (accessibility) ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:focus-visible, .nav-btn:focus-visible, .filter-chip:focus-visible { outline-offset: -1px; }

@media (max-width:480px) {
  .photo-grid { grid-template-columns:1fr 1fr; gap:4px; }
  .photo-card .card-name { font-size:11px; }
  .photo-card .card-meta { font-size:10px; }
  .topbar-brand { font-size:13px; }
  .nav-btn { padding:6px 10px; font-size:11px; }
}