*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#f4f2ec;color:#173f35}.designer-page{max-width:1800px;margin:0 auto;padding:24px}.designer-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;background:#fff;border-radius:18px;padding:24px 28px;box-shadow:0 12px 32px rgba(0,0,0,.08)}.designer-topbar h1{margin:4px 0 6px;font-size:30px}.designer-topbar p{margin:0;color:#65736e}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#b08a3c}.top-actions{display:flex;gap:10px;flex-wrap:wrap}.designer-nav{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:7px;margin:14px 0;width:100%;padding:6px;background:#fff;border:1px solid #dde4e0;border-radius:10px}.designer-nav a{min-height:40px;padding:9px 10px;border-radius:7px;text-decoration:none;color:#173f35;background:#eef3f0;border:1px solid #d7e1dc;font-weight:700;text-align:center;display:flex;align-items:center;justify-content:center;min-width:0;white-space:normal;line-height:1.2}.designer-nav a:hover{background:#e2ebe7;color:#173f35}.designer-nav a.active{background:#173f35!important;color:#fff!important;border-color:#173f35!important}.status{margin:0 0 16px;padding:11px 14px;border-radius:9px;background:#eef3f0;color:#173f35;border:1px solid #d7e1dc;font-size:13px}.status.success{background:#eaf7ee;border-color:#b9dec4;color:#23643a}.status.error{background:#fff0ef;border-color:#efc3bf;color:#9b2f28}.designer-layout{display:grid;grid-template-columns:minmax(340px,480px) minmax(0,1fr);gap:18px;align-items:start;width:100%;min-width:0}.editor-panel{display:flex;flex-direction:column;gap:12px;min-width:0}.editor-panel details{background:#fff;border:1px solid #e0e4e1;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.04)}.editor-panel summary{cursor:pointer;padding:16px 18px;font-weight:800;color:#173f35;background:#fbfcfb}.section-body{padding:16px 18px;border-top:1px solid #edf0ee;display:grid;gap:14px}.section-body label,.generated-fields label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#334a43}.section-body input[type=text],.section-body input[type=number],.section-body select,.section-body textarea,.generated-fields input,.generated-fields textarea{width:100%;min-width:0;padding:10px 11px;border:1px solid #cfd8d3;border-radius:9px;background:#fff;color:#173f35;font:inherit}.section-body textarea,.generated-fields textarea{resize:vertical;min-height:76px}.section-body input[type=color]{width:100%;height:42px;padding:3px;border:1px solid #cfd8d3;border-radius:8px;background:#fff}.color-grid,.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.toggles>label:not(:last-child){display:flex;align-items:center;gap:9px;font-weight:700}.toggles input[type=checkbox]{width:18px;height:18px}.generated-fields{display:grid;grid-template-columns:1fr;gap:12px}.help{margin:0;color:#718078;font-size:12px;line-height:1.5}.upload-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.upload-row input[type=file]{max-width:100%;font-size:12px}.image-control{display:grid;gap:8px;padding:12px;border-radius:10px;background:#f8faf9}.button{border:0;border-radius:9px;padding:10px 14px;background:#173f35;color:#fff;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:40px}.button:hover{filter:brightness(1.04)}.button.secondary{background:#fff;color:#173f35;border:1px solid #cfd8d3}.button.secondary:hover{background:#eef3f0;filter:none}.button.danger{background:#9e342c}.danger-zone #resetDesign{background:#8f2e27!important;color:#fff!important;border:1px solid #76231e!important;min-width:112px;font-size:13px;line-height:1.3;text-align:center;text-shadow:0 1px 1px rgba(0,0,0,.22)}.danger-zone #resetDesign:hover,.danger-zone #resetDesign:focus{background:#7d2822!important;color:#fff!important}.danger-zone{background:#fff7f5;border:1px solid #edc9c4;border-radius:14px;padding:16px 18px;display:flex;justify-content:space-between;gap:18px;align-items:center}.danger-zone p{margin:5px 0 0;color:#7d625f;font-size:12px;line-height:1.5}.preview-panel{position:sticky;top:12px;min-width:0;background:#fff;border-radius:16px;border:1px solid #e0e4e1;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.07)}.preview-head{display:flex!important;justify-content:space-between;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid #e5e9e7;min-width:0}.preview-head>div:first-child{display:grid;gap:3px;min-width:0}.preview-head span{font-size:12px;color:#728079}.preview-head>.preview-actions,.preview-actions{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;flex-wrap:wrap!important;min-width:max-content}.preview-actions .button{min-width:84px;min-height:38px;padding:8px 12px}.preview-frame-wrap{height:clamp(520px,calc(100vh - 270px),780px);min-height:0;background:#ddd;overflow:auto}.preview-frame-wrap iframe{display:block;width:100%;height:100%;min-width:0;border:0;background:#fff}.code{font-family:Consolas,"Courier New",monospace!important;font-size:12px!important}.field-help{font-size:11px;color:#78837e;font-weight:400;margin-top:-2px}@media(max-width:1250px){.designer-layout{grid-template-columns:minmax(320px,430px) minmax(0,1fr)}}@media(max-width:1100px){.designer-layout{grid-template-columns:1fr}.preview-panel{position:relative;top:auto}.preview-frame-wrap{height:680px}.designer-nav{grid-template-columns:repeat(3,minmax(0,1fr))!important}}@media(max-width:760px){.designer-page{padding:12px}.designer-topbar{padding:18px;display:block}.designer-topbar h1{font-size:27px}.top-actions{margin-top:14px}.top-actions .button{flex:1 1 160px}.designer-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px;margin:10px 0 14px}.designer-nav a{font-size:12px;padding:8px 6px;min-height:42px}.preview-head{align-items:flex-start;flex-direction:column}.preview-head>.preview-actions,.preview-actions{width:100%;min-width:0;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}.preview-actions .button{width:100%;min-width:0}.color-grid,.two-col{grid-template-columns:1fr}.danger-zone{display:grid}.preview-frame-wrap{height:620px}}@media(max-width:480px){.designer-page{padding:8px}.designer-topbar{padding:15px;border-radius:12px}.designer-nav{padding:5px}.preview-head>.preview-actions,.preview-actions{grid-template-columns:1fr!important}.preview-frame-wrap{height:560px}}