:root{--bg:#fdf6ec;--panel:#fff;--text:#2b2118;--muted:#7a6a5c;--accent:#d62828;--accent-dark:#a51d1d;--green:#2a9d8f;--border:#eadfce;--radius:16px;color:var(--text);background:var(--bg);font-family:Nunito,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 10% 10%, #ffe8d6 0, transparent 40%), radial-gradient(circle at 90% 30%, #e0f4f1 0, transparent 35%), var(--bg);min-height:100vh;margin:0}.hero{text-align:center;padding:48px 16px 24px;position:relative}.hero h1{color:var(--accent);text-shadow:3px 3px #ffd166;margin:0;font-family:Pacifico,cursive;font-size:clamp(2.2rem,7vw,4rem);font-weight:400}.hero h1 span{color:var(--green)}.hero h1 small{color:var(--text);text-shadow:none;margin-top:8px;font-family:Nunito,sans-serif;font-size:clamp(1rem,3vw,1.3rem);font-weight:900;display:block}.lang-switch{z-index:1;padding:6px 12px;font-size:.85rem;position:absolute;top:12px;right:16px}.lang-switch:hover{border-color:var(--accent)}.hero p{color:var(--muted);font-size:1.1rem}main{flex-direction:column;gap:24px;max-width:1100px;margin:0 auto;padding:0 16px 48px;display:flex}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 8px 24px #5032140f}h2,h3{margin-top:0;font-weight:900}.hint{color:var(--muted);font-size:.95rem}.error{color:var(--accent-dark);background:#fde8e8;border-radius:10px;padding:10px 14px}.notice{color:#7a5300;background:#fff4d6;border-radius:10px;padding:10px 14px}.dropzone{border:3px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;color:var(--muted);flex-direction:column;align-items:center;gap:8px;padding:40px 16px;transition:border-color .2s,background .2s;display:flex}.dropzone:hover,.dropzone.dragging{border-color:var(--accent);background:#fff5f5}.dropzone strong{color:var(--text);font-size:1.2rem}.dropzone-icon{font-size:3rem}.field{flex-direction:column;gap:6px;margin-bottom:14px;font-weight:700;display:flex}button{font:inherit;cursor:pointer;border:2px solid var(--border);color:var(--text);background:#fff;border-radius:999px;padding:8px 16px;font-weight:700}button:disabled{opacity:.6;cursor:not-allowed}.primary{background:var(--accent);border-color:var(--accent);color:#fff}.primary:hover:not(:disabled){background:var(--accent-dark)}.primary.big{width:100%;padding:16px;font-size:1.3rem;font-weight:900}a.button{border-radius:999px;padding:12px 24px;font-weight:900;text-decoration:none;display:inline-block}input:not([type]),input[type=number],select{font:inherit;border:2px solid var(--border);background:#fff;border-radius:10px;padding:10px 12px;font-weight:400}label.checkbox{align-items:center;gap:8px;margin-bottom:14px;display:flex}label.checkbox input{width:18px;height:18px;accent-color:var(--accent)}.actions{flex-wrap:wrap;gap:8px;display:flex}.panel-header{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;display:flex}.count{color:var(--muted);background:var(--bg);border-radius:999px;padding:4px 12px;font-weight:900}.count.complete{color:#fff;background:var(--green)}.slots{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;display:grid}.slot{border-radius:12px;flex-direction:column;gap:6px;padding:6px;transition:background .15s,box-shadow .15s;display:flex}.slot[draggable=true]{cursor:grab}.slot.over{box-shadow:0 0 0 2px var(--accent);background:#fff5f5}.slot.active{box-shadow:0 0 0 3px var(--accent)}.slot-photo{background:var(--bg);border-radius:8px;width:100%;padding:0;line-height:0;overflow:hidden}.slot.empty .slot-photo{color:var(--muted);border-style:dashed;line-height:1.2}.slot-photo img{object-fit:cover;pointer-events:none;width:100%;height:100%}.slot-label{text-align:center;font-size:.9rem;font-weight:700}.framing-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.framing-header h3{margin:0}.framing-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start;gap:24px;margin-top:16px;display:grid}.crop-picker{cursor:crosshair;touch-action:none;border-radius:12px;width:fit-content;max-width:100%;line-height:0;position:relative;overflow:hidden}.crop-picker img{-webkit-user-select:none;user-select:none;max-width:100%;max-height:60vh}.crop-window{pointer-events:none;border:2px solid #fff;position:absolute;box-shadow:0 0 0 9999px #00000080}.framing-side{flex-direction:column;gap:12px;display:flex}.framing-preview{border-radius:8px;width:100%;line-height:0;overflow:hidden;box-shadow:0 6px 18px #00000026}.framing-preview img{object-fit:cover;width:100%;height:100%}.options{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 16px;display:grid}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{align-items:center;gap:8px;display:inline-flex}.chip.active{background:var(--green);border-color:var(--green);color:#fff}.format-icon{border:2px solid;border-radius:2px;height:18px;display:inline-block}.swatches{gap:8px;display:flex}.swatch{width:32px;height:32px;box-shadow:0 0 0 2px var(--border);border:3px solid #fff;padding:0}.swatch.active{box-shadow:0 0 0 3px var(--text)}.result{background:#e8f6f4;border-radius:12px;margin-top:20px;padding:20px}.result h3{margin-bottom:12px}.result ul{color:var(--muted);margin:16px 0 0;padding-left:20px;line-height:1.5}.seo{color:var(--muted);line-height:1.5}.seo h2,.seo h3{color:var(--text)}.seo h3{margin:20px 0 8px}.seo details{border-top:1px solid var(--border);padding:10px 0}.seo summary{color:var(--text);cursor:pointer;font-weight:700}.seo details p{margin:8px 0 0}footer{text-align:center;color:var(--muted);padding:24px 16px 40px;font-size:.85rem}@media (width<=800px){.framing-layout{grid-template-columns:1fr}.slots{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}}
