:root{--accent:#00f;--border:#e5e4e7;--text-dark:#1a1a1a;--text-muted:#6b6b6b;color:var(--text-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f5f5;font-family:system-ui,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5}*,:before,:after{box-sizing:border-box}body{margin:0}#root{max-width:1200px;min-height:100vh;box-shadow:0 0 0 1px var(--border);background:#fff;flex-direction:column;margin:0 auto;display:flex}.app-header{border-bottom:1px solid var(--border);padding:24px 32px}.app-header h1{color:var(--text-dark);margin:0;font-size:24px;font-weight:600}.app-main{flex:1;grid-template-columns:380px 1fr;display:grid}.form-section{border-right:1px solid var(--border);flex-direction:column;gap:16px;padding:24px 32px;display:flex}.form-group{flex-direction:column;gap:4px;display:flex}.form-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:13px;font-weight:600}.form-group input{border:1px solid var(--border);color:var(--text-dark);background:#fff;border-radius:6px;padding:8px 12px;font-family:inherit;font-size:15px;transition:border-color .15s}.form-group input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #0000ff1a}.actions{flex-wrap:wrap;gap:10px;margin-top:8px;display:flex}.btn{cursor:pointer;white-space:nowrap;border-radius:6px;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:600;transition:opacity .15s}.btn:hover{opacity:.85}.btn-primary{background:var(--accent);color:#fff;border:1px solid var(--accent)}.btn-secondary{color:var(--text-dark);border:1px solid var(--border);background:#fff}.photo-upload{align-items:center;gap:12px;display:flex}.photo-preview{object-fit:cover;border:1px solid var(--border);border-radius:4px;width:48px;height:48px}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:#fff;border-radius:12px;flex-direction:column;gap:16px;width:min(480px,90vw);padding:24px;display:flex}.modal-title{margin:0;font-size:18px;font-weight:600}.crop-area{background:#f5f5f5;border-radius:8px;width:100%;height:320px;position:relative;overflow:hidden}.zoom-control{align-items:center;gap:12px;display:flex}.zoom-control label{color:var(--text-muted);font-size:13px;font-weight:600}.zoom-control input[type=range]{flex:1}.modal-actions{justify-content:flex-end;gap:10px;display:flex}.status{margin:0;font-size:13px;line-height:1.4}.status-success{color:#16a34a}.status-error{color:#dc2626}.hint{border-top:1px solid var(--border);color:var(--text-muted);margin:0;padding-top:8px;font-size:12px;line-height:1.5}.preview-section{flex-direction:column;padding:24px 32px;display:flex}.preview-section h2{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 16px;font-size:16px;font-weight:600}.preview-container{border:1px solid var(--border);background:#fff;border-radius:8px;flex:1;overflow:hidden}.preview-container iframe{border:none;width:100%;height:100%;min-height:500px;display:block}@media (width<=768px){.app-main{grid-template-columns:1fr}.form-section{border-right:none;border-bottom:1px solid var(--border);padding:20px 16px}.preview-section,.app-header{padding:20px 16px}}