.hero{background:var(--bg);padding:3rem 1.5rem 2.5rem;text-align:center}.hero-badge{background:var(--green);border-radius:2rem;color:#fff;display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.15em;margin-bottom:1.25rem;padding:.35rem 1rem;text-transform:uppercase}.hero h1{color:var(--text);font-size:clamp(1.75rem,5vw,2.75rem);font-weight:700;line-height:1.2;margin-bottom:.75rem}.hero h1 span{color:var(--green)}.hero p{color:var(--gray);font-size:clamp(1rem,2.5vw,1.2rem);margin:0 auto;max-width:540px}.editor-section{margin:0 auto;max-width:1100px;padding:0 1.5rem 3rem}.editor-card{background:var(--card-bg);border:1px solid #e4e8ee;border-radius:1rem;box-shadow:0 8px 30px rgba(0,0,0,.08);color:var(--text);padding:2rem}.editor-card h2{color:var(--text);font-size:1.25rem;margin-bottom:1.5rem}.editor-layout{align-items:start;display:grid;gap:2rem;grid-template-columns:1fr 1fr}.controls{display:flex;flex-direction:column;gap:1.5rem}.control-group label{color:var(--text);display:block;font-size:.85rem;font-weight:600;letter-spacing:.05em;margin-bottom:.5rem;text-transform:uppercase}.upload-zone{background:#fff;border:2px dashed #c0c8d4;border-radius:.75rem;cursor:pointer;padding:1.5rem;text-align:center;transition:border-color .2s,background .2s}.upload-zone.dragover,.upload-zone:hover{background:#f7fcef;border-color:var(--green)}.upload-zone svg{color:var(--green);height:2.5rem;margin-bottom:.5rem;width:2.5rem}.upload-zone p{color:var(--text);font-size:.9rem}.upload-zone small{color:var(--gray);font-size:.75rem}.upload-zone input{display:none}.gallery{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}.frame-item{aspect-ratio:1;background:#dde3ea;border:3px solid transparent;border-radius:.5rem;cursor:pointer;overflow:hidden;position:relative;transition:border-color .2s,transform .15s}.frame-item:hover{transform:scale(1.04)}.frame-item.active{border-color:var(--green)}.frame-item canvas{display:block;height:100%;width:100%}.frame-item.custom{align-items:center;background:#eef1f5;border:2px dashed #c0c8d4;display:flex;flex-direction:column;gap:.25rem;justify-content:center}.frame-item.custom.active{border-color:var(--green);border-style:solid}.frame-item.custom svg{color:var(--green);height:1.5rem;width:1.5rem}.frame-item.custom span{color:var(--text);font-size:.65rem;font-weight:600;line-height:1.2;text-align:center}.frame-item.custom input{display:none}.frame-item.custom.has-overlay{background:#fff;border-style:solid}.frame-item.custom.has-overlay canvas{height:100%;width:100%}.preview-area{align-items:center;display:flex;flex-direction:column;gap:1.25rem}.preview-wrapper{aspect-ratio:1;background:repeating-conic-gradient(#e9edf2 0 25%,#f8f9fb 0 50%) 0 0 /24px 24px;border:1px solid #e4e8ee;border-radius:.75rem;box-shadow:0 4px 20px rgba(0,0,0,.08);max-width:420px;overflow:hidden;position:relative;width:100%}#previewCanvas{display:block;height:100%;width:100%}.preview-placeholder{align-items:center;color:var(--gray);display:flex;flex-direction:column;gap:.75rem;inset:0;justify-content:center;pointer-events:none;position:absolute}.preview-placeholder svg{height:3rem;opacity:.5;width:3rem}.preview-placeholder p{font-size:.9rem;padding:0 1rem;text-align:center}.preview-placeholder.hidden{display:none}.btn-download{background:var(--green);border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;letter-spacing:.03em;padding:.85rem 2rem;transition:background .2s,transform .15s,opacity .2s}.btn-download:hover:not(:disabled){background:var(--green-light);transform:translateY(-1px)}.btn-download:disabled{cursor:not-allowed;opacity:.45}@media (max-width:768px){.editor-layout{grid-template-columns:1fr}.preview-area{order:-1}.editor-card{padding:1.25rem}}