.content label { font-weight:bold; display:block; margin-top:10px; margin-bottom:6px; }
.content input[type=file] { width:100%; padding:12px; margin-bottom:15px; font-size:15px; border:1px solid #ccc; border-radius:6px; box-sizing: border-box; }

.editor {
    display:flex;
    gap:25px;
    flex-wrap:wrap;
    align-items:flex-start;
}
.preview-area {
    flex:2;
    min-width:300px;
}
.controls {
    flex:1;
    min-width:220px;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.canvas-wrapper {
    width:100%;
    height:260px;
    background:#fafafa;
    border:1px solid #ddd;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
}
canvas { object-fit:contain; }

.app {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:10px;
    padding:12px 22px;
    border:none;
    border-radius:4px;
    background:linear-gradient(135deg,#0a3d62,#07517d);
    color:#fff;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:all .35s ease;
    box-shadow:0 6px 18px rgba(78,78,78,0.25);
}
.app .iconn { transition:.35s ease; }
.app:hover { box-shadow:0 10px 25px rgba(0,0,0,0.35); background:linear-gradient(135deg,#07517d,#0a3d62); }
.app:hover .iconn { transform:translateX(6px); }
.app:active { transform:scale(.96); box-shadow:0 4px 12px rgba(0,0,0,.3); }
.app::before {
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;
    background:rgba(255,255,255,.2);
    transform:skewX(-20deg);
    transition:.6s;
}
.app:hover::before { left:120%; }
.download .app { background:#10b981; }
.download .app:hover { background:#059669; }
.download a { text-decoration:none; color:#fff; }
.download { margin-top:20px; text-align:right; border-top:1px solid #292929; padding-top:20px; }
@media(max-width:768px){ .editor{ flex-direction:column; } .preview-area, .controls { width:100%; } }
@media(max-width:480px){ 
    .controls{ width:100%; } 
    canvas { width:100%; height:auto; }

    
 }