*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif;background:#020617;color:#e5e7eb;display:flex;flex-direction:column;min-height:100vh}header{padding:14px 22px;border-bottom:1px solid rgba(148,163,184,.4);display:flex;justify-content:space-between;align-items:center}header h1{margin:0;font-size:18px;font-weight:600}header span{font-size:12px;color:#9ca3af}main{flex:1;display:grid;grid-template-columns:320px 1fr;gap:16px;padding:14px 18px 18px}@media(max-width:960px){main{grid-template-columns:1fr;grid-template-rows:auto 1fr}}.panel{background:radial-gradient(circle at top left,rgba(56,189,248,.06),transparent 60%),radial-gradient(circle at bottom right,rgba(129,140,248,.1),transparent 60%),#020617;border-radius:18px;border:1px solid rgba(148,163,184,.35);padding:14px 16px 16px;box-shadow:0 18px 40px #0f172ae6,0 0 0 1px #0f172ae6}.panel h2{margin:0 0 10px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}.panel h2 span.dot{width:8px;height:8px;border-radius:999px;background:radial-gradient(circle at 30% 30%,#22d3ee,#1d4ed8);box-shadow:0 0 0 3px #38bdf840}.panel p.desc{margin:0 0 10px;font-size:12px;color:#9ca3af;line-height:1.4}.field{margin-bottom:8px}.field label{display:block;font-size:12px;margin-bottom:3px}.field small{display:block;font-size:11px;color:#9ca3af;margin-top:2px}input[type=file]{width:100%;font-size:12px;color:#e5e7eb}input[type=number],select{width:100%;border-radius:10px;border:1px solid rgba(148,163,184,.6);padding:5px 8px;background:#0f172af2;color:#e5e7eb;font-size:13px;outline:none}input[type=number]:focus,select:focus{border-color:#38bdf8;box-shadow:0 0 0 1px #38bdf880;background:#020617}.slider-row{margin-top:6px}.slider-row label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:2px}.slider-row input[type=range]{width:100%}button{border-radius:999px;border:none;padding:7px 14px;font-size:13px;font-weight:500;cursor:pointer;background:linear-gradient(90deg,#22c55e,#16a34a);color:#ecfdf5;box-shadow:0 10px 25px #16a34a8c;margin-top:8px}button:disabled{opacity:.45;cursor:default;box-shadow:none}.meta{margin-top:8px;font-size:11px;color:#9ca3af}.meta strong{color:#e5e7eb;font-weight:500}.preview-panel{display:flex;flex-direction:column;gap:10px}.preview-toolbar{display:flex;justify-content:space-between;font-size:12px;color:#9ca3af;align-items:center}.badge{padding:2px 8px;border-radius:999px;border:1px solid rgba(56,189,248,.4);background:linear-gradient(90deg,#082f49d9,#0f172af2);color:#e0f2fe;font-size:11px}.preview-container{flex:1;border-radius:18px;border:1px solid rgba(148,163,184,.4);background:radial-gradient(circle at top left,rgba(30,64,175,.25),transparent 55%),radial-gradient(circle at bottom right,rgba(8,47,73,.35),transparent 55%),#020617;padding:10px;display:flex;align-items:stretch;justify-content:center;transition:border-color .15s ease,box-shadow .15s ease}.preview-container.drag-over{border-color:#38bdf8d9;box-shadow:0 0 0 1px #38bdf859,0 12px 36px #082f49a6}.image-stage{position:relative;flex:1;max-width:100%;border-radius:14px;overflow:hidden;background:#020617;box-shadow:0 18px 40px #0f172ae6,0 0 0 1px #0f172ae6;cursor:grab}.image-stage.dragging{cursor:grabbing}#image{position:absolute;top:0;left:0;transform-origin:top left;will-change:transform;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}#cropBox{position:absolute;border:3px solid rgba(248,250,252,.95);box-shadow:0 0 0 1px #0f172ad9,0 0 25px #0f172af2;pointer-events:auto;box-sizing:border-box;background:#0f172a1a;cursor:move;z-index:10}#cropBox:before{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:4px;border:1px dashed rgba(148,163,184,.9)}#cropBox .handle{position:absolute;width:9px;height:9px;border-radius:999px;background:#e5e7eb;border:1px solid #020617}#cropBox .handle.br{right:-6px;bottom:-6px;cursor:nwse-resize}.image-stage.mode-crop #cropBox{display:block}.image-stage.mode-tile #cropBox{display:none}.blur-overlay{position:absolute;pointer-events:none;z-index:3}.blur-overlay-top{top:0;left:0;right:0;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.blur-overlay-bottom{bottom:0;left:0;right:0;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.blur-overlay-left{top:0;left:0;bottom:0;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.blur-overlay-right{top:0;right:0;bottom:0;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.image-stage.mode-tile .blur-overlay{display:none}.image-stage.mode-crop #blurOverlay{display:block}.image-stage.mode-tile #blurOverlay{display:none}.tile-grid{position:absolute;pointer-events:none;z-index:9;top:0;left:0;width:100%;height:100%}.tile-grid-line{position:absolute;background:#38bdf8d9;box-shadow:0 0 15px #38bdf8b3,0 0 30px #38bdf866}.tile-grid-line.vertical{width:4px;height:100%}.tile-grid-line.horizontal{height:4px;width:100%}.tile-grid-border{position:absolute;border:2px dashed rgba(248,250,252,.7);box-sizing:border-box;pointer-events:none}.image-stage.mode-tile .tile-grid{display:block!important}.image-stage.mode-crop .tile-grid{display:none}#tileCropBox{position:absolute;border:3px solid rgba(34,211,238,.9);box-shadow:0 0 0 1px #0f172ad9,0 0 25px #22d3ee99;pointer-events:auto;box-sizing:border-box;background:#22d3ee0d;cursor:move;z-index:8}#tileCropBox:before{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:4px;border:1px dashed rgba(34,211,238,.7)}#tileCropBox .handle{position:absolute;width:10px;height:10px;border-radius:999px;background:#22d3ee;border:2px solid #020617;box-shadow:0 0 8px #22d3eecc}#tileCropBox .handle.tl{top:-6px;left:-6px;cursor:nwse-resize}#tileCropBox .handle.tr{top:-6px;right:-6px;cursor:nesw-resize}#tileCropBox .handle.bl{bottom:-6px;left:-6px;cursor:nesw-resize}#tileCropBox .handle.br{bottom:-6px;right:-6px;cursor:nwse-resize}.image-stage.mode-tile #tileCropBox{display:block}.image-stage.mode-crop #tileCropBox{display:none}.hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;font-size:13px;color:#9ca3af;pointer-events:none;padding:0 24px}.hint strong{color:#e5e7eb;margin-bottom:6px}.hint span{font-size:12px}.mode-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;margin-bottom:8px;padding:8px 12px;background:#0f172a99;border-radius:10px;border:1px solid rgba(148,163,184,.3)}.mode-toggle-row label{font-size:12px;color:#e5e7eb;cursor:pointer;display:flex;align-items:center;gap:8px}.mode-toggle{position:relative;width:44px;height:22px}.mode-toggle input{opacity:0;width:0;height:0}.mode-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#94a3b866;border-radius:999px;transition:.3s}.mode-slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:#e5e7eb;border-radius:50%;transition:.3s;box-shadow:0 2px 4px #0000004d}.mode-toggle input:checked+.mode-slider{background:linear-gradient(90deg,#22c55e,#16a34a)}.mode-toggle input:checked+.mode-slider:before{transform:translate(22px)}.mode-label-left,.mode-label-right{font-size:11px;color:#9ca3af;font-weight:500}.mode-toggle-row.active-crop .mode-label-left,.mode-toggle-row.active-tile .mode-label-right{color:#22c55e}.export-status{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid rgba(148,163,184,.22);background:#0f172ab8;color:#cbd5e1;font-size:12px;line-height:1.5;min-height:40px}.export-status[data-tone=working]{color:#e0f2fe;border-color:#38bdf873;background:#0369a12e}.export-status[data-tone=error]{color:#fee2e2;border-color:#f8717173;background:#7f1d1d33}.export-status[data-tone=success]{color:#dcfce7;border-color:#4ade806b;background:#14532d3d}