.builder-body { margin: 0; background: #E8EEF5; font-family: "Source Sans 3", system-ui, sans-serif; color: #0B1220; }
.builder-auth {
  min-height: 100vh; display: grid; place-items: center; text-align: center; gap: 16px; padding: 24px;
}
.builder-app { min-height: 100vh; display: flex; flex-direction: column; }
.builder-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; background: #0B1220; color: #fff;
  position: sticky; top: 0; z-index: 40;
}
.builder-title { font-family: Outfit, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.builder-top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.builder-btn {
  border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 700; cursor: pointer; font: inherit;
}
.builder-btn.ghost { background: rgba(255,255,255,0.08); color: #fff; }
.builder-btn.ghost.active { background: rgba(255,255,255,0.2); }
.builder-btn.primary { background: #0A6FDB; color: #fff; }
.builder-btn.block { width: 100%; margin-top: 14px; background: #0A6FDB; color: #fff; }
.builder-btn.danger { background: #FEE2E2; color: #B91C1C; }
.builder-shell { display: grid; grid-template-columns: 300px 1fr; flex: 1; min-height: 0; }
.builder-shell.has-structure { grid-template-columns: 300px 1fr 240px; }
.builder-panel, .builder-structure {
  background: #fff; border-right: 1px solid #D9E2EC; overflow: auto;
}
.builder-structure { border-right: 0; border-left: 1px solid #D9E2EC; padding: 14px; }
.builder-structure h3 { margin: 0 0 10px; font-family: Outfit, sans-serif; font-size: 0.95rem; }
.builder-structure ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.builder-structure button {
  width: 100%; text-align: left; border: 1px solid #E2E8F0; background: #F8FAFC;
  border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; font-size: 0.85rem;
}
.builder-structure button.active { border-color: #0A6FDB; background: #E8F2FD; }
.builder-panel-tabs { display: flex; border-bottom: 1px solid #E2E8F0; }
.builder-panel-tabs button {
  flex: 1; border: 0; background: transparent; padding: 12px; font-weight: 700; cursor: pointer; color: #64748B;
}
.builder-panel-tabs button.active { color: #0A6FDB; box-shadow: inset 0 -2px 0 #0A6FDB; }
.builder-panel-body { padding: 14px; }
.builder-hint { font-size: 0.82rem; color: #64748B; margin: 0 0 12px; }
.builder-widget-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.builder-widget-card {
  border: 1px solid #E2E8F0; border-radius: 10px; background: #F8FAFC;
  padding: 12px 10px; text-align: left; cursor: pointer; font-weight: 700; font-size: 0.85rem;
}
.builder-widget-card:hover { border-color: #0A6FDB; background: #E8F2FD; }
.builder-canvas-wrap {
  overflow: auto; padding: 20px; background:
    radial-gradient(circle at 10% 0%, rgba(10,111,219,0.08), transparent 40%),
    #E8EEF5;
}
.builder-canvas {
  margin: 0 auto; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(15,23,42,0.08); transition: width 0.2s ease;
  width: min(1100px, 100%);
}
.builder-canvas[data-device="mobile"] { width: 390px; }
.builder-canvas-inner { min-height: 70vh; }
.builder-canvas-inner .lr-section,
.builder-canvas-inner [data-widget-id] {
  outline: 1px solid transparent; cursor: pointer; transition: outline-color 0.15s;
}
.builder-canvas-inner .lr-section:hover,
.builder-canvas-inner [data-widget-id]:hover { outline-color: rgba(10,111,219,0.35); }
.builder-canvas-inner .lr-section.is-selected { outline: 2px solid #0A6FDB; }
.builder-canvas-inner [data-widget-id].is-selected {
  outline: 2px solid #0E6B78; background: rgba(14,107,120,0.04);
}
.builder-edit-form { display: grid; gap: 12px; }
.builder-edit-form label {
  display: grid; gap: 6px; font-size: 0.82rem; font-weight: 700; color: #5B6577;
}
.builder-edit-form input,
.builder-edit-form select,
.builder-edit-form textarea {
  width: 100%; border: 1px solid #D0D4DE; border-radius: 8px; padding: 9px 10px; font: inherit;
}
.builder-edit-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.builder-toast {
  position: fixed; bottom: 20px; right: 20px; background: #0B1220; color: #fff;
  padding: 12px 16px; border-radius: 8px; z-index: 60; font-weight: 600;
}
@media (max-width: 900px) {
  .builder-shell, .builder-shell.has-structure { grid-template-columns: 1fr; }
  .builder-structure { display: none !important; }
}