:root{--primary: #0d7377;--primary-light: #14a085;--accent: #ff8c42;--accent-dark: #e67e22;--bg: #f5f7f9;--surface: #fff;--text-main: #2c3e50;--text-muted: #7f8c8d;--border-color: #e0e6ed}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Roboto,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text-main)}.container{max-width:1200px;margin:24px auto;padding:24px;background:var(--surface);border-radius:12px;box-shadow:0 2px 8px #00000014}header hgroup{max-width:800px;margin:auto;text-align:center}h1{margin:0 0 24px;font-size:1.8rem;color:var(--primary);font-weight:700}h2{margin:0 0 24px;font-size:1rem;color:var(--accent-dark);font-weight:700}.logo{display:flex;justify-content:center}.upload-section{margin:auto auto 24px;max-width:500px}.dropzone{border:2px dashed var(--border-color);padding:24px;text-align:center;cursor:pointer;background:var(--bg);border-radius:8px;transition:all .2s}.dropzone:hover{border-color:var(--primary);background:rgba(13,115,119,.02)}.dropzone button{background:var(--accent);color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:600;font-size:.95rem;transition:all .2s;margin-top:8px}.dropzone button:hover{background:var(--accent-dark);transform:translateY(-1px)}.controls{display:grid;grid-template-columns:auto auto auto;gap:16px;margin:24px 0}.control-group{display:flex;flex-direction:column}.control-label{font-size:.9rem;font-weight:500;color:var(--text-main);margin-bottom:6px}.btn-group{display:flex;gap:6px}.btn-type{padding:8px 12px;border-radius:6px;border:1px solid var(--border-color);background:var(--surface);cursor:pointer;font-weight:500;font-size:.9rem;font-family:Roboto,sans-serif;transition:all .2s}.btn-type:hover{border-color:var(--primary)}.btn-type.active{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-with-icon{display:flex;gap:10px;align-items:center}input[type=number]{padding:8px 10px;border-radius:6px;border:1px solid var(--border-color);font-family:Roboto,sans-serif;font-size:.95rem}input[type=number]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #0d73771a}.preview-section{margin:24px 0;max-height:70vh;display:flex;justify-content:center;align-items:center}.preview{position:relative;background:var(--bg);padding:12px;border-radius:8px;border:1px solid var(--border-color)}.img-wrapper{position:relative;display:inline-block;width:100%}.img-wrapper img{width:100%;max-height:60vh;height:auto;display:block;border-radius:6px;object-fit:scale-down}canvas.overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;border-radius:6px}.pieces-label{font-weight:600;color:var(--primary);margin:16px 0 12px;font-size:.95rem}.pieces{display:grid;grid-template-columns:repeat(var(--cols, auto-fill),minmax(100px,1fr));grid-template-rows:repeat(var(--rows, auto),auto);gap:8px;margin-bottom:16px;max-height:70vh;overflow:auto}.pieces.vertical{grid-template-columns:1fr}.piece{cursor:pointer;position:relative;overflow:hidden;border-radius:6px;background:var(--bg);border:2px solid var(--border-color);aspect-ratio:var(--aspect-ratio, 1);transition:all .2s;min-width:60px}.piece img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .15s ease}.piece:hover img{filter:brightness(.9)}.piece.selected{border-color:var(--accent);box-shadow:0 0 0 2px #ff8c4240}.piece.selected img{filter:brightness(.6)}.actions{display:flex;gap:12px;margin-top:16px}.btn-action{padding:12px 24px;border-radius:6px;border:none;font-weight:600;cursor:pointer;font-family:Roboto,sans-serif;font-size:.95rem;transition:all .2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-light);transform:translateY(-1px)}.btn-download{background:var(--accent);color:#fff;margin-top:16px}.btn-download:hover{background:var(--accent-dark);transform:translateY(-1px)}.btn-download:disabled{opacity:.5;cursor:not-allowed;transform:none}@media (max-width: 600px){.controls{grid-template-columns:1fr}.preview-section{max-height:none;min-height:200px}.pieces.grid,.pieces.horizontal{grid-template-columns:repeat(2,1fr)}.pieces.vertical{grid-template-columns:1fr}}.text{font-size:1.1rem;line-height:1.5rem;max-width:800px;margin:auto;text-align:justify}.text ol li,.text ul li{margin-bottom:15px}.text dl dt{margin-top:20px;font-weight:700}