*{box-sizing:border-box}
body.puzzle-page{margin:0;min-height:100vh;background:#14191c;color:#eef1f2;font-family:Inter,Arial,sans-serif;display:flex;flex-direction:column}
.puzzle-page .app-header{flex-shrink:0}
.puzzle-page .header-right{display:flex;align-items:center}
.puzzle-layout{display:grid;grid-template-columns:300px minmax(420px,1fr) 280px;gap:12px;padding:12px;flex:1;min-height:calc(100vh - 145px)}
.puzzle-panel,.puzzle-workspace{border:1px solid #323c42;border-radius:14px;background:#20282c;min-width:0}
.puzzle-panel{padding:20px;overflow:auto}
.puzzle-controls{max-height:calc(100vh - 140px)}
.puzzle-heading{padding-bottom:15px;border-bottom:1px solid #364147}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:.16em;color:#ff815d}
.puzzle-heading h1{font-size:25px;margin:8px 0}
.puzzle-heading p,.puzzle-export>p{font-size:12px;color:#b0bdc2;line-height:1.6;margin:0}
.control-section{padding:18px 0;border-bottom:1px solid #364147}
.control-section h2,.puzzle-export h2{font-size:14px;margin:0 0 13px}
.image-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:125px;border:1.5px dashed #536168;background:#273238;border-radius:12px;cursor:pointer;text-align:center;padding:12px}
.image-drop:hover,.image-drop.dragging{border-color:#ff7952;background:#30383b}
.drop-symbol{font-size:26px;color:#ff7952}.image-drop strong{font-size:13px}.image-drop small{font-size:10px;color:#9baeb6}
.image-file-row{display:flex;gap:6px;justify-content:space-between;align-items:center;margin-top:10px;font-size:11px}.image-file-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-button{color:#ff9678;background:none;border:0;cursor:pointer}
.style-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.style-options label{display:flex;align-items:center;flex-direction:column;gap:4px;border:1px solid #3c474d;border-radius:10px;padding:11px 6px;cursor:pointer;background:#263036;position:relative;text-align:center}
.style-options label:has(input:checked){border-color:#ff7853;background:#3a3030;box-shadow:inset 0 0 0 1px #ff7853}
.style-options input{position:absolute;opacity:0;pointer-events:none}
.style-symbol{font-size:22px}.style-options strong{font-size:12px}.style-options small{font-size:10px;color:#b1bfc5}
.field{margin:12px 0}.field label{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:7px}.field output{color:#ff9372}
.field input[type=number]{width:100%;border:1px solid #455158;background:#141c20;color:white;border-radius:7px;padding:9px}
.field input[type=range]{width:100%;accent-color:#ff7952}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seed-row{display:flex;gap:6px}.seed-row button{background:#38434a;border:1px solid #4b585e;color:white;border-radius:8px;padding:7px;font-size:11px;white-space:nowrap;cursor:pointer}
.checkbox-field{font-size:12px;margin:10px 0}.checkbox-field input{accent-color:#ff7952}
.puzzle-workspace{display:flex;flex-direction:column;overflow:hidden}
.workspace-head{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:15px 18px;border-bottom:1px solid #364147}
.workspace-head>div{display:flex;flex-direction:column;gap:3px}.workspace-head strong{font-size:14px}.workspace-head span{font-size:11px;color:#9caeb6}
.workspace-head .status{font-size:9px;letter-spacing:.05em;color:#91c5a5;border:1px solid #436452;border-radius:20px;padding:6px 9px}
.preview-area{flex:1;min-height:360px;padding:26px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#2a3439,#192126)}
.preview-surface{width:100%;max-width:880px;display:flex;align-items:center;justify-content:center}
.preview-surface svg{display:block;width:100%;max-height:calc(100vh - 260px);height:auto;overflow:visible;filter:drop-shadow(0 12px 18px rgba(0,0,0,.4))}
.preview-foot{display:flex;justify-content:space-between;gap:15px;padding:12px 18px;border-top:1px solid #364147;font-size:11px;color:#9caeb6}
.puzzle-export>p{margin-bottom:20px}
.export-card{background:#283237;border:1px solid #3b484e;border-radius:12px;padding:15px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px}
.export-icon{font-size:23px;color:#ff8966}.export-card strong{font-size:13px}.export-card small{font-size:11px;color:#b1bec4;line-height:1.5}
.export-button{background:#f36d47;color:white;border:0;border-radius:9px;padding:11px 9px;font-weight:800;cursor:pointer;font-size:12px;margin-top:6px}
.export-button:hover{filter:brightness(1.12)}.export-button.secondary{background:#8055d9}.export-button.subtle{background:#394951;border:1px solid #5b6a71}
.tip{background:#1b2529;border-left:3px solid #ff7853;padding:12px;margin-top:15px;border-radius:5px}
.tip strong{font-size:12px}.tip p{font-size:11px;color:#b1bdc2;line-height:1.6;margin:6px 0 0}
.error-message{font-size:12px;color:#ffb3a2;line-height:1.5}
.puzzle-page footer{display:flex;justify-content:space-between;gap:20px;padding:15px 24px;font-size:11px;color:#9aabb2;border-top:1px solid #364147}
.puzzle-page footer a{color:inherit}
@media(max-width:1180px){.puzzle-layout{grid-template-columns:280px minmax(360px,1fr)}.puzzle-export{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}.puzzle-export h2,.puzzle-export>p,.puzzle-export .tip,.puzzle-export .error-message{grid-column:1/-1}.export-card{margin:0}.puzzle-controls{max-height:none}}
@media(max-width:750px){.puzzle-layout{display:flex;flex-direction:column}.puzzle-export{display:flex;flex-direction:column}.export-card{width:100%}.preview-area{min-height:300px;padding:15px}.preview-surface svg{max-height:420px}.workspace-head .status{display:none}.puzzle-page footer{flex-direction:column}}

/* Interactive photo positioning / non-proportional resizing */
.puzzle-page .preview-surface svg{touch-action:none;user-select:none}
.puzzle-page .puzzle-draggable-image{cursor:move}
.puzzle-page .puzzle-resize-handle{pointer-events:all;touch-action:none}
.puzzle-page .puzzle-resize-handle[data-resize-handle="nw"],.puzzle-page .puzzle-resize-handle[data-resize-handle="se"]{cursor:nwse-resize}
.puzzle-page .puzzle-resize-handle[data-resize-handle="ne"],.puzzle-page .puzzle-resize-handle[data-resize-handle="sw"]{cursor:nesw-resize}
.puzzle-page .puzzle-resize-handle[data-resize-handle="n"],.puzzle-page .puzzle-resize-handle[data-resize-handle="s"]{cursor:ns-resize}
.puzzle-page .puzzle-resize-handle[data-resize-handle="e"],.puzzle-page .puzzle-resize-handle[data-resize-handle="w"]{cursor:ew-resize}
.puzzle-page .puzzle-image-tools{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:9px 18px;background:#222c31;border-top:1px solid #364147}
.puzzle-page .puzzle-image-tools.is-hidden{display:none}
.puzzle-page .puzzle-image-tools-hint{font-size:11px;color:#b4c3c9;line-height:1.4}
.puzzle-page .puzzle-reset-image{background:#3b474e;color:#fff;border:1px solid #63717a;border-radius:7px;padding:8px 11px;font-size:11px;cursor:pointer;white-space:nowrap}
.puzzle-page .puzzle-reset-image:hover{background:#4b5961}
@media(max-width:750px){.puzzle-page .puzzle-image-tools{flex-wrap:wrap}}

/* Eight puzzle style cards */
.puzzle-page .style-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.puzzle-page .style-options label{min-height:92px;justify-content:center}
.puzzle-page .style-options label:focus-within{outline:2px solid #ff926d;outline-offset:2px}
.puzzle-page .style-options small{line-height:1.3}
.puzzle-page .puzzle-cut-paths{pointer-events:none}