/* dammit-toolkit：灯箱 + 断链占位（颜色全部取 dammit-glass 主题变量） */

/* ---------- 断链占位 ---------- */
.dt-dead{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4em; box-sizing:border-box;
  min-width:220px; width:320px; max-width:100%; min-height:120px;
  padding:.8em 1em; margin:.4em .8em .4em 0;
  aspect-ratio:16/10;
  background:
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--dim, #888) 7%, transparent) 0 10px,
      transparent 10px 20px),
    var(--tint, rgba(120,120,128,.12));
  border:1.5px dashed color-mix(in srgb, var(--dim, #888) 45%, transparent);
  border-radius:var(--r-sm, 10px);
  cursor:help; vertical-align:middle;
}
.dt-dead code{
  font-family:var(--mono, monospace); font-size:12.5px;
  color:var(--dim, #636366);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.dt-dead em{
  font-style:normal; font-size:11.5px;
  color:var(--faint, #8e8e93);
}
img.dt-retrying{opacity:.55; filter:grayscale(.4);}

/* ---------- 灯箱 ---------- */
.dt-lb{
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  padding:min(4vw,40px);
}
.dt-lb.on{display:flex}
.dt-lb-back{
  position:absolute; inset:0;
  background:rgba(8,8,12,.72);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
}
.dt-lb-fig{
  position:absolute; margin:0;
  display:flex; flex-direction:column;
  background:var(--glass-strong, rgba(20,20,26,.9));
  border:1px solid var(--hairline-strong, rgba(255,255,255,.14));
  border-radius:var(--r-md, 15px);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  overflow:hidden;
  animation:dt-lb-in .18s ease-out;
}
.dt-lb.win-resizing .dt-lb-fig{animation:none; transition:none}
@keyframes dt-lb-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
html[data-theme="light"] .dt-lb-back{background:rgba(235,237,242,.66)}
html[data-theme="light"] .dt-lb-fig{background:rgba(255,255,255,.86)}

.dt-lb-bar{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px;
  font-family:var(--mono, monospace); font-size:12px;
  color:var(--faint, #8e8e93);
  border-bottom:1px solid var(--hairline, rgba(128,128,128,.14));
  flex:0 0 auto;
  cursor:move; user-select:none;
}
.dt-lb-lights{display:inline-flex; gap:7px; margin-right:6px; flex:0 0 auto}
.dt-lb-led{
  width:11px; height:11px; border-radius:50%; cursor:pointer;
  border:0; padding:0; position:relative;
}
.dt-lb-led-r{background:#ff5f57}
.dt-lb-led-y{background:#febc2e}
.dt-lb-led-g{background:#28c840}
.dt-lb-led::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  opacity:0; transition:opacity .12s;
}
.dt-lb-bar:hover .dt-lb-led::after{opacity:1}
.dt-lb-led-r::before,.dt-lb-led-y::before,.dt-lb-led-g::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  font-size:8px;
}
.dt-lb-bar:hover .dt-lb-led-r::before{content:"×"; display:flex; align-items:center; justify-content:center; color:rgba(80,20,20,.75); opacity:1; font-size:9px; line-height:11px}
.dt-lb-bar:hover .dt-lb-led-y::before{content:"−"; display:flex; align-items:center; justify-content:center; color:rgba(90,60,10,.75); opacity:1; font-size:9px; line-height:11px}
.dt-lb-bar:hover .dt-lb-led-g::before{content:"⤢"; display:flex; align-items:center; justify-content:center; color:rgba(20,70,25,.75); opacity:1; font-size:8px; line-height:11px}
.dt-lb-file{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40vw}
.dt-lb-count{margin-left:auto; padding-left:12px; flex:0 0 auto}
.dt-lb-x{
  border:0; background:transparent; cursor:pointer;
  color:var(--dim, #636366); font-size:18px; line-height:1;
  padding:2px 6px; border-radius:6px;
}
.dt-lb-x:hover{color:var(--ink, #111); background:var(--tint, rgba(128,128,128,.12))}

.dt-lb-stage{
  position:relative; flex:1 1 auto; min-height:120px;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  padding:14px 14px 0;
  overflow:hidden;
  cursor:zoom-in;
}
.dt-lb-stage:has(img.zoomed){cursor:grab}
.dt-lb-stage img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  border-radius:var(--r-sm, 10px);
  opacity:0; transform:scale(.985);
  transition:opacity .22s ease, transform .22s ease;
  transform-origin:center center;
  user-select:none; -webkit-user-drag:none;
}
.dt-lb-stage img.ready{opacity:1; transform:none}
.dt-lb-stage img.no-anim{transition:opacity .22s ease}
.dt-lb-stage img.zoomed{cursor:grab}
.dt-lb.dragging{cursor:grabbing}
.dt-lb.dragging .dt-lb-stage img{cursor:grabbing}
.dt-lb-grip{
  position:absolute; right:0; bottom:0; z-index:5;
  width:26px; height:26px;
  cursor:nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 55%, var(--hairline-strong, rgba(255,255,255,.18)) 55% 62%, transparent 62% 74%, var(--hairline-strong, rgba(255,255,255,.18)) 74% 81%, transparent 81%);
}
.dt-lb.win-moving .dt-lb-fig{cursor:move}
.dt-lb-cap{
  font-family:var(--sans, sans-serif); font-size:13px;
  color:var(--dim, #636366);
  padding:10px 16px 12px; text-align:center;
}
.dt-lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--hairline-strong, rgba(255,255,255,.14));
  background:var(--glass, rgba(128,128,140,.2));
  color:var(--ink, #111);
  font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
html[data-theme="light"] .dt-lb-nav{color:var(--ink, #111)}
.dt-lb-nav:hover{background:var(--tint-hover, rgba(0,122,255,.12))}
.dt-lb-prev{left:10px}
.dt-lb-next{right:10px}

html.dt-lb-lock{overflow:hidden}