.page-header { max-width:1100px; }
.nav-bar { display:flex; align-items:center; gap:16px; }
.nav-bar a { color:var(--text-dim); font-size:13px; text-decoration:none; transition:color 0.2s; }
.nav-bar a:hover { color:var(--accent); }
.container { max-width:1100px; margin:0 auto; padding:24px 20px; }

.create-bar { display:flex; gap:10px; margin-bottom:24px; }
.create-bar input { flex:1; padding:10px 14px; background:var(--bg-input); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); font-size:14px; outline:none; }
.create-bar input:focus { border-color:var(--accent); }
.btn-primary { padding:10px 20px; font-size:14px; white-space:nowrap; }

.group-card { background:var(--bg-card); border-radius:12px; margin-bottom:16px; overflow:hidden; }
.group-header { display:flex; align-items:center; padding:14px 16px; border-bottom:1px solid var(--divider); gap:12px; flex-wrap:wrap; }
.group-name { flex:1; font-size:15px; font-weight:600; }
.group-count { font-size:12px; color:var(--text-muted); }
.group-sort-btns { display:flex; gap:2px; }
.group-sort-btns button { width:24px; height:24px; border-radius:4px; border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:all 0.15s; }
.group-sort-btns button:hover { border-color:var(--accent); color:var(--accent); }
.btn-sm { padding:4px 12px; border-radius:6px; font-size:12px; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-muted); transition:all 0.2s; }
.btn-sm:hover { border-color:var(--accent); color:var(--accent); }
.btn-sm.danger { color:#e74c3c; border-color:#e74c3c; }
.btn-sm.danger:hover { background:rgba(231,76,60,0.1); }
.btn-sm.share-btn { color:#667eea; border-color:#667eea; }
.btn-sm.share-btn.shared { background:rgba(102,126,234,0.15); font-weight:600; }
.btn-sm.fork-btn { color:#27ae60; border-color:#27ae60; }
.btn-sm.fork-btn:hover { background:rgba(39,174,96,0.1); }
.group-card.is-hidden, .shared-card.is-hidden { opacity: 0.55; }

.photo-grid { display:flex; flex-wrap:wrap; gap:10px; padding:16px; }
.photo-thumb { width:120px; height:120px; border-radius:8px; overflow:hidden; position:relative; cursor:pointer; }
.photo-thumb img { width:100%; height:100%; object-fit:cover; }
.photo-thumb.is-unusable img { filter:grayscale(1); opacity:0.4; }
.photo-thumb .del-btn { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; border:none; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.2s; }
.photo-thumb:hover .del-btn { opacity:1; }
.photo-thumb .pin-btn { position:absolute; top:4px; left:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; border:none; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.2s; }
.photo-thumb:hover .pin-btn { opacity:1; }
.photo-thumb .pin-btn.pinned { background:var(--accent); opacity:1; }
.photo-add { width:120px; height:120px; border-radius:8px; border:2px dashed var(--border); display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--text-faint); cursor:pointer; transition:all 0.2s; }
.photo-add:hover { border-color:var(--accent); color:var(--accent); }
.photo-thumb .uploading { position:absolute; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; }

.pager { display:none; justify-content:center; align-items:center; gap:12px; margin-top:16px; }
.pager button { padding:6px 16px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:13px; cursor:pointer; }
.pager button:disabled { opacity:0.4; cursor:not-allowed; }
.pager .page-info { font-size:13px; color:var(--text-dim); }

.group-tags-row { display:flex; gap:8px; padding:10px 16px; border-bottom:1px solid var(--divider); align-items:center; }
.group-tags-row input { flex:1; padding:6px 10px; background:var(--bg-input); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-size:13px; outline:none; }
.group-tags-row input:focus { border-color:var(--accent); }
.group-tags-row .tag-preview { display:flex; gap:4px; flex-wrap:wrap; }
.tag-chip { display:inline-block; padding:2px 8px; background:rgba(102,126,234,0.15); color:var(--accent); border-radius:4px; font-size:11px; }

.shared-section { margin-top:32px; padding-top:20px; border-top:1px solid var(--divider); }
.shared-section h3 { font-size:15px; font-weight:600; margin-bottom:16px; color:var(--text-secondary); }
.shared-card { background:var(--bg-card); border-radius:12px; margin-bottom:12px; overflow:hidden; border:1px dashed var(--border); }
.shared-card .shared-header { display:flex; align-items:center; padding:14px 16px; border-bottom:1px solid var(--divider); gap:12px; flex-wrap:wrap; }
.shared-card .shared-name { font-size:15px; font-weight:600; flex:1; }
.shared-card .shared-owner { font-size:11px; color:var(--text-faint); }

.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:1000; justify-content:center; align-items:center; cursor:zoom-out; }
.lightbox.active { display:flex; }
.lightbox img { max-width:90vw; max-height:90vh; border-radius:8px; }
.empty-hint { text-align:center; padding:40px 20px; color:var(--text-faint); font-size:14px; }

.batch-hint { font-size:14px; cursor:help; }
.batch-example { font-size:12px; color:var(--text-dim); margin:-16px 0 20px; line-height:1.8; }
.batch-example code { background:var(--bg-input); padding:1px 6px; border-radius:4px; font-size:12px; }
.autogen-cfg-bar { display:flex; align-items:center; gap:12px; margin:0 0 24px; padding:12px 16px; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; }
.autogen-cfg-title { font-size:14px; font-weight:600; color:var(--text-primary); white-space:nowrap; }
.autogen-cfg-hint { font-size:12px; color:var(--text-dim); line-height:1.5; }
.batch-panel { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:20px; }
.batch-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:14px; font-weight:600; }
.batch-progress-bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:10px; }
.batch-bar { height:100%; background:var(--accent); border-radius:3px; transition:width 0.3s; }
.batch-log { max-height:200px; overflow-y:auto; font-size:12px; color:var(--text-dim); line-height:1.8; }
.batch-log .log-ok { color:#27ae60; }
.batch-log .log-fail { color:#e74c3c; }
.batch-log .log-skip { color:var(--text-faint); }

/* ── 样片编辑钮 + 已配徽标 ── */
.photo-thumb .edit-btn { position:absolute; bottom:4px; left:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; border:none; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.2s; }
.photo-thumb:hover .edit-btn { opacity:1; }
.photo-thumb .photo-badges { position:absolute; bottom:4px; right:4px; display:flex; gap:2px; }
.photo-thumb .badge { width:16px; height:16px; border-radius:4px; font-size:10px; line-height:16px; text-align:center; color:#fff; font-weight:700; }
.photo-thumb .badge-p { background:var(--accent); }
.photo-thumb .badge-m { background:var(--gold, #c9a86a); }

/* ── 样片编辑浮层（提示词 + 蒙版）── */
.photo-editor { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1100; display:flex; align-items:center; justify-content:center; padding:16px; }
.photo-editor-panel { background:var(--bg-card); border-radius:12px; width:min(720px, 96vw); max-height:92vh; overflow:auto; box-shadow:0 12px 40px rgba(0,0,0,0.4); }
.photo-editor-header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--divider); font-size:15px; font-weight:600; }
.photo-editor-close { background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-muted); line-height:1; }
.photo-editor-close:hover { color:var(--text-primary); }
.photo-editor-body { display:flex; gap:18px; padding:16px; }
.photo-editor-preview { flex:0 0 200px; }
.photo-editor-preview > img { width:100%; border-radius:8px; display:block; }
.mask-preview-wrap { margin-top:10px; }
.mask-preview-wrap img { width:100%; border-radius:8px; outline:2px dashed var(--gold, #c9a86a); display:block; }
.mask-preview-label { display:block; font-size:11px; color:var(--text-dim); margin-top:4px; }
.photo-editor-fields { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.field-label { font-size:13px; font-weight:600; color:var(--text-secondary); }
.field-hint { font-weight:400; color:var(--text-faint); font-size:11px; margin-left:4px; }
.photo-editor-fields textarea { width:100%; padding:8px 10px; background:var(--bg-input); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-size:13px; resize:vertical; outline:none; font-family:inherit; box-sizing:border-box; }
.photo-editor-fields textarea:focus { border-color:var(--accent); }
.field-divider { height:1px; background:var(--divider); margin:4px 0; }
.photo-editor-fields .btn-sm { align-self:flex-start; }

/* ── 移动端：创建栏/反推栏防溢出 + 样片编辑浮层转纵向（200px 固定预览不再撑破）── */
@media (max-width: 768px) {
  .create-bar { flex-wrap: wrap; }
  .create-bar input { min-width: 200px; }
  .autogen-cfg-bar { flex-wrap: wrap; }
  .photo-editor-body { flex-direction: column; }
  .photo-editor-preview { flex: 0 0 auto; max-width: 100%; }
}