/* ===== SiteCraft Pro — Builder UI ===== */
:root{
  --bg:#eef1f6;
  --panel:#ffffff;
  --panel-2:#f6f8fb;
  --border:#d3d8e2;
  --border-soft:#e4e8f0;
  --text:#1c2330;
  --text-dim:#566073;
  --text-faint:#8a93a6;
  --accent:#1e3a8a;
  --accent-d:#162c6b;
  --accent-soft:#e8edf8;
  --danger:#b91c1c;
  --danger-soft:#fbe9e9;
  --success:#15803d;
  --shadow-sm:0 1px 2px rgba(15,23,42,.07),0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 4px 14px rgba(15,23,42,.10),0 2px 4px rgba(15,23,42,.06);
  --shadow-lg:0 14px 38px rgba(15,23,42,.18),0 4px 12px rgba(15,23,42,.08);
  --radius:4px;
  --font:'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:13px;color:var(--text)}
::selection{background:var(--accent-soft)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#c4cad6;border-radius:10px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#aab2c2;background-clip:padding-box}

/* Topbar */
.topbar{height:56px;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px;box-shadow:var(--shadow-sm);position:relative;z-index:20}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:34px;height:34px;border-radius:var(--radius);background:linear-gradient(135deg,#1e3a8a,#334e9c);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px;letter-spacing:.5px;box-shadow:0 2px 6px rgba(30,58,138,.4)}
.brand-name{font-weight:700;font-size:16px;display:flex;align-items:center;gap:6px}
.pro-badge{font-size:9px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:2px 5px;border-radius:3px;font-weight:800;letter-spacing:.5px}
.site-name{border:1px solid transparent;background:transparent;padding:6px 10px;border-radius:var(--radius);color:var(--text-dim);width:180px;outline:none;transition:.15s}
.site-name:hover{background:var(--panel-2)}
.site-name:focus{background:#fff;border-color:var(--accent);color:var(--text)}
.top-actions{display:flex;align-items:center;gap:8px}
.device-switch{display:flex;background:var(--bg);border:1px solid var(--border-soft);border-radius:var(--radius);padding:3px;gap:2px}
.device-switch button{padding:6px 10px;border-radius:4px;color:var(--text-faint);transition:.15s;display:flex}
.device-switch button:hover{color:var(--text)}
.device-switch button.active{background:#fff;color:var(--accent);box-shadow:var(--shadow-sm)}
.tb-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--radius);color:var(--text-dim);font-size:13px;font-weight:500;transition:.15s;border:1px solid transparent}
.tb-btn:hover{background:var(--bg);color:var(--text)}
.tb-btn.icon-only{padding:8px}
.tb-btn.primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(30,58,138,.3)}
.tb-btn.primary:hover{background:var(--accent-d)}

/* Workspace */
.workspace{display:flex;height:calc(100vh - 56px);position:relative}
.sidebar{width:268px;background:var(--panel);display:flex;flex-direction:column;border-right:1px solid var(--border);z-index:10}
.sidebar.right{border-right:none;border-left:1px solid var(--border);width:300px}
.tabs{display:flex;border-bottom:1px solid var(--border);background:var(--panel-2)}
.tabs-five .tab{font-size:11px;padding:12px 2px;letter-spacing:.2px}
.tab{flex:1;padding:12px 4px;font-size:12px;font-weight:600;color:var(--text-faint);text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid transparent;transition:.15s;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--panel)}
.tab-content{flex:1;overflow-y:auto}
.tab-pane{display:none;padding:14px}
.tab-pane.active{display:block}
.search-box{margin-bottom:14px}
.search-box input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;outline:none;transition:.15s}
.search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* Element grid */
.element-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.el-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;background:var(--panel-2);border:1px solid var(--border-soft);border-radius:var(--radius);color:var(--text-dim);font-size:11.5px;font-weight:500;transition:.15s;cursor:grab;user-select:none;text-align:center}
.el-card:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.el-card:active{cursor:grabbing}
.el-card svg{width:22px;height:22px}

/* Sections */
.section-list{display:flex;flex-direction:column;gap:8px}
.section-card{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--border-soft);border-radius:var(--radius);background:var(--panel-2);cursor:grab;transition:.15s}
.section-card:hover{border-color:var(--accent);background:var(--accent-soft)}
.section-thumb{width:46px;height:38px;border-radius:4px;background:linear-gradient(135deg,#dbe2f3,#c3cce4);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px}
.section-info{flex:1;min-width:0}
.section-info .s-name{font-weight:600;font-size:13px;color:var(--text)}
.section-info .s-desc{font-size:11px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Pages */
.add-page{width:100%;padding:10px;border:1.5px dashed var(--border);border-radius:var(--radius);color:var(--text-dim);font-weight:600;font-size:13px;margin-bottom:12px;transition:.15s}
.add-page:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pages-list{display:flex;flex-direction:column;gap:6px}
.page-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border-soft);border-radius:var(--radius);background:#fff;cursor:pointer;transition:.15s}
.page-item:hover{background:var(--panel-2)}
.page-item.active{border-color:var(--accent);background:var(--accent-soft)}
.page-item .pg-ico{width:28px;height:28px;border-radius:4px;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.page-item.active .pg-ico{background:#fff;color:var(--accent)}
.page-item .pg-info{flex:1;min-width:0}
.page-item .pg-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-item .pg-slug{font-size:11px;color:var(--text-faint)}
.page-item .pg-actions{display:flex;gap:2px;opacity:0;transition:.15s}
.page-item:hover .pg-actions{opacity:1}
.pg-action{width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--text-faint)}
.pg-action:hover{background:#fff;color:var(--text)}
.pg-action.del:hover{color:var(--danger)}

/* Layers */
.layers-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.layers-list{display:flex;flex-direction:column;gap:2px}
.layer-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:5px;cursor:pointer;font-size:12.5px;color:var(--text-dim);transition:.1s}
.layer-item:hover{background:var(--panel-2)}
.layer-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.layer-item .li-ico{font-size:14px;width:18px;text-align:center}
.layer-item .li-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-item .li-actions{display:none;gap:2px}
.layer-item:hover .li-actions{display:flex}

/* Theme */
.theme-group{margin-bottom:16px}
.theme-label{display:block;font-size:12px;font-weight:600;color:var(--text-dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.color-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;padding:4px;cursor:pointer}
.select-input{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;outline:none}
.select-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.reset-theme{width:100%;padding:9px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;color:var(--text-dim);font-weight:600;font-size:13px;transition:.15s}
.reset-theme:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}

/* Canvas */
.canvas-wrap{flex:1;overflow:auto;background:radial-gradient(circle at 1px 1px,#c8cedb 1px,transparent 0);background-size:24px 24px;background-color:#e4e8f0;padding:30px;display:flex;justify-content:center;align-items:flex-start;position:relative}
.canvas-frame{background:#fff;box-shadow:var(--shadow-lg);border-radius:4px;transition:width .25s;min-height:70vh;transform-origin:top center}
.canvas-frame.device-desktop{width:100%;max-width:1080px}
.canvas-frame.device-tablet{width:768px}
.canvas-frame.device-mobile{width:390px}
.canvas{padding:0;min-height:70vh;position:relative}
.canvas.drag-over{outline:3px dashed var(--accent);outline-offset:-8px}
.zoom-controls{position:fixed;bottom:22px;right:320px;display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:4px;box-shadow:var(--shadow-md);z-index:30}
.zoom-controls button{width:30px;height:30px;border-radius:5px;color:var(--text-dim);font-size:16px;display:flex;align-items:center;justify-content:center}
.zoom-controls button:hover{background:var(--bg);color:var(--text)}
.zoom-controls span{font-size:12px;font-weight:600;color:var(--text-dim);min-width:42px;text-align:center}

.empty-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.empty-hint.hidden{display:none}
.hint-card{background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:10px;padding:32px 40px;text-align:center;box-shadow:var(--shadow-md);max-width:400px;pointer-events:auto}
.hint-icon{font-size:38px;margin-bottom:10px}
.hint-card h3{font-family:var(--serif);font-size:20px;margin-bottom:8px}
.hint-card p{color:var(--text-dim);line-height:1.55;font-size:13.5px}

/* Rendered elements */
.el{position:relative;outline:2px solid transparent;outline-offset:1px;border-radius:3px;transition:outline-color .12s}
.canvas .el{margin:4px 20px;padding:6px 0}
.el:hover{outline-color:#a7b4d8}
.el.selected{outline-color:var(--accent);outline-style:solid}
.el.selected::before{content:attr(data-label);position:absolute;top:-22px;left:-2px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px 4px 0 0;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;z-index:6}

/* base element type styles (canvas + export share these class names) */
.el-h1{font-size:2.4em;font-weight:700;font-family:var(--eh,var(--serif));line-height:1.15;color:var(--et);margin:.3em 0}
.el-h2{font-size:1.9em;font-weight:700;font-family:var(--eh,var(--serif));line-height:1.2;color:var(--et);margin:.4em 0}
.el-h3{font-size:1.45em;font-weight:700;font-family:var(--eh,var(--serif));line-height:1.25;color:var(--et);margin:.5em 0}
.el-text{font-size:1em;line-height:1.65;color:var(--et)}
.el-button{display:inline-block;padding:11px 24px;background:var(--ea);color:#fff;border-radius:var(--er);font-weight:600;text-decoration:none;cursor:pointer;margin:6px 0;transition:opacity .2s}
.el-link{color:var(--ea);text-decoration:underline;cursor:pointer}
.el-image{width:100%;height:auto;display:block;border-radius:var(--er)}
.el-divider{border:0;border-top:1px solid #d1d5db;margin:14px 0}
.el-spacer{height:40px}
.el-quote{font-family:var(--serif);font-size:1.2em;font-style:italic;border-left:4px solid var(--ea);padding:8px 20px;color:var(--text-dim);background:#f9fafb;margin:12px 0;border-radius:0 var(--er) var(--er) 0}
.el-video{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--er)}
.el-map{width:100%;height:300px;border:0;border-radius:var(--er)}
.el-form{background:#f9fafb;border:1px solid var(--border-soft);padding:22px;border-radius:var(--er)}
.el-form label{display:block;font-weight:600;font-size:13px;margin:10px 0 4px}
.el-form input,.el-form textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:4px}
.el-form button{margin-top:14px;padding:10px 22px;background:var(--ea);color:#fff;border-radius:4px;font-weight:600;cursor:pointer}
.el-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.el-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}
.el-columns{display:flex;gap:16px}
.el-col{flex:1;min-height:40px;background:#f9fafb;border:1px dashed var(--border);border-radius:4px;padding:12px}
.el-iconlist{list-style:none;display:flex;flex-direction:column;gap:10px}
.el-iconlist li{display:flex;gap:10px;align-items:flex-start;color:var(--et)}
.el-iconlist .ic{color:var(--ea);flex-shrink:0;margin-top:2px}
.el-cardbox{border:1px solid var(--border);border-radius:var(--er);padding:22px;background:#fff;box-shadow:var(--shadow-sm)}
.el-cardbox h4{font-family:var(--serif);font-size:1.2em;margin-bottom:8px}
.el-cardbox p{color:var(--text-dim);line-height:1.6}
.el-hero{background:linear-gradient(135deg,var(--ea),#7c3aed);color:#fff;padding:60px 40px;text-align:center;border-radius:var(--er)}
.el-hero h1{font-family:var(--serif);font-size:2.8em;line-height:1.1;margin-bottom:14px}
.el-hero p{font-size:1.15em;opacity:.92;margin-bottom:22px}
.el-hero a{display:inline-block;padding:12px 28px;background:#fff;color:var(--ea);border-radius:var(--er);font-weight:700;text-decoration:none}
.el-navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--border-soft);background:#fff}
.el-navbar .brand-txt{font-family:var(--serif);font-weight:700;font-size:1.3em;color:var(--et)}
.el-navbar nav{display:flex;gap:20px;flex-wrap:wrap}
.el-navbar nav a{color:var(--text-dim);text-decoration:none;font-weight:500}
.el-navbar nav a:hover{color:var(--ea)}
.el-footer{background:#111827;color:#d1d5db;padding:40px 30px;text-align:center}
.el-footer a{color:#a5b4fc;text-decoration:none}
.el-htmlbox{background:#0f172a;color:#e2e8f0;padding:16px;border-radius:var(--er);font-family:'Courier New',monospace;font-size:12.5px;white-space:pre-wrap;overflow:auto}

/* Pricing */
.el-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.price-card{border:1px solid var(--border);border-radius:var(--er);padding:26px 22px;text-align:center;background:#fff;transition:.2s}
.price-card.featured{border-color:var(--ea);box-shadow:0 10px 30px rgba(30,58,138,.18);transform:scale(1.03);position:relative}
.price-card .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--ea);color:#fff;font-size:10px;font-weight:700;padding:4px 12px;border-radius:99px;text-transform:uppercase;letter-spacing:.5px}
.price-card h4{font-family:var(--serif);font-size:1.25em;margin-bottom:6px}
.price-amount{font-size:2.6em;font-weight:800;font-family:var(--serif);margin:8px 0;color:var(--et)}
.price-amount small{font-size:.4em;font-weight:500;color:var(--text-faint)}
.price-features{list-style:none;margin:18px 0;text-align:left}
.price-features li{padding:7px 0;border-bottom:1px solid var(--border-soft);font-size:.92em;color:var(--text-dim)}
.price-card .el-button{width:100%;text-align:center}

/* Testimonials */
.el-testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testimonial{background:#fff;border:1px solid var(--border-soft);border-radius:var(--er);padding:22px;box-shadow:var(--shadow-sm)}
.testimonial .stars{color:#f59e0b;margin-bottom:8px;letter-spacing:2px}
.testimonial p{font-style:italic;color:var(--text-dim);line-height:1.6;margin-bottom:14px}
.testimonial .who{display:flex;align-items:center;gap:10px}
.testimonial .who img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.testimonial .who strong{display:block;font-size:13px}
.testimonial .who span{font-size:11px;color:var(--text-faint)}

/* Stats */
.el-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center;padding:20px 0}
.stat .num{font-size:2.6em;font-weight:800;font-family:var(--serif);color:var(--ea);line-height:1}
.stat .lbl{color:var(--text-dim);font-size:.9em;margin-top:6px;text-transform:uppercase;letter-spacing:.5px}

/* FAQ */
.el-faq{border-top:1px solid var(--border-soft)}
.faq-item{border-bottom:1px solid var(--border-soft)}
.faq-q{font-weight:700;padding:16px 4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);font-size:1.05em}
.faq-q::after{content:"+";color:var(--ea);font-size:1.3em;transition:.2s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--text-dim);line-height:1.6}
.faq-item.open .faq-a{max-height:300px;padding:0 4px 16px}

/* Countdown */
.el-countdown{display:flex;gap:14px;justify-content:center;padding:20px}
.cd-unit{background:var(--ea);color:#fff;border-radius:var(--er);padding:16px 18px;min-width:78px;text-align:center}
.cd-num{font-size:2.4em;font-weight:800;font-family:var(--serif);line-height:1}
.cd-lbl{font-size:.7em;text-transform:uppercase;letter-spacing:1px;opacity:.85;margin-top:4px}

/* Social */
.el-social{display:flex;gap:12px;justify-content:center;align-items:center;padding:10px 0}
.el-social a{width:42px;height:42px;border-radius:50%;background:var(--accent-soft);color:var(--ea);display:flex;align-items:center;justify-content:center;transition:.2s}
.el-social a:hover{background:var(--ea);color:#fff;transform:translateY(-2px)}

/* Team */
.el-team{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center}
.team-card .avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;margin:0 auto 10px;border:3px solid var(--accent-soft)}
.team-card h4{font-family:var(--serif);font-size:1.1em}
.team-card .role{color:var(--ea);font-size:.85em;font-weight:600;margin-bottom:6px}
.team-card p{color:var(--text-dim);font-size:.88em;line-height:1.5}

/* CTA */
.el-cta{background:linear-gradient(135deg,var(--ea),#475569);color:#fff;padding:46px 30px;text-align:center;border-radius:var(--er)}
.el-cta h2{font-family:var(--serif);font-size:2em;margin-bottom:10px}
.el-cta p{opacity:.92;margin-bottom:20px}
.el-cta .el-button{background:#fff;color:var(--ea)}

/* Logos */
.el-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px;padding:20px;opacity:.7}
.el-logos span{font-family:var(--serif);font-size:1.5em;font-weight:700;color:var(--text-dim);letter-spacing:1px}

/* Alert/badge */
.el-alert{padding:14px 18px;border-radius:var(--er);border-left:4px solid var(--ea);background:var(--accent-soft);color:var(--text-dim)}
.el-alert.success{border-color:#15803d;background:#ecfdf5;color:#14532d}
.el-alert.warning{border-color:#d97706;background:#fffbeb;color:#78350f}
.el-alert.danger{border-color:#b91c1c;background:#fef2f2;color:#7f1d1d}
.el-badge{display:inline-block;padding:4px 12px;background:var(--accent-soft);color:var(--ea);border-radius:99px;font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:.5px}

[contenteditable="true"]{outline:1px dashed var(--accent);outline-offset:2px;border-radius:2px}
.canvas a,.canvas button,.canvas iframe,.canvas input,.canvas textarea,.canvas select{pointer-events:none}
.canvas [contenteditable="true"]{pointer-events:auto}

/* Properties */
.props-header{padding:16px;border-bottom:1px solid var(--border);background:var(--panel-2);display:flex;flex-direction:column;gap:4px}
.props-header h3{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim)}
.selected-label{font-size:11px;color:var(--accent);font-weight:700}
.props-body{flex:1;overflow-y:auto;padding:14px}
.props-empty{text-align:center;padding:30px 16px;color:var(--text-faint)}
.props-empty-icon{font-size:32px;margin-bottom:10px}
.props-empty p{font-size:12.5px;line-height:1.5}
.prop-section{margin-bottom:14px;border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;background:#fff}
.prop-section > summary{padding:10px 12px;font-weight:600;font-size:12px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;background:var(--panel-2);text-transform:uppercase;letter-spacing:.4px;color:var(--text-dim)}
.prop-section > summary::-webkit-details-marker{display:none}
.prop-section > summary::after{content:"▾";font-size:10px;color:var(--text-faint)}
.prop-section[open] > summary::after{transform:rotate(180deg)}
.prop-section .inner{padding:12px}
.field{margin-bottom:12px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:11px;font-weight:600;color:var(--text-dim);margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.field input[type="text"],.field input[type="url"],.field input[type="number"],.field textarea,.field select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:4px;background:#fff;outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{resize:vertical;min-height:60px;font-family:inherit}
.field-row{display:flex;gap:8px}
.field-row .field{flex:1}
.color-row{display:flex;gap:6px;align-items:center}
.color-row input[type="color"]{width:38px;height:34px;border:1px solid var(--border);border-radius:4px;padding:2px;background:#fff;cursor:pointer}
.color-row input[type="text"]{flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:4px}
.range-row{display:flex;align-items:center;gap:8px}
.range-row input[type="range"]{flex:1}
.range-row span{font-size:12px;color:var(--text-dim);width:44px;text-align:right}
.btn-swatch{width:100%;padding:8px;border:1px solid var(--border);border-radius:4px;background:#fff;font-size:12px;font-weight:600;color:var(--text-dim);transition:.15s}
.btn-swatch:hover{border-color:var(--accent);color:var(--accent)}
.upload-row{display:flex;gap:6px}
.upload-row input{flex:1}
.upload-btn{padding:8px 10px;background:var(--accent);color:#fff;border-radius:4px;font-size:12px;font-weight:600;white-space:nowrap}
.upload-btn:hover{background:var(--accent-d)}
.alignment-row{display:flex;gap:4px}
.alignment-row button{flex:1;padding:7px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text-faint)}
.alignment-row button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.nested-card{border:1px solid var(--border-soft);border-radius:6px;padding:8px;margin-bottom:8px;background:var(--panel-2)}
.delete-el{width:100%;padding:10px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;color:var(--danger);font-weight:700;font-size:13px;transition:.15s;margin-top:4px}
.delete-el:hover{background:var(--danger-soft);border-color:var(--danger)}

/* Float toolbar */
.float-toolbar{position:fixed;display:none;gap:2px;background:#1f2937;border-radius:6px;padding:3px;box-shadow:var(--shadow-lg);z-index:50}
.float-toolbar.show{display:flex}
.float-toolbar button{width:30px;height:30px;border-radius:4px;color:#d1d5db;display:flex;align-items:center;justify-content:center}
.float-toolbar button:hover{background:#374151;color:#fff}
.float-toolbar button.danger:hover{background:var(--danger)}

/* Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:100;padding:30px}
.modal-overlay.show{display:flex;animation:fade .15s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:10px;box-shadow:var(--shadow-lg);width:100%;max-width:480px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:pop .18s}
.modal.small{max-width:400px}
.modal.large{max-width:1100px;height:88vh}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px}
.modal-head h3{font-family:var(--serif);font-size:18px;flex:1}
.modal-close{width:32px;height:32px;border-radius:6px;color:var(--text-faint);font-size:16px;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--bg);color:var(--text)}
.modal-tabs{display:flex;gap:4px;overflow-x:auto}
.modal-tabs button{padding:6px 12px;border-radius:6px;font-size:13px;font-weight:600;color:var(--text-dim)}
.modal-tabs button.active{background:var(--accent-soft);color:var(--accent)}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal.large .modal-body{padding:0;background:#fff}
.modal.large iframe{width:100%;height:100%;border:0;background:#fff;display:block}
.form-row{margin-bottom:16px}
.form-row label{display:block;font-size:12px;font-weight:600;color:var(--text-dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.form-row input,.form-row textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px}
.form-row input:focus,.form-row textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.btn{padding:9px 18px;border-radius:6px;font-weight:600;font-size:13px;border:1px solid transparent}
.btn.ghost{background:#fff;border-color:var(--border);color:var(--text-dim)}
.btn.ghost:hover{background:var(--bg)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-d)}
.fav-preview{width:40px;height:40px;border:1px solid var(--border);border-radius:6px;background:#fff center/contain no-repeat}

/* Templates modal */
.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tpl-card{border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:.15s;background:#fff}
.tpl-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.tpl-thumb{height:120px;background:linear-gradient(135deg,#dbe2f3,#c3cce4);display:flex;align-items:center;justify-content:center;font-size:36px}
.tpl-info{padding:12px}
.tpl-info h4{font-family:var(--serif);font-size:14px;margin-bottom:2px}
.tpl-info p{font-size:11.5px;color:var(--text-faint)}

/* Export */
.export-desc{color:var(--text-dim);line-height:1.6;margin-bottom:18px;font-size:13px}
.export-desc code{background:var(--bg);padding:1px 6px;border-radius:4px;font-family:'Courier New',monospace;font-size:12px}
.export-options{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.checkbox{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer;color:var(--text)}
.checkbox input{width:16px;height:16px;accent-color:var(--accent)}
.checkbox code{background:var(--bg);padding:1px 5px;border-radius:4px;font-family:'Courier New',monospace;font-size:11.5px}
.file-tree{background:#0f172a;color:#cbd5e1;border-radius:8px;padding:14px 16px;font-family:'Courier New',monospace;font-size:12.5px;line-height:1.9;margin-bottom:18px;max-height:200px;overflow-y:auto}
.file-tree .folder{color:#fbbf24}
.file-tree .file{color:#93c5fd}
.file-tree .size{color:#64748b;font-size:11px;margin-left:8px}
.download-btn{width:100%;padding:13px;background:var(--success);color:#fff;border-radius:8px;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
.download-btn:hover{background:#15803d}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#111827;color:#fff;padding:12px 22px;border-radius:8px;font-size:13px;font-weight:500;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.25s;z-index:200}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.drop-indicator{height:3px;background:var(--accent);border-radius:2px;margin:4px 20px;box-shadow:0 0 8px rgba(30,58,138,.5)}

/* Scroll animations (used in export too) */
[data-anim]{opacity:0;transition:opacity .7s,transform .7s}
[data-anim="fade-up"]{transform:translateY(24px)}
[data-anim="fade-left"]{transform:translateX(-30px)}
[data-anim="fade-right"]{transform:translateX(30px)}
[data-anim="zoom"]{transform:scale(.92)}
[data-anim].in-view{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-anim]{opacity:1;transform:none;transition:none}}

/* Responsive component collapse */
@media(max-width:720px){
  .el-pricing,.el-testimonials,.el-team{grid-template-columns:1fr}
  .el-stats{grid-template-columns:repeat(2,1fr)}
  .el-columns{flex-direction:column}
  .el-gallery{grid-template-columns:1fr 1fr}
  .el-navbar{flex-direction:column;gap:10px;align-items:flex-start}
  .price-card.featured{transform:none}
  .zoom-controls{right:20px}
}

/* Progress bars */
.el-progress{margin:14px 0}
.el-progress .pbar-label{display:flex;justify-content:space-between;font-size:.9em;margin-bottom:6px;color:var(--text-dim)}
.el-progress .pbar-track{height:10px;background:#e5e7eb;border-radius:99px;overflow:hidden}
.el-progress .pbar-fill{height:100%;background:var(--ea);border-radius:99px;transition:width 1s}

/* Steps */
.el-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center;margin:18px 0}
.step .step-num{width:48px;height:48px;border-radius:50%;background:var(--ea);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2em;margin:0 auto 10px;font-family:var(--serif)}
.step h4{font-family:var(--serif);margin-bottom:4px}
.step p{color:var(--text-dim);font-size:.9em;line-height:1.5}

/* Timeline */
.el-timeline{position:relative;padding-left:30px;margin:18px 0}
.el-timeline::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--ea);opacity:.3}
.tl-item{position:relative;padding-bottom:22px}
.tl-item::before{content:'';position:absolute;left:-25px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--ea);border:3px solid #fff;box-shadow:0 0 0 2px var(--ea)}
.tl-item .tl-date{font-size:.8em;color:var(--ea);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.tl-item h4{font-family:var(--serif);margin:2px 0}
.tl-item p{color:var(--text-dim);font-size:.9em;line-height:1.5}

/* Table */
.el-table-wrap{overflow-x:auto;margin:18px 0}
.el-table{width:100%;border-collapse:collapse;font-size:.95em}
.el-table th{background:var(--ea);color:#fff;padding:12px 16px;text-align:left;font-family:var(--serif)}
.el-table td{padding:10px 16px;border-bottom:1px solid #e5e7eb}
.el-table tr:nth-child(even) td{background:#f9fafb}

/* Newsletter */
.el-newsletter{background:linear-gradient(135deg,var(--ea),#475569);color:#fff;padding:40px;border-radius:var(--er);text-align:center;margin:18px 0}
.el-newsletter h3{font-family:var(--serif);font-size:1.6em;margin-bottom:6px}
.el-newsletter p{opacity:.9;margin-bottom:18px}
.el-newsletter form{display:flex;gap:8px;max-width:460px;margin:0 auto}
.el-newsletter input{flex:1;padding:12px 16px;border:none;border-radius:var(--er);font-family:inherit}
.el-newsletter button{padding:12px 24px;background:#fff;color:var(--ea);border:none;border-radius:var(--er);font-weight:700;cursor:pointer;white-space:nowrap}

/* Marquee */
.el-marquee{overflow:hidden;background:var(--accent-soft,#f3f4f6);padding:14px 0;margin:10px 0;border-radius:var(--er)}
.el-marquee .mq-track{display:inline-flex;gap:40px;white-space:nowrap;animation:mq-scroll 25s linear infinite;padding-left:100%}
.el-marquee .mq-track span{font-weight:600;color:var(--ea);font-family:var(--serif)}
@keyframes mq-scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* Tabs */
.el-tabs{margin:18px 0;border:1px solid var(--border-soft,#e5e7eb);border-radius:var(--er);overflow:hidden}
.el-tabs .tab-btns{display:flex;border-bottom:1px solid var(--border-soft,#e5e7eb);background:#f9fafb}
.el-tabs .tab-btns button{flex:1;padding:12px;border:none;background:transparent;font-weight:600;cursor:pointer;color:var(--text-dim);border-bottom:2px solid transparent;font-family:inherit}
.el-tabs .tab-btns button.active{color:var(--ea);border-bottom-color:var(--ea);background:#fff}
.el-tabs .tab-pane{padding:18px;display:none;line-height:1.6;color:var(--text-dim)}
.el-tabs .tab-pane.active{display:block}

/* Audio */
.el-audio{width:100%;margin:10px 0}

/* Embed */
.embed-responsive{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;margin:14px 0;border-radius:var(--er)}
.embed-responsive iframe,.embed-responsive embed,.embed-responsive object,.embed-responsive video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.canvas .embed-responsive{pointer-events:none}
.canvas .embed-responsive iframe{pointer-events:none}

/* Context menu */
.context-menu{position:fixed;z-index:500;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);padding:6px;min-width:180px;display:none}
.context-menu.show{display:block;animation:pop .12s}
.context-menu button{width:100%;text-align:left;padding:8px 12px;border-radius:5px;font-size:13px;color:var(--text);display:flex;align-items:center;gap:8px}
.context-menu button:hover{background:var(--bg)}
.context-menu button.danger{color:var(--danger)}
.context-menu button.danger:hover{background:var(--danger-soft)}
.cm-sep{height:1px;background:var(--border-soft);margin:4px 0}

/* Preset swatches */
.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.preset-swatch{aspect-ratio:1;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:.15s;position:relative}
.preset-swatch:hover{transform:scale(1.08);border-color:var(--text)}
.preset-swatch.active{border-color:var(--text);box-shadow:0 0 0 2px #fff inset}

/* Element copy indicator */
@keyframes copyPulse{0%{box-shadow:0 0 0 0 rgba(30,58,138,.5)}100%{box-shadow:0 0 0 12px rgba(30,58,138,0)}}
.el.copied{animation:copyPulse .6s ease-out}