:root{ --bg:#f7f8fb; --panel:#fff; --muted:#f0f2f6; --text:#0f172a; --sub:#475569; --primary:#2563eb; --danger:#ef4444; --border:#e5e7eb; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.brand{font-weight:700}.nav a{margin-left:12px;opacity:.85}.app-main{padding:14px}
.btn{background:var(--muted);color:var(--text);border:1px solid var(--border);padding:6px 10px;border-radius:8px;cursor:pointer;font-size:13px;line-height:1}.btn.small{padding:3px 7px;font-size:12px}.btn.primary{background:var(--primary);color:#fff;border-color:#1d4ed8}.btn.danger{background:var(--danger);color:#fff;border-color:#b91c1c}

.section-header{display:flex;align-items:center;justify-content:space-between}
.table{width:100%;border-collapse:collapse;margin-top:12px;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px}.table th{text-align:left;color:var(--sub);background:#fafafa}

.builder-grid{display:grid;grid-template-columns:280px 1fr 320px;gap:12px}
.builder-sidebar,.builder-inspector{background:var(--panel);border-radius:12px;padding:10px;border:1px solid var(--border);max-height:calc(100vh - 150px);overflow:auto;position:sticky;top:82px}
.builder-canvas{background:#fff;border-radius:12px;padding:12px;min-height:70vh;border:1px dashed #cbd5e1}

.sidebar-group{border:1px solid var(--border);border-radius:10px;padding:8px;margin-bottom:10px;background:#fff}
.sidebar-group h3{margin:0 0 8px 0;font-size:14px}
.sidebar-group .row{display:grid;grid-template-columns:1fr;gap:8px}
.sidebar-group .row input{padding:7px 9px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:14px;height:34px}
.sidebar-group .row .btn{height:34px}

.palette{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.palette-item{border:1px dashed #d1d5db;border-radius:10px;padding:10px;text-align:center;cursor:grab;background:#fafafa;font-size:13px;display:flex;gap:8px;align-items:center;justify-content:center}

.builder-section{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;padding:10px;margin-bottom:14px;position:relative}
.section-toolbar{display:flex;gap:6px;margin-bottom:6px}
.section-props{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px;margin-bottom:6px}

.builder-row{border:1px dashed #cbd5e1;padding:8px;border-radius:10px;margin:8px 0;background:#fff;position:relative}
.builder-columns{display:flex;gap:8px;flex-wrap:wrap}
.builder-col{flex:1;min-height:80px;border:1px dashed #cbd5e1;padding:8px;border-radius:10px;position:relative;background:#fafafa;display:flex;flex-direction:column}
@media (max-width: 768px){ .builder-col{flex:0 0 100% !important} }

.col-width{width:100%}
.widget{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:6px;margin:6px 0;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.widget-toolbar{ position:absolute; top:6px; left:6px; right:6px; display:flex; gap:6px; justify-content:flex-end; z-index:2; pointer-events:none; }
.widget-toolbar .btn{ pointer-events:auto; }
.widget-selected{outline:2px solid #16a34a}

#inspector h3{margin:6px 0 10px}
.inspector-grid input,.inspector-grid select,.inspector-grid textarea{width:100%;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:#fff;color:#111;font-size:13px;height:32px}
.inspector-grid textarea{height:90px;resize:vertical}
.grp{border:1px solid var(--border); border-radius:10px; padding:6px; margin-bottom:8px; background:#fff}
.grp summary{cursor:pointer; font-weight:600; color:#334155; margin:-6px; padding:6px 8px; border-bottom:1px solid var(--border)}
.grp[open] summary{border-bottom-color:#f1f5f9}

.preview-heading{margin:0}
.preview-button{display:inline-block;text-decoration:none;padding:.45em .9em;border-radius:8px;border:1px solid #e5e7eb;background:#fff}
.preview-image{max-width:100%;display:block}

@media (max-width: 768px){
  .builder-section{ padding-left: clamp(12px, 4vw, 24px) !important; padding-right: clamp(12px, 4vw, 24px) !important; }
  .builder-row{     padding-left: clamp(12px, 4vw, 24px) !important; padding-right: clamp(12px, 4vw, 24px) !important; }
  .builder-col{     padding-left: clamp(8px, 3vw, 16px) !important;  padding-right: clamp(8px, 3vw, 16px) !important;  }
}

.widget-inner{ pointer-events:auto; }

/* column toolbar shares widget-toolbar styles */


/* v7.6.9: clearer selection highlights */
.section-selected{ outline: 2px solid #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.row-selected{ outline: 2px solid #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.col-selected{ outline: 2px solid #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.18); }
.widget-selected{ outline: 2px solid #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }