:root{
  --bg-base:#131722;
  --bg-elevated:#1b2130;
  --bg-surface:rgba(255,255,255,.05);
  --bg-surface-strong:rgba(255,255,255,.1);
  --text-primary:#e6ebff;
  --text-secondary:#b0b8d6;
  --text-muted:#7f89ac;
  --border-soft:rgba(255,255,255,.14);
  --border-strong:rgba(255,255,255,.22);
  --brand:#6d7dff;
  --brand-soft:rgba(109,125,255,.25);
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --shadow-sm:0 8px 18px rgba(5,8,16,.24);
  --shadow-md:0 14px 34px rgba(5,8,16,.32);
  --gradient-soft:linear-gradient(135deg,#171d2d 0%,#111722 50%,#0f1320 100%);
}

:root[data-theme-preset="aurora"]{
  --bg-base:#101c20;
  --bg-elevated:#16272d;
  --brand:#31c4d6;
  --brand-soft:rgba(49,196,214,.26);
  --text-primary:#e8fdff;
  --text-secondary:#b9dbe0;
  --gradient-soft:linear-gradient(135deg,#18353d 0%,#10252d 50%,#101f25 100%);
}

:root[data-theme-preset="sunset"]{
  --bg-base:#1f1721;
  --bg-elevated:#2a1d2d;
  --brand:#ff8f5c;
  --brand-soft:rgba(255,143,92,.25);
  --text-primary:#ffece6;
  --text-secondary:#f0c8bc;
  --gradient-soft:linear-gradient(135deg,#3d2432 0%,#281b2f 45%,#1d1723 100%);
}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--gradient-soft);color:var(--text-secondary);overflow:hidden;height:100vh;}

/* TOP BAR */
.topbar{min-height:44px;background:rgba(20,26,40,.65);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-soft);display:flex;align-items:center;padding:var(--space-sm) var(--space-md);gap:var(--space-sm);flex-shrink:0;box-shadow:var(--shadow-sm);}
.topbar-left{display:flex;align-items:center;gap:6px;min-width:180px;font-size:12px;color:var(--text-muted);}
.topbar-left strong{color:var(--text-primary);}
.topbar-center{flex:1;display:flex;justify-content:center;align-items:center;gap:8px;}
.topbar-title{font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:6px;}
.topbar-title .dot{width:8px;height:8px;background:var(--warning);border-radius:50%;}
.topbar-title input{background:transparent;border:none;outline:none;font-size:12px;color:var(--text-primary);text-align:center;font-family:inherit;}
.topbar-right{display:flex;align-items:center;gap:6px;min-width:220px;justify-content:flex-end;flex-wrap:wrap;}
.icon-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;display:flex;align-items:center;font-size:14px;border-radius:4px;transition:all .2s ease;}
.icon-btn:hover{color:var(--text-primary);background:var(--bg-surface);}
.saved-badge{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary);}
.saved-badge .dot{width:7px;height:7px;background:var(--text-muted);border-radius:50%;}
.saved-badge[data-status="saving"] .dot{background:#f59e0b;}
.saved-badge[data-status="saved"] .dot{background:#22c55e;}
.saved-badge[data-status="error"] .dot{background:#ef4444;}
.btn-preview{padding:4px 12px;background:var(--bg-surface);border:1px solid var(--border-soft);color:var(--text-secondary);border-radius:var(--radius-sm);font-size:12px;cursor:pointer;font-family:inherit;transition:all .22s ease;}
.btn-preview:hover{border-color:var(--border-strong);color:var(--text-primary);transform:translateY(-1px);}
.btn-preview:focus-visible,.btn-publish:focus-visible,.theme-preset-select:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
.btn-publish{padding:4px 14px;background:var(--brand);border:none;color:#fff;border-radius:var(--radius-sm);font-size:12px;cursor:pointer;font-family:inherit;font-weight:500;transition:filter .2s ease,transform .2s ease;}
.btn-publish:hover{filter:brightness(1.06);transform:translateY(-1px);}
.theme-preset-control{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted);}
.theme-preset-select{padding:4px 8px;border:1px solid var(--border-soft);background:var(--bg-surface);color:var(--text-secondary);border-radius:var(--radius-sm);font-size:11px;}

/* MAIN LAYOUT */
.main{display:flex;height:calc(100vh - 52px);}

/* LEFT ICON STRIP */
.icon-strip{width:36px;background:rgba(18,24,38,.62);backdrop-filter:blur(6px);border-right:1px solid var(--border-soft);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:2px;flex-shrink:0;}
.strip-btn{width:28px;height:28px;background:none;border:none;color:#6b7280;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:5px;font-size:15px;}
.strip-btn:hover{background:#2d2d2d;color:#d1d5db;}
.strip-btn.active{color:#e5e7eb;background:#2d2d2d;}
.strip-spacer{flex:1;}
.strip-bottom{display:flex;flex-direction:column;align-items:center;gap:2px;padding-bottom:8px;}

/* LEFT PANEL */
.left-panel{width:170px;background:rgba(19,24,35,.72);backdrop-filter:blur(10px);border-right:1px solid var(--border-soft);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;}
.left-panel.closed{width:0;border:none;}
.panel-header{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2d2d2d;flex-shrink:0;}
.panel-header span{font-size:13px;color:#e5e7eb;font-weight:500;}
.panel-close{background:none;border:none;color:#6b7280;cursor:pointer;font-size:14px;line-height:1;}
.panel-close:hover{color:#d1d5db;}
.panel-tree{overflow-y:auto;flex:1;padding:6px 0;}
.tree-group{margin-bottom:2px;}
.tree-group-header{display:flex;align-items:center;gap:6px;padding:5px 10px;font-size:12px;color:#9ca3af;cursor:pointer;user-select:none;}
.tree-group-header:hover{color:#d1d5db;}
.tree-group-header .chevron{font-size:10px;transition:transform 0.15s;}
.tree-group-header .chevron.open{transform:rotate(0deg);}
.tree-group-header .chevron.closed{transform:rotate(-90deg);}
.tree-items{padding-left:4px;}
.tree-item{padding:5px 12px;font-size:12px;color:#9ca3af;cursor:pointer;border-radius:4px;margin:1px 4px;}
.tree-item:hover{background:#242424;color:#d1d5db;}
.tree-item.active{color:#e5e7eb;background:#242424;}

/* COMPONENT PANEL (when category selected) */
.comp-panel{width:280px;background:rgba(20,26,40,.76);backdrop-filter:blur(10px);border-right:1px solid var(--border-soft);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;}
.comp-panel-header{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2d2d2d;flex-shrink:0;}
.comp-panel-header span{font-size:13px;color:#e5e7eb;font-weight:500;}
.comp-panel-close{background:none;border:none;color:#6b7280;cursor:pointer;font-size:16px;}
.comp-panel-close:hover{color:#d1d5db;}
.comp-grid{overflow-y:auto;flex:1;padding:12px;}
.comp-thumb{background:#fff;border-radius:10px;margin-bottom:10px;cursor:pointer;overflow:hidden;border:1px solid #ccd4e0;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;box-shadow:0 8px 20px rgba(15,23,42,.08);}
.comp-thumb:hover{border-color:#93a2c0;transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,23,42,.12);}
.block-card{user-select:none;}
.comp-thumb-label{padding:6px 8px;font-size:11px;color:#9ca3af;background:#1e1e1e;border-top:1px solid #3d3d3d;}
.comp-thumb-preview{height:72px;overflow:hidden;pointer-events:none;transform-origin:top left;}
.comp-thumb-inner{transform:scale(0.35);transform-origin:top left;width:286%;height:286%;}

/* CANVAS */
.canvas-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,rgba(37,46,66,.48) 0%,rgba(20,25,36,.9) 100%);}
.canvas-scroll{flex:1;overflow-y:auto;padding:32px;display:flex;justify-content:center;}
.canvas-page{background:#fff;width:100%;max-width:1048px;min-height:500px;position:relative;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);}
.canvas-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;color:#aaa;}
.canvas-empty p{font-size:13px;margin-top:16px;color:#888;}
.canvas-empty small{font-size:11px;color:#666;}
.canvas-resize-bar{background:#1e1e1e;border-top:1px solid #2d2d2d;padding:4px 12px;display:flex;align-items:center;gap:8px;}
.canvas-px-input{background:#2d2d2d;border:1px solid #3d3d3d;border-radius:4px;color:#d1d5db;font-size:11px;padding:2px 6px;width:64px;}
.breakpoint-btn{padding:2px 8px;background:transparent;border:1px solid #3d3d3d;color:#9ca3af;border-radius:4px;font-size:11px;cursor:pointer;}
.breakpoint-btn.active{background:#3b82f6;color:#fff;border-color:#3b82f6;}

/* SECTION IN CANVAS */
.canvas-section{position:relative;border:2px solid transparent;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.canvas-section:hover{border-color:var(--brand-soft);transform:translateY(-1px);}
.canvas-section.selected{border-color:var(--brand);}
.section-handle{position:absolute;top:6px;left:8px;background:var(--brand);color:#fff;font-size:10px;padding:3px 8px;border-radius:3px;display:flex;align-items:center;gap:6px;z-index:10;white-space:nowrap;opacity:.92;cursor:grab;}
.section-handle:active{cursor:grabbing;}
.section-drag-icon{font-size:12px;line-height:1;letter-spacing:-1px;}
.canvas-drop-highlight{outline:2px dashed var(--brand-soft);outline-offset:-8px;}
.drop-target-highlight{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft) inset;}
.dnd-ghost{opacity:.35 !important;}
.dnd-chosen{box-shadow:0 12px 26px rgba(17,24,39,.24);}
.dnd-dragging{transform:rotate(.6deg);}
.section-enter{opacity:0;transform:translateY(8px) scale(.995);}

/* RIGHT PANEL */
.right-panel{width:180px;background:rgba(19,24,35,.72);backdrop-filter:blur(10px);border-left:1px solid var(--border-soft);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;}
.right-tabs{display:flex;border-bottom:1px solid #2d2d2d;flex-shrink:0;}
.right-tab{flex:1;padding:9px 0;font-size:12px;text-align:center;cursor:pointer;color:#6b7280;border-bottom:2px solid transparent;}
.right-tab.active{color:#e5e7eb;border-bottom-color:#e5e7eb;}
.right-panel-body{flex:1;overflow-y:auto;}
.no-sel-box{margin:12px;background:#222;border-radius:6px;padding:20px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;}
.no-sel-icon{color:#4b5563;font-size:24px;}
.no-sel-text{font-size:11px;color:#3b82f6;line-height:1.4;}
.viewport-row{display:flex;margin:10px 10px 0;gap:0;}
.vp-btn{flex:1;padding:5px 0;background:#222;border:1px solid #333;font-size:11px;color:#9ca3af;text-align:center;cursor:pointer;}
.vp-btn:first-child{border-radius:4px 0 0 4px;}
.vp-btn:last-child{border-radius:0 4px 4px 0;}
.vp-btn:hover{background:#2d2d2d;}

/* Element selected state */
.el-badge-row{padding:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.el-badge{padding:2px 8px;background:#1e3a5f;color:#60a5fa;border-radius:4px;font-size:11px;font-weight:600;}
.el-badge-label{font-size:11px;color:#9ca3af;}

/* Property sections */
.prop-section{border-bottom:1px solid #222;}
.prop-section-header{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;cursor:pointer;font-size:11px;color:#9ca3af;user-select:none;}
.prop-section-header:hover{color:#d1d5db;}
.prop-section-header .chevron{font-size:9px;color:#6b7280;}
.prop-body{padding:6px 10px 10px;}

/* Classes section */
.classes-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;}
.class-tag{display:inline-flex;align-items:center;gap:3px;background:#1e3a5f;color:#93c5fd;border-radius:4px;font-size:10px;padding:2px 5px;}
.class-tag .tag-x{background:none;border:none;color:#60a5fa;cursor:pointer;font-size:10px;padding:0;line-height:1;opacity:0.7;}
.class-tag .tag-x:hover{opacity:1;}
.add-class-input{width:100%;background:#222;border:1px solid #333;border-radius:4px;padding:5px 8px;font-size:11px;color:#d1d5db;font-family:inherit;outline:none;}
.add-class-input:focus{border-color:#3b82f6;}
.add-class-input::placeholder{color:#4b5563;}

/* Property rows */
.prop-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.prop-row label{font-size:10px;color:#6b7280;flex-shrink:0;}
.prop-select{background:#222;border:1px solid #333;color:#d1d5db;border-radius:4px;font-size:10px;padding:3px 4px;font-family:inherit;outline:none;max-width:90px;}
.prop-link{font-size:10px;color:#4b5563;cursor:pointer;padding:2px 0;}
.prop-link:hover{color:#6b7280;}

/* Code view */
.code-view{display:flex;flex-direction:column;flex:1;}
.code-topbar{background:#1a1a1a;border-bottom:1px solid #2d2d2d;padding:4px 10px;display:flex;align-items:center;gap:6px;font-size:11px;flex-shrink:0;}
.breadcrumb-tag{padding:2px 6px;border-radius:3px;cursor:pointer;font-weight:500;color:#9ca3af;background:#242424;}
.breadcrumb-tag:hover{background:#333;color:#d1d5db;}
.breadcrumb-tag.active{background:#3b82f6;color:#fff;}
.breadcrumb-sep{color:#4b5563;font-size:10px;}
.valid-badge{margin-left:auto;padding:2px 8px;background:#166534;color:#86efac;border-radius:4px;font-size:10px;font-weight:600;}
.tidy-btn{padding:2px 8px;background:#242424;border:1px solid #333;border-radius:4px;font-size:10px;color:#9ca3af;cursor:pointer;}
.code-close-btn{padding:2px 6px;background:none;border:none;color:#9ca3af;cursor:pointer;font-size:14px;}
.code-editor{flex:1;background:#111;color:#d4d4d4;font-family:'Monaco','Courier New',monospace;font-size:11px;padding:12px;overflow:auto;white-space:pre;border:none;outline:none;resize:none;}
.code-preview{height:180px;background:#fff;overflow:hidden;border-top:1px solid #2d2d2d;}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:#1a1a1a;}
::-webkit-scrollbar-thumb{background:#3d3d3d;border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#555;}

/* Section HTML templates (for canvas) */
.tw-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:#fff;border-bottom:1px solid #e5e7eb;}
.tw-nav-logo{font-weight:700;font-size:16px;color:#111;}
.tw-nav-links{display:flex;gap:20px;}
.tw-nav-links a{text-decoration:none;color:#6b7280;font-size:13px;}
.tw-nav-actions{display:flex;gap:8px;}
.tw-nav-actions button{padding:5px 12px;border-radius:5px;font-size:12px;cursor:pointer;}
.tw-btn-ghost{background:transparent;border:1px solid transparent;color:#6b7280;}
.tw-btn-primary{background:#3b82f6;color:#fff;border:none;}
.tw-hero{padding:80px 32px;text-align:center;background:#fff;}
.tw-hero h1{font-size:42px;font-weight:800;color:#111;margin-bottom:16px;line-height:1.15;}
.tw-hero p{font-size:16px;color:#6b7280;margin-bottom:28px;max-width:480px;margin-left:auto;margin-right:auto;}
.tw-hero-btns{display:flex;gap:12px;justify-content:center;}
.tw-hero-btns .primary{padding:10px 24px;background:#111;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;}
.tw-hero-btns .secondary{padding:10px 24px;background:transparent;border:1px solid #d1d5db;color:#374151;border-radius:6px;font-size:14px;cursor:pointer;}
.tw-features{padding:64px 32px;background:#f9fafb;}
.tw-features h2{text-align:center;font-size:28px;font-weight:700;color:#111;margin-bottom:40px;}
.tw-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:860px;margin:0 auto;}
.tw-feat-card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:20px;}
.tw-feat-card h3{font-size:14px;font-weight:600;color:#111;margin-bottom:6px;}
.tw-feat-card p{font-size:12px;color:#6b7280;line-height:1.5;}
.tw-cta{padding:64px 32px;background:#111;text-align:center;}
.tw-cta h2{font-size:28px;font-weight:700;color:#fff;margin-bottom:12px;}
.tw-cta p{font-size:14px;color:#9ca3af;margin-bottom:24px;}
.tw-cta button{padding:10px 28px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;}
.tw-pricing{padding:64px 32px;background:#fff;}
.tw-pricing h2{text-align:center;font-size:28px;font-weight:700;color:#111;margin-bottom:40px;}
.tw-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:860px;margin:0 auto;}
.tw-price-card{border:1px solid #e5e7eb;border-radius:8px;padding:24px;}
.tw-price-card.featured{border-color:#3b82f6;background:#eff6ff;}
.tw-price-card h3{font-size:14px;font-weight:700;margin-bottom:8px;color:#111;}
.tw-price-card .price{font-size:28px;font-weight:800;color:#111;margin-bottom:16px;}
.tw-price-card ul{list-style:none;margin-bottom:20px;}
.tw-price-card ul li{font-size:12px;color:#6b7280;padding:3px 0;}
.tw-price-card button{width:100%;padding:8px;border-radius:5px;font-size:12px;cursor:pointer;}
.tw-price-card:not(.featured) button{background:transparent;border:1px solid #d1d5db;color:#374151;}
.tw-price-card.featured button{background:#3b82f6;color:#fff;border:none;}
.tw-footer{background:#111;padding:48px 32px;color:#9ca3af;}
.tw-footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:860px;margin:0 auto 32px;}
.tw-footer h4{font-size:12px;font-weight:600;color:#fff;margin-bottom:12px;}
.tw-footer ul{list-style:none;}
.tw-footer ul li{font-size:12px;padding:3px 0;}
.tw-footer-bottom{border-top:1px solid #333;padding-top:20px;text-align:center;font-size:11px;color:#6b7280;max-width:860px;margin:0 auto;}
.tw-testimonials{padding:64px 32px;background:#f9fafb;}
.tw-testimonials h2{text-align:center;font-size:28px;font-weight:700;color:#111;margin-bottom:40px;}
.tw-test-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:860px;margin:0 auto;}
.tw-test-card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:20px;}
.tw-test-card p{font-size:12px;color:#374151;line-height:1.6;margin-bottom:12px;}
.tw-test-card strong{font-size:12px;color:#111;}
.tw-test-card small{font-size:11px;color:#6b7280;}
.tw-form{padding:64px 32px;background:#fff;}
.tw-form-inner{max-width:400px;margin:0 auto;}
.tw-form h2{font-size:24px;font-weight:700;color:#111;text-align:center;margin-bottom:24px;}
.tw-form input,.tw-form textarea{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:5px;font-size:13px;font-family:inherit;margin-bottom:10px;outline:none;}
.tw-form textarea{height:80px;resize:none;}
.tw-form button{width:100%;padding:10px;background:#111;color:#fff;border:none;border-radius:5px;font-size:13px;font-weight:600;cursor:pointer;}