:root {
  --synapse-radius: 14px;
  --synapse-bg: #050711;
  --synapse-bg-elevated: #101320;
  --synapse-bg-elevated-soft: #16192a;
  --synapse-border-subtle: rgba(255, 255, 255, 0.08);
  --synapse-text: #f5f5ff;
  --synapse-text-muted: #a0a3c2;
  --synapse-accent: #7b5cff;
  --synapse-accent-soft: rgba(123, 92, 255, 0.16);
  --synapse-accent-strong: #b794ff;
}

body.synapse-dark {
  background: radial-gradient(circle at top left, #1b1230 0, #050711 55%, #030308 100%);
  color: var(--synapse-text);
  color-scheme: dark;
}

body.synapse-dark a {
  color: var(--synapse-accent-strong);
}

body.synapse-dark a:hover {
  color: #e0c4ff;
}

/* Bootstrap modal en mode sombre */
body.synapse-dark .modal-content {
  background: radial-gradient(circle at top left, #1c2140, #0c0f23) !important;
  border: 1px solid var(--synapse-border-subtle) !important;
  color: var(--synapse-text) !important;
}

body.synapse-dark .modal-header,
body.synapse-dark .modal-footer {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.synapse-dark .modal-title {
  color: var(--synapse-text) !important;
}

body.synapse-dark .modal .form-control,
body.synapse-dark .modal .form-select {
  background-color: rgba(5, 7, 17, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--synapse-text) !important;
}

body.synapse-dark .modal .form-control::placeholder {
  color: rgba(225, 226, 245, 0.45) !important;
}

body.synapse-dark .modal .form-text,
body.synapse-dark .modal .text-secondary,
body.synapse-dark .modal .small.text-secondary,
body.synapse-dark .modal .small {
  color: var(--synapse-text-muted) !important;
}

body.synapse-dark .btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--synapse-text) !important;
}

body.synapse-dark .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.10) !important;
}

body.synapse-dark .btn-close {
  filter: invert(1) brightness(1.2);
  opacity: 0.95;
}

body.synapse-dark .text-secondary {
  color: var(--synapse-text-muted) !important;
}

.synapse-navbar {
  background: linear-gradient(90deg, #090c18, #080616);
  border-color: var(--synapse-border-subtle) !important;
}

.synapse-logo {
  color: #f8f2ff !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.synapse-logo::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 0.4rem;
  background: radial-gradient(circle at 30% 30%, #ffe4ff, #9b7bff);
  box-shadow: 0 0 0 4px rgba(123, 92, 255, 0.2);
}

.card-synapse {
  border-radius: var(--synapse-radius);
  background: radial-gradient(circle at top left, #1c2140, #0c0f23);
  border: 1px solid var(--synapse-border-subtle);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.01);
  color: var(--synapse-text);
}

.card-synapse .form-control,
.card-synapse .form-select {
  background-color: rgba(5, 7, 17, 0.9);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--synapse-text);
}

.card-synapse .form-control::placeholder {
  color: rgba(225, 226, 245, 0.45);
}

.card-synapse .form-control:focus {
  border-color: var(--synapse-accent);
  box-shadow: 0 0 0 1px rgba(123, 92, 255, 0.4);
}

.card-synapse .form-text,
.card-synapse .text-secondary {
  color: var(--synapse-text-muted) !important;
}

.card-synapse .card-body > .fw-semibold,
.card-synapse h1,
.card-synapse h2,
.card-synapse h3 {
  color: var(--synapse-text);
}

.btn-primary {
  background: linear-gradient(135deg, #7b5cff, #c884ff);
  border: none;
  color: #050711;
  font-weight: 600;
}

.btn-primary:hover {
  filter: brightness(1.05);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background: #4c4970;
  color: rgba(8, 8, 16, 0.8);
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--synapse-text);
}

.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.slash-menu {
  position: absolute;
  z-index: 1050;
  width: min(520px, calc(100vw - 2rem));
  max-height: 320px;
  overflow: auto;
  border-radius: 14px;
  background: radial-gradient(circle at top left, #242842, #111323);
  border: 1px solid var(--synapse-border-subtle);
}

.slash-item {
  cursor: pointer;
}

.slash-menu .list-group-item {
  background: transparent;
  color: var(--synapse-text);
  border-color: rgba(255, 255, 255, 0.03);
}

.slash-menu .list-group-item.active {
  background: linear-gradient(135deg, rgba(123, 92, 255, 0.25), rgba(184, 148, 255, 0.4));
  border-color: transparent;
  color: #050711;
}

body.synapse-dark .list-group-item {
  background-color: rgba(6, 9, 25, 0.96);
  color: var(--synapse-text);
  border-color: rgba(255, 255, 255, 0.03);
}

body.synapse-dark .list-group-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

body.synapse-dark .list-group-item-action {
  text-decoration: none;
}

body.synapse-dark .alert-danger {
  background-color: rgba(255, 92, 143, 0.12);
  border-color: rgba(255, 92, 143, 0.45);
  color: #ffd4e1;
}

body.synapse-dark .alert-warning {
  background-color: rgba(255, 193, 7, 0.12);
  border-color: rgba(255, 193, 7, 0.5);
  color: #ffe9b5;
}

body.synapse-dark .alert-success {
  background-color: rgba(40, 167, 69, 0.1);
  border-color: rgba(40, 167, 69, 0.55);
  color: #b0ffd0;
}

.blocks-block {
  padding: 4px 6px;
  border-radius: 8px;
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.03);
  background: rgba(255, 255, 255, 0.02);
  cursor: text;
  min-height: 1.55em;
  white-space: pre-wrap;
}

.blocks-block:focus-visible,
.blocks-block:focus {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(10, 12, 30, 0.8);
}

.blocks-block:hover {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

body.synapse-dark .blocks-block:empty::before {
  content: attr(data-placeholder);
  color: rgba(160, 163, 194, 0.65);
  pointer-events: none;
}

.blocks-bullet::before {
  content: "•";
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--synapse-accent-strong);
}

.blocks-todo::before {
  content: "☐";
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--synapse-accent-strong);
}

.synapse-page-link {
  color: var(--synapse-accent-strong) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.synapse-page-link:hover {
  color: #e0c4ff !important;
}