:root{
  --bg: #fbf7f1;
  --panel: #ffffff;
  --ink: #201a14;
  --ink-soft: #5b5347;
  --line: #e4dbcb;
  --accent: #ff5d3a;
  --accent-soft: #ffe6dd;
  --moss: #2f6a4f;
  --moss-soft: #e2efe6;
  --plum: #4a3a7a;
  --plum-soft: #ece7f7;
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ font-family: var(--font-body); color: var(--ink); background: var(--bg); overflow:hidden; }
button{ font-family: inherit; }
input{ font-family: inherit; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:999px; font-weight:700; cursor:pointer; border:1.5px solid transparent;
  transition: transform .12s ease, background .12s ease;
}
.btn-sm{ padding:8px 16px; font-size:0.85rem; }
.btn-primary{ background: var(--accent); color:#fff; }
.btn-primary:hover{ transform: translateY(-1px); }
.btn-ghost{ background:transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover{ background: var(--bg); }
.btn-publish{ background: var(--moss); color:#fff; }
.btn-publish:hover{ transform: translateY(-1px); }
.btn:disabled{ opacity:0.35; cursor:not-allowed; transform:none; }
.icon-btn{ padding: 8px 12px; font-size:1rem; }
.history-btns{ display:flex; gap:6px; margin-right:4px; }

.templates-wrap{ position:relative; }
.templates-menu{
  display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:40;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.35);
  padding:10px; width:260px;
}
.templates-menu.open{ display:block; }
.template-card{
  display:block; width:100%; text-align:left; background:transparent; border:none; cursor:pointer;
  padding:10px 12px; border-radius:10px; font-weight:700; font-size:0.88rem; color: var(--ink);
}
.template-card:hover{ background: var(--bg); }
.template-card .desc{ display:block; font-weight:500; font-size:0.78rem; color: var(--ink-soft); margin-top:2px; }

.app{
  display:grid;
  grid-template-columns: 250px 1fr 300px;
  grid-template-rows: 60px 44px 1fr;
  height:100vh;
  width:100vw;
}

.topbar{
  grid-column: 1 / 4;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 20px; border-bottom:1px solid var(--line); background: var(--panel);
}
.topbar-left{ display:flex; align-items:center; gap:18px; }
.logo{ font-family: var(--font-head); font-weight:600; font-size:1.15rem; text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:7px; }
.logo .dot{ width:8px; height:8px; border-radius:3px; background: var(--accent); display:inline-block; transform: rotate(15deg); }
.title-input{
  border:1px solid transparent; background:transparent; font-weight:700; font-size:0.95rem;
  padding:7px 10px; border-radius:8px; color: var(--ink); min-width:160px;
}
.title-input:hover, .title-input:focus{ border-color: var(--line); outline:none; background: var(--bg); }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.save-status{ font-size:0.8rem; color: var(--ink-soft); margin-right:6px; }

.page-tabs-bar{
  grid-column: 1 / 4; grid-row: 2;
  display:flex; align-items:center; padding: 0 16px;
  border-bottom:1px solid var(--line); background: var(--bg);
  overflow-x:auto;
}
.page-tabs{ display:flex; gap:6px; align-items:center; }
.page-tab{
  padding:7px 14px; border-radius:8px 8px 0 0; border:none; background:transparent;
  font-weight:700; font-size:0.85rem; color: var(--ink-soft); cursor:pointer; white-space:nowrap;
}
.page-tab:hover{ background: rgba(0,0,0,0.03); color: var(--ink); }
.page-tab.active{ background: var(--panel); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.page-tab-add{
  padding:7px 12px; border-radius:8px; border:1.5px dashed var(--line); background:transparent;
  font-weight:700; font-size:0.82rem; color: var(--ink-soft); cursor:pointer; white-space:nowrap; margin-left:4px;
}
.page-tab-add:hover{ border-color: var(--accent); color: var(--accent); }

.palette{
  grid-row:3; border-right:1px solid var(--line); background: var(--panel);
  overflow-y:auto; padding: 18px 16px;
}
.properties{
  grid-row:3; border-left:1px solid var(--line); background: var(--panel);
  overflow-y:auto; padding: 18px 16px;
}
.panel-title{ font-weight:800; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em; color: var(--ink-soft); margin-bottom:6px; }
.panel-hint{ font-size:0.85rem; color: var(--ink-soft); line-height:1.5; margin: 0 0 16px; }

.palette-list{ display:flex; flex-direction:column; gap:10px; }
.palette-item{
  display:flex; align-items:center; gap:10px;
  border:1.5px dashed var(--line); border-radius:12px; padding:12px 12px;
  cursor:grab; background: var(--bg); font-weight:700; font-size:0.88rem;
  transition: border-color .12s ease, background .12s ease;
}
.palette-item:hover{ border-color: var(--accent); background: var(--accent-soft); }
.palette-item .icon{ font-size:1.1rem; width:22px; text-align:center; }

.canvas-wrap{
  grid-row:3; overflow:auto; background:#efe7d9; padding: 40px 30px;
}
.canvas{
  width: 960px; margin: 0 auto; background:#fff; min-height: 500px;
  border-radius:6px; box-shadow: 0 20px 45px -25px rgba(32,26,20,0.4);
  position:relative;
}
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color: var(--ink-soft); padding: 90px 20px; gap:14px;
}
.empty-icon{ font-size:2rem; width:56px; height:56px; border-radius:16px; background:var(--bg); display:flex; align-items:center; justify-content:center; color: var(--accent); font-weight:800; }
.empty-or{ font-size:0.8rem; color:#b7ab98; margin: 8px 0 0; }
.empty-templates{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.empty-templates .template-card{ border:1.5px dashed var(--line); border-radius:12px; width:auto; }

.canvas-block{
  position:absolute; padding: 10px 14px; border-radius:8px;
  border: 1.5px solid transparent; cursor:grab; touch-action:none;
}
.canvas-block:active{ cursor:grabbing; }
.block-surface{ border-radius:10px; }
.canvas-block:hover{ border-color: var(--line); }
.canvas-block.selected{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); z-index:999 !important; }
.canvas-block .block-toolbar{
  position:absolute; top:-30px; right:8px; display:none; gap:4px; z-index:5;
}
.canvas-block:hover .block-toolbar, .canvas-block.selected .block-toolbar{ display:flex; }
.block-toolbar button, .block-toolbar .grip{
  width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:#fff;
  cursor:pointer; font-size:0.8rem; display:flex; align-items:center; justify-content:center;
}
.block-toolbar button:hover{ background: var(--bg); }
.block-toolbar .grip{ cursor:grab; color: var(--ink-soft); }

.resize-handle{
  position:absolute; top:50%; right:-7px; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--accent);
  cursor:ew-resize; display:none; z-index:6;
}
.canvas-block:hover .resize-handle, .canvas-block.selected .resize-handle{ display:block; }

.guide-line{ position:absolute; background: var(--plum); z-index:1000; pointer-events:none; }
.guide-v{ top:0; bottom:0; width:1px; }
.canvas-block [contenteditable]{ cursor:text; }

[contenteditable]:focus{ outline: 2px dashed var(--accent-soft); outline-offset:3px; border-radius:4px; }
[contenteditable]:empty:before{ content: attr(data-placeholder); color:#b7ab98; }

/* --- content element base styles (mirrors export) --- */
.el-heading{ font-family: var(--font-head); font-weight:600; margin:0; line-height:1.15; }
.el-heading.h1{ font-size:2.4rem; }
.el-heading.h2{ font-size:1.9rem; }
.el-heading.h3{ font-size:1.4rem; }
.el-text{ font-size:1.02rem; line-height:1.6; margin:0; color:#4a4237; }
.el-button{ display:inline-block; padding:12px 24px; border-radius:999px; font-weight:700; text-decoration:none; }
.el-button.style-primary{ background: var(--accent); color:#fff; }
.el-button.style-outline{ background:transparent; border:2px solid var(--ink); color:var(--ink); padding:10px 22px; }
.el-image{ max-width:100%; border-radius:10px; display:block; }
.el-image.placeholder{ background: linear-gradient(135deg,var(--moss-soft),var(--plum-soft)); min-height:180px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:0.85rem; }
.el-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.el-gallery .g-item{ min-height:110px; border-radius:10px; background: linear-gradient(135deg,var(--moss-soft),#fff); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:0.78rem; overflow:hidden; }
.el-gallery img{ width:100%; height:100%; object-fit:cover; }
.el-divider{ border:none; border-top:1.5px solid var(--line); margin:0; }
.el-spacer{ width:100%; }

.el-columns{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.el-col-heading{ font-family: var(--font-head); font-weight:600; font-size:1.15rem; margin:0 0 8px; }
.el-col-text{ font-size:0.95rem; line-height:1.6; color:#4a4237; }

.el-quote{ border-left:4px solid var(--accent); padding-left:18px; }
.el-quote-text{ font-family: var(--font-head); font-style:italic; font-size:1.3rem; line-height:1.4; }
.el-quote-author{ font-size:0.88rem; color: var(--ink-soft); margin-top:8px; }

.el-video-placeholder{
  min-height:160px; border-radius:10px; background: linear-gradient(135deg,var(--moss-soft),var(--plum-soft));
  display:flex; align-items:center; justify-content:center; text-align:center; color: var(--ink-soft); font-size:0.85rem; padding:20px;
}
.video-frame{ position:relative; padding-bottom:56.25%; height:0; border-radius:10px; overflow:hidden; background:#000; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }

.el-faq{ display:flex; flex-direction:column; }
.faq-item{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq-item:first-child{ padding-top:0; }
.faq-q{ font-weight:700; margin-bottom:8px; }
.faq-a{ color: var(--ink-soft); font-size:0.94rem; line-height:1.6; }

.el-pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pricing-card{ border:1px solid var(--line); border-radius:14px; padding:22px 18px; text-align:center; }
.pricing-name{ font-weight:800; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; color: var(--ink-soft); margin-bottom:8px; }
.pricing-price-row{ font-family: var(--font-head); font-size:1.5rem; font-weight:600; margin-bottom:6px; }
.pricing-period{ font-family: var(--font-body); font-size:0.82rem; font-weight:400; color: var(--ink-soft); margin-left:2px; }
.pricing-desc{ color: var(--ink-soft); font-size:0.88rem; line-height:1.5; margin-bottom:14px; }
.pricing-cta{ display:inline-block; padding:9px 18px; border-radius:999px; font-weight:700; font-size:0.86rem; background: var(--accent); color:#fff; }

.el-iconlist{ display:flex; flex-direction:column; gap:12px; }
.iconlist-row{ display:flex; gap:12px; align-items:flex-start; }
.iconlist-icon{ flex-shrink:0; font-size:1.15rem; min-width:1.4em; }
.iconlist-text{ line-height:1.6; }

.el-social{ display:flex; gap:10px; }
.social-icon{ width:38px; height:38px; border-radius:50%; background: var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem; }

.el-map{ border-radius:10px; overflow:hidden; height:280px; }
.el-map iframe{ width:100%; height:100%; border:0; pointer-events:none; }
.el-map-placeholder{
  min-height:200px; border-radius:10px; background: linear-gradient(135deg,var(--moss-soft),var(--plum-soft));
  display:flex; align-items:center; justify-content:center; text-align:center; color: var(--ink-soft); font-size:0.85rem; padding:20px;
}

@media (max-width: 860px){
  .el-columns{ grid-template-columns:1fr; gap:16px; }
  .el-pricing{ grid-template-columns:1fr; }
}

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:0.78rem; font-weight:700; color: var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04em; }
.field input[type=text], .field input[type=url], .field input[type=number], .field select, .field textarea{
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-size:0.9rem; background:#fff; color:var(--ink);
}
.field textarea{ resize:vertical; min-height:60px; }
.seg{ display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg button{ flex:1; padding:8px 0; border:none; background:#fff; cursor:pointer; font-size:0.85rem; border-right:1px solid var(--line); }
.seg button:last-child{ border-right:none; }
.seg button.active{ background: var(--ink); color:#fff; }
.swatches{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.swatch{ width:26px; height:26px; border-radius:8px; border:2px solid transparent; cursor:pointer; padding:0; }
.swatch.active{ border-color: var(--ink); }
.swatch.none{ background:
  linear-gradient(45deg, transparent 46%, #d33 48%, #d33 52%, transparent 54%),
  repeating-conic-gradient(#f1ece2 0% 25%, #fff 0% 50%) 0/8px 8px; }
input[type=color].swatch{ -webkit-appearance:none; appearance:none; border:2px solid var(--line); background:none; }
input[type=color].swatch::-webkit-color-swatch-wrapper{ padding:2px; }
input[type=color].swatch::-webkit-color-swatch{ border:none; border-radius:5px; }

input[type=range]{ width:100%; accent-color: var(--accent); }
.range-value{ font-size:0.78rem; color: var(--ink-soft); margin-top:4px; }

.upload-row{ display:flex; gap:8px; margin-top:8px; }
.upload-btn{
  flex:1; padding:8px 10px; border-radius:8px; border:1.5px dashed var(--line); background:#fff;
  font-size:0.82rem; font-weight:700; color: var(--ink-soft); cursor:pointer; text-align:center;
}
.upload-btn:hover{ border-color: var(--accent); color: var(--accent); }
.gallery-slot{ margin-bottom:14px; padding-bottom:14px; border-bottom:1px dashed var(--line); }
.gallery-slot:last-child{ border-bottom:none; }
.delete-block-btn{ width:100%; padding:10px; border-radius:8px; border:1.5px solid #e3b3a6; background:#fff5f2; color:#b23a1f; font-weight:700; cursor:pointer; margin-top:6px; }
.delete-block-btn:hover{ background:#ffe4dc; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(32,26,20,0.45); display:none; align-items:center; justify-content:center; z-index:200;
}
.modal-overlay.open{ display:flex; }
.modal-box{ background:#fff; border-radius:18px; width:420px; max-width:92vw; box-shadow:0 30px 60px -20px rgba(0,0,0,0.4); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); font-weight:800; }
.modal-body{ padding:22px 20px; }
.slug-row{ display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.slug-row input{ flex:1; border:none; padding:10px 12px; font-size:0.92rem; outline:none; min-width:0; }
.slug-suffix{ padding:10px 12px; background: var(--bg); color: var(--ink-soft); font-size:0.88rem; font-weight:700; white-space:nowrap; }
.slug-status{ margin-top:8px; font-size:0.85rem; min-height:1.2em; }
.slug-status.ok{ color: var(--moss); }
.slug-status.bad{ color:#c23e21; }
.publish-result{ margin-top:16px; padding:14px; border-radius:10px; background: var(--moss-soft); text-align:center; }
.publish-result a{ font-weight:800; color: var(--moss); word-break:break-all; }
.publish-result .copy-btn{ margin-top:10px; }

.preview-overlay{
  position:fixed; inset:0; background:#fff; display:none; flex-direction:column; z-index:100;
}
.preview-overlay.open{ display:flex; }
.preview-bar{ display:flex; justify-content:space-between; align-items:center; padding:12px 20px; border-bottom:1px solid var(--line); font-weight:700; }
#previewFrame{ flex:1; border:none; width:100%; }

@media (max-width: 860px){
  .app{ grid-template-columns: 1fr; grid-template-rows: 60px auto auto 1fr auto; }
  .page-tabs-bar{ grid-column: 1; }
  .palette, .properties{ grid-row:auto; border:none; border-bottom:1px solid var(--line); max-height:180px; }
  body{ overflow:auto; }
}