:root {
  --bg: #0a0a0b;
  --panel: #0e0e10;
  --surface: #141417;
  --surface-2: #191a1d;
  --surface-3: #202024;
  --text: #d8d8dc;
  --text-strong: #e6e6ea;
  --text-dim: #8a8a90;
  --text-faint: #57575c;
  --border: rgba(255,255,255,.06);
  --border-2: rgba(255,255,255,.11);
  --accent: #aeb0b8;
  --primary-bg: #2b3140;
  --primary-bg-hover: #333a4c;
  --primary-line: rgba(255,255,255,.12);
  --primary-text: #e7e7ec;
  --ring: rgba(255,255,255,.42);
  --tag-pass: #5c8a5f;
  --tag-keep: #5f78ac;
  --tag-drop: #b06a6a;
  --radius: 14px;
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body { font-size: 14px; -webkit-font-smoothing: antialiased; letter-spacing: .005em; }

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background: var(--bg);
}
.auth-card {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 26px;
}
.auth-brand { display: flex; align-items: center; gap: 10px; color: var(--text-strong); margin-bottom: 18px; }
.auth-card h1 { margin: 0; color: var(--text-strong); font-size: 22px; font-weight: 600; }
.auth-sub { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 8px 0 20px; }
.auth-label { display: block; color: var(--text-dim); font-size: 12px; margin: 12px 0 7px; }
.auth-input {
  width: 100%;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  padding: 10px 12px;
  font: inherit;
}
.auth-input:focus { border-color: var(--ring); }
.auth-code-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 13px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.55;
}
.auth-consent input {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.link-btn {
  border: none;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-2);
}
.link-btn:hover {
  color: var(--primary-text);
  text-decoration-color: currentColor;
}
.auth-login-btn { width: 100%; justify-content: center; margin-top: 16px; }
.auth-message { min-height: 20px; color: var(--text-dim); font-size: 12px; line-height: 1.5; margin: 12px 0 0; }
.auth-message.error { color: #d28b8b; }
.auth-message.ok { color: #8fbd8f; }
.home-actions { display: flex; align-items: center; gap: 10px; }
.auth-user { color: var(--text-dim); font-size: 12px; }

.btn {
  border: none; border-radius: 9px; padding: 8px 16px; font-size: 13px;
  font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s;
  display: inline-flex; align-items: center; gap: 6px; color: var(--text);
}
.btn svg { width: 15px; height: 15px; }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-primary { background: var(--primary-bg); color: var(--primary-text); border: 1px solid var(--primary-line); }
.btn-primary:hover { background: var(--primary-bg-hover); }
.btn-primary:disabled { background: var(--surface-2); color: var(--text-faint); border-color: var(--border); cursor: default; }
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn:active { transform: translateY(.5px); }

/* 首页 / 项目管理 */
.home-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--border); }
.home-head h1 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.01em; color: var(--text-strong); }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; padding: 26px 28px 70px; }
.project-card { border: 1px solid var(--border); border-radius: 13px; overflow: hidden; cursor: pointer; background: var(--surface); transition: transform .12s ease, border-color .14s ease; position: relative; }
.project-card:hover { transform: translateY(-2px); border-color: var(--border-2); }
.project-thumb { width: 100%; aspect-ratio: 16/9; background: #000 center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 13px; }
.project-meta { padding: 11px 13px; }
.project-meta .pname { font-weight: 500; font-size: 14px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-meta .psub { color: var(--text-faint); font-size: 11px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-card.missing { opacity: .5; }
.project-actions { position: absolute; top: 7px; right: 7px; display: flex; gap: 5px; opacity: 0; transition: opacity .12s; }
.project-card:hover .project-actions { opacity: 1; }
.pa-btn { border: none; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); color: var(--text); border-radius: 7px; width: 27px; height: 27px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s; }
.pa-btn svg { width: 14px; height: 14px; }
.pa-btn:hover { background: rgba(0,0,0,.72); }
.project-card.selected { border-color: var(--border-2); box-shadow: inset 0 0 0 1.5px var(--ring); }
.project-name { font-weight: 500; font-size: 14px; margin-right: 6px; color: var(--text-strong); }
.np-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.np-row label { width: 80px; color: var(--text-dim); font-size: 13px; }
.np-row input[type=text] { flex: 1; padding: 8px 11px; border: 1px solid var(--border-2); border-radius: 8px; font-size: 13px; outline: none; background: var(--surface-2); color: var(--text); }
.np-row input[type=text]:focus { border-color: var(--ring); }
.np-folder { flex: 1; color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 20px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--panel); z-index: 10;
}
.folder-area { display: flex; align-items: center; gap: 12px; min-width: 0; }
.folder-label { color: var(--text-faint); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }

.controls { padding: 11px 20px; border-bottom: 1px solid var(--border); background: var(--panel); position: sticky; top: 56px; z-index: 9; }
.threshold { display: flex; align-items: center; gap: 12px; }
.threshold label { font-weight: 500; color: var(--text); }
.threshold input[type=range] { flex: 1; max-width: 420px; accent-color: var(--accent); }
#threshold-value { font-weight: 500; color: var(--text-strong); min-width: 42px; font-variant-numeric: tabular-nums; }
.hint { color: var(--text-faint); font-size: 11px; margin: 6px 0 0; line-height: 1.5; }

.toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.zoom { display: flex; align-items: center; gap: 10px; }
.zoom label { color: var(--text-dim); font-size: 12px; }
.zoom input[type=range] { width: 160px; accent-color: var(--accent); }
.dim { color: var(--text-dim); font-size: 12px; }
.group-head { cursor: pointer; user-select: none; }

.apply-area { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.summary { color: var(--text-dim); font-size: 13px; }
.apply-controls { display: flex; align-items: center; gap: 14px; }
.radio { color: var(--text-dim); font-size: 13px; cursor: pointer; }
.radio input { accent-color: var(--accent); }

.progress { padding: 11px 24px; display: flex; align-items: center; gap: 12px; }
.progress-bar { flex: 1; height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .1s; }
.progress-text { color: var(--text-dim); font-size: 12px; white-space: nowrap; }

.groups { padding: 14px 20px 56px; }
.group {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 16px; margin-bottom: 12px;
}
.group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.group-title { font-weight: 500; font-size: 15px; color: var(--text-strong); letter-spacing: -.01em; }
.group-count { color: var(--text-faint); font-size: 12px; }
.drag-dots { color: var(--text-faint); cursor: grab; font-size: 14px; line-height: 1; }
.drag-dots:active { cursor: grabbing; }
.rename-btn {
  border: none; background: transparent; color: var(--text-dim);
  cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; opacity: 0;
  transition: opacity .12s, background .12s;
}
.group-head:hover .rename-btn { opacity: 1; }
.rename-btn:hover { background: var(--surface-2); color: var(--text); }
.rename-input {
  font-size: 15px; font-weight: 500; font-family: inherit; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--ring); border-radius: 6px; padding: 2px 6px; outline: none;
}
.rename-wrap { display: inline-flex; align-items: center; gap: 4px; }
.rename-wrap .name-text { width: 90px; }
.rename-wrap .name-num { width: 48px; text-align: center; }
.name-sep { font-weight: 500; color: var(--text-faint); }
.merge-btn { border: none; background: var(--surface-3); color: var(--text); border: 1px solid var(--border-2); border-radius: 8px; padding: 4px 12px; font-size: 12px; font-weight: 500; cursor: pointer; margin-left: 4px; }
.merge-btn:hover { background: var(--primary-bg); }
.btn.warn { background: #3a2526; color: #e8b3b3; border-color: rgba(255,255,255,.10); }
.btn.warn:hover { background: #492c2d; }
.group.sortable-ghost { opacity: .4; }

.clip-list {
  display: flex; flex-wrap: wrap; gap: 12px; min-height: 0;
}
.clip-list.pending:empty { min-height: 44px; }
.clip-list.committed { min-height: 0; }
.clip-list.pending.stacked { display: none; }

.top-actions { display: flex; align-items: center; gap: 10px; }
.scan-time { color: var(--text-faint); font-size: 12px; }

.clip.locked { cursor: default; }
.clip.locked .tag-bar { display: none; }

.new-divider {
  width: 100%; height: 0; border-top: 1px dashed var(--border-2); margin: 10px 0 8px;
}
.stack-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--surface-2); color: var(--text); border-radius: 10px;
  padding: 8px 13px; font-size: 13px; font-weight: 500; user-select: none;
  border: 1px dashed var(--border-2); margin-bottom: 10px;
}
.stack-toggle .arrow { transition: transform .15s; color: var(--text-dim); }
.stack-toggle.open .arrow { transform: rotate(90deg); }
.stack-toggle.done { background: var(--surface-2); color: var(--text-dim); border-style: solid; }
.stack-toggle.done .arrow { display: none; }
.clip {
  width: 200px; border-radius: 11px; overflow: visible; cursor: grab;
  background: #000 no-repeat left top; background-size: auto 100%;
  position: relative; border: 1px solid var(--border);
}
.clip::after { content: none; }
.clip:active { cursor: grabbing; }
.clip.selected { outline: 2px solid var(--ring); outline-offset: -1px; }
.clip.selected::after {
  content: "✓"; position: absolute; top: 6px; left: 6px;
  width: 18px; height: 18px; border-radius: 50%; background: rgba(10,10,11,.85);
  border: 1px solid var(--border-2);
  color: var(--text-strong); font-size: 11px; line-height: 17px; text-align: center;
}
.clip .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  color: #ececef; font-size: 11px; padding: 16px 7px 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.clip .dur {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,.42); color: #ececef; font-size: 10px;
  padding: 1px 6px; border-radius: 6px; font-variant-numeric: tabular-nums;
}
.clip .scrub-tick {
  position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.7);
  pointer-events: none; opacity: 0; transition: opacity .1s;
}
.clip:hover .scrub-tick { opacity: 1; }

.sortable-ghost { opacity: .35; }
.sortable-drag { opacity: .9; }
.clip-list.drop-target { outline: 2px dashed var(--border-2); outline-offset: 3px; border-radius: 8px; }

.placeholder { text-align: center; color: var(--text-dim); padding: 80px 24px; }
.placeholder .dim { font-size: 12px; }

.brand { color: var(--text-strong); font-weight: 500; }
body { padding-bottom: 30px; }
#footer {
  position: fixed; left: 0; right: 0; bottom: 0; height: 26px; line-height: 26px;
  text-align: center; font-size: 11px; color: var(--text-faint);
  background: var(--panel); border-top: 1px solid var(--border); z-index: 40;
}

/* 折叠：只显示组标题行 */
.collapse-btn {
  border: none; background: var(--surface-2); color: var(--text-dim); cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; font-size: 16px; line-height: 28px;
  padding: 0; transition: transform .12s, background .12s, color .12s;
}
.collapse-btn:hover { background: var(--surface-3); color: var(--text); }
.group.collapsed .collapse-btn { transform: rotate(-90deg); }
.group.collapsed .group-note,
.group.collapsed .group-prompt,
.group.collapsed .clip-list,
.group.collapsed .new-divider,
.group.collapsed .stack-toggle { display: none !important; }
.group.collapsed { padding-bottom: 10px; margin-bottom: 8px; }

/* 组备注 */
.group-note {
  width: 100%; border: none; background: transparent; color: var(--text-dim);
  font-family: inherit; font-size: 11px; padding: 0 0 4px; outline: none;
}
.group-note:focus { color: var(--text); }

/* 镜头标注 */
.tag-bar {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; opacity: 0; transition: opacity .12s; z-index: 3;
}
.clip:hover .tag-bar { opacity: 1; }
.tag-chip {
  border: none; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 500;
  cursor: pointer; background: rgba(10,10,11,.6); backdrop-filter: blur(6px); color: #ececef;
  border: 1px solid var(--border-2);
}
.tag-chip:hover { background: rgba(10,10,11,.85); }
.clip[data-tag="过"] { box-shadow: inset 0 0 0 2px var(--tag-pass); }
.clip[data-tag="保"] { box-shadow: inset 0 0 0 2px var(--tag-keep); }
.clip[data-tag="废"] { box-shadow: inset 0 0 0 2px var(--tag-drop); }
.tag-flag {
  position: absolute; bottom: 24px; left: 6px; z-index: 2;
  font-size: 11px; font-weight: 500; color: #fff; padding: 1px 7px; border-radius: 6px; display: none;
}
.clip[data-tag] .tag-flag { display: inline-block; }
.clip[data-tag="过"] .tag-flag { background: var(--tag-pass); }
.clip[data-tag="保"] .tag-flag { background: var(--tag-keep); }
.clip[data-tag="废"] .tag-flag { background: var(--tag-drop); }
.prompt-flag {
  position: absolute; right: 6px; bottom: 24px; z-index: 2;
  width: 20px; height: 20px; border-radius: 999px;
  background: rgba(10,10,11,.6); backdrop-filter: blur(6px); color: var(--text-strong);
  border: 1px solid var(--border-2);
  font-size: 11px; font-weight: 500; line-height: 19px; text-align: center; display: none;
}
.clip.has-prompt .prompt-flag { display: inline-block; }
.clip.prompt-open { z-index: 60; margin-bottom: 156px; overflow: visible; }
.clip-prompt-panel {
  position: absolute; left: 0; right: auto; top: calc(100% + 10px); z-index: 70;
  width: 360px; max-width: min(360px, calc(100vw - 56px));
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.46);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.clip-prompt-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.clip-prompt-input {
  width: 100%; min-height: 86px; max-height: 86px; border: 1px solid var(--border-2); border-radius: 8px;
  padding: 9px 11px; outline: none; resize: vertical; font: 12px/1.5 -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
  color: var(--text); background: var(--bg);
}
.clip-prompt-input:focus { border-color: var(--ring); }
.clip-prompt-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.clip-prompt-scope { color: var(--text-faint); font-size: 11px; }
.clip-prompt-btns { display: flex; gap: 8px; }

/* 圈选框 */
.marquee {
  position: fixed; border: 1px solid var(--ring); background: rgba(255,255,255,.06);
  z-index: 50; pointer-events: none; border-radius: 3px;
}

/* 放大预览 */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(8px); }
.modal-body { position: relative; max-width: 86vw; max-height: 86vh; display: flex; flex-direction: column; gap: 12px; }
#preview-video { max-width: 86vw; max-height: 76vh; border-radius: 12px; background: #000; }
.modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.modal-name { color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-tags { display: flex; gap: 8px; align-items: center; }
.tag-btn { border: 1px solid var(--border-2); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer; background: var(--surface-2); color: var(--text); transition: background .12s; }
.tag-btn:hover { background: var(--surface-3); }
.tag-btn.active { background: var(--primary-bg); color: var(--primary-text); border-color: var(--primary-line); }
.preview-fs-btn { position: absolute; top: 12px; right: 12px; z-index: 3; border: none; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; color: #ececef; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); display: inline-flex; align-items: center; gap: 6px; }
.preview-fs-btn svg { width: 15px; height: 15px; }
.preview-fs-btn:hover { background: rgba(0,0,0,.75); }

.prompt-btn { border: none; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 12px; padding: 3px 9px; border-radius: 7px; }
.prompt-btn:hover { background: var(--surface-2); color: var(--text); }
.prompt-btn.has { color: var(--text-strong); }
.group-prompt { width: 100%; min-height: 52px; resize: vertical; border: 1px solid var(--border-2); border-radius: 8px; padding: 8px 11px; font-family: inherit; font-size: 12px; outline: none; margin-bottom: 8px; background: var(--bg); color: var(--text); }
.group-prompt:focus { border-color: var(--ring); }

.step-btn { padding: 4px 11px; font-size: 15px; line-height: 1; }

/* 右键菜单 */
.ctx-menu {
  position: fixed; z-index: 200; min-width: 186px; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 11px;
  box-shadow: 0 16px 40px rgba(0,0,0,.6); animation: ctxIn .12s ease;
}
@keyframes ctxIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.ctx-item {
  padding: 8px 12px; font-size: 13px; border-radius: 7px; cursor: pointer; color: var(--text);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; white-space: nowrap;
  transition: background .1s;
}
.ctx-item:hover { background: var(--surface-3); }
.ctx-item.disabled { color: var(--text-faint); pointer-events: none; }
.ctx-sep { height: 1px; background: var(--border); margin: 5px 4px; }
.ctx-sub { color: var(--text-dim); font-size: 11px; }
.ctx-submenu { padding: 4px; max-height: 320px; overflow: auto; }
.ctx-item.danger { color: #d98c8c; }
.ctx-item.danger:hover { background: #2c1f20; }

/* 信息卡片 / 弹窗 */
.info-card {
  position: relative; background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; padding: 20px 22px;
  min-width: 420px; max-width: 76vw; max-height: 76vh; overflow: auto; box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.info-card h3 { margin: 0 0 14px; font-size: 16px; font-weight: 500; color: var(--text-strong); }
#info-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#info-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
#info-table td:first-child { color: var(--text-dim); width: 110px; }
.legal-card {
  width: min(680px, calc(100vw - 48px));
  max-height: min(78vh, 760px);
}
.legal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.legal-head h3 { margin: 0; }
.legal-content {
  color: var(--text);
  font-size: 13px;
  line-height: 1.75;
}
.legal-content p {
  margin: 0 0 12px;
}
.legal-content h4 {
  margin: 18px 0 7px;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 650;
}

/* 预览提示词框 */
.preview-prompt-box { margin: 0 14px 14px; }
.preview-prompt { width: 100%; min-height: 74px; box-sizing: border-box; border: 1px solid var(--border-2); border-radius: 10px; padding: 11px 12px; resize: vertical; font: 13px/1.5 -apple-system, "PingFang SC", "Helvetica Neue", sans-serif; color: var(--text); background: var(--surface-2); outline: none; }
.preview-prompt:focus { border-color: var(--ring); }
.preview-prompt-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.preview-prompt-hint { color: var(--text-faint); font-size: 11px; }
.preview-prompt-btns { display: flex; gap: 8px; }

/* 全屏：视频铺满整屏 */
.modal.fs .modal-backdrop { background: #000; backdrop-filter: none; }
.modal.fs .modal-body { max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; gap: 0; justify-content: center; align-items: center; }
.modal.fs #preview-video { max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; border-radius: 0; object-fit: contain; }
.modal.fs .modal-bar, .modal.fs .preview-prompt-box { display: none; }
.modal.fs .preview-fs-btn { top: 18px; right: 18px; }

/* A 方案：左侧导航 + 大图墙 */
html, body { height: 100%; overflow: hidden; }
body {
  padding-bottom: 0;
  background:
    radial-gradient(circle at 52% 0%, rgba(255,255,255,.035), transparent 34%),
    var(--bg);
}
#footer { display: none; }

#home:not([hidden]) {
  min-height: 100vh;
  overflow: auto;
  background: #09090a;
}
.home-head {
  position: sticky; top: 0; z-index: 5;
  padding: 24px 32px 18px;
  background: rgba(9,9,10,.88);
  backdrop-filter: blur(18px);
}
.home-head h1 { font-size: 24px; }
.project-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  padding: 28px 32px 88px;
}
.project-card {
  border-radius: 16px;
  background: #121214;
  border-color: rgba(255,255,255,.07);
}
.project-thumb { min-height: 148px; background-color: #1d1e22; }

#workspace {
  height: 100vh;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  background: #080809;
  overflow: hidden;
}
.workspace-sidebar {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(130px, auto) minmax(0, 1fr) auto;
  gap: 18px;
  padding: 24px 18px 18px;
  background: #0d0d0f;
  border-right: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
}
.side-brand {
  display: flex; align-items: center; gap: 12px;
  min-height: 42px;
  color: var(--text-strong);
}
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #18191d;
  border: 1px solid rgba(255,255,255,.11);
  font-size: 18px; font-weight: 650;
}
.side-brand strong {
  display: block;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
}
.side-brand small {
  display: block;
  margin-top: 2px;
  color: var(--text-faint);
  font-size: 11px;
}
.side-back {
  width: 100%;
  border: 1px solid rgba(255,255,255,.08);
  background: #151518;
  color: var(--text-dim);
  border-radius: 11px;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.side-back:hover { color: var(--text); background: #1a1b1f; }
.side-section { min-height: 0; }
.side-section-groups {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.side-title {
  padding: 0 8px 9px;
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 600;
}
.side-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.side-section-groups .side-list {
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}
.side-item {
  width: 100%;
  min-height: 42px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-dim);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.side-item svg { width: 19px; height: 19px; color: #777981; }
.side-item span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.side-item em {
  color: var(--text-faint);
  font-style: normal;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.side-item:hover { background: #151519; color: var(--text); }
.side-item.active {
  background: #1a1b20;
  color: var(--text-strong);
}
.side-item.active svg { color: #b8bac3; }
.side-item.missing { opacity: .42; cursor: default; }
.side-footer {
  min-height: 20px;
  color: var(--text-faint);
  font-size: 11px;
  padding: 0 8px;
}

.workspace-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.topbar {
  position: relative;
  top: auto;
  z-index: 4;
  padding: 26px 34px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: #09090a;
}
.folder-area { gap: 0; }
.workspace-kicker {
  color: var(--text-faint);
  font-size: 12px;
  margin-bottom: 6px;
}
.project-name {
  margin: 0;
  font-size: 12px;
  color: var(--text-faint);
}
#view-title {
  margin: 0 0 8px;
  color: var(--text-strong);
  font-size: 34px;
  line-height: 1.08;
  font-weight: 680;
  letter-spacing: 0;
}
.folder-label {
  display: block;
  max-width: 760px;
  font-size: 12px;
}
.top-actions .btn {
  min-height: 38px;
  border-radius: 12px;
}
.top-actions .btn-primary {
  background: #2c3343;
}
.controls {
  position: relative;
  top: auto;
  z-index: 3;
  padding: 14px 34px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: #0b0b0c;
}
.threshold { gap: 10px; }
.threshold label,
.zoom label {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
}
.threshold input[type=range] { max-width: 300px; }
.toolbar-row { margin-top: 10px; }
.hint {
  margin-top: 9px;
  max-width: 980px;
  color: #6f7077;
}
.progress {
  padding: 12px 34px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: #0b0b0c;
}
.groups {
  min-height: 0;
  overflow: auto;
  padding: 28px 34px 34px;
}
.group {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 34px;
}
.group.is-filtered { display: none !important; }
.group-head {
  margin-bottom: 16px;
  padding: 0;
}
.group-title {
  font-size: 18px;
  font-weight: 650;
}
.group-count { font-size: 13px; }
.collapse-btn,
.drag-dots {
  opacity: .72;
}
.prompt-btn {
  background: #141519;
  border: 1px solid rgba(255,255,255,.07);
}
.prompt-btn.has {
  background: #1c2029;
  color: var(--text-strong);
}
.group-note {
  max-width: 720px;
  margin-bottom: 10px;
}
.group-prompt {
  max-width: 860px;
  margin-bottom: 16px;
  background: #111114;
}
.clip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-start;
}
.clip {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background-color: #202126;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.clip:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 16px 34px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.035);
}
.clip.selected {
  outline: 2px solid rgba(218,220,228,.65);
  outline-offset: 2px;
}
.clip .dur,
.prompt-flag,
.tag-flag {
  border-radius: 999px;
  background: rgba(10,10,11,.68);
  backdrop-filter: blur(10px);
}
.clip .dur {
  top: 10px;
  right: 10px;
  font-size: 12px;
  padding: 3px 9px;
}
.clip .cap {
  padding: 30px 11px 9px;
  font-size: 12px;
}
.tag-bar {
  top: 10px;
  gap: 6px;
}
.tag-chip {
  border-radius: 999px;
  padding: 3px 10px;
}
.tag-flag {
  bottom: auto;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
}
.prompt-flag {
  right: 10px;
  bottom: 10px;
}
.stack-toggle {
  margin: 0 0 16px;
  border-radius: 12px;
  background: #121317;
}
.new-zone {
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 18px;
  background: rgba(255,255,255,.015);
}
.apply-area {
  margin: 0;
  padding: 16px 34px;
  min-height: 74px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(12,12,14,.96);
  backdrop-filter: blur(18px);
}
.summary {
  font-size: 14px;
  color: var(--text-dim);
}
.apply-controls {
  gap: 10px;
  border-radius: 16px;
  background: #141519;
  padding: 7px;
}
.radio {
  min-width: 72px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 11px;
}
.radio:has(input:checked) {
  background: #22242c;
  color: var(--text-strong);
}
.apply-controls .btn {
  min-height: 38px;
  border-radius: 11px;
}
.placeholder {
  align-self: center;
  justify-self: center;
  padding: 0 28px;
}
.placeholder p:first-child {
  color: var(--text-strong);
  font-size: 24px;
  margin-bottom: 8px;
}

@media (max-width: 980px) {
  #workspace { grid-template-columns: 228px minmax(0, 1fr); }
  .workspace-sidebar { padding: 18px 12px; }
  .topbar, .controls, .groups, .apply-area { padding-left: 22px; padding-right: 22px; }
  #view-title { font-size: 28px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .apply-area { align-items: flex-start; }
}

/* 清晰度与操作逻辑修正 */
:root {
  --bg: #090a0c;
  --panel: #111216;
  --surface: #17191e;
  --surface-2: #20232b;
  --surface-3: #292d36;
  --text: #dfe2e8;
  --text-strong: #f1f3f7;
  --text-dim: #a6abb6;
  --text-faint: #747a86;
  --border: rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.16);
  --accent: #c3c8d4;
  --ring: rgba(151,169,220,.74);
}
body { color: var(--text); }
#workspace { background: #0b0c0e; }
.workspace-sidebar {
  background: #101114;
  border-right-color: var(--border);
}
.side-brand small,
.side-title,
.side-footer,
.folder-label,
.project-name,
.workspace-kicker,
.hint,
.dim,
.summary { color: var(--text-dim); }
.side-item {
  color: var(--text-dim);
  border: 1px solid transparent;
}
.side-item:hover {
  background: #1a1c21;
  border-color: rgba(255,255,255,.05);
}
.side-item.active {
  background: #22252d;
  border-color: rgba(255,255,255,.08);
}
.group-side-all {
  margin-bottom: 3px;
}
.group-nav-sep {
  height: 1px;
  background: var(--border);
  margin: 5px 8px 7px;
}
.group-side-item[data-gid] {
  grid-template-columns: 14px 19px minmax(0, 1fr) auto auto;
  gap: 8px;
}
.side-drag {
  color: var(--text-faint);
  cursor: grab;
  font-size: 13px;
  line-height: 1;
}
.side-label {
  min-width: 0;
}
.side-actions {
  display: inline-flex;
  gap: 5px;
  opacity: 0;
}
.group-side-item:hover .side-actions,
.group-side-item.active .side-actions {
  opacity: 1;
}
.side-actions span {
  width: 23px;
  height: 23px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}
.side-actions span:hover {
  background: rgba(255,255,255,.08);
  color: var(--text-strong);
}
.side-actions svg {
  width: 13px;
  height: 13px;
}
.topbar {
  background: #0d0e11;
  border-bottom-color: var(--border);
}
.controls {
  background: #111216;
  border-bottom-color: var(--border);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.22);
}
.groups {
  background: #090a0c;
}
.group {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.group:last-child {
  border-bottom: none;
}
.top-actions {
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.organize-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #17191f;
}
.organize-actions[hidden] { display: none !important; }
.organize-actions .summary {
  padding: 0 5px 0 4px;
  white-space: nowrap;
}
.apply-controls {
  background: transparent;
  padding: 0;
}
.radio {
  background: #111319;
  border: 1px solid var(--border);
}
.radio:has(input:checked) {
  background: #2a2f3c;
  border-color: rgba(255,255,255,.12);
}
.btn,
.side-back,
.prompt-btn,
.stack-toggle {
  border-color: var(--border);
}
.btn-ghost {
  color: var(--text-dim);
  border-color: var(--border);
}
.btn-ghost:hover {
  color: var(--text-strong);
  background: var(--surface-2);
}
.btn-primary {
  background: #32394a;
  color: #f4f6fb;
  border-color: rgba(255,255,255,.14);
}
.btn-primary:hover { background: #3d4559; }
.threshold,
.toolbar-row,
.zoom {
  min-height: 32px;
}
input[type=range] {
  appearance: none;
  height: 18px;
  background: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: #555b67;
  border: 1px solid rgba(255,255,255,.10);
}
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -7px;
  border-radius: 50%;
  background: #d7dbe4;
  border: 2px solid #7d8492;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
#threshold-value {
  color: var(--text-strong);
  font-size: 13px;
}
.clip {
  border-color: rgba(255,255,255,.13);
  background-color: #252831;
}
.clip:hover {
  border-color: rgba(255,255,255,.25);
}
.clip-prompt-panel {
  background: #191b21;
  border-color: var(--border-2);
}
.clip-prompt-input {
  background: #101115;
  color: var(--text-strong);
}
.single-group-view .drag-dots,
.single-group-view .collapse-btn {
  display: none;
}

/* 浅色模式：沿用当前布局，只换为更接近旧版的干净明亮色 */
body.light-mode {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --surface-3: #e3e7ee;
  --text: #2f3440;
  --text-strong: #151922;
  --text-dim: #5f6673;
  --text-faint: #8b93a1;
  --border: rgba(30,40,60,.13);
  --border-2: rgba(30,40,60,.20);
  --accent: #6f7c91;
  --primary-bg: #334155;
  --primary-bg-hover: #475569;
  --primary-text: #ffffff;
  --ring: rgba(59, 130, 246, .58);
  background: #f5f6f8;
}
body.light-mode #home:not([hidden]),
body.light-mode #workspace,
body.light-mode .groups {
  background: #f5f6f8;
}
body.light-mode .workspace-sidebar,
body.light-mode .topbar,
body.light-mode .controls {
  background: #ffffff;
}
body.light-mode .workspace-sidebar {
  border-right-color: var(--border);
}
body.light-mode .topbar,
body.light-mode .controls,
body.light-mode .group {
  border-color: var(--border);
}
body.light-mode .side-back,
body.light-mode .side-item:hover,
body.light-mode .side-item.active,
body.light-mode .organize-actions,
body.light-mode .radio,
body.light-mode .prompt-btn,
body.light-mode .stack-toggle,
body.light-mode .clip-prompt-panel {
  background: #f0f3f7;
}
body.light-mode .side-item.active,
body.light-mode .radio:has(input:checked) {
  background: #e3e8f0;
}
body.light-mode .brand-mark {
  background: #eef2f7;
  border-color: var(--border);
}
body.light-mode .btn-primary {
  background: #334155;
  color: #fff;
}
body.light-mode .btn-primary:hover {
  background: #475569;
}
body.light-mode .btn-ghost:hover,
body.light-mode .side-actions span:hover {
  background: #e7ebf1;
}
body.light-mode .link-btn:hover {
  color: #334155;
}
body.light-mode input[type=range]::-webkit-slider-runnable-track {
  background: #cbd3df;
  border-color: #b9c2d0;
}
body.light-mode input[type=range]::-webkit-slider-thumb {
  background: #ffffff;
  border-color: #64748b;
  box-shadow: 0 2px 8px rgba(15,23,42,.18);
}
body.light-mode .clip {
  border-color: rgba(30,40,60,.16);
  background-color: #d8dde6;
}
body.light-mode .clip:hover {
  border-color: rgba(30,40,60,.28);
  box-shadow: 0 14px 28px rgba(15,23,42,.10);
}
body.light-mode .clip-prompt-input,
body.light-mode .preview-prompt,
body.light-mode .group-prompt,
body.light-mode .np-row input[type=text] {
  background: #ffffff;
  color: var(--text-strong);
}
body.light-mode .ctx-menu,
body.light-mode .info-card {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 24px 60px rgba(15,23,42,.16);
}

/* 细节打磨：更顺滑的交互 + 细滚动条 + 更安静的占位符 */
.clip { transition: box-shadow .16s ease, border-color .16s ease; }
.side-item, .side-back { transition: background .12s ease, color .12s ease; }
.group-note::placeholder { color: var(--text-faint); opacity: .55; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 7px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); background-clip: padding-box; }
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); background-clip: padding-box; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.26); background-clip: padding-box; }

/* ===== 批量修正（用户反馈）===== */
/* #3 去掉缩略图四周更亮的边 */
.clip { box-shadow: none; border-color: rgba(255,255,255,.05); }
.clip:hover { box-shadow: 0 16px 34px rgba(0,0,0,.24); }
body.light-mode .clip { box-shadow: none; }
/* #4 锁定编辑=红，解锁编辑=绿 */
.btn.lock-green { background: #2f8f57; color: #fff; border-color: transparent; }
.btn.lock-green:hover { background: #38a163; }
.btn.lock-red { background: #c2504c; color: #fff; border-color: transparent; }
.btn.lock-red:hover { background: #d25a56; }
/* #5 过/保/废在左下角，提在右下角，文件名居中避让 */
.clip .tag-flag { top: auto; bottom: 10px; left: 10px; }
.clip .prompt-flag { top: auto; bottom: 10px; right: 10px; }
.clip .cap { text-align: center; padding-left: 48px; padding-right: 42px; }
/* #1+2 提示词框悬浮在缩略图上方、不挤排版、与缩略图正中对齐 */
.clip.prompt-open { margin-bottom: 0; overflow: visible; z-index: 80; }
.clip-prompt-panel { left: 50%; right: auto; transform: translate(-50%, -4px); z-index: 90; }
.clip-prompt-panel.open { transform: translateX(-50%); }
/* #6 浅色模式首页：头部与卡片同步变亮，不再深浅混用 */
body.light-mode .home-head { background: rgba(245,246,248,.92); }
body.light-mode .project-card { background: #ffffff; border-color: var(--border); }
body.light-mode .project-thumb { background-color: #e3e7ee; }

/* ===== Codex 修正：去立体边、设置面板、内联改名 ===== */
.clip,
.clip:hover,
body.light-mode .clip,
body.light-mode .clip:hover {
  border-color: transparent !important;
  box-shadow: none !important;
}
.clip.selected {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.clip[data-tag="过"],
.clip[data-tag="保"],
.clip[data-tag="废"] {
  box-shadow: inset 0 0 0 2px currentColor !important;
}
.clip[data-tag="过"] { color: var(--tag-pass); }
.clip[data-tag="保"] { color: var(--tag-keep); }
.clip[data-tag="废"] { color: var(--tag-drop); }
.clip .cap,
.clip .dur,
.clip .tag-flag,
.clip .prompt-flag,
.clip .tag-chip { color: #ececef; }

.side-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-settings {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-dim);
  font: inherit;
  cursor: pointer;
}
.side-settings:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}
.side-rename-input {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--ring);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text-strong);
  font: inherit;
  padding: 4px 7px;
  outline: none;
}
.side-item.sortable-disabled .side-drag,
.side-list.sortable-disabled .side-drag {
  opacity: .35;
  cursor: not-allowed;
}
.settings-card {
  width: min(720px, calc(100vw - 56px));
}
.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.settings-head h3 { margin: 0; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--border);
}
.settings-row strong {
  display: block;
  color: var(--text-strong);
  font-size: 14px;
  margin-bottom: 5px;
}
.settings-row p {
  margin: 0;
  color: var(--text-dim);
  font-size: 12px;
}
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.seg-btn {
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  padding: 7px 12px;
  cursor: pointer;
}
.seg-btn.active {
  background: var(--surface-2);
  color: var(--text-strong);
}
.settings-tutorial h4 {
  color: var(--text-strong);
  margin: 18px 0 10px;
  font-size: 14px;
}
.tutorial-content {
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
}
.tutorial-content ol {
  margin: 0;
  padding-left: 20px;
}
