/* ============================================================
   香格里拉 · 选片工作台 — cinematic dark workbench
   Color is content; UI is the black curtain.
   ============================================================ */

:root{
  /* warm near-black "幕布" */
  --bg-0:#0b0a08;
  --bg-1:#121009;
  --bg-2:#1a1712;
  --bg-3:#221e17;
  --bg-4:#2c271e;
  --raise:#16130d;

  /* hairlines, warm-tinted */
  --line:rgba(232,210,160,.075);
  --line-2:rgba(232,210,160,.14);
  --line-strong:rgba(232,210,160,.22);

  /* text, warm off-white */
  --tx:#efe7d6;
  --tx-2:#b8ad97;
  --tx-3:#857c69;
  --tx-4:#5b5447;

  /* brand / accent — warm gold */
  --gold:#e3b563;
  --gold-2:#f0cf8e;
  --gold-soft:rgba(227,181,99,.14);
  --gold-line:rgba(227,181,99,.38);
  --coral:#d97757;
  --slate:#8b94a1;

  /* decision marks */
  --m-pick:#74c79a;     /* 选定 */
  --m-cand:#e3b563;     /* 候选 */
  --m-ref:#6fa6cb;      /* 可参考 */
  --m-redo:#dd9a4c;     /* 待重做 */
  --m-drop:#a86f69;     /* 废弃 */

  /* shot status */
  --s-gen:#6c6557;      /* 待生成 — recedes */
  --s-review:#e3b563;   /* 筛选中 */
  --s-tidy:#6fa6cb;     /* 待整理 */
  --s-picked:#74c79a;   /* 已选定 */
  --s-lock:#f0cf8e;     /* 已锁定 */

  /* task status */
  --ok:#74c79a; --warn:#dd9a4c; --err:#cf6b5f; --run:#6fa6cb; --idle:#857c69;

  --shadow:0 1px 0 rgba(0,0,0,.5),0 12px 32px -12px rgba(0,0,0,.7);
  --shadow-lg:0 24px 64px -16px rgba(0,0,0,.8);

  --r-1:4px; --r-2:6px; --r-3:8px; --r-4:12px;

  /* density-driven (overwritten per density) */
  --card-min:208px;
  --grid-gap:14px;
  --pad:14px;
  --ui:13px;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-1:.12s; --dur-2:.2s; --dur-3:.32s;

  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
}

[data-density="dense"]{ --card-min:166px; --grid-gap:10px; --pad:11px; --ui:12px; }
[data-density="comfy"]{ --card-min:280px; --grid-gap:20px; --pad:18px; --ui:14px; }
[data-density="roomy"]{ --card-min:380px; --grid-gap:24px; --pad:20px; --ui:14px; }

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:var(--bg-0);
  color:var(--tx);
  font-family:var(--sans);
  font-size:var(--ui);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
#root{ height:100%; }

/* film grain + vignette overlay on the whole stage */
.grain::before{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.035; mix-blend-mode:overlay;
}
.grain::after{
  content:""; position:fixed; inset:0; z-index:9001; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 36%,transparent 58%,rgba(0,0,0,.45) 100%);
}

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#2a261d; border-radius:8px; border:3px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover{ background:#3a3526; }

::selection{ background:var(--gold-soft); color:var(--gold-2); }

/* NOTE: no `transform` in the global transition — track clips are positioned by
   translateX and a transform transition makes dragging lag behind the pointer. */
button{ font-family:inherit; color:inherit; cursor:pointer;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease); }
button:active:not(:disabled):not(.cut-track-clip):not(.cut-wheel-dial){ transform:scale(.97); }
input,textarea,select{ font-family:inherit; color:inherit; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* image fade-in on load: pair with onLoad adding .img-loaded (skip when already cached) */
.img-fade{ opacity:0; transition:opacity var(--dur-1) var(--ease); z-index:1; }
.img-fade.img-loaded{ opacity:1; }

/* modal entrance (V4): backdrop fades, surface scales in */
.modal-backdrop{ animation:modal-bg-in var(--dur-2) var(--ease); }
.modal-pop{ animation:modal-pop-in var(--dur-2) var(--ease); }
@keyframes modal-bg-in{ from{ opacity:0; } }
@keyframes modal-pop-in{ from{ opacity:0; transform:scale(.96); } }

/* skeleton shimmer placeholder (V5) */
.shimmer{ position:relative; overflow:hidden; background:var(--bg-2); }
.shimmer::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, transparent 30%, rgba(232,210,160,.05) 50%, transparent 70%);
  background-size:220% 100%;
  animation:shimmer-sweep 1.6s var(--ease) infinite;
}
/* stop sweeping once the image has faded in */
.shimmer:has(.img-loaded)::after{ display:none; }
@keyframes shimmer-sweep{ from{ background-position:160% 0; } to{ background-position:-60% 0; } }

/* toast notifications */
.toast-stack{ position:fixed; right:18px; bottom:18px; z-index:400; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast{
  pointer-events:auto; display:flex; align-items:center; gap:9px;
  min-width:200px; max-width:380px; padding:10px 14px 10px 11px;
  background:rgba(26,23,18,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-2); border-left:3px solid var(--gold); border-radius:var(--r-3);
  box-shadow:var(--shadow); font-size:12.5px; color:var(--tx);
  animation:toast-in var(--dur-3) var(--ease);
}
.toast.ok{ border-left-color:var(--ok); }
.toast.err{ border-left-color:var(--err); }
.toast.out{ opacity:0; transform:translateY(6px); transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.mono{ font-family:var(--mono); font-feature-settings:"tnum" 1; }
.lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3); }

/* shared focus ring */
.foc:focus-visible{ outline:2px solid var(--gold-line); outline-offset:1px; }

/* ===== atmosphere layer (V6): film grain + vignette over the black curtain ===== */
body::before{
  content:""; position:fixed; inset:0; z-index:300; pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:""; position:fixed; inset:0; z-index:299; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 42%, transparent 64%, rgba(0,0,0,.28));
}

/* ===== app shell ===== */
.app{ display:flex; flex-direction:column; height:100%; }

/* task running animations */
@keyframes sg-pulse{
  0%,100%{ opacity:1; box-shadow:0 0 4px var(--run); }
  50%{ opacity:.55; box-shadow:0 0 10px var(--run); }
}
@keyframes sg-indeterminate{
  0%{ left:-30%; }
  100%{ left:100%; }
}
@keyframes sg-stripe-flow{
  0%{ background-position:0 0; }
  100%{ background-position:40px 0; }
}

/* flowing light border — rotate a separate layer instead of repainting gradient angle */
@keyframes sg-border-rotate{
  to{ transform:rotate(360deg); }
}

/* generating card: outer glow wrapper */
.sg-gen-border{
  position:relative;
  border-radius:var(--r-3);
  padding:2px;
  background:transparent;
  box-shadow:0 0 14px -2px rgba(111,166,203,.35);
  contain:layout paint;
  overflow:hidden;
}
.sg-gen-border::before{
  content:"";
  position:absolute;
  inset:-55%;
  pointer-events:none;
  background:conic-gradient(var(--run), var(--gold), var(--run), transparent, var(--run));
  animation:sg-border-rotate 2.5s linear infinite;
  will-change:transform;
}
.sg-gen-border > .sg-gen-inner{
  position:relative;
  z-index:1;
  border-radius:calc(var(--r-3) - 2px);
  overflow:hidden;
  background:var(--bg-2);
  height:100%;
}

/* keyboard hint chips */
.kbd{
  font-family:var(--mono); font-size:10px; line-height:1;
  padding:3px 5px; border:1px solid var(--line-2); border-radius:4px;
  color:var(--tx-3); background:var(--bg-2);
}

.timeline-stat{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:8px 9px;
  border:1px solid var(--line-2);
  border-radius:var(--r-2);
  background:var(--bg-1);
  min-width:0;
}
.timeline-stat span{
  font-size:10.5px;
  color:var(--tx-3);
}
.timeline-stat b{
  font-family:var(--mono);
  font-size:12px;
  color:var(--tx);
}
.timeline-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.timeline-field span{
  font-size:11px;
  color:var(--tx-3);
}
.timeline-field input{
  height:32px;
  border-radius:var(--r-2);
  border:1px solid var(--line-2);
  background:var(--bg-0);
  color:var(--tx);
  padding:0 9px;
  outline:none;
  font-family:var(--mono);
  font-size:12px;
}
.timeline-field input:focus{
  border-color:var(--gold-line);
}
.timeline-clip{
  all:unset;
  box-sizing:border-box;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:6px;
  border:1px solid var(--line-2);
  border-radius:var(--r-2);
  overflow:hidden;
  transition:border-color .12s, background .12s, transform .12s;
}
.timeline-clip:hover{
  transform:translateY(-1px);
  border-color:var(--gold-line);
}

/* ===== cut.shotcrew.ai preview workspace ===== */
.cut-app{
  width:100%;
  height:100%;
  min-height:0;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #18130c 0%, var(--bg-0) 62%),
    var(--bg-0);
  color:var(--tx);
}
.cut-appbar{
  width:100%;
  min-width:0;
  height:54px;
  flex:none;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 16px 0 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #17130c, #110e09);
  box-shadow:0 1px 0 rgba(0,0,0,.5);
}
.cut-brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.cut-brand > span:first-child{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 10px rgba(227,181,99,.22);
}
.cut-brand > span:last-child{ color:var(--gold-2); }
.cut-divider{
  width:1px;
  height:24px;
  flex:none;
  background:var(--line-2);
}
.cut-project{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.15;
}
.cut-project b{
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}
.cut-project span{
  margin-top:2px;
  color:var(--tx-4);
  font-size:10px;
}
.cut-seqstat{
  display:flex;
  align-items:center;
  gap:20px;
}
.cut-seqstat span{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.cut-seqstat small{
  color:var(--tx-4);
  font-size:9.5px;
  text-transform:uppercase;
}
.cut-seqstat b{
  margin-top:2px;
  color:var(--tx);
  font-size:13px;
}
.cut-spacer{ flex:1; }
.cut-top-btn{
  height:32px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 13px;
  border:1px solid var(--line-2);
  border-radius:6px;
  background:var(--bg-2);
  color:var(--tx-2);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.cut-top-btn:hover{
  border-color:var(--gold-line);
  color:var(--tx);
  background:var(--bg-3);
}
.cut-stage{
  width:100%;
  flex:1;
  min-height:0;
  min-width:0;
  display:flex;
  border-bottom:1px solid var(--line);
}
.cut-viewer{
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:16px 14px 14px 18px;
}
.cut-monitor-wrap{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:var(--r-2);
  overflow:hidden;
  background:
    radial-gradient(130% 120% at 50% 0%, #100d09, rgba(8,7,5,0) 70%),
    #070605;
  box-shadow:var(--shadow);
}
.cut-monitor{
  position:relative;
  aspect-ratio:16 / 9;
  width:100%;
  max-width:100%;
  max-height:100%;
  background:#000;
  overflow:hidden;
}
.cut-monitor video,
.cut-monitor img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}
.cut-frame-fallback{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(110% 130% at 50% 30%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(160deg, #172127, #080705);
}
.cut-frame-code{
  font-family:var(--mono);
  font-size:clamp(32px, 7vw, 64px);
  font-weight:800;
  color:rgba(255,255,255,.16);
}
.cut-frame-sub{
  margin-top:6px;
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,.28);
}
.cut-monitor-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 58%, rgba(0,0,0,.48));
}
.cut-mon-tl,
.cut-mon-tr,
.cut-rec-tc,
.cut-source-tag{
  position:absolute;
  z-index:2;
}
.cut-mon-tl{
  top:12px;
  left:14px;
  display:flex;
  align-items:center;
  gap:9px;
  max-width:calc(100% - 160px);
}
.cut-shot-id{
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  background:rgba(0,0,0,.48);
  color:var(--tx);
  font-size:13px;
  font-weight:700;
}
.cut-shot-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,255,255,.66);
  font-size:12px;
  text-shadow:0 1px 4px #000;
}
.cut-mon-tr{ top:12px; right:14px; }
.cut-rec-tc{
  right:14px;
  bottom:12px;
  padding:3px 9px;
  border:1px solid rgba(227,181,99,.22);
  border-radius:4px;
  background:rgba(0,0,0,.55);
  color:var(--gold-2);
  font-size:12px;
}
.cut-source-tag{
  left:14px;
  bottom:13px;
  display:flex;
  align-items:center;
  gap:7px;
  color:rgba(255,255,255,.34);
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
}
.cut-source-tag span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--tx-3);
}
.cut-center-play{
  position:absolute;
  inset:0;
  z-index:3;
  width:70px;
  height:70px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(8,7,5,.58);
  color:var(--tx);
  opacity:0;
  transition:opacity .08s, background .08s, border-color .08s;
}
.cut-monitor:hover .cut-center-play,
.cut-center-play.show{ opacity:1; }
.cut-center-play:hover{
  border-color:var(--gold-line);
  background:rgba(227,181,99,.22);
}
.cut-chip{
  --c:var(--tx-3);
  --edge:var(--line-2);
  height:22px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 9px 0 8px;
  border:1px solid var(--edge);
  border-radius:999px;
  background:color-mix(in oklab, var(--c) 13%, transparent);
  color:var(--c);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.cut-chip.on-dark{
  background:rgba(0,0,0,.52);
}
.cut-chip.selected{ --c:var(--m-pick); --edge:color-mix(in oklab, var(--m-pick) 42%, transparent); }
.cut-chip.latest{ --c:var(--m-ref); --edge:color-mix(in oklab, var(--m-ref) 42%, transparent); }
.cut-chip.source{ --c:var(--tx-3); --edge:var(--line-2); }
.cut-chip-pip{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
}
.cut-inspector{
  width:392px;
  flex:none;
  min-height:0;
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--line);
  background:#110d08;
}
.cut-insp-scroll{
  flex:1;
  min-height:0;
  overflow:auto;
}
.cut-insp-head{
  padding:18px 16px 16px;
  border-bottom:1px solid var(--line);
}
.cut-insp-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.cut-insp-code{
  font-size:18px;
  font-weight:800;
}
.cut-insp-head h2{
  margin:8px 0 16px;
  font-size:14px;
  font-weight:500;
  line-height:1.35;
  color:var(--tx-2);
}
.cut-insp-meta-line{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--tx-3);
  font-size:11px;
  cursor:default;
}

/* set in/out from playhead — tiny ghost button inside the field label */
.cut-setpt{
  margin-left:6px;
  padding:1px 7px;
  font-size:10px;
  font-weight:700;
  color:var(--gold-2);
  border:1px solid var(--gold-line);
  border-radius:9px;
  background:transparent;
}
.cut-setpt:hover{ background:var(--gold-soft); }
.cut-section{
  padding:16px;
  border-bottom:1px solid var(--line);
}
.cut-sec-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  color:var(--tx-4);
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
}
.cut-sec-label span{
  flex:1;
  height:1px;
  background:var(--line);
}
.cut-source-note{
  display:flex;
  gap:10px;
  color:var(--tx-3);
  font-size:12px;
  line-height:1.5;
}
.cut-source-note svg{ color:var(--gold); }
.cut-field{
  display:grid;
  grid-template-columns:1fr 86px;
  align-items:center;
  column-gap:10px;
  row-gap:6px;
  padding-bottom:4px;
}
.cut-field + .cut-field{ margin-top:6px; }
.cut-field > span{
  display:flex;
  flex-direction:column;
  color:var(--tx-2);
  font-size:12px;
  line-height:1.15;
}
.cut-field small{
  margin-top:3px;
  color:var(--tx-4);
  font-size:10.5px;
}
.cut-field input{
  width:100%;
  height:31px;
  border:1px solid var(--line-2);
  border-radius:5px;
  background:#0b0907;
  color:var(--tx);
  padding:0 8px;
  outline:none;
  font-family:var(--mono);
  font-size:12px;
}
.cut-field input:focus{ border-color:var(--gold-line); }
.cut-field input:disabled{
  opacity:.42;
  cursor:not-allowed;
}
.cut-field.readonly{
  grid-template-columns:minmax(96px, 1fr) 1fr;
  grid-template-rows:auto;
  padding-bottom:0;
}
.cut-field.readonly b{
  color:var(--gold-2);
  font-size:13px;
  text-align:right;
}
.cut-wheel{
  position:relative;
  width:100%;
}
.cut-field .cut-wheel{ grid-column:1 / -1; }
.cut-fps-input{
  width:46px; padding:2px 5px; font-size:12px;
  background:var(--bg-1); color:var(--tx); border:1px solid var(--line-2); border-radius:4px;
}
.cut-fps-input:focus{ border-color:var(--gold-line); outline:none; }

.cut-wheel-dial {
  position: relative;
  height: 36px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-2) !important;
  border-radius: 6px;
  background-color: #0d0b08 !important;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 19px, rgba(227, 181, 99, 0.1) 19px 20px),
    repeating-linear-gradient(90deg, transparent 0 99px, rgba(227, 181, 99, 0.45) 99px 100px) !important;
  background-position-x: var(--wheel-offset, 0px), var(--wheel-offset, 0px);
  background-repeat: repeat;
  padding: 0;
  cursor: ew-resize;
  overflow: hidden;
  touch-action: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.cut-wheel-dial:hover:not(:disabled) {
  border-color: var(--gold) !important;
  box-shadow: 0 0 12px -3px var(--gold-line), inset 0 0 4px rgba(0,0,0,0.5) !important;
}

.cut-wheel-dial:active:not(:disabled) {
  border-color: var(--gold) !important;
  box-shadow: 0 0 16px -2px rgba(227, 181, 99, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.8) !important;
}

.cut-wheel-dial::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #0d0b08 0%, rgba(13, 11, 8, 0.4) 15%, transparent 35%, transparent 65%, rgba(13, 11, 8, 0.4) 85%, #0d0b08 100%) !important;
  z-index: 2;
}

.cut-wheel-center {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  z-index: 3;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(227, 181, 99, 0.6) !important;
  transition: box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.cut-wheel-dial:hover:not(:disabled) .cut-wheel-center {
  background-color: var(--gold-2) !important;
  box-shadow: 0 0 12px 2px var(--gold) !important;
}

.cut-wheel-dial:active:not(:disabled) .cut-wheel-center {
  background-color: #fff !important;
  box-shadow: 0 0 16px 3px var(--gold) !important;
}
.cut-wheel-val{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  pointer-events:none;
  color:var(--tx);
  font-size:11px;
  text-align:right;
}
.cut-wheel.disabled{ opacity:.42; }
.cut-wheel.disabled .cut-wheel-dial{ cursor:not-allowed; }
.cut-audio-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  color:var(--tx-2);
  font-size:12px;
}
/* Hide-shot toggle row in the inspector. */
.cut-hide-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border:1px solid var(--line-2);
  border-radius:var(--r-2);
  background:var(--bg-2);
  color:var(--tx-2);
}
.cut-hide-row > svg{ color:var(--tx-3); flex:none; }
.cut-hide-row > span{
  flex:1;
  display:flex;
  flex-direction:column;
  font-size:12.5px;
  color:var(--tx);
}
.cut-hide-row small{
  margin-top:2px;
  color:var(--tx-4);
  font-size:10.5px;
}
.cut-hide-row.on{
  border-color:var(--gold-line);
  background:linear-gradient(180deg, rgba(227,181,99,.08), transparent);
}
.cut-hide-row.on > svg{ color:var(--gold); }
.cut-switch{
  width:39px;
  height:21px;
  padding:2px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--bg-3);
}
.cut-switch span{
  display:block;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--tx-2);
  transition:transform .14s, background .14s;
}
.cut-switch.on{
  border-color:var(--gold-line);
  background:var(--gold);
}
.cut-switch.on span{
  transform:translateX(16px);
  background:#fff4ce;
}
.cut-volume-row{
  display:grid;
  grid-template-columns:30px minmax(0, 1fr) 34px;
  align-items:center;
  gap:10px;
}
.cut-volume-row svg{ color:var(--tx-3); }
.cut-volume-row input{ accent-color:var(--gold); }
.cut-volume-row b{
  color:var(--gold-2);
  font-size:12px;
  text-align:right;
}
.cut-insp-foot{
  flex:none;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 16px;
  border-top:1px solid var(--line);
  background:#0d0a06;
}
.cut-save-state{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--tx-3);
  font-family:var(--mono);
  font-size:11px;
}
.cut-save-state span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ok);
}
.cut-save-state.dirty span{ background:var(--gold); }
.cut-insp-foot button{
  border:0;
  background:transparent;
  color:var(--tx-3);
  font-size:11px;
}
.cut-insp-foot button:hover{ color:var(--tx); }
.cut-error{
  padding:8px 16px;
  color:var(--err);
  font-size:12px;
  border-top:1px solid var(--line);
  background:color-mix(in oklab, var(--err) 9%, transparent);
}
.cut-timeline{
  width:100%;
  min-width:0;
  height:213px;
  flex:none;
  overflow:hidden;
  border-top:1px solid rgba(0,0,0,.65);
  background:#0a0805;
}
.cut-tl-bar{
  height:39px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 16px;
  border-bottom:1px solid var(--line);
  color:var(--tx-3);
  font-size:11px;
}
.cut-tl-title{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  white-space:nowrap;
}
.cut-tl-title span{
  padding:2px 8px;
  border:1px solid var(--gold-line);
  border-radius:4px;
  color:var(--gold-2);
  font-family:var(--mono);
  font-weight:800;
}
.cut-tl-legend{
  display:flex;
  align-items:center;
  gap:16px;
  white-space:nowrap;
}
.cut-tl-legend span{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:10px;
}
.cut-tl-legend i{
  width:8px;
  height:8px;
  border-radius:2px;
  background:var(--tx-3);
}
.cut-tl-legend .selected i{ background:var(--m-pick); }
.cut-tl-legend .latest i{ background:var(--m-ref); }
.cut-tl-legend .source i{ background:var(--tx-3); }
.cut-tl-scroll{
  max-width:100%;
  min-width:0;
  height:174px;
  overflow:auto hidden;
}
.cut-tl-inner{
  position:relative;
  height:174px;
}
.cut-ruler{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:31px;
  border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(227,181,99,.04), transparent 60%);
  cursor:ew-resize;
  z-index:5;
  touch-action:none;
}
.cut-ruler:hover{ background:linear-gradient(180deg, rgba(227,181,99,.09), transparent 60%); }
/* Playhead knob riding the ruler — the grab target for scrubbing the sequence. */
.cut-ruler-head{
  position:absolute;
  top:0;
  left:0;
  width:11px;
  height:11px;
  margin-left:-5px;
  border-radius:50%;
  background:var(--gold-2);
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 6px rgba(227,181,99,.5);
  pointer-events:none;
  will-change:transform;
}
.cut-tick{
  position:absolute;
  top:18px;
  bottom:0;
  width:1px;
  background:var(--line-2);
}
.cut-tick span{
  position:absolute;
  top:-12px;
  left:4px;
  color:var(--tx-3);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.02em;
}
.cut-track{
  position:absolute;
  left:0;
  right:0;
  top:31px;
  height:143px;
}
/* Faint time grid dropped behind the clips so the track reads as a time axis. */
.cut-grid{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.cut-grid i{
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:var(--line);
}
/* Elapsed-time wash from the start of the sequence to the playhead. */
.cut-tl-progress{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(227,181,99,.05), rgba(227,181,99,.1));
  border-right:1px solid rgba(227,181,99,.18);
}
.cut-track-clip{
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  z-index:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:0;
  border:1px solid var(--line-2);
  border-left-width:3px;
  border-radius:5px;
  overflow:hidden;
  background:var(--bg-2);
  color:var(--tx);
  text-align:left;
  opacity:.74;
  transition:opacity .12s ease;
}
.cut-track-clip.selected{ border-left-color:var(--m-pick); }
.cut-track-clip.latest{ border-left-color:var(--m-ref); }
.cut-track-clip.source{ border-left-color:var(--tx-3); }
.cut-track-clip.active{
  z-index:2;
  opacity:1;
  border-color:var(--gold);
  border-left-color:var(--gold);
  box-shadow:0 0 0 1px rgba(227,181,99,.2) inset, 0 0 12px -4px var(--gold-line), 0 6px 18px rgba(0,0,0,.45);
}
.cut-track-clip:hover{
  opacity:1;
  border-color:var(--gold-line);
}
/* Hidden clip: stays in the track but reads as skipped — desaturated, dashed,
   striped, with a corner badge. Still selectable so it can be un-hidden. */
.cut-track-clip.hidden-clip{
  opacity:.4;
  border-style:dashed;
  border-left-color:var(--tx-4);
  background-image:repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.28) 6px 12px);
}
.cut-track-clip.hidden-clip.active{ opacity:.72; }
.cut-track-clip.hidden-clip:hover{ opacity:.66; }
.cut-track-clip.hidden-clip .cut-clip-thumb img{ filter:grayscale(1); opacity:.32; }
.cut-clip-skip{
  position:absolute;
  top:5px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  align-items:center;
  gap:3px;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(8,7,5,.82);
  color:var(--tx-2);
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  pointer-events:none;
}
.cut-clip-edge{
  position:absolute;
  top:0;
  bottom:0;
  z-index:4;
  width:10px;
  cursor:ew-resize;
  background:transparent;
}
.cut-clip-edge.left{
  left:0;
}
.cut-clip-edge.right{
  right:0;
}
.cut-clip-edge::after{
  content:"";
  position:absolute;
  top:8px;
  bottom:8px;
  width:2px;
  border-radius:2px;
  background:transparent;
}
.cut-clip-edge.left::after{
  left:2px;
}
.cut-clip-edge.right::after{
  right:2px;
}
.cut-track-clip:hover .cut-clip-edge::after,
.cut-track-clip.active .cut-clip-edge::after{
  background:var(--gold);
}
.cut-clip-thumb{
  position:relative;
  flex:1;
  min-height:0;
  display:grid;
  place-items:center;
  background:#11161a;
  overflow:hidden;
}
.cut-clip-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.58;
}
.cut-track-clip.active .cut-clip-thumb img{ opacity:.92; }
.cut-track-clip:hover .cut-clip-thumb img{ opacity:.85; }
.cut-track-clip.source .cut-clip-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px);
}
.cut-clip-thumb > span{
  position:relative;
  z-index:1;
  color:var(--tx-3);
  font-size:12px;
  font-weight:800;
}
.cut-clip-thumb i{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px rgba(227,181,99,.42);
}
.cut-clip-foot{
  height:21px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 6px;
  background:rgba(0,0,0,.48);
}
.cut-clip-foot b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--tx);
  font-size:10px;
}
.cut-clip-foot span{
  flex:none;
  color:var(--tx-3);
  font-size:10px;
}
.cut-playhead {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 4;
  background: var(--gold-2) !important;
  box-shadow: 0 0 6px var(--gold-line), 0 0 12px var(--gold-line) !important;
  pointer-events: none;
  will-change: transform;
}
.cut-playhead span {
  position: absolute;
  top: -7px;
  left: -5px;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background: var(--gold-2) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 8px var(--gold) !important;
}
.cut-empty{
  flex:1;
  display:grid;
  place-items:center;
  gap:10px;
  color:var(--tx-3);
}

@media (max-width: 980px){
  .cut-appbar{ gap:10px; }
  .cut-project,
  .cut-seqstat{ display:none; }
  .cut-stage{ flex-direction:column; overflow:auto; }
  .cut-viewer{ min-height:420px; }
  .cut-inspector{
    width:auto;
    max-height:380px;
    border-left:0;
    border-top:1px solid var(--line);
  }
  .cut-field{
    grid-template-columns:1fr 80px;
  }
  .cut-field .cut-wheel{ grid-column:1 / -1; }
  .cut-timeline{ height:190px; }
  .cut-tl-scroll,
  .cut-tl-inner{ height:151px; }
  .cut-track{ height:120px; }
}

/* ===== cut: silky preview additions ===== */

/* monitor hover nav — invisible at rest, fade in on hover */
.cut-mon-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:42px;
  height:64px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:8px;
  background:rgba(8,7,5,.45);
  color:var(--tx-2);
  opacity:0;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.cut-mon-nav.prev{ left:10px; }
.cut-mon-nav.next{ right:10px; }
.cut-monitor:hover .cut-mon-nav{ opacity:.85; }
.cut-mon-nav:hover{ opacity:1 !important; color:var(--gold-2); background:rgba(8,7,5,.7); }

/* SEQ readout in the track header */
.cut-seq-read{
  flex:none;
  white-space:nowrap;
  font-size:10.5px;
  color:var(--tx-4);
  letter-spacing:.04em;
}
@media (max-width: 980px){
  .cut-tl-legend{ display:none; }
}

/* drag frame badge above the clip being trimmed */
.cut-drag-badge{
  position:absolute;
  top:-22px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  padding:2px 8px;
  font-size:10.5px;
  font-weight:700;
  color:#0b0a08;
  background:var(--gold);
  border-radius:9px;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  pointer-events:none;
  white-space:nowrap;
}
.cut-track-clip.dragging{
  overflow:visible; /* let the frame badge float above */
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(227,181,99,.25) inset, 0 0 16px -4px var(--gold-line);
}

/* edge handles glow on hover/drag */
.cut-clip-edge:hover::after,
.cut-track-clip.dragging .cut-clip-edge::after{
  opacity:1;
  background:var(--gold);
  box-shadow:0 0 8px var(--gold-line);
}

/* save dot breathes while a debounced write is pending */
.cut-save-state.dirty span{
  animation:sg-pulse 1.2s ease-in-out infinite;
  color:var(--gold);
}

/* ============================================================
   Cinematic Redesign Upgrades
   ============================================================ */

/* 取景器角标 (Crop Marks) */
.viewfinder-corners, .viewfinder-corners-bottom {
  position: absolute;
  inset: 8px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.viewfinder-corners::before,
.viewfinder-corners::after,
.viewfinder-corners-bottom::before,
.viewfinder-corners-bottom::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(227, 181, 99, 0.45);
  border-style: solid;
}
.viewfinder-corners::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.viewfinder-corners::after { top: 0; right: 0; border-width: 1px 1px 0 0; }
.viewfinder-corners-bottom::before { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.viewfinder-corners-bottom::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* 悬停时显示取景角标 */
article:hover .viewfinder-corners,
article:hover .viewfinder-corners-bottom,
.cut-shot-card:hover .viewfinder-corners,
.cut-shot-card:hover .viewfinder-corners-bottom {
  opacity: 1;
}

/* 拟真胶片暗房曝光/显影动效 (Film Developing/Exposure) */
.film-developing-mask {
  position: absolute;
  inset: 0;
  background-color: rgba(227, 87, 56, 0.25); /* 拟真暖色胶片暗房红光 */
  mix-blend-mode: screen; /* 在暗色卡片上更加通透 */
  pointer-events: none;
  z-index: 4;
  animation: film-glow 2.5s ease-in-out infinite alternate;
}

.developing-laser-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%; /* 占满高度以支持相对于卡片整体的 transform */
  background: transparent;
  pointer-events: none;
  z-index: 5;
}

.developing-laser-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold), #efe7d6, var(--gold), transparent);
  box-shadow: 0 0 6px var(--gold-line), 0 0 12px var(--gold-line);
  will-change: transform;
  animation: laser-scan-gpu 3.5s linear infinite;
}

@keyframes film-glow {
  0% { opacity: 0.35; }
  100% { opacity: 0.7; }
}

@keyframes laser-scan-gpu {
  0% { transform: translateY(0); }
  50% { transform: translateY(calc(100% - 1.5px)); }
  100% { transform: translateY(0); }
}

/* 快门渐变按钮 (Shutter style CTA button) */
.shutter-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)) !important;
  color: #1a1206 !important;
  border: 1px solid var(--gold-line) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 8px -2px rgba(227, 181, 99, 0.4) !important;
}
.shutter-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: skewX(-20deg);
  transition: .75s;
}
.shutter-btn:hover::after {
  left: 120%;
}
.shutter-btn:active {
  transform: translateY(1px);
}

/* 提示词打字机光标效果 */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background-color: var(--gold);
  margin-left: 2px;
  animation: cursor-blink .8s steps(2) infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* 版本缩略图卡片升级 (VersionThumb Glow) */
.version-thumb-card {
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease) !important;
}
.version-thumb-card.active {
  border-color: var(--gold) !important;
  background: color-mix(in oklab, var(--gold) 9%, var(--bg-2)) !important;
  box-shadow: 0 0 16px -4px rgba(227, 181, 99, 0.45), inset 0 0 0 1px var(--gold-soft) !important;
}

/* 升级镜头卡片 (ShotCard Upgrade) */
.shot-card-upgrade {
  border: 1px solid var(--line-2) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.18s ease, 
              box-shadow 0.18s ease, 
              opacity 0.18s ease !important;
}
.shot-card-upgrade.empty {
  border-color: var(--line) !important;
}
.shot-card-upgrade:hover {
  transform: translateY(-4px) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 8px 24px -10px rgba(227, 181, 99, 0.38), var(--shadow) !important;
}
.shot-card-upgrade.empty:hover {
  opacity: 0.9 !important;
}
.shot-card-upgrade.selected {
  border-color: var(--gold) !important;
  animation: gold-glow-pulse 3s infinite ease-in-out !important;
}

@keyframes gold-glow-pulse {
  0% {
    box-shadow: 0 0 0 1px var(--gold), 
                0 0 16px -3px var(--gold-line), 
                0 12px 30px -12px rgba(0,0,0,.75) !important;
  }
  50% {
    box-shadow: 0 0 0 1px var(--gold), 
                0 0 26px 0px var(--gold), 
                0 12px 30px -12px rgba(0,0,0,.75) !important;
  }
  100% {
    box-shadow: 0 0 0 1px var(--gold), 
                0 0 16px -3px var(--gold-line), 
                0 12px 30px -12px rgba(0,0,0,.75) !important;
  }
}

/* 侧边栏视图过滤选项 */
.rail-btn {
  position: relative;
  background: transparent !important;
  border: none !important;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease) !important;
}
.rail-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 3px;
  background-color: var(--gold);
  border-radius: 2px;
  opacity: 0;
  transform: scaleY(0.3);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.rail-btn.active::before {
  opacity: 1;
  transform: scaleY(1);
}
.rail-btn.active {
  background-color: var(--gold-soft) !important;
  color: var(--gold-2) !important;
}
.rail-btn:not(.active):hover {
  background-color: var(--bg-2) !important;
  color: var(--tx) !important;
}

/* 序列选项升级 */
.rail-seq-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease) !important;
}
.rail-seq-btn.active {
  border-color: var(--gold-line) !important;
  background-color: var(--bg-2) !important;
  box-shadow: 0 4px 12px -4px rgba(227, 181, 99, 0.12) !important;
}
.rail-seq-btn:not(.active):hover {
  background-color: var(--bg-2) !important;
}

/* 拖拽金色呼吸闪动动画 */
@keyframes outline-pulse {
  0% { outline-color: rgba(227, 181, 99, 0.35); }
  50% { outline-color: rgba(227, 181, 99, 0.95); }
  100% { outline-color: rgba(227, 181, 99, 0.35); }
}
.grid-drag-active {
  outline: 2px dashed var(--gold-line) !important;
  outline-offset: 8px;
  animation: outline-pulse 1.4s infinite ease-in-out;
}

/* ============================================================
   Timeline Ruler & Playhead Aesthetic (方案二升级版)
   ============================================================ */

/* 刻度尺容器 */
.ruler-container {
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
  transition: opacity 0.2s ease;
}
.ruler-container.top { top: 0; }
.ruler-container.bottom { bottom: 0; }

/* 刻度线 */
.ruler-ticks-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px; /* 两端缩进以防止刻度与两端时间码重叠 */
  right: 8px;
  background-image: repeating-linear-gradient(
    90deg, 
    var(--tx-4) 0px, 
    var(--tx-4) 1px, 
    transparent 1px, 
    transparent 6px
  );
  /* 移除 background-size，保证亚像素平铺在任何宽度下绝对均匀 */
  opacity: 0.25;
  transition: opacity 0.2s ease;
}
.ruler-container.top .ruler-ticks-bg {
  mask-image: linear-gradient(0deg, transparent 30%, black 100%);
  -webkit-mask-image: linear-gradient(0deg, transparent 30%, black 100%);
}
.ruler-container.bottom .ruler-ticks-bg {
  mask-image: linear-gradient(180deg, transparent 30%, black 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, black 100%);
}

/* 动态播放针 (Playhead Indicator) */
.ruler-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px; /* 微调宽度以防止亚像素虚化 */
  background-color: var(--gold);
  box-shadow: 0 0 6px var(--gold-line), 0 0 10px var(--gold);
  z-index: 5;
  will-change: left;
  transform: translate3d(-50%, 0, 0); /* 强制 GPU 硬件加速并精准像素定位 */
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ruler-playhead::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: var(--gold);
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 4px var(--gold);
}
.ruler-container.top .ruler-playhead::before { top: 0; }
.ruler-container.bottom .ruler-playhead::before { bottom: 0; }

.ruler-container.active .ruler-playhead {
  opacity: 1;
}

/* 时间码标签 */
.ruler-timecode {
  position: absolute;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--tx-2);
  background: rgba(11, 10, 8, 0.75);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1px 4px;
  border-radius: 3px;
  z-index: 6;
  opacity: 0.65;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.ruler-container.top .ruler-timecode { top: 6px; }
.ruler-container.bottom .ruler-timecode { bottom: 6px; }

.ruler-timecode.left { left: 8px; }
.ruler-timecode.right { right: 8px; }

.ruler-container.active .ruler-timecode {
  opacity: 0.95;
  color: var(--gold-2);
}

/* 首页项目大卡片的刻度指示 */
.project-ruler-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--line-2);
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.project-ruler-dot.active {
  background-color: var(--gold);
  box-shadow: 0 0 6px var(--gold);
}
.project-ruler-dot.pending {
  background-color: var(--tx-4);
  box-shadow: none;
}

/* ===== 项目列表首页：微交互 + 美学（伪类需 CSS，不能用 inline）===== */

/* 胶片卡片容器：统一过渡，加入 will-change */
.pl-pressable {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* 仅在非高亮激活时应用 hover 状态，避免与当前激活状态的 gold 边框冲突 */
.pl-pressable:not(.active):hover {
  border-color: var(--gold-line) !important;
  box-shadow: 0 0 0 1px var(--gold-line) inset, 0 4px 12px rgba(0,0,0,.5) !important;
}

/* 按压物理反馈：按下和弹回共享平滑过渡 */
.pl-pressable:active {
  transform: scale(0.975);
  transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1); /* 按下时稍微快一点以显灵敏 */
}

/* 卡片首帧大图的 hover 联动：纯 CSS，仅作用首帧（不影响缩略图小图）*/
.pl-hero-img {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.pl-pressable:hover .pl-hero-img {
  transform: scale(1.03);
}

/* 卡片 hover 直出操作按钮（✎/🗑）—— 重新设计为高质感工业级后期工具风格 */
.pl-actions {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 6;
  opacity: 0; pointer-events: none;
  transform: translateY(-2px);
  transition: opacity .2s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform .2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pl-pressable:hover .pl-actions,
.pl-actions:focus-within { opacity: 1; pointer-events: auto; transform: translateY(0); }
.pl-act {
  width: 26px; height: 26px; border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 23, 18, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.04); color: var(--tx-3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background .15s cubic-bezier(0.2, 0.8, 0.2, 1),
              color .15s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color .15s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform .1s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow .15s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pl-act:hover {
  background: var(--bg-3); border-color: var(--gold-line); color: var(--gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pl-act:active {
  transform: scale(0.92); background: var(--bg-0); border-color: rgba(227, 181, 99, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.pl-act.pl-act-danger {
  color: rgba(255, 138, 122, 0.65); border-color: rgba(255, 138, 122, 0.1);
}
.pl-act.pl-act-danger:hover {
  background: rgba(255, 138, 122, 0.08); border-color: rgba(255, 138, 122, 0.35); color: #ff9c90;
  box-shadow: 0 4px 12px rgba(255, 138, 122, 0.05), 0 4px 12px rgba(0, 0, 0, 0.45);
}
.pl-act.pl-act-danger:active {
  transform: scale(0.92); background: rgba(255, 138, 122, 0.16); border-color: rgba(255, 138, 122, 0.55); color: #ff8a7a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* 新建项目按钮 hover 纯 CSS 驱动 */
.pl-btn {
  transition: background 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
              color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform;
}
.pl-btn:hover:not(:disabled) {
  background: var(--gold) !important;
  color: #121009 !important;
}
.pl-btn:active:not(:disabled) {
  transform: scale(0.96);
}

/* 实体按钮 disabled：去色 + 降透明，熄灭非激活态（修"submitting 仍鲜亮"bug）*/
.pl-btn:disabled,
.pl-btn[disabled] { filter: grayscale(100%) opacity(.45); cursor: not-allowed !important; transform: none; }

/* 输入框底线化：去四边框，仅留底线，focus 高亮金线 */
.pl-input {
  border: none !important;
  border-bottom: 1px solid rgba(232,210,160,.10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: border-color .18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pl-input:focus { outline: none; border-bottom-color: var(--gold-line) !important; }
.pl-input::placeholder { color: var(--tx-4); }

/* 取景框 crop marks（空项目占位的四角 L 标）*/
.pl-viewfinder-mark {
  position: absolute;
  width: 10px; height: 10px;
  border-color: rgba(232,210,160,.18);
  border-style: solid;
  pointer-events: none;
}
.pl-viewfinder-mark.tl { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.pl-viewfinder-mark.tr { top: 10px; right: 10px; border-width: 1px 1px 0 0; }
.pl-viewfinder-mark.bl { bottom: 10px; left: 10px; border-width: 0 0 1px 1px; }
.pl-viewfinder-mark.br { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }

/* 胶片齿孔：缩略图轨道上下边界虚线 */
.pl-filmstrip {
  border-top: 1px dashed rgba(232,210,160,.12);
  border-bottom: 1px dashed rgba(232,210,160,.12);
}

@media (max-width: 720px) {
  html,
  body,
  #root,
  .app {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .workbench-main-layout {
    flex-direction: column !important;
    min-width: 0 !important;
    overflow: auto !important;
  }

  .workbench-rail {
    width: 100% !important;
    max-height: 164px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
  }

  .workbench-detail-layout {
    flex: none !important;
    flex-direction: column !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .workbench-review-pane {
    flex: none !important;
    min-width: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
  }

  .workbench-builder-pane {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    border-left: 0 !important;
    box-shadow: inset 0 1px 0 var(--gold-line) !important;
  }

  .review-workflow-grid {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .review-main-stack {
    order: 1;
    width: 100%;
    max-width: 100%;
  }

  .review-side-stack {
    order: 2;
    width: 100%;
    max-width: 100%;
  }
}

/* ============================================================
   Reference Kit 宽幅工作台 - 还原 shot 项目的排版与功能设计（保留暖金香格里拉风格）
   ============================================================ */
.reference-kit-workbench {
  /* 仅做过渡和局部优化，不覆盖全局配色 */
}

/* 资产卡片增强 */
.reference-kit-workbench .asset-card {
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.reference-kit-workbench .asset-card:hover {
  border-color: var(--gold-line) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(227, 181, 99, 0.15) !important;
}

/* 契约插槽卡片增强 */
.reference-kit-workbench .slot-card {
  background-color: var(--bg-0) !important;
  border-color: var(--line-2) !important;
  transition: all 0.2s ease !important;
}
.reference-kit-workbench .slot-card.filled {
  border-style: solid !important;
  background-color: var(--bg-1) !important;
  border-color: var(--line-strong) !important;
}
.reference-kit-workbench .slot-card.drag-over {
  border-color: var(--gold) !important;
  background-color: var(--gold-soft) !important;
  box-shadow: 0 0 8px rgba(227, 181, 99, 0.25) !important;
}
.reference-kit-workbench .slot-card:hover {
  border-color: var(--gold-line) !important;
  box-shadow: inset 0 0 8px rgba(227, 181, 99, 0.08) !important;
}
.reference-kit-workbench .slot-card:hover .slot-placeholder-inner {
  background: repeating-linear-gradient(135deg, rgba(30, 25, 16, 0.08), rgba(30, 25, 16, 0.08) 10px, rgba(11, 9, 7, 0.12) 10px, rgba(11, 9, 7, 0.12) 20px) !important;
}

/* 视觉中心：未Hover时SVG放大呈现，居中且带有精细发光 */
.reference-kit-workbench .slot-svg-container {
  transform: translateY(18px) scale(1.35) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s, opacity 0.3s !important;
  color: var(--gold-2) !important;
  opacity: 0.75 !important;
  filter: drop-shadow(0 0 6px rgba(227, 181, 99, 0.15)) !important;
}
.reference-kit-workbench .slot-svg-container svg {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover时：整个SVG微缩并回弹归位，展现较强发光，释放空间给提示文字 */
.reference-kit-workbench .slot-card:hover .slot-svg-container {
  transform: translateY(0) scale(1.0) !important;
  opacity: 0.95 !important;
}
.reference-kit-workbench .slot-card:hover .slot-svg-container svg {
  filter: drop-shadow(0 0 10px rgba(227, 181, 99, 0.45)) !important;
}

/* 提示字样式：未Hover时完全隐藏，不干扰视线 */
.reference-kit-workbench .slot-upload-hint {
  opacity: 0 !important;
  transform: translateY(15px) !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  pointer-events: none;
}

/* Hover时：提示字平滑上浮淡入 */
.reference-kit-workbench .slot-card:hover .slot-upload-hint {
  opacity: 0.8 !important;
  transform: translateY(0) !important;
  color: var(--gold) !important;
  pointer-events: auto;
}

/* 弱化中间的说明文字：未Hover时完全隐藏，实现纯净SVG视觉中心 */
.reference-kit-workbench .slot-text-info {
  opacity: 0 !important;
  transform: translateY(15px) scale(0.9) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none;
}
.reference-kit-workbench .slot-card:hover .slot-text-info {
  opacity: 0.9 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto;
}

/* 未绑定卡片的外部文字默认弱化 */
.reference-kit-workbench .slot-card:not(.filled) > div:last-child {
  opacity: 0.3 !important;
  transition: opacity 0.25s ease !important;
}
.reference-kit-workbench .slot-card:not(.filled):hover > div:last-child {
  opacity: 0.85 !important;
}

/* ===== 资产库物理分格舱 EmptyAssetSlot 视觉呼吸设计 ===== */
.empty-asset-slot-inner {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* 未Hover时：图标略微放大，垂直微向下偏移以在容器内更显眼居中，隐藏提示文字 */
.empty-slot-svg-container {
  transform: translateY(10px) scale(1.35) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s, color 0.25s !important;
  color: var(--tx-4) !important;
  opacity: 0.5 !important;
}
.empty-slot-upload-hint {
  opacity: 0 !important;
  transform: translateY(10px) scale(0.9) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  color: var(--tx-3) !important;
  pointer-events: none;
}
.empty-slot-footer {
  opacity: 0.3 !important;
  transition: all 0.25s ease !important;
}

/* Hover时：图标回位，文字淡入，发光并凸显金色调 */
.empty-asset-slot-inner:hover .empty-slot-svg-container {
  transform: translateY(-4px) scale(1.0) !important;
  color: var(--gold) !important;
  opacity: 0.95 !important;
  filter: drop-shadow(0 0 6px rgba(227, 181, 99, 0.35)) !important;
}
.empty-asset-slot-inner:hover .empty-slot-upload-hint {
  opacity: 0.8 !important;
  transform: translateY(-2px) scale(1) !important;
  color: var(--gold-2) !important;
  pointer-events: auto;
}
.empty-asset-slot-inner:parent:hover .empty-slot-footer,
div[onClick]:hover .empty-slot-footer {
  opacity: 0.85 !important;
  color: var(--gold-2) !important;
}
/* 若父级卡片Hover，footer亮起 */
div[onClick]:hover .empty-slot-footer .mono {
  color: var(--gold-2) !important;
}
.reference-kit-workbench .slot-menu-item:hover {
  background-color: rgba(227, 181, 99, 0.12) !important;
  color: var(--gold) !important;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 3px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 2px;
}

/* ===== Reference Kit 资产识别系统（4 机制：影调/kind色点/分类tab/Board分块）===== */

/* kind 身份色（图金/视绿/音蓝）—— 区分文件类型的第一信号，色相环三等分最分明 */
:root{
  --ty-img:#e3b563; --ty-vid:#6fb87a; --ty-aud:#6fa6cb;
}

/* 机制①缩略图影调：按角色域用不同电影感渐变（无真实图时的占位 + 视觉分组）*/
.film{
  --key:rgba(227,181,99,.18); --base1:#1e1910; --base2:#0b0907;
  background:
    linear-gradient(176deg, rgba(255,250,235,.055), transparent 28%),
    radial-gradient(115% 86% at 34% 18%, var(--key), transparent 56%),
    radial-gradient(140% 82% at 50% 130%, rgba(0,0,0,.62), transparent 50%),
    linear-gradient(162deg, var(--base1), var(--base2));
}
.film.warm{ --key:rgba(226,104,76,.18); --base1:#29130d; --base2:#0d0706; }
.film.cool{ --key:rgba(122,166,194,.18); --base1:#151a1e; --base2:#090b0d; }
.film.dim{ --key:rgba(232,210,160,.10); --base1:#17140e; --base2:#0a0906; }
.film.teal{ --key:rgba(79,166,160,.18); --base1:#101c1c; --base2:#070b0b; }

/* 机制②kind 角标色点：缩略图左上角，色点颜色由 --tk 决定（按 kind 注入）*/
.rk-kind{ position:absolute; top:7px; left:8px; z-index:2; display:flex; align-items:center; gap:5px;
  font-size:9.5px; font-weight:700; color:rgba(241,234,217,.95); letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.8); }
.rk-kind::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--tk, var(--ty-img));
  box-shadow:0 0 6px var(--tk, var(--ty-img)); }

/* 绑定编号徽章（右上角，金色 mono）*/
.rk-bindno{ position:absolute; top:5px; right:7px; z-index:2; font-family:ui-monospace,monospace;
  font-size:9px; font-weight:700; color:var(--gold-2); background:rgba(11,10,8,.7);
  padding:1px 5px; border-radius:3px; backdrop-filter:blur(4px); }

/* 机制④Board 按 kind 分块：底色 + 左侧色条（用 --ty 统一，三区块色相明显区分）*/
/* 区块容器：扁平化，对齐视/音面板的轻底色+底线语言（去掉外框/左色条/抬升）*/
.rk-block{ position:relative; padding:14px 16px; margin-bottom:0;
  border-radius:0; background:transparent; border:none; min-width:0; }
.rk-block-head{ display:flex; align-items:center; gap:10px; padding:0 0 12px;
  border-bottom:1px solid color-mix(in oklab, var(--ty) 16%, transparent);
  flex-wrap:nowrap; white-space:nowrap; }
.rk-block-head .rk-bi{ color:var(--ty); flex:0 0 auto; filter:drop-shadow(0 0 4px color-mix(in oklab,var(--ty) 50%,transparent)); }
.rk-block-head .rk-bn{ font-size:13px; color:var(--tx); font-weight:700; flex:0 0 auto; }
.rk-block-head .rk-bc{ font-family:ui-monospace,monospace; font-size:11px; color:var(--tx-3); flex:0 0 auto; }
.rk-block-head .rk-bc b{ color:var(--ty); font-weight:700; }
.rk-block-head .rk-bhint{ margin-left:auto; font-size:10px; color:var(--tx-4);
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* 机制③分类标签栏（两级 tab）*/
.rk-cats{ display:flex; flex-wrap:wrap; gap:3px 0; padding:0 2px 12px; }
.rk-cat{ font-size:11.5px; color:var(--tx-3); padding:4px 0; margin-right:15px;
  border-bottom:1.5px solid transparent; cursor:pointer; background:none; border-left:none; border-right:none; border-top:none; }
.rk-cat:hover{ color:var(--tx-2); }
.rk-cat.active{ color:var(--gold-2); border-bottom-color:var(--gold); }

/* 控制台/通用区块：色身份 + 浅底（复用 Board 分块的视觉语言，更紧凑的纵向叠放版）*/
.rk-panel{ position:relative; border-radius:8px; padding:10px 12px 11px;
  background:color-mix(in oklab, var(--rkc, var(--gold)) 7%, var(--bg-1));
  border:1px solid color-mix(in oklab, var(--rkc, var(--gold)) 18%, transparent); }
.rk-panel-head{ display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.rk-panel-head .rk-pic{ color:var(--rkc, var(--gold)); flex:0 0 auto; }
.rk-panel-head .rk-pnm{ font-size:11.5px; font-weight:600; color:var(--tx); }
.rk-panel-head .rk-pmeta{ margin-left:auto; font-family:ui-monospace,monospace; font-size:9.5px; color:var(--tx-4); }

/* 控制台区块色身份（按功能域分色，复用 mockup 的暖金/冷青/珊瑚/蓝）*/
.rk-panel.c-info{ --rkc:var(--gold); }       /* 指引/提示 */
.rk-panel.c-warn{ --rkc:#d49a55; }            /* 警告/限制 */
.rk-panel.c-action{ --rkc:var(--ty-vid); }    /* 动作/运镜/提交 */
.rk-panel.c-scene{ --rkc:#5cb5a6; }           /* 场景/主体（冷青，与 c-ok 区分）*/
.rk-panel.c-audio{ --rkc:var(--ty-aud); }     /* 音频 */
.rk-panel.c-ok{ --rkc:#74c79a; }              /* 通过/就绪（柔绿，状态色）*/
.rk-subcats{ display:flex; flex-wrap:wrap; gap:6px; padding:0 2px 12px; }
.rk-subcat{ font-size:10.5px; color:var(--tx-3); padding:3px 9px; border-radius:99px;
  cursor:pointer; background:none; border:1px solid var(--line-2); }
.rk-subcat:hover{ color:var(--tx-2); border-color:var(--line-strong); }
.rk-subcat.active{ color:var(--gold-2); border-color:var(--gold-line); background:var(--gold-soft); }

/* 顶部区块切换条按钮（图片常驻 · 视频/音频独立 toggle）*/
.rk-zone-btn{ display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 12px;
  border-radius:var(--r-2); font-size:11.5px; font-weight:600; cursor:pointer; color:var(--tx-3);
  background:color-mix(in oklab, var(--ty) calc(8% * var(--on)), var(--bg-1));
  border:1px solid color-mix(in oklab, var(--ty) calc(20% + 35% * var(--on)), transparent);
  transition:all .15s ease; position:relative; }
.rk-zone-btn:not(:disabled):hover{ background:color-mix(in oklab, var(--ty) 14%, var(--bg-1)); color:var(--tx); }
.rk-zone-btn[style*="--on: 1"], .rk-zone-btn[style*="--on:1"]{ color:var(--tx); }
.rk-zone-btn:disabled{ cursor:default; opacity:1; color:var(--tx); }
.rk-zone-btn b{ color:var(--ty); font-family:ui-monospace,monospace; font-weight:700; margin-left:2px; }
.rk-zone-btn .rk-zone-pin{ position:absolute; top:-3px; right:-3px; font-size:9px; color:var(--ty);
  text-shadow:0 0 4px color-mix(in oklab,var(--ty) 60%,transparent); }

/* 视/音侧栏面板（双层解耦：外层 wrapper 控宽度联动，内层 content 固宽防变形）*/
.rk-drawer-wrapper{ width:0; flex-shrink:0; overflow:hidden; background:var(--bg-1);
  border-left:0 solid transparent;
  transition:width .35s cubic-bezier(0.16,1,0.3,1), border-color .35s ease; }
.rk-drawer-wrapper.open{ width:280px; border-left:1px solid var(--line-2); }
.rk-drawer-content{ width:280px; height:100%; display:flex; flex-direction:column; box-sizing:border-box;
  opacity:0; transform:translateX(10px);
  transition:opacity .25s ease, transform .3s cubic-bezier(0.16,1,0.3,1); }
.rk-drawer-wrapper.open .rk-drawer-content{ opacity:1; transform:translateX(0); }
.rk-drawer-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; flex-shrink:0;
  border-bottom:1px solid color-mix(in oklab, var(--ty) 16%, transparent);
  background:color-mix(in oklab, var(--ty) 6%, var(--bg-1));
  flex-wrap:nowrap; white-space:nowrap; min-width:0; }
.rk-drawer-head .rk-pic{ color:var(--ty); flex:0 0 auto; }
.rk-drawer-head .rk-pnm{ font-size:13px; font-weight:700; color:var(--tx); flex:0 0 auto; }
.rk-drawer-head .rk-bc{ font-family:ui-monospace,monospace; font-size:11px; color:var(--tx-3); flex:0 0 auto; }
.rk-drawer-head .rk-bc b{ color:var(--ty); font-weight:700; }
.rk-drawer-head .rk-bhint{ margin-left:auto; font-size:10px; color:var(--tx-4);
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.rk-drawer-close{ margin-left:10px; width:24px; height:24px; border-radius:5px; border:none;
  background:var(--bg-2); color:var(--tx-3); font-size:18px; cursor:pointer; line-height:1; }
.rk-drawer-close:hover{ background:var(--bg-3); color:var(--tx); }

/* 底部候选队列面板排版 */
.reference-kit-workbench-bottom {
  height: 180px;
  background-color: var(--bg-2);
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  flex: none;
}
.reference-kit-workbench-bottom .queue-header {
  padding: 6px 12px;
  border-bottom: 1px solid var(--line-2);
  background-color: var(--bg-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.reference-kit-workbench-bottom .queue-body {
  flex: 1;
  display: flex;
  padding: 8px 12px;
  overflow-x: auto;
  gap: 12px;
  align-items: center;
}

/* 候选版本卡片 */
.reference-kit-workbench-bottom .candidate-card {
  width: 200px;
  flex-shrink: 0;
  background-color: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.reference-kit-workbench-bottom .candidate-card:hover {
  border-color: var(--gold-line);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.7);
}
.reference-kit-workbench-bottom .candidate-card.selected {
  border-color: var(--gold);
  background-color: color-mix(in oklab, var(--gold) 8%, var(--bg-1));
  box-shadow: 0 0 0 1px var(--gold-line) inset, 0 6px 18px -8px rgba(227,181,99,.25);
}
.reference-kit-workbench-bottom .candidate-card.selected .candidate-title {
  color: var(--gold-2);
}
.reference-kit-workbench-bottom .candidate-preview {
  aspect-ratio: 16/9;
  background-color: #000;
  position: relative;
  overflow: hidden;
}
.reference-kit-workbench-bottom .candidate-info {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reference-kit-workbench-bottom .candidate-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-2);
  transition: color 0.15s ease;
}
.reference-kit-workbench-bottom .candidate-meta {
  font-size: 9px;
  color: var(--tx-3);
  display: flex;
  justify-content: space-between;
}
.reference-kit-workbench-bottom .version-compare-checkbox {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 10;
  accent-color: var(--gold);
  cursor: pointer;
}
.reference-kit-workbench-bottom .kit-popover-trigger {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 10;
  width: 20px;
  height: 20px;
  border-radius: var(--r-1);
  border: none;
  background: rgba(0, 0, 0, 0.65);
  color: var(--tx-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s;
}
.reference-kit-workbench-bottom .kit-popover-trigger:hover {
  background: rgba(0, 0, 0, 0.85);
  color: var(--gold);
}

/* A/B 对比弹窗样式 */
.ab-compare-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(11, 10, 8, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.ab-compare-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 10px;
}
.ab-compare-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  min-height: 0;
}

/* 暗示分格系统背景线（金色极低透明度细线格栅底纹） */
.asset-grid-bg {
  background-color: var(--bg-1);
  background-size: 24px 24px;
  background-image: 
    linear-gradient(to right, rgba(227, 181, 99, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(227, 181, 99, 0.015) 1px, transparent 1px);
  position: relative;
}

.ab-compare-pane {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--bg-1);
}
.ab-compare-video-wrapper {
  flex: 1;
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}



/* ============================================================
   Reference Kit 布局重设计 (Batch 1) — teal 色系 + 四区网格
   类前缀 .rk2- 与旧 .rk-* / .reference-kit-workbench 解耦，
   旧规则保留给标准 i2v / 旧插槽卡使用。
   ============================================================ */

:root{
  /* 多参考 teal 色系（teal-2 弱化避免刺眼）*/
  --teal:#4ecdc4; --teal-2:#5a9e9a; --teal-soft:rgba(78,205,196,.14); --teal-line:rgba(78,205,196,.38);
  /* 资产分类底色（四类磨砂）*/
  --cat-char:rgba(217,119,87,.22);
  --cat-prop:rgba(184,173,151,.18);
  --cat-scene:rgba(78,160,205,.22);
  --cat-style:rgba(167,139,200,.22);
  --cat-char-line:rgba(217,119,87,.45);
  --cat-prop-line:rgba(184,173,151,.35);
  --cat-scene-line:rgba(78,160,205,.45);
  --cat-style-line:rgba(167,139,200,.45);
  --cat-char-strong:rgba(217,119,87,.85);
  --cat-prop-strong:rgba(184,173,151,.85);
  --cat-scene-strong:rgba(78,160,205,.85);
  --cat-style-strong:rgba(167,139,200,.85);
}

/* ===== Builder 顶部条（36px，teal 主题，仅 RK 模式）===== */
.rk2-builder-top{ height:36px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; border-bottom:1px solid var(--teal-line); background:var(--bg-2); }
.rk2-builder-top .rk2-shot-code{ font-size:11px; font-weight:700; color:var(--teal-2); }
.rk2-builder-top .rk2-shot-title{ font-size:12px; font-weight:600; color:var(--tx); max-width:140px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rk2-builder-top .rk2-method-label{ font-size:10.5px; color:var(--tx-3); font-weight:600; }
.rk2-seg{ display:flex; gap:2px; padding:2px; border-radius:6px; background:var(--bg-0); border:1px solid var(--line-2); }
.rk2-seg button{ height:22px; padding:0 8px; border:none; border-radius:4px; font-size:10.5px; font-weight:700;
  background:transparent; color:var(--tx-3); cursor:pointer; }
.rk2-seg button.active{ background:var(--teal-soft); color:var(--teal-2); }
.rk2-sel{ height:24px; border-radius:5px; border:1px solid var(--line-2); background:var(--bg-1);
  color:var(--tx-2); font-size:10.5px; padding:0 6px; }

/* ===== 四区主网格 ===== */
.rk2-workspace{ flex:1; display:grid;
  grid-template-columns:20% 1fr 22%;
  grid-template-rows:100%;
  grid-template-areas:"lib center prompt";
  min-height:0; height:100%; overflow:hidden; }
.rk2-col-center{ grid-area:center; display:flex; flex-direction:column;
  min-height:0; overflow:hidden; border-right:1px solid var(--line-2); }

/* 左：资产库 */
.rk2-col-asset{ grid-area:lib; display:flex; flex-direction:column; border-right:1px solid var(--line-2);
  min-height:0; overflow:hidden; background:var(--bg-1); }
.rk2-asset-header{ padding:7px 10px; border-bottom:1px solid var(--line-2); background:var(--bg-2);
  display:flex; align-items:center; justify-content:space-between; }
.rk2-asset-header .rk2-title{ font-size:11.5px; font-weight:700; color:var(--tx-2); }
.rk2-asset-header .rk2-count{ font-size:9.5px; color:var(--tx-4); }
.rk2-asset-gen-btn{ height:20px; padding:0 6px; border-radius:4px; border:1px solid var(--teal-line);
  background:transparent; color:var(--teal-2); font-size:10px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:3px; }
.rk2-asset-gen-btn:hover{ background:var(--teal-soft); }
/* 布局密度切换按钮组（宽幅 / 高密）*/
.rk2-density-toggle{ display:inline-flex; border:1px solid var(--line-2); border-radius:6px; overflow:hidden; height:22px; }
.rk2-density-toggle button{ width:24px; border:none; background:var(--bg-2); color:var(--tx-4);
  cursor:pointer; display:grid; place-items:center; }
.rk2-density-toggle button:hover{ color:var(--tx-2); }
.rk2-density-toggle button.active{ background:var(--teal-soft); color:var(--teal-2); }
.rk2-asset-search{ padding:6px 10px; border-bottom:1px solid var(--line-2); display:flex; gap:6px; }
.rk2-asset-search input{ flex:1; height:24px; border-radius:5px; border:1px solid var(--line-2);
  background:var(--bg-0); color:var(--tx); font-size:10.5px; padding:0 7px; }
.rk2-asset-search button{ height:24px; padding:0 7px; border-radius:5px; border:1px solid var(--line-2);
  background:var(--bg-0); color:var(--tx-3); font-size:10px; font-weight:600; cursor:pointer; }
.rk2-asset-search button.on{ background:var(--teal-soft); color:var(--teal-2); border-color:var(--teal-line); }
.rk2-asset-tabs{ display:flex; gap:3px; padding:5px 8px; border-bottom:1px solid var(--line-2); flex-wrap:wrap;
  background:var(--bg-2); }
.rk2-asset-tabs button{ padding:2px 7px; border-radius:4px; border:1px solid transparent;
  background:transparent; color:var(--tx-3); font-size:9.5px; font-weight:600; cursor:pointer; }
.rk2-asset-tabs button.active{ background:var(--teal-soft); color:var(--teal-2); border-color:var(--teal-line); }
.rk2-asset-scroll{ flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:11px; }
.rk2-asset-group{ display:flex; flex-direction:column; gap:5px; }
.rk2-asset-group-label{ font-size:10px; font-weight:700; letter-spacing:.04em; padding-left:2px;
  display:flex; align-items:center; gap:6px; }
.rk2-asset-group-label .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.rk2-asset-group-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }

/* 资产卡片：中性深底 + 彩色全边框（三重区分：边框+badge+分组背景条）*/
.rk2-a-card{ position:relative; border-radius:8px; overflow:hidden; cursor:grab; padding:8px;
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column; gap:6px; }
.rk2-a-card:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.35); }
.rk2-a-card.cat-char{ background:rgba(20,17,12,.6); border:1.5px solid var(--cat-char-line); }
.rk2-a-card.cat-prop{ background:rgba(20,17,12,.6); border:1.5px solid var(--cat-prop-line); }
.rk2-a-card.cat-scene{ background:rgba(20,17,12,.6); border:1.5px solid var(--cat-scene-line); }
.rk2-a-card.cat-style{ background:rgba(20,17,12,.6); border:1.5px solid var(--cat-style-line); }
.rk2-a-card.bound{ box-shadow:0 0 0 1px var(--teal-line); }
.rk2-a-card .rk2-thumb{ position:relative; width:100%; aspect-ratio:4/3; border-radius:5px; overflow:hidden;
  background:rgba(8,7,5,.45); }
.rk2-a-card .rk2-thumb img,.rk2-a-card .rk2-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.rk2-a-card .rk2-thumb .ph{ width:100%; height:100%; display:grid; place-items:center; color:var(--tx-3); }
.rk2-a-card .rk2-badge{ position:absolute; top:5px; left:5px; font-size:10px; font-weight:800; padding:2px 7px;
  border-radius:4px; backdrop-filter:blur(2px); color:#fff; z-index:2; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.rk2-a-card.cat-char .rk2-badge{ background:var(--cat-char-strong); }
.rk2-a-card.cat-prop .rk2-badge{ background:var(--cat-prop-strong); color:#1a1712; }
.rk2-a-card.cat-scene .rk2-badge{ background:var(--cat-scene-strong); }
.rk2-a-card.cat-style .rk2-badge{ background:var(--cat-style-strong); }
.rk2-a-card .rk2-name{ font-size:9.5px; color:var(--tx-2); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 资产卡底部操作行（详情/绑定按钮独占一行，28px 高、图标+文字）*/
.rk2-a-card .rk2-card-foot{ display:flex; gap:5px; margin-top:5px; }
.rk2-a-card .rk2-card-foot button{ height:28px; flex:1; border-radius:6px; border:1px solid var(--line-2);
  background:var(--bg-2); color:var(--tx-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  gap:4px; font-size:10.5px; font-weight:600; }
.rk2-a-card .rk2-card-foot button:hover{ border-color:var(--teal-line); color:var(--teal-2); background:var(--teal-soft); }
.rk2-a-card .rk2-card-foot .rk2-act-bind{ color:var(--teal-2); border-color:var(--teal-line); background:var(--teal-soft); }
.rk2-a-card .rk2-card-foot .rk2-act-bind:hover{ background:var(--teal); color:#0b0a08; }
.rk2-a-card.bound .rk2-bound-tag{ position:absolute; bottom:5px; right:5px; font-size:8px; font-weight:700;
  padding:1.5px 5px; border-radius:3px; background:var(--teal); color:#0b0a08; z-index:2; }

.rk2-a-card.empty{ background:rgba(78,205,196,.06); border:1.5px dashed var(--teal-line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:4/3;
  cursor:pointer; gap:3px; padding:0; }
.rk2-a-card.empty:hover{ background:rgba(78,205,196,.12); }
.rk2-a-card.empty .rk2-plus{ font-size:22px; opacity:.4; color:var(--teal-2); line-height:1; }
.rk2-a-card.empty .rk2-empty-hint{ font-size:8.5px; color:var(--tx-4); font-weight:600; }

/* 中：上半（播放器 + 右侧版本列竖排）*/
.rk2-center-top{ flex:1; display:flex; flex-direction:row; min-height:0; overflow:hidden; }
.rk2-center-main{ flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.rk2-player{ flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; background:var(--bg-0); }
.rk2-player-header{ height:32px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; border-bottom:1px solid var(--line-2); background:var(--bg-2); gap:8px; }
.rk2-player-header .rk2-ver-info{ font-size:11px; font-weight:700; color:var(--teal-2); }
.rk2-player-header .rk2-ver-meta{ font-size:10px; color:var(--tx-4); }
.rk2-reuse-btn{ height:24px; padding:0 10px; border-radius:6px; border:1px solid var(--teal-line);
  background:var(--teal-soft); color:var(--teal-2); font-size:10.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; }
.rk2-reuse-btn:hover{ background:rgba(78,205,196,.22); }
.rk2-reuse-btn:disabled{ opacity:.5; cursor:not-allowed; }
.rk2-player-body{ flex:1; display:flex; align-items:center; justify-content:center; position:relative; padding:4px; min-height:0; overflow:hidden; }
.rk2-player-frame{ position:relative; height:100%; max-width:100%; max-height:100%; aspect-ratio:var(--player-aspect, 16/9); }
.rk2-player-body video{ width:100%; height:100%; object-fit:contain; border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.5); border:1px solid var(--line-2); }
.rk2-player-empty{ display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--tx-4);
  font-size:12px; text-align:center; }

/* HUD 取景标记叠加层（ARRI 监视器质感：十字+画幅安全框+四角L标，不可点击、不动视频颜色）*/
.rk2-player-hud{ position:absolute; inset:4px; pointer-events:none; z-index:5; opacity:.55; }
.rk2-player-hud svg{ width:100%; height:100%; overflow:visible; display:block; }

/* 版本队列：预览下方横向 film-strip（参考 shotcrew.ai）*/
.rk2-filmstrip{ flex:none; display:flex; flex-direction:row; gap:9px; padding:8px 12px;
  border-top:1px solid var(--line-2); background:var(--bg-1); overflow-x:auto; overflow-y:hidden; min-height:74px; }
/* 竖排版本队列：贴在播放器右侧，独立滚动，不挤压下方插槽 */
.rk2-filmstrip.rk2-filmstrip-v{ flex-direction:column; gap:7px; width:132px; height:auto; min-height:0;
  border-top:none; border-left:1px solid var(--line-2); background:var(--bg-1);
  overflow-x:hidden; overflow-y:auto; padding:8px 8px; }
.rk2-filmstrip-head{ flex:none; display:flex; align-items:center; gap:6px; padding-right:8px;
  border-right:1px solid var(--line-2); margin-right:2px; }
.rk2-filmstrip-v .rk2-filmstrip-head{ border-right:none; border-bottom:1px solid var(--line-2);
  padding-right:0; padding-bottom:5px; margin-right:0; margin-bottom:2px; }
.rk2-filmstrip-head .rk2-title{ font-size:10px; font-weight:700; color:var(--tx-2); white-space:nowrap; }
.rk2-filmstrip-head .mono{ font-size:8.5px; color:var(--tx-4); }
.rk2-film-item{ position:relative; flex:none; width:120px; border-radius:6px; border:1.5px solid var(--line-2);
  overflow:hidden; cursor:pointer; transition:all .15s; background:var(--bg-2); }
.rk2-filmstrip-v .rk2-film-item{ width:100%; }
.rk2-film-item:hover{ border-color:var(--teal-line); }
.rk2-film-item.active{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal-line); }
.rk2-film-item video,.rk2-film-item img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#000; }
.rk2-film-item .rk2-film-ph{ width:100%; aspect-ratio:16/9; background:#000; display:grid; place-items:center; color:var(--tx-4); font-size:9px; }
.rk2-film-item .rk2-film-label{ padding:3px 5px; font-size:8px; font-weight:700; color:var(--tx-3);
  display:flex; justify-content:space-between; align-items:center; gap:4px; }
.rk2-film-item .rk2-film-label .rk2-vtag{ color:var(--teal-2); }
.rk2-film-item .rk2-film-reuse{ position:absolute; top:3px; right:3px; height:18px; width:18px; padding:0; border-radius:4px;
  border:1px solid var(--teal-line); background:rgba(11,10,8,.82); color:var(--teal-2); font-size:8px; font-weight:600;
  cursor:pointer; opacity:0; transition:opacity .15s; display:grid; place-items:center; }
.rk2-film-item:hover .rk2-film-reuse{ opacity:1; }
.rk2-film-empty{ display:flex; align-items:center; color:var(--tx-4); font-size:9px; padding:0 8px; white-space:nowrap; }

/* 版本状态徽标（CURRENT 暖金 / AI 灰 / DRAFT 紫）*/
.rk2-status-badge{ position:absolute; top:4px; left:4px; font-size:8px; font-weight:800; padding:2px 5px;
  border-radius:2px; letter-spacing:.04em; backdrop-filter:blur(4px); z-index:2; line-height:1; }
.rk2-status-badge.current{ background:rgba(11,10,8,.85); color:var(--gold-2); border:1px solid var(--gold-line); }
.rk2-status-badge.ai{ background:rgba(11,10,8,.78); color:var(--tx-3); }
.rk2-status-badge.draft{ background:rgba(11,10,8,.85); color:#b59ee0; border:1px solid rgba(181,158,224,.35); }

/* 右栏标签页条 */
.rk2-tabs{ flex:none; display:flex; height:34px; border-bottom:1px solid var(--line-2); background:var(--bg-2); }
.rk2-tab{ flex:1; border:none; background:transparent; color:var(--tx-4); font-size:11px; font-weight:600;
  cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; padding:0; display:flex; align-items:center; justify-content:center; gap:4px; }
.rk2-tab:hover{ color:var(--tx-2); }
.rk2-tab.active{ color:var(--teal-2); border-bottom-color:var(--teal); background:var(--teal-soft); }

/* 参数按钮组（画幅/分辨率）*/
.rk2-param-group{ display:flex; gap:4px; flex-wrap:wrap; }
.rk2-param-btn{ flex:1 0 auto; min-width:0; height:30px; padding:0 11px; border-radius:6px; font-size:11.5px; font-weight:600;
  border:1px solid var(--line-2); background:var(--bg-0); color:var(--tx-3); cursor:pointer; transition:all .12s; }
.rk2-param-btn:hover{ border-color:var(--teal-line); color:var(--tx); }
.rk2-param-btn.active{ background:var(--teal-soft); color:var(--teal-2); border-color:var(--teal-line); font-weight:700; }

/* §NN 段头 */
.rk2-section-tag{ display:flex; align-items:baseline; gap:6px; margin-bottom:5px; }
.rk2-section-tag .rk2-sec-num{ font-size:9px; color:var(--tx-4); font-weight:400; letter-spacing:1px; }
.rk2-section-tag .rk2-sec-lbl{ font-size:10.5px; color:var(--tx-3); letter-spacing:.04em; }

/* 参考概览标签页：已选参考图网格 */
.rk2-ref-overview{ display:flex; flex-direction:column; gap:10px; padding:4px 0; }
.rk2-ref-overview-empty{ padding:24px 12px; text-align:center; color:var(--tx-4); font-size:11px; line-height:1.6; }
.rk2-ref-overview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.rk2-ref-overview-item{ position:relative; border-radius:6px; overflow:hidden; border:1.5px solid var(--cat-style-line);
  aspect-ratio:4/3; background:#000; }
.rk2-ref-overview-item img,.rk2-ref-overview-item video{ width:100%; height:100%; object-fit:cover; }
.rk2-ref-overview-item .rk2-roi-lbl{ position:absolute; bottom:0; left:0; right:0; padding:3px 5px; font-size:8px;
  font-weight:700; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.8)); }

/* 版本历史标签页 */
.rk2-ver-history{ display:flex; flex-direction:column; gap:6px; padding:4px 0; }
.rk2-ver-hist-item{ padding:8px 10px; border-radius:6px; border:1px solid var(--line-2); background:var(--bg-0); cursor:pointer; }
.rk2-ver-hist-item.active{ border-color:var(--teal-line); background:var(--teal-soft); }
.rk2-ver-hist-item:hover{ border-color:var(--teal-line); }
.rk2-ver-hist-head{ display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.rk2-ver-hist-prompt{ font-size:10px; color:var(--tx-4); line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* 下半：插槽区（按类型分区）— flex:1 自适应（版本条占底部固定高度）*/
.rk2-col-slots{ flex:1; border-top:1px solid var(--line-2); background:var(--bg-1);
  display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.rk2-slots-header{ height:30px; flex:none; display:flex; align-items:center; gap:8px; padding:0 12px;
  border-bottom:1px solid var(--line-2); background:var(--bg-2); }
.rk2-slots-header .rk2-title{ font-size:11px; font-weight:700; color:var(--tx-2); }
.rk2-slots-header .rk2-hint{ font-size:9.5px; color:var(--tx-4); }
.rk2-slots-collapse-toggle{ flex:none; display:inline-flex; align-items:center; gap:5px; padding:0 8px;
  height:24px; border-radius:6px; border:1px solid var(--line-2); background:var(--bg-2);
  color:var(--tx-3); font-size:10px; font-weight:600; cursor:pointer; white-space:nowrap; }
.rk2-slots-collapse-toggle:hover{ border-color:var(--teal-line); color:var(--teal-2); }
.rk2-slots-collapse-toggle .rk2-arrow{ transition:transform .2s; }
.rk2-slots-collapse-toggle.open .rk2-arrow{ transform:rotate(90deg); }

.rk2-slots-groups{ flex:1; overflow-x:hidden; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:row; gap:16px; align-items:flex-start; }
.rk2-slot-group{ display:flex; flex-direction:column; gap:5px; flex:0 1 auto; min-width:0; }
.rk2-slot-group-label{ font-size:10px; font-weight:700; letter-spacing:.04em; padding-left:2px;
  display:flex; align-items:center; gap:5px; }
.rk2-slot-group-label .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.rk2-slot-group-slots{ display:flex; gap:6px; align-items:flex-start; flex-wrap:wrap; }

/* 插槽卡：小尺寸 4:3 中性底 + 彩色竖线（Gemini 评审：大面积底色干扰）*/
.rk2-slot{ flex:none; width:105px; aspect-ratio:4/3; border-radius:6px; overflow:hidden;
  position:relative; cursor:pointer; transition:transform .2s, box-shadow .2s; padding:5px;
  border:1px solid var(--line-2); }
.rk2-slot:hover{ transform:translateY(-1px); }
.rk2-slot img,.rk2-slot video{ width:100%; height:100%; object-fit:cover; display:block; border-radius:4px; }
.rk2-slot.filled{ background:rgba(20,17,12,.5); border:1.5px solid var(--teal-line); }
.rk2-slot.filled.cat-char{ background:rgba(20,17,12,.5); border:1.5px solid var(--cat-char-line); }
.rk2-slot.filled.cat-prop{ background:rgba(20,17,12,.5); border:1.5px solid var(--cat-prop-line); }
.rk2-slot.filled.cat-scene{ background:rgba(20,17,12,.5); border:1.5px solid var(--cat-scene-line); }
.rk2-slot.filled.cat-style{ background:rgba(20,17,12,.5); border:1.5px solid var(--cat-style-line); }
/* 改动4：slot-label 突出（Teal 气泡，方便写提示词时映射 图片1/图片2）*/
.rk2-slot .rk2-slot-label{ position:absolute; top:4px; left:4px; font-size:9px; font-weight:800; padding:2px 6px;
  border-radius:4px; background:var(--teal); color:#0b0a08; z-index:1; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.rk2-slot .rk2-slot-name{ position:absolute; bottom:3px; left:3px; right:3px; font-size:7.5px; font-weight:600;
  color:var(--tx-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:rgba(11,10,8,.7); padding:1px 4px; border-radius:3px; z-index:1; }
.rk2-slot .rk2-slot-x{ position:absolute; top:3px; right:3px; width:16px; height:16px; border-radius:50%;
  background:rgba(11,10,8,.82); color:var(--tx-2); display:grid; place-items:center; z-index:2; border:none;
  cursor:pointer; opacity:0; transition:opacity .15s; }
.rk2-slot:hover .rk2-slot-x{ opacity:1; }
.rk2-slot.empty{ background:rgba(78,205,196,.06); border:1.5px dashed var(--teal-line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.rk2-slot.empty:hover{ background:rgba(78,205,196,.12); }
.rk2-slot.empty .rk2-plus{ font-size:18px; opacity:.35; color:var(--teal-2); line-height:1; }
.rk2-slot.empty .rk2-slot-empty-label{ font-size:7.5px; color:var(--tx-4); font-weight:600; }
.rk2-slots-extra{ display:none; }
.rk2-slots-extra.open{ display:flex; flex-direction:column; gap:5px; }

/* 参考链路状态摘要面板（插槽区右侧，填满横向空白，HUD 自检仪表盘）*/
.rk2-slots-link-summary{ flex:none; width:240px; flex-shrink:0; align-self:stretch;
  border:1px solid var(--line-2); border-radius:8px; background:rgba(20,17,12,.5);
  padding:8px 10px; display:flex; flex-direction:column; gap:6px;
  font-family:var(--mono); font-size:10px; color:var(--tx-3); overflow:hidden; }
.rk2-slots-link-summary .rk2-link-head{ font-size:9px; letter-spacing:.08em; color:var(--tx-4);
  text-transform:uppercase; padding-bottom:4px; border-bottom:1px solid var(--line-2); }
.rk2-slots-link-summary .rk2-link-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.rk2-slots-link-summary .rk2-link-row .v{ color:var(--teal-2); font-weight:700; }
.rk2-slots-link-summary .rk2-link-row.warn .v,
.rk2-slots-link-summary .rk2-link-warn{ color:var(--coral); }

/* 右：提示词区 */
.rk2-col-prompt{ grid-area:prompt; display:flex; flex-direction:column; border-left:1px solid var(--line-2);
  min-height:0; overflow:hidden; background:var(--bg-1); }
.rk2-prompt-header{ height:32px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; border-bottom:1px solid var(--line-2); background:var(--bg-2); }
.rk2-prompt-header .rk2-title{ font-size:11.5px; font-weight:700; color:var(--tx-2); }
.rk2-prompt-body{ flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:10px; }
.rk2-prompt-section textarea{ width:100%; border-radius:7px; border:1px solid var(--line-2); background:var(--bg-0);
  color:var(--tx); font-size:11.5px; line-height:1.65; padding:8px 10px; resize:vertical; outline:none;
  font-family:inherit; min-height:50px; box-sizing:border-box; }
.rk2-prompt-section textarea:focus{ border-color:var(--teal-line); }
.rk2-prompt-section .rk2-lbl{ font-size:9.5px; font-weight:700; color:var(--teal-2); letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
.rk2-prompt-empty{ font-size:10px; color:var(--tx-4); padding:10px; line-height:1.5; }

.rk2-prompt-adv{ border-radius:6px; border:1px solid var(--line-2); overflow:hidden; background:var(--bg-0); }
.rk2-prompt-adv summary{ list-style:none; cursor:pointer; padding:6px 10px; font-size:11px; color:var(--tx-2);
  display:flex; align-items:center; gap:6px; }
.rk2-prompt-adv summary::-webkit-details-marker{ display:none; }
.rk2-prompt-adv[open] summary .rk2-arrow{ transform:rotate(90deg); }
.rk2-prompt-adv .rk2-arrow{ transition:transform .15s; }
.rk2-prompt-adv .rk2-adv-body{ padding:0 10px 10px; display:flex; flex-direction:column; gap:8px; }

/* 底部操作条（提示词列底，sticky 悬浮 — Gemini 评审：防止被挤出可视区）*/
.rk2-prompt-actions{ flex:none; display:flex; gap:7px; padding:8px 12px;
  border-top:1px solid var(--line-2); background:var(--bg-2); position:sticky; bottom:0; z-index:10;
  box-shadow:0 -2px 8px rgba(0,0,0,.2); }
.rk2-btn-submit{ flex:1; height:34px; border-radius:7px; border:1px solid var(--teal-line);
  background:linear-gradient(180deg,var(--teal),#3bb8af); color:#0b0a08; font-size:11.5px;
  font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.rk2-btn-submit:disabled{ opacity:.5; cursor:not-allowed; background:var(--bg-3); border-color:var(--line-2); color:var(--tx-3); }
.rk2-btn-draft{ height:34px; padding:0 11px; border-radius:7px; border:1px solid var(--line-strong);
  background:var(--bg-1); color:var(--tx); font-size:11px; font-weight:600; cursor:pointer; }
.rk2-btn-draft:hover{ background:var(--bg-2); }
.rk2-btn-copy{ height:34px; padding:0 11px; border-radius:7px; border:1px solid var(--line-strong);
  background:var(--bg-1); color:var(--tx-2); font-size:11px; font-weight:600; cursor:pointer; }

/* 40px 精简顶栏 + 更多菜单 */
.rk2-topbar{ height:40px; flex:none; display:flex; align-items:center; gap:14px; padding:0 14px;
  border-bottom:1px solid var(--line-2); background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); }
.rk2-topbar .rk2-logo{ width:22px; height:22px; border-radius:6px; flex:none; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 30% 20%, var(--gold-2), var(--coral) 120%); color:#1a1206; }
.rk2-topbar .rk2-crumb{ font-size:12px; font-weight:700; color:var(--tx); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.rk2-topbar .rk2-crumb .rk2-sub{ font-size:10.5px; color:var(--tx-3); font-weight:500; margin-left:4px; }
.rk2-topbar .rk2-sep{ color:var(--line-strong); font-size:11px; }
.rk2-view-tabs{ display:flex; gap:2px; padding:2px; border-radius:6px; background:var(--bg-0); border:1px solid var(--line-2); }
.rk2-view-tabs button{ height:24px; padding:0 10px; border:none; border-radius:4px; font-size:11px; font-weight:700;
  background:transparent; color:var(--tx-3); cursor:pointer; }
.rk2-view-tabs button.active{ background:var(--teal-soft); color:var(--teal-2); }
.rk2-topbar .rk2-search{ flex:1; max-width:260px; height:26px; border-radius:5px; border:1px solid var(--line-2);
  background:var(--bg-0); color:var(--tx-2); font-size:11px; padding:0 8px; }
.rk2-more-btn{ position:relative; height:24px; padding:0 8px; border-radius:5px; border:1px solid var(--line-2);
  background:var(--bg-0); color:var(--tx-3); font-size:10.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; }
.rk2-more-btn:hover{ background:var(--bg-2); color:var(--tx-2); }
.rk2-more-menu{ position:absolute; top:28px; right:0; min-width:180px; z-index:50;
  background:var(--bg-2); border:1px solid var(--line-strong); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.5);
  padding:6px; display:flex; flex-direction:column; gap:2px; }
.rk2-more-menu button,.rk2-more-menu a,.rk2-more-menu label{ display:flex; align-items:center; gap:8px;
  height:28px; padding:0 10px; border-radius:5px; border:none; background:transparent; color:var(--tx-2);
  font-size:11.5px; font-weight:500; cursor:pointer; text-decoration:none; }
.rk2-more-menu button:hover,.rk2-more-menu a:hover,.rk2-more-menu label:hover{ background:var(--bg-3); color:var(--tx); }
.rk2-more-menu .rk2-mrow{ display:flex; align-items:center; justify-content:space-between; padding:0 10px; height:28px; border-radius:5px; }
.rk2-more-menu .rk2-mrow:hover{ background:var(--bg-3); }
.rk2-more-menu .rk2-mseg{ display:flex; gap:2px; }
.rk2-more-menu .rk2-mseg button{ height:22px; padding:0 8px; border-radius:4px; border:1px solid var(--line-2);
  background:var(--bg-1); color:var(--tx-3); font-size:10px; font-weight:600; cursor:pointer; }
.rk2-more-menu .rk2-mseg button.on{ background:var(--gold-soft); color:var(--gold-2); border-color:var(--gold-line); }
.rk2-more-menu .rk2-mdiv{ height:1px; background:var(--line-2); margin:4px 6px; }

/* 改动5：拖拽高亮反馈 — 拖起资产时插槽呼吸灯（Gemini 评审建议）*/
@keyframes rk2-drop-pulse {
  0%, 100% { border-color: var(--teal-line); box-shadow: 0 0 0 0 var(--teal-soft); }
  50% { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
}
.rk2-slot.drop-active { animation: rk2-drop-pulse 1.2s ease-in-out infinite; border-style: solid; }
.rk2-col-slots.drag-over { background: rgba(78,205,196,.04); }

/* ── 资产组卡片 ── */
.rk2-group-list{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
/* 高密网格态：双列、卡片瘦身、隐藏次要按钮 */
.rk2-asset-scroll.density-compact .rk2-group-list{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.rk2-asset-scroll.density-compact .rk2-group-head{ padding:4px 5px; gap:5px; }
.rk2-asset-scroll.density-compact .rk2-group-thumb{ width:36px; height:36px; }
.rk2-asset-scroll.density-compact .rk2-group-meta{ min-width:0; flex:1; }
.rk2-asset-scroll.density-compact .rk2-group-name{ font-size:10px; }
.rk2-asset-scroll.density-compact .rk2-group-sub{ font-size:8px; }
.rk2-asset-scroll.density-compact .rk2-group-foot{ padding:3px 5px 4px; gap:4px; }
.rk2-asset-scroll.density-compact .rk2-group-foot button{ height:24px; font-size:9.5px; gap:3px; }
.rk2-asset-scroll.density-compact .rk2-group-versions{ padding:4px 5px; }
.rk2-asset-scroll.density-compact .rk2-group-ver{ gap:4px; padding:3px 4px; }
.rk2-asset-scroll.density-compact .rk2-group-ver .rk2-ver-thumb{ width:28px; height:22px; }
.rk2-group-card{ border-radius:7px; overflow:hidden; background:rgba(20,17,12,.6); transition:border-color .15s; }
.rk2-group-card.cat-char{ border:1.5px solid var(--cat-char-line); }
.rk2-group-card.cat-prop{ border:1.5px solid var(--cat-prop-line); }
.rk2-group-card.cat-scene{ border:1.5px solid var(--cat-scene-line); }
.rk2-group-card.cat-style{ border:1.5px solid var(--cat-style-line); }
.rk2-group-card.bound{ box-shadow:0 0 0 1px var(--teal-line); }
.rk2-group-head{ display:flex; align-items:center; gap:7px; padding:7px 8px; cursor:pointer; }
.rk2-group-head:hover{ background:rgba(78,205,196,.05); }
.rk2-group-arrow{ font-size:9px; color:var(--tx-4); width:9px; flex-shrink:0; }
.rk2-group-thumb{ width:38px; height:28px; border-radius:4px; overflow:hidden; flex-shrink:0; background:#000; }
.rk2-group-thumb img,.rk2-group-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.rk2-group-thumb .ph{ width:100%; height:100%; display:grid; place-items:center; color:var(--tx-4); }
.rk2-group-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rk2-group-name{ font-size:11px; font-weight:700; color:var(--tx); display:flex; align-items:center; gap:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rk2-group-sub{ display:flex; align-items:center; gap:5px; }
.rk2-group-sub .rk2-badge{ font-size:9px; font-weight:800; padding:1px 5px; border-radius:3px; position:static; }
.rk2-group-card.cat-char .rk2-badge{ background:var(--cat-char-strong); }
.rk2-group-card.cat-prop .rk2-badge{ background:var(--cat-prop-strong); color:#1a1712; }
.rk2-group-card.cat-scene .rk2-badge{ background:var(--cat-scene-strong); }
.rk2-group-card.cat-style .rk2-badge{ background:var(--cat-style-strong); }
.rk2-group-sub .mono{ font-size:8.5px; color:var(--tx-3); }
/* 卡片底部操作行：详情/绑定按钮独占一行，28px 高、图标+文字，可读可点 */
.rk2-group-foot{ display:flex; gap:5px; padding:5px 8px 6px; border-top:1px solid var(--line-2); background:rgba(11,10,8,.25); }
.rk2-group-foot button{ height:28px; flex:1; border-radius:6px; border:1px solid var(--line-2);
  background:var(--bg-2); color:var(--tx-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  gap:4px; font-size:10.5px; font-weight:600; }
.rk2-group-foot button:hover{ border-color:var(--teal-line); color:var(--teal-2); background:var(--teal-soft); }
.rk2-group-foot .rk2-act-bind{ color:var(--teal-2); border-color:var(--teal-line); background:var(--teal-soft); }
.rk2-group-foot .rk2-act-bind:hover{ background:var(--teal); color:#0b0a08; }
.rk2-star{ color:var(--teal); font-size:12px; flex-shrink:0; }
.rk2-bound-tag{ font-size:8.5px; font-weight:800; padding:1px 5px; border-radius:3px; background:var(--teal); color:#0b0a08; }

/* 组展开版本列表 */
.rk2-group-versions{ display:flex; flex-direction:column; gap:3px; padding:5px 8px 8px; border-top:1px solid var(--line-2); }
.rk2-group-ver{ display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:5px; cursor:pointer; position:relative; }
.rk2-group-ver:hover{ background:rgba(255,255,255,.04); }
.rk2-group-ver.primary{ background:var(--teal-soft); }
.rk2-group-ver .rk2-ver-tag{ font-size:8.5px; color:var(--tx-4); min-width:18px; font-weight:700; }
.rk2-group-ver.primary .rk2-ver-tag{ color:var(--teal-2); }
.rk2-ver-thumb{ width:30px; height:22px; border-radius:3px; overflow:hidden; flex-shrink:0; background:#000; }
.rk2-ver-thumb img,.rk2-ver-thumb video{ width:100%; height:100%; object-fit:cover; }
.rk2-ver-thumb .ph{ width:100%; height:100%; display:grid; place-items:center; color:var(--tx-4); }
.rk2-ver-src{ font-size:8px; color:var(--tx-4); margin-left:auto; }
.rk2-ver-actions{ display:flex; gap:2px; opacity:0; transition:opacity .15s; }
.rk2-group-ver:hover .rk2-ver-actions{ opacity:1; }
.rk2-ver-actions button{ height:16px; width:16px; padding:0; border:none; border-radius:3px;
  background:transparent; color:var(--tx-4); cursor:pointer; display:grid; place-items:center; }
.rk2-ver-actions button:hover{ background:var(--teal-soft); color:var(--teal-2); }
.rk2-group-addver{ font-size:9.5px; color:var(--tx-4); padding:4px 6px; border:1px dashed var(--line-2); border-radius:5px; text-align:center; cursor:not-allowed; }

/* ── 资产详情抽屉（参考 shotcrew.ai inspector 设计）── */
.rk2-inspector-scrim{ position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  display:flex; justify-content:flex-end; animation:rk2-scrim-in .18s ease; }
@keyframes rk2-scrim-in{ from{ opacity:0; } to{ opacity:1; } }
.rk2-inspector-pane{ width:min(400px,94vw); height:100vh; background:var(--bg-2); border-left:1px solid var(--line);
  display:flex; flex-direction:column; box-shadow:-12px 0 40px rgba(0,0,0,.4); animation:rk2-pane-in .22s cubic-bezier(.2,.7,.2,1); }
@keyframes rk2-pane-in{ from{ transform:translateX(40px); opacity:.4; } to{ transform:translateX(0); opacity:1; } }
.rk2-inspector-head{ display:flex; align-items:center; justify-content:space-between; padding:"12px 16px"; height:46px;
  border-bottom:1px solid var(--line-2); flex-shrink:0; padding:0 14px; }
.rk2-inspector-head-l{ display:flex; align-items:center; gap:8px; }
.rk2-inspector-dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 6px var(--teal); }
.rk2-inspector-crumb{ font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--tx-3); text-transform:uppercase; }
.rk2-inspector-close{ width:30px; height:30px; border-radius:6px; border:none; background:transparent; color:var(--tx-3);
  cursor:pointer; display:grid; place-items:center; }
.rk2-inspector-close:hover{ background:var(--bg-1); color:var(--tx); }

.rk2-inspector-body{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.rk2-inspector-preview{ width:100%; aspect-ratio:16/10; border-radius:8px; overflow:hidden; background:#000;
  display:grid; place-items:center; border:1px solid var(--line-2); }
.rk2-inspector-preview img,.rk2-inspector-preview video{ width:100%; height:100%; object-fit:contain; }
.rk2-inspector-ph{ color:var(--tx-4); }

.rk2-inspector-sectionhead{ font-size:9.5px; font-weight:800; letter-spacing:.12em; color:var(--teal-2);
  text-transform:uppercase; margin-top:2px; }
.rk2-inspector-titlerow{ display:flex; align-items:center; gap:8px; }
.rk2-inspector-name{ font-size:15px; font-weight:700; color:var(--tx); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rk2-inspector-status{ font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:3px; flex-shrink:0; }
.rk2-inspector-status.draft{ background:rgba(255,255,255,.06); color:var(--tx-3); }
.rk2-inspector-status.confirmed{ background:var(--teal-soft); color:var(--teal-2); border:1px solid var(--teal-line); }
.rk2-inspector-filename{ font-size:10px; color:var(--tx-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.rk2-inspector-field{ display:flex; flex-direction:column; gap:5px; }
.rk2-inspector-lbl{ font-size:10.5px; font-weight:600; color:var(--tx-3); letter-spacing:.02em; }
.rk2-inspector-input{ width:100%; height:34px; border-radius:6px; padding:"0 10px"; font-size:12px; color:var(--tx);
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.08); padding:0 10px; }
.rk2-inspector-input:focus{ border-color:var(--teal-line); outline:none; box-shadow:0 0 0 2px var(--teal-soft); }
.rk2-inspector-input::placeholder{ color:var(--tx-4); }
.rk2-inspector-textarea{ height:auto; min-height:72px; resize:vertical; padding:8px 10px; line-height:1.5;
  background:rgba(255,255,255,.024); }
.rk2-inspector-input.rk2-inspector-textarea{ padding:8px 10px; }

.rk2-inspector-toggles{ display:flex; gap:14px; padding-top:2px; }
.rk2-inspector-toggle{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--tx-2); cursor:pointer; }
.rk2-inspector-toggle input{ accent-color:var(--teal); }

.rk2-inspector-err{ font-size:11px; color:var(--err); padding:6px 10px; border-radius:5px;
  background:color-mix(in oklab,var(--err) 12%,transparent); border:1px solid color-mix(in oklab,var(--err) 35%,transparent); }

.rk2-inspector-foot{ display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line-2); flex-shrink:0; }
.rk2-inspector-btn{ flex:1; height:38px; border-radius:7px; font-size:12.5px; font-weight:600; cursor:pointer; }
.rk2-inspector-btn.ghost{ border:1px solid var(--line-2); background:transparent; color:var(--tx-2); }
.rk2-inspector-btn.ghost:hover{ background:var(--bg-1); }
.rk2-inspector-btn.primary{ border:1px solid var(--gold-line); background:linear-gradient(180deg,var(--gold-2),var(--gold));
  color:#1a1206; font-weight:700; }
.rk2-inspector-btn.primary:hover{ filter:brightness(1.08); }
.rk2-inspector-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* 显眼编辑入口：卡片详情按钮 */
.rk2-a-card .rk2-act-edit{ width:auto; padding:0 7px; gap:3px; font-weight:600; color:var(--teal-2); }

/* ── 资产 Inspector 弹窗（点击资产图片打开：左预览+版本条 / 右3标签）── */
.rk2-ast-insp-scrim{ position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.62); backdrop-filter:blur(8px);
  display:grid; place-items:center; animation:rk2-scrim-in .18s ease; }
.rk2-ast-insp{ width:min(1500px,98vw); height:min(940px,97vh); background:var(--bg-2); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 24px 70px rgba(0,0,0,.55); display:flex; flex-direction:column; overflow:hidden;
  animation:rk2-pane-in .22s cubic-bezier(.2,.7,.2,1); }
.rk2-ast-insp-head{ display:flex; align-items:center; justify-content:space-between; height:46px; padding:0 16px;
  border-bottom:1px solid var(--line-2); flex-shrink:0; }
.rk2-ast-insp-head-l{ display:flex; align-items:center; gap:10px; min-width:0; }
.rk2-ast-insp-dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 6px var(--teal); flex-shrink:0; }
.rk2-ast-insp-crumb{ font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--tx-3); text-transform:uppercase; white-space:nowrap; }
.rk2-ast-insp-grp{ font-size:10.5px; color:var(--gold); padding:2px 8px; border-radius:4px; background:var(--gold-soft);
  border:1px solid var(--gold-line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk2-ast-insp-close{ width:30px; height:30px; border-radius:6px; border:none; background:transparent; color:var(--tx-3);
  cursor:pointer; display:grid; place-items:center; flex-shrink:0; }
.rk2-ast-insp-close:hover{ background:var(--bg-1); color:var(--tx); }

.rk2-ast-insp-main{ flex:1; display:grid; grid-template-columns:1.25fr 1fr; min-height:0; }
/* 左：大图预览（上）+ 版本条 + 详情信息（下，可滚动）*/
.rk2-ast-insp-left{ display:flex; flex-direction:column; min-width:0; overflow:hidden; background:var(--bg-1); border-right:1px solid var(--line-2); }
.rk2-ast-insp-preview{ flex-shrink:0; height:min(58%,520px); min-height:300px; display:grid; place-items:center; overflow:hidden; background:#000; }
.rk2-ast-insp-preview img,.rk2-ast-insp-preview video{ max-width:100%; max-height:100%; object-fit:contain; }
.rk2-ast-insp-audio{ display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--gold); }
.rk2-ast-insp-audio audio{ width:280px; }
.rk2-ast-insp-ph{ color:var(--tx-4); opacity:.5; }
/* 详情信息块（大图下方）*/
.rk2-ast-insp-leftinfo{ flex:1; min-height:0; padding:14px 16px; border-top:1px solid var(--line-2); display:flex; flex-direction:column; }
.rk2-ast-insp-verstrip{ flex-shrink:0; padding:8px 10px; background:rgba(0,0,0,.5); border-top:1px solid var(--line-2); }
.rk2-ast-insp-verstrip-head{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.rk2-ast-insp-verstrip-list{ display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; }
.rk2-ast-insp-veritem{ position:relative; width:64px; height:48px; flex-shrink:0; border-radius:5px; overflow:hidden;
  border:1px solid var(--line-2); background:var(--bg-0); cursor:pointer; padding:0; display:block; }
.rk2-ast-insp-veritem:hover{ border-color:var(--teal-line); }
.rk2-ast-insp-veritem.active{ border-color:var(--teal); box-shadow:0 0 0 2px var(--teal-soft); }
.rk2-ast-insp-veritem.primary{ border-color:var(--gold-line); }
.rk2-ast-insp-verimg{ width:100%; height:100%; display:block; }
.rk2-ast-insp-verimg img,.rk2-ast-insp-verimg video{ width:100%; height:100%; object-fit:cover; }
.rk2-ast-insp-vertag{ position:absolute; bottom:2px; left:3px; font-size:8.5px; color:#fff; background:rgba(0,0,0,.7);
  padding:0 3px; border-radius:2px; line-height:1.4; }
.rk2-ast-insp-star{ position:absolute; top:2px; right:3px; color:var(--gold); font-size:9px; }

/* 右：标签页 */
.rk2-ast-insp-side{ display:flex; flex-direction:column; min-width:0; background:var(--bg-2); }
.rk2-ast-insp-tabs{ display:flex; gap:2px; padding:8px 12px 0; border-bottom:1px solid var(--line-2); flex-shrink:0; }
.rk2-ast-insp-tab{ display:flex; align-items:center; gap:4px; padding:8px 14px; font-size:12px; font-weight:600;
  color:var(--tx-3); background:transparent; border:none; border-bottom:2px solid transparent; cursor:pointer; }
.rk2-ast-insp-tab:hover{ color:var(--tx); }
.rk2-ast-insp-tab.active{ color:var(--teal-2); border-bottom-color:var(--teal); }
.rk2-ast-insp-tabbody{ flex:1; overflow:hidden; padding:14px 16px; display:flex; flex-direction:column; }
.rk2-ast-insp-tabcontent{ display:flex; flex-direction:column; gap:11px; flex:1; min-height:0; }

.rk2-ast-insp-sectionhead{ font-size:9.5px; font-weight:800; letter-spacing:.12em; color:var(--teal-2); text-transform:uppercase; }
.rk2-ast-insp-titlerow{ display:flex; align-items:center; gap:8px; }
.rk2-ast-insp-name{ font-size:15px; font-weight:700; color:var(--tx); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rk2-ast-insp-status{ font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:3px; flex-shrink:0; }
.rk2-ast-insp-status.draft{ background:rgba(255,255,255,.06); color:var(--tx-3); }
.rk2-ast-insp-status.confirmed{ background:var(--teal-soft); color:var(--teal-2); border:1px solid var(--teal-line); }
.rk2-ast-insp-filename{ font-size:10px; color:var(--tx-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.rk2-ast-insp-field{ display:flex; flex-direction:column; gap:5px; }
.rk2-ast-insp-lbl{ font-size:10.5px; font-weight:600; color:var(--tx-3); letter-spacing:.02em; }
.rk2-ast-insp-input{ width:100%; height:34px; border-radius:6px; padding:0 10px; font-size:12px; color:var(--tx);
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.08); }
.rk2-ast-insp-input:focus{ border-color:var(--teal-line); outline:none; box-shadow:0 0 0 2px var(--teal-soft); }
.rk2-ast-insp-input::placeholder{ color:var(--tx-4); }
.rk2-ast-insp-textarea{ height:auto; min-height:64px; resize:vertical; padding:8px 10px; line-height:1.5; }
.rk2-ast-insp-toggles{ display:flex; gap:14px; padding-top:2px; }
.rk2-ast-insp-toggle{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--tx-2); cursor:pointer; }
.rk2-ast-insp-toggle input{ accent-color:var(--teal); }
.rk2-ast-insp-err{ font-size:11px; color:var(--err); padding:6px 10px; border-radius:5px;
  background:color-mix(in oklab,var(--err) 12%,transparent); border:1px solid color-mix(in oklab,var(--err) 35%,transparent); }
.rk2-ast-insp-foot{ display:flex; gap:8px; padding-top:6px; }
.rk2-ast-insp-btn{ flex:1; height:38px; border-radius:7px; font-size:12.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.rk2-ast-insp-btn.primary{ border:1px solid var(--gold-line); background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:#1a1206; font-weight:700; }
.rk2-ast-insp-btn.primary:hover{ filter:brightness(1.08); }
.rk2-ast-insp-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* 版本 tab：版本行列表 */
.rk2-ast-insp-empty{ font-size:11.5px; color:var(--tx-3); padding:14px; border-radius:7px; background:var(--bg-0); border:1px dashed var(--line-2); line-height:1.6; }
.rk2-ast-insp-verlist{ display:flex; flex-direction:column; gap:5px; }
.rk2-ast-insp-verrow{ display:flex; align-items:center; gap:9px; padding:7px; border-radius:7px; background:var(--bg-0); border:1px solid var(--line-2); }
.rk2-ast-insp-verrow.primary{ border-color:var(--gold-line); background:var(--gold-soft); }
.rk2-ast-insp-verrow.current{ box-shadow:inset 0 0 0 1px var(--teal); }
.rk2-ast-insp-verrow-thumb{ width:38px; height:30px; flex-shrink:0; border-radius:4px; overflow:hidden; background:#000; border:none; padding:0; cursor:pointer; }
.rk2-ast-insp-verrow-thumb img,.rk2-ast-insp-verrow-thumb video{ width:100%; height:100%; object-fit:cover; }
.rk2-ast-insp-verrow-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rk2-ast-insp-verrow-top{ display:flex; align-items:center; gap:5px; }
.rk2-ast-insp-tag-primary{ font-size:8.5px; font-weight:700; color:#1a1206; background:var(--gold); padding:1px 5px; border-radius:2px; }
.rk2-ast-insp-tag-current{ font-size:8.5px; font-weight:700; color:#0b0a08; background:var(--teal); padding:1px 5px; border-radius:2px; }
.rk2-ast-insp-verrow-name{ font-size:10.5px; color:var(--tx-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rk2-ast-insp-verrow-actions{ display:flex; gap:6px; flex-shrink:0; }

/* 生成 tab（生图 i2i / t2i，继承 assetgen） */
.rk2-ast-insp-gen-hint{ font-size:11.5px; color:var(--tx-2); line-height:1.6; padding:10px 12px; border-radius:7px;
  background:var(--teal-soft); border:1px solid var(--teal-line); }
.rk2-ast-insp-btn-gen{ background:linear-gradient(180deg,var(--gold-2),var(--gold)); border-color:var(--gold-line); color:#1a1206; }
.rk2-ast-insp-advtoggle{ all:unset; cursor:pointer; display:flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:700; color:var(--tx-2); letter-spacing:.04em; text-transform:uppercase; }
.rk2-ast-insp-gen-result{ border-radius:7px; overflow:hidden; border:1px solid var(--gold-line); background:var(--bg-0); }
.rk2-ast-insp-gen-result img{ display:block; width:100%; max-height:200px; object-fit:contain; background:#000; }
.rk2-ast-insp-gen-result-meta{ display:flex; align-items:center; gap:8px; padding:6px 9px; }
.rk2-ast-insp-spin{ width:13px; height:13px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent;
  animation:spin .8s linear infinite; display:inline-block; }

/* ============================================================
   画面参考图多选选择器 (Reference Image Picker)
   ============================================================ */

/* 1. 缩略图横排滚动容器 */
.rk2-ast-insp-refpicker-container {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 4px 10px;
  margin-bottom: 12px;
}

/* subtle scrollbar for reference image list */
.rk2-ast-insp-refpicker-container::-webkit-scrollbar {
  height: 5px;
}
.rk2-ast-insp-refpicker-container::-webkit-scrollbar-track {
  background: transparent;
}
.rk2-ast-insp-refpicker-container::-webkit-scrollbar-thumb {
  background: rgba(232, 210, 160, 0.15);
  border-radius: 4px;
  border: none;
}
.rk2-ast-insp-refpicker-container::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 210, 160, 0.3);
}

/* 2. 单个缩略图卡片 */
.rk2-ast-insp-refpicker-card {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-0);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.rk2-ast-insp-refpicker-card:hover {
  border-color: var(--gold-line);
}

.rk2-ast-insp-refpicker-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3. 缩略图移出按钮 */
.rk2-ast-insp-refpicker-remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(207, 107, 95, 0.95); /* --err color */
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), background var(--dur-1) var(--ease);
  z-index: 5;
}

.rk2-ast-insp-refpicker-card:hover .rk2-ast-insp-refpicker-remove-btn {
  opacity: 1;
  transform: scale(1);
}

.rk2-ast-insp-refpicker-remove-btn:hover {
  background: #e35f52;
  transform: scale(1.15) !important;
}

/* 4. 上传新参考图按钮 */
.rk2-ast-insp-refpicker-upload-card {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 6px;
  border: 1px dashed var(--line-strong);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tx-3);
  font-size: 11px;
  gap: 2px;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.rk2-ast-insp-refpicker-upload-card:hover {
  background-color: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold-2);
}

.rk2-ast-insp-refpicker-upload-card svg {
  width: 16px;
  height: 16px;
}

/* 5. 从资产库选择的弹窗浮层 / 面板 */
.rk2-ast-insp-refpicker-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rk2-ast-insp-refpicker-modal {
  width: 480px;
  max-width: 90vw;
  max-height: 80vh;
  background: rgba(26, 23, 18, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-pop-in var(--dur-2) var(--ease);
}

.rk2-ast-insp-refpicker-modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rk2-ast-insp-refpicker-modal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-2);
}

.rk2-ast-insp-refpicker-modal-close {
  background: transparent;
  border: none;
  color: var(--tx-3);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: color var(--dur-1) var(--ease);
}

.rk2-ast-insp-refpicker-modal-close:hover {
  color: var(--tx);
}

.rk2-ast-insp-refpicker-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rk2-ast-insp-refpicker-section-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: 10px;
}

.rk2-ast-insp-refpicker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.rk2-ast-insp-refpicker-grid-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--bg-0);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.rk2-ast-insp-refpicker-grid-item:hover {
  transform: translateY(-2px);
}

.rk2-ast-insp-refpicker-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rk2-ast-insp-refpicker-grid-item.selected {
  border-color: var(--gold);
}

.rk2-ast-insp-refpicker-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--gold);
  color: var(--bg-0);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ═══ IX: Submit tooltip ═══ */
.rk2-ix-submit-wrap { position: relative; display: inline-flex; align-items: center; }
.rk2-ix-submit-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: 5px 10px; border-radius: 6px; font-size: 10.5px; font-family: ui-monospace, monospace;
  color: var(--tx-2); background: var(--bg-0); border: 1px solid var(--line-2);
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s;
  box-shadow: 0 4px 12px rgba(0,0,0,.4); z-index: 10;
}
.rk2-ix-submit-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--line-2);
}
.rk2-ix-submit-wrap:hover .rk2-ix-submit-tooltip { opacity: 1; }

/* ═══ IX: New version entry animation ═══ */
@keyframes rk2-ix-version-enter {
  0% { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(227,181,99,.3); }
  100% { box-shadow: 0 0 0 0px transparent, 0 0 0px transparent; }
}
.rk2-ix-version-new { animation: rk2-ix-version-enter 1.5s ease-out forwards; }

/* ═══ IX: Film strip item hover scale and actions ═══ */
.rk2-film-item { transition: transform 0.2s ease !important; position: relative; }
.rk2-film-item:hover { transform: scale(1.05); z-index: 2; }
.rk2-film-item .rk2-ix-film-actions { opacity: 0; transition: opacity .15s; }
.rk2-film-item:hover .rk2-ix-film-actions { opacity: 1; }

/* ═══ IX: Slot overflow picker ═══ */
.rk2-ix-overflow-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--bg-1); border: 1px solid var(--gold-line); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,.6); width: 280px; z-index: 999; padding: 12px;
}
.rk2-ix-overflow-title { font-size: 12px; font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.rk2-ix-overflow-item {
  padding: 8px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; border: 1px solid var(--line-2); background: var(--bg-2); margin-top: 6px; transition: .15s;
  font-size: 11px;
}
.rk2-ix-overflow-item:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-2); }


/* ═══ IX: Slot drag pulse animation ═══ */
@keyframes rk2-ix-slot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(227,181,99,.2), inset 0 0 10px rgba(227,181,99,.1); }
  50% { box-shadow: 0 0 0 4px rgba(227,181,99,.5), inset 0 0 16px rgba(227,181,99,.2); }
}
.rk2-ix-slot-drag-over {
  animation: rk2-ix-slot-pulse .8s ease-in-out infinite !important;
  border-color: var(--gold) !important;
  transform: scale(1.02);
  z-index: 10;
}

/* ============================================================
   登录页 — 深色玻璃拟态，与主站 shotcrew.cn 风格一致
   ============================================================ */

.login-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 32px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at top, rgba(227,181,99,.06) 0%, transparent 40%),
    linear-gradient(180deg, var(--bg-0) 0%, #050403 100%);
}

/* 暖金环境光 + 粒子层 */
.login-page::before,
.login-page::after {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  z-index: -1;
}

.login-page::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(227,181,99,.18) 0%, transparent 30%),
    radial-gradient(circle at 82% 24%, rgba(100,140,200,.10) 0%, transparent 26%),
    radial-gradient(circle at 50% 82%, rgba(227,181,99,.06) 0%, transparent 30%);
  filter: blur(20px);
  opacity: 0.62;
  animation: loginAmbientPulse 7s ease-in-out infinite alternate;
}

.login-page::after {
  background-image:
    radial-gradient(circle at 14% 24%, rgba(255,255,255,.12) 0 1px, transparent 1.7px),
    radial-gradient(circle at 72% 30%, rgba(255,255,255,.08) 0 1px, transparent 1.8px),
    radial-gradient(circle at 58% 72%, rgba(239,231,214,.08) 0 1.2px, transparent 2px),
    radial-gradient(circle at 32% 78%, rgba(255,255,255,.06) 0 1px, transparent 1.9px);
  background-size: 320px 320px, 420px 420px, 360px 360px, 440px 440px;
  opacity: 0.24;
  animation: loginParticleFloat 8s ease-in-out infinite alternate;
}

@keyframes loginAmbientPulse {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.08) rotate(2deg); }
}
@keyframes loginParticleFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}

.login-card-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 392px);
}

.login-card-shell.is-shaking {
  animation: loginCardShake 500ms ease-in-out;
}

@keyframes loginCardShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

.login-card {
  position: relative;
  width: 100%;
  padding: clamp(36px, 7vw, 48px) clamp(24px, 6vw, 40px);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(26,23,18,.74) 0%, rgba(18,16,9,.88) 100%);
  border: 1px solid rgba(232,210,160,.12);
  box-shadow:
    0 24px 48px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: loginCardFadeIn 560ms var(--ease) both;
}

@keyframes loginCardFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227,181,99,.28), transparent);
}

.login-brand {
  text-align: center;
  margin-bottom: 28px;
}

.login-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--tx);
  margin: 0 0 4px;
}

.login-subtitle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--tx-3);
  margin: 0;
}

.login-error {
  background: rgba(220,80,60,.10);
  border: 1px solid rgba(220,80,60,.28);
  color: #e8a8a0;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  animation: loginErrorShake 400ms ease;
}

@keyframes loginErrorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.login-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-2);
  margin-bottom: 6px;
  margin-top: 14px;
  letter-spacing: .02em;
}

.login-label:first-of-type {
  margin-top: 0;
}

.login-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  font-size: 14px;
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  color: var(--tx);
  background: rgba(11,10,8,.80);
  border: 1px solid rgba(232,210,160,.14);
  border-radius: 9px;
  outline: none;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.login-input:focus {
  border-color: rgba(227,181,99,.55);
  background: rgba(18,16,9,.88);
  box-shadow:
    0 0 0 1px rgba(227,181,99,.28),
    0 0 0 6px rgba(227,181,99,.10);
}

.login-input::placeholder {
  color: var(--tx-4);
}

.login-submit {
  width: 100%;
  margin-top: 24px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  letter-spacing: .08em;
  color: #1a1408;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 100%);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  box-shadow: 0 8px 24px rgba(227,181,99,.22);
}

.login-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(0,0,0,.38), 0 0 0 1px rgba(227,181,99,.30);
}

.login-submit:active:not(:disabled) {
  transform: translateY(0);
}

.login-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}