.ic svg{ width:18px;height:18px } .ic-sm svg{ width:15px;height:15px } .ic-lg svg{ width:22px;height:22px }
.scroll::-webkit-scrollbar{ width:8px;height:8px } .scroll::-webkit-scrollbar-thumb{ background:#d8dee9;border-radius:99px } .scroll::-webkit-scrollbar-track{ background:transparent }
.stage-grid{
  background-color:#ffffff;
  background-image: radial-gradient(#e3e8f0 1.1px, transparent 1.1px), radial-gradient(120% 90% at 50% 0%, rgba(79,70,229,.05), transparent 60%);
  background-size: 22px 22px, 100% 100%;
}
canvas.preview{ max-width:100%; max-height:100%; width:auto; height:auto; border-radius:12px; box-shadow:0 18px 50px -16px rgba(15,23,42,.28), 0 0 0 1px rgba(15,23,42,.06); image-rendering:auto; background:#fff; }
input[type=range]{ -webkit-appearance:none; appearance:none; height:5px; border-radius:99px; background:#e2e8f0; outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:15px;height:15px;border-radius:99px;background:#4f46e5;cursor:pointer;box-shadow:0 0 0 4px rgba(79,70,229,.15); border:2px solid #fff }
.imgcard{ position:relative; border-radius:10px; overflow:hidden; cursor:pointer; border:1px solid #e2e8f0; aspect-ratio:1/1; background:#f1f5f9; }
.imgcard.r43{ aspect-ratio:4/3; }
.imgcard .pv{ position:absolute; inset:0; }
.imgcard .pv img{ width:100%; height:100%; object-fit:cover; display:block; }
.imgcard .nm{ position:absolute; inset-inline:0; bottom:0; padding:3px 5px 4px; font-size:9px; font-weight:700; color:#fff; background:linear-gradient(to top, rgba(0,0,0,.78), transparent); letter-spacing:.02em; }
.imgcard .dot{ position:absolute; top:4px; right:4px; width:14px;height:14px;border-radius:99px;background:#4f46e5;color:#fff; display:none; align-items:center; justify-content:center; font-size:9px; }
.imgcard.on{ border-color:#4f46e5; box-shadow:0 0 0 2px #fff, 0 0 0 3px #4f46e5; }
.imgcard.on .dot{ display:flex; }
#renderOverlay .scan{ position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(79,70,229,.05) 0 2px, transparent 2px 4px); animation: scanmove 1.1s linear infinite; }
@keyframes scanmove{ from{ background-position-y:0 } to{ background-position-y:40px } }
.sweep{ position:absolute; left:0; right:0; height:38%; top:-40%; background:linear-gradient(to bottom, transparent, rgba(79,70,229,.12), transparent); animation: sweep 1.4s ease-in-out infinite }
@keyframes sweep{ 0%{ top:-40% } 100%{ top:100% } }
.cmp-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; background:#fff }
.cmp-handle{ position:absolute; top:0; bottom:0; width:2px; background:#4f46e5; transform:translateX(-1px); cursor:ew-resize; box-shadow:0 0 10px rgba(79,70,229,.45) }
.cmp-grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px;height:34px;border-radius:99px; background:#4f46e5; color:#fff; display:grid; place-items:center; box-shadow:0 6px 18px rgba(15,23,42,.3) }
.tag{ font-family:'JetBrains Mono',monospace }
.blink{ animation: blink 1s steps(2) infinite } @keyframes blink{ 50%{ opacity:.25 } }
textarea{ font-family:inherit }

@media (max-width: 1023px) {
  #leftPanel {
    position: fixed; top: 3.5rem; left: 0; bottom: 0; z-index: 40; width: 300px;
    background: white; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    transform: translateX(-100%); opacity: 0; pointer-events: none;
    display: flex; flex-direction: column; transition: transform 0.25s ease-out, opacity 0.25s ease-out;
  }
  #leftPanel.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
}