@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap";
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid}}}.visible{visibility:visible}.fixed{position:fixed}.static{position:static}.container{width:100%}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.table{display:table}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.border{border-style:var(--tw-border-style);border-width:1px}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}:root{--bg:#f4f5fb;--surface:#fff;--surface-2:#f8f9fc;--surface-soft:#eef0f7;--border:#e6e8f0;--border-strong:#d8dbe6;--accent:#ed7a26;--accent-hover:#d56518;--accent-glow:#ed7a2624;--accent-2:#1f1f1f;--text-primary:#14172b;--text-secondary:#5d6580;--text-muted:#9ba3b8;--success:#16a474;--danger:#e0405e;--preview-bg:#ecedf2}*{box-sizing:border-box}html{background:var(--bg);color:var(--text-primary);font-family:Inter,DM Sans,system-ui,sans-serif}body{min-height:100vh;margin:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.form-input,.form-textarea{background:var(--surface);border:1.5px solid var(--border);width:100%;color:var(--text-primary);border-radius:8px;outline:none;padding:9px 12px;font-family:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}.form-textarea{resize:vertical;min-height:78px;line-height:1.55}.form-input:focus,.form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted)}.form-label{letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:5px;font-size:11px;font-weight:600;display:block}.btn-primary{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:9px 18px;font-family:inherit;font-size:13px;font-weight:600;transition:all .15s}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:active{transform:translateY(1px)}.btn-ghost{background:var(--surface);color:var(--text-secondary);border:1.5px solid var(--border);cursor:pointer;border-radius:8px;padding:7px 14px;font-family:inherit;font-size:13px;font-weight:500;transition:all .15s}.btn-ghost:hover{border-color:var(--accent);color:var(--text-primary)}.btn-danger{color:var(--danger);cursor:pointer;background:0 0;border:1.5px solid #e0405e40;border-radius:6px;padding:5px 10px;font-family:inherit;font-size:12px;font-weight:500;transition:all .15s}.btn-danger:hover{border-color:var(--danger);background:#e0405e14}.btn-add{background:var(--accent-glow);color:var(--accent);border:1.5px dashed var(--accent);cursor:pointer;border-radius:8px;width:100%;padding:8px 16px;font-family:inherit;font-size:13px;font-weight:600;transition:all .15s}.btn-add:hover{background:#4f6ef72e}.section-card{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;margin-bottom:12px;padding:16px}.section-nav-panel{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;display:flex;overflow-y:auto}.section-nav-head{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);border-bottom:1px solid var(--border);padding:14px 16px 10px;font-size:11px;font-weight:700}.section-nav-list{flex-direction:column;gap:1px;padding:8px;display:flex}.section-nav-btn{width:100%;color:var(--text-secondary);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;font-family:inherit;font-size:13px;font-weight:500;transition:all .15s;display:flex;position:relative}.section-nav-btn span:first-child{min-width:0}.section-nav-btn:hover{background:var(--surface-soft);color:var(--text-primary)}.section-nav-btn:hover .section-nav-chevron{color:var(--text-secondary)}.section-nav-chevron{color:#0000;flex-shrink:0;font-size:16px;transition:color .15s}.section-nav-btn.active{background:var(--accent-glow);color:var(--accent);font-weight:600}.section-nav-btn.active .section-nav-chevron{color:var(--accent)}.section-nav-btn.active:before{content:"";background:var(--accent);border-radius:0 3px 3px 0;width:3px;position:absolute;top:6px;bottom:6px;left:0}.section-nav-footer{border-top:1px solid var(--border);background:var(--surface-2);flex-shrink:0;margin-top:auto;padding:12px 14px 14px}.section-nav-footer-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;font-size:10px;font-weight:700}.examples-block{border-top:1px solid var(--border);padding:10px 12px 12px}.example-card-list{flex-direction:column;gap:8px;display:flex}.example-card-btn{border:1px solid var(--border);background:var(--surface-2);text-align:left;cursor:pointer;border-radius:8px;width:100%;padding:10px 11px;font-family:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}.example-card-btn:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 8px 22px #14172b14}.example-card-title,.example-card-subtitle{display:block}.example-card-title{color:var(--text-primary);font-size:12px;font-weight:700;line-height:1.3}.example-card-subtitle{color:var(--text-secondary);margin-top:3px;font-size:11px;line-height:1.35}.example-modal-backdrop{z-index:300;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#14172b80;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.example-modal{background:var(--surface);border:1px solid var(--border);border-radius:10px;flex-direction:column;width:min(92vw,760px);max-height:92vh;display:flex;overflow:hidden;box-shadow:0 24px 80px #14172b3d}.example-modal-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;display:flex}.example-modal-title{color:var(--text-primary);font-size:15px;font-weight:700}.example-modal-subtitle{color:var(--text-secondary);margin-top:2px;font-size:12px}.example-preview-area{background:var(--preview-bg);flex:1;min-height:0;padding:18px;overflow:auto}.example-modal-actions{border-top:1px solid var(--border);background:var(--surface);justify-content:flex-end;gap:10px;padding:12px 16px;display:flex}.example-preview-frame{flex-shrink:0;width:588px;height:760px;margin:0 auto}.example-preview-paper{transform-origin:0 0;width:816px;transform:scale(.72);box-shadow:0 12px 36px #14172b1f,0 2px 6px #14172b0d}.builder-panel-head{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.builder-panel-title{color:var(--text-primary);font-size:14px;font-weight:700}.builder-panel-body{flex:1;padding:16px;overflow-y:auto}.toptab-group{background:var(--surface-soft);border-radius:8px;gap:4px;padding:4px;display:flex}.toptab{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;flex:1;padding:7px 12px;font-family:inherit;font-size:13px;font-weight:600}.toptab.active{background:var(--surface);color:var(--text-primary);box-shadow:0 1px 2px #0000000f}.segmented{background:var(--surface-soft);border-radius:8px;gap:3px;padding:3px;display:flex}.segmented button{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;flex:1;padding:6px 8px;font-family:inherit;font-size:12px;font-weight:500;transition:all .15s}.segmented button.active{background:var(--surface);color:var(--text-primary);box-shadow:0 1px 2px #00000014}.segmented button:hover:not(.active){color:var(--text-primary)}.swatch-row{flex-wrap:wrap;gap:6px;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:24px;height:24px;transition:transform .1s}.swatch:hover{transform:scale(1.1)}.swatch.active{border-color:var(--accent)}.toggle{background:var(--border-strong);cursor:pointer;border-radius:999px;flex-shrink:0;width:38px;height:22px;transition:background .15s;position:relative}.toggle.on{background:var(--accent)}.toggle:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #00000026}.toggle.on:after{transform:translate(16px)}.icon-btn{background:var(--surface-soft);border:1px solid var(--border);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;font-size:16px;font-weight:600;line-height:1;transition:all .15s;display:flex}.icon-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}.form-caption{color:var(--text-secondary);margin:0 0 14px;font-size:12px;line-height:1.5}.form-grid{grid-template-columns:1fr 1fr;gap:10px 12px;display:grid}.form-grid>.full{grid-column:1/-1}@media (max-width:1100px){.form-grid{grid-template-columns:1fr}}.card-head{color:var(--accent);text-transform:uppercase;letter-spacing:.05em;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:12px;font-weight:600;display:flex}.bullet-row{align-items:flex-start;gap:6px;margin-bottom:6px;display:flex}.bullet-dot{color:var(--accent);flex-shrink:0;margin-top:10px;font-size:14px}.row-with-remove{align-items:center;gap:6px;margin-bottom:8px;display:flex}.row-with-remove>.form-input{flex:1}.subhead{color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;font-size:11px;font-weight:700}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:.25s both fadeInUp}@media (max-width:980px){.section-nav-panel{max-height:none}.section-nav-list{overflow-y:auto}.section-nav-footer{margin-top:0}.builder-panel-head{padding:12px 16px}.builder-panel-body{min-height:0}.preview-area{padding:12px 10px!important}}@media (max-width:720px){.top-bar{flex-wrap:wrap;gap:8px;min-height:58px;height:auto!important;padding:8px 12px!important}.top-brand{flex:auto;min-width:0}.top-title{display:none}.top-actions{justify-content:space-between;width:100%;gap:6px!important}.top-actions .mobile-tabs{flex:140px}.top-actions>button{flex:none;padding-left:10px;padding-right:10px}}@media (max-width:420px){.top-actions{flex-wrap:wrap}.top-actions .mobile-tabs{flex-basis:100%}.top-actions>button{flex:1 1 0}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}