.preview-container{background:#f3f4f6;border-radius:12px;padding:20px;display:flex;justify-content:center;align-items:center}#canvas-wrapper{position:relative;overflow:hidden;border-radius:8px;box-shadow:0 4px 12px rgb(0 0 0 / .15);cursor:move}#preview-canvas{display:block;max-width:100%;height:auto}.face-guide{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:3px dashed rgb(99 102 241 / .7);border-radius:50%;pointer-events:none;box-shadow:0 0 0 2000px rgb(0 0 0 / .3);transition:all 0.3s ease}.face-guide::before{content:'Position face here';position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-size:12px;color:#fff;background:rgb(99 102 241 / .8);padding:4px 10px;border-radius:4px;white-space:nowrap}.face-guide.hidden-guide{opacity:0;box-shadow:none}.bg-color-btn{width:40px;height:40px;border-radius:50%;border:3px solid #fff0;cursor:pointer;transition:all 0.2s ease;box-shadow:0 2px 4px rgb(0 0 0 / .1)}.bg-color-btn:hover{transform:scale(1.1)}.bg-color-btn.active{border-color:#4f46e5;box-shadow:0 0 0 3px rgb(79 70 229 / .3)}#zoom-slider{-webkit-appearance:none;appearance:none;height:8px;background:#e5e7eb;border-radius:4px;outline:none}#zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#4f46e5;border-radius:50%;cursor:pointer;transition:background 0.2s ease}#zoom-slider::-webkit-slider-thumb:hover{background:#4338ca}#zoom-slider::-moz-range-thumb{width:20px;height:20px;background:#4f46e5;border:none;border-radius:50%;cursor:pointer}#output-canvas,#sheet-canvas{background:#fff}#sheet-canvas{max-height:300px;width:auto}.print-sheet-preview{display:grid;gap:2px;background:#fff;padding:10px;border:1px solid #e5e7eb;border-radius:8px}@media (max-width:640px){.preview-container{padding:12px}.face-guide::before{font-size:10px;padding:3px 8px}.bg-color-btn{width:36px;height:36px}#output-box .flex{flex-direction:column}#size-preset{max-width:100%;font-size:13px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:30px}#size-preset option{font-size:13px;white-space:normal;word-wrap:break-word}}.generating{position:relative;pointer-events:none;opacity:.7}.generating::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border:3px solid #e5e7eb;border-top-color:#4f46e5;border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}