body { font-family: Inter, Arial, sans-serif; }
.admin-login-page { background: linear-gradient(135deg, #0b1220, #141f36); min-height: 100vh; }
.admin-body { background: #0f172a; }
.admin-sidebar { background: rgba(15,23,42,0.9); }
.admin-sidebar .nav-link { color: #cbd5e1; border-radius: .75rem; }
.admin-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.card { border-radius: 1rem; }
.builder-block .content p:last-child { margin-bottom: 0; }
.block-item { background: rgba(255,255,255,.03); }
.drag-handle { cursor: grab; font-size: 1.35rem; line-height: 1; }
.drag-handle:active { cursor: grabbing; }
.block-summary { white-space: normal; }
code { white-space: normal; }
.empty-state { background: rgba(255,255,255,.03); }
.block-tile {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  background: rgba(255,255,255,.03);
  color: inherit;
  padding: 1rem;
  transition: .2s ease;
}
.block-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(13,110,253,.5);
  background: rgba(13,110,253,.08);
}
.block-tile-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .9rem;
  background: rgba(13,110,253,.12);
  margin-bottom: .75rem;
  font-size: 1.2rem;
}
.offcanvas.offcanvas-end { width: min(760px, 100vw); }
.repeater-item { background: rgba(255,255,255,.02); }
.form-control::placeholder { color: #94a3b8; }

.offcanvas.offcanvas-end { width: min(980px, 100vw); }
textarea.js-richtext { min-height: 420px; }
.quill-field { border: 1px solid rgba(255,255,255,.12); border-radius: .9rem; overflow: hidden; background: #0f172a; }
.quill-toolbar.ql-toolbar { border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; background: #111827; }
.quill-editor.ql-container { border: 0 !important; font-size: 15px; }
.quill-editor .ql-editor { min-height: 320px; max-height: 520px; overflow-y: auto; color: #e5e7eb; }
.ql-snow .ql-stroke { stroke: #d1d5db; }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: #d1d5db; }
.ql-snow .ql-picker { color: #d1d5db; }
#blockEditorCanvas .offcanvas { width: min(860px, 96vw); }
#blockEditorCanvas .offcanvas-body { padding-bottom: 6rem; }
.tox .tox-edit-area__iframe { background: #fff; }


.offcanvas.offcanvas-end {
  width: min(760px, 92vw);
}

.note-editor.note-frame {
  border-color: rgba(255,255,255,.15);
  background: var(--bs-body-bg);
}

.note-editor .note-toolbar,
.note-editor .note-statusbar {
  background: rgba(255,255,255,.04);
}

.note-editable {
  min-height: 280px;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.note-modal .modal-content,
.note-popover .popover-content {
  color: #212529;
}


.color-field .input-group { align-items: center; }
.color-native-input.form-control-color {
  width: 4.2rem;
  min-width: 4.2rem;
  height: calc(2.25rem + 10px);
  padding: .25rem;
}
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.color-swatch-btn {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.25);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset;
  padding: 0;
}
.color-swatch-btn:hover {
  transform: scale(1.08);
  border-color: rgba(255,255,255,.55);
}
.color-swatch-btn:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}