:root {
  color-scheme: light;

  /* ===== Design tokens: radius ===== */
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 16px;
  --radius-4: 24px;
  --radius-pill: 999px;

  /* ===== Design tokens: spacing ===== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 3rem;

  /* ===== Design tokens: typography ===== */
  --fs-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.81rem);
  --fs-sm: clamp(0.84rem, 0.79rem + 0.2vw, 0.93rem);
  --fs-md: clamp(0.96rem, 0.9rem + 0.22vw, 1.06rem);
  --fs-lg: clamp(1.1rem, 1.02rem + 0.35vw, 1.28rem);
  --fs-xl: clamp(1.32rem, 1.18rem + 0.7vw, 1.8rem);
  --fs-xxl: clamp(1.62rem, 1.25rem + 1.5vw, 2.45rem);

  /* ===== Design tokens: motion ===== */
  --ease-standard: cubic-bezier(0.2, 0.72, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 0.8, 0.3, 1);
  --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;

  /* ===== Design tokens: neutral palette ===== */
  --neutral-0: #ffffff;
  --neutral-50: #f7f8fb;
  --neutral-100: #eef1f6;
  --neutral-200: #dce3ed;
  --neutral-300: #c2ccda;
  --neutral-500: #65748c;
  --neutral-700: #324056;
  --neutral-900: #101828;

  /* ===== Design tokens: semantic colors ===== */
  --surface-bg: color-mix(in srgb, var(--bg-color) 84%, var(--neutral-0) 16%);
  --surface-soft: color-mix(in srgb, var(--bg-color) 70%, var(--neutral-0) 30%);
  --surface-glass: color-mix(in srgb, var(--neutral-0) 55%, transparent 45%);
  --surface-outline: color-mix(in srgb, var(--theme-color) 18%, var(--neutral-200) 82%);
  --text-default: color-mix(in srgb, var(--neutral-900) 92%, var(--theme-color) 8%);
  --text-muted: color-mix(in srgb, var(--neutral-700) 72%, var(--theme-color) 28%);
  --text-on-dark: #f8fafc;
  --accent-soft: color-mix(in srgb, var(--accent-color) 18%, var(--neutral-0) 82%);
  --accent-strong: color-mix(in srgb, var(--accent-color) 78%, black 22%);
  --accent-contrast: color-mix(in srgb, var(--accent-color) 52%, black 48%);
  --focus-ring: color-mix(in srgb, var(--accent-color) 60%, white 40%);

  /* ===== Design tokens: shadow scale ===== */
  --shadow-1: 0 2px 8px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.08);
  --shadow-2: 0 8px 18px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.06);
  --shadow-3: 0 14px 30px rgba(16, 24, 40, 0.11), 0 4px 12px rgba(16, 24, 40, 0.08);

  /* ===== Layout ===== */
  --content-max-width: min(1280px, 96vw);
}

* {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(1200px 700px at 10% -15%, color-mix(in srgb, var(--accent-color) 16%, transparent 84%) 0%, transparent 60%),
    var(--surface-bg);
  color: var(--text-default);
  font-family: var(--font-family);
  font-size: var(--fs-md);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-default);
  letter-spacing: -0.015em;
}

h1,
.display-6 {
  font-size: var(--fs-xxl) !important;
}

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

.app-main,
.admin-subnav-wrap,
.container-fluid {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 100%;
  width: 100%;
  padding-inline: 0;
  --bs-gutter-x: 0;
}

body.full-width .app-main,
body.full-width .admin-subnav-wrap,
body.full-width .container-fluid {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

body.full-width .container-fluid,
body.full-width .app-main {
  padding-inline: 0 !important;
  --bs-gutter-x: 0;
}

.navbar {
  background: color-mix(in srgb, var(--surface-soft) 88%, white 12%) !important;
  border-color: var(--surface-outline) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ===== Soft surfaces / builder panels ===== */
.card,
.builder-panel,
.table-responsive,
.modal-content,
.dropdown-menu {
  border-radius: var(--radius-3);
  border: 1px solid var(--surface-outline);
  background: var(--surface-soft);
  box-shadow: var(--shadow-1);
}

.card,
.card-body {
  padding: var(--space-5);
}

.card-body,
.card.card-body {
  border-radius: var(--radius-3);
}

.glass-surface,
.modal-content {
  background: color-mix(in srgb, var(--surface-glass) 86%, var(--neutral-0) 14%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@supports not ((backdrop-filter: blur(1px))) {
  .glass-surface,
  .modal-content,
  .navbar {
    background: color-mix(in srgb, var(--surface-soft) 95%, var(--neutral-0) 5%);
  }
}

/* ===== Buttons / controls ===== */
.btn,
.form-control,
.form-select,
.form-range,
.input-group-text {
  border-radius: var(--radius-2);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.btn {
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-1);
}

.btn-dark {
  background-color: #1f2937;
  border-color: #1f2937;
  color: #f8fafc;
}

.btn-topnav.btn-outline-dark {
  background: #ffffff;
}

.btn-outline-dark {
  border-color: #4b5563;
  color: #111827;
  background: #ffffff;
}

@supports (color: color-mix(in srgb, black 50%, white 50%)) {
  .btn-dark {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
  }

  .btn-topnav.btn-outline-dark {
    background: color-mix(in srgb, var(--neutral-0) 84%, var(--surface-soft) 16%);
  }

  .btn-outline-dark {
    border-color: color-mix(in srgb, var(--theme-color) 42%, var(--neutral-300) 58%);
    color: var(--text-default);
    background: color-mix(in srgb, var(--neutral-0) 88%, transparent 12%);
  }
}

.btn-outline-dark:hover,
.btn-outline-dark:focus-visible,
.btn-check:checked + .btn-outline-dark,
.btn-outline-dark.active,
.btn-outline-dark:active {
  color: #f8fafc;
  border-color: #1f2937;
  background-color: #1f2937;
}

@supports (color: color-mix(in srgb, black 50%, white 50%)) {
  .btn-outline-dark:hover,
  .btn-outline-dark:focus-visible,
  .btn-check:checked + .btn-outline-dark,
  .btn-outline-dark.active,
  .btn-outline-dark:active {
    color: var(--text-on-dark);
    border-color: var(--accent-contrast);
    background-color: var(--accent-contrast);
  }
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-pills .nav-item.show .nav-link {
  color: var(--text-on-dark);
  background-color: var(--accent-contrast);
  border-color: var(--accent-contrast);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px) scale(1.012);
  box-shadow: var(--shadow-2);
}

.btn:active {
  transform: translateY(0) scale(0.99);
}

.form-control,
.form-select,
.form-control-color {
  border-color: color-mix(in srgb, var(--theme-color) 16%, var(--neutral-300) 84%);
  background: color-mix(in srgb, var(--neutral-0) 85%, transparent 15%);
  color: var(--text-default);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible,
.grid-item a:focus-visible,
.navbar a:focus-visible {
  outline: 0;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--focus-ring) 45%, transparent 55%);
}

.form-check-input:checked {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
}

.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 10.5l4 4 8-9'/%3e%3c/svg%3e");
}

.form-check-input {
  width: 1.2em;
  height: 1.2em;
  border-color: color-mix(in srgb, var(--theme-color) 34%, var(--neutral-300) 66%);
  background-color: color-mix(in srgb, var(--neutral-0) 92%, transparent 8%);
}

.form-switch .form-check-input {
  width: 2.2em;
}

/* ===== Tables / toolbars ===== */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: color-mix(in srgb, var(--theme-color) 10%, var(--neutral-200) 90%);
}

.table > :not(caption) > * > * {
  padding: 0.72rem 0.7rem;
}

.table tbody tr {
  transition: background-color var(--duration-base) var(--ease-standard);
}

.table tbody tr:hover {
  background: color-mix(in srgb, var(--accent-color) 7%, transparent 93%);
}

.table tbody tr:has(input[type="checkbox"]:checked) {
  background: color-mix(in srgb, var(--accent-color) 16%, transparent 84%);
}

.control-toolbar {
  padding: var(--space-4);
  border-radius: var(--radius-3);
  border: 1px solid var(--surface-outline);
  background: color-mix(in srgb, var(--surface-soft) 90%, white 10%);
  box-shadow: var(--shadow-1);
}

.admin-subnav-wrap {
  max-width: var(--content-max-width);
}

.admin-subnav {
  padding: var(--space-3);
  border-radius: var(--radius-3);
  border: 1px solid var(--surface-outline);
  background: color-mix(in srgb, var(--surface-soft) 92%, var(--neutral-0) 8%);
  box-shadow: var(--shadow-1);
}


.layout-edit-toolbar {
  justify-content: center;
}

.layout-edit-controls .btn-sm,
.layout-edit-controls .btn-group-sm > .btn {
  --bs-btn-padding-y: 0.2rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.74rem;
}

.layout-tool-group .btn,
.layout-size-group .btn {
  min-width: 2rem;
}

.layout-edit-toolbar .small {
  opacity: 0.85;
}

.layout-mini-select {
  min-width: 4.2rem;
  font-size: 0.74rem;
}

.layout-edit-toolbar .form-select-sm {
  min-width: 8rem;
}

/* ===== Gallery cards ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-desktop), minmax(0, 1fr));
  gap: var(--grid-gap, clamp(0.7rem, 0.6rem + 0.8vw, 1.2rem));
  --grid-row-base: var(--grid-auto-rows, 165px);
  --grid-row-min: 72px;
  --grid-row-fluid: calc(var(--grid-row-base) * (0.62 + 0.38 * ((100vw - 360px) / 1080)));
  grid-auto-rows: clamp(var(--grid-row-min), var(--grid-row-fluid), var(--grid-row-base));
  grid-auto-flow: row dense;
}

.grid-item {
  position: relative;
  grid-row: span var(--row-span);
  grid-column: span var(--col-span);
  min-height: 0;
  height: auto;
  align-self: start;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius, var(--radius-3));
  background: var(--card-bg, var(--surface-soft));
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transform: translate3d(0, 0, 0) var(--item-transform, none);
  animation: fade-up var(--anim-duration) var(--ease-entrance) both;
  animation-delay: var(--anim-delay);
  will-change: transform, opacity;
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.grid-item.highlighted {
  box-shadow: var(--shadow-2), 0 0 0 2px color-mix(in srgb, var(--accent-color) 58%, white 42%);
}

.grid-item img {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
  transition: transform var(--duration-slow) var(--ease-standard), filter var(--duration-base) var(--ease-standard);
}

.grid-item picture,
.grid-item a {
  display: block;
  height: 100%;
}


.gallery-grid[data-editing="true"] .grid-item {
  touch-action: none;
  cursor: move;
  border-style: dashed;
}

.gallery-grid[data-editing="true"] .grid-item:hover,
.gallery-grid[data-editing="true"] .grid-item:focus-within {
  transform: var(--item-transform, none);
  box-shadow: var(--shadow-2);
}

.gallery-grid[data-editing="true"] .grid-item.is-selected {
  border-color: color-mix(in srgb, var(--accent-color) 70%, var(--surface-outline) 30%);
  box-shadow: var(--shadow-2), 0 0 0 2px color-mix(in srgb, var(--accent-color) 24%, transparent 76%);
}

.grid-item.is-dragging {
  opacity: 0.45;
}

.grid-item-resize-handle {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  width: 1rem;
  height: 1rem;
  border: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--neutral-900) 78%, transparent 22%);
  cursor: nwse-resize;
  display: none;
  z-index: 2;
}

.gallery-grid[data-editing="true"] .grid-item-resize-handle {
  display: block;
}

.grid-item.is-resizing {
  box-shadow: var(--shadow-3);
}

.grid-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--neutral-0) 20%, transparent 80%) 0%, transparent 45%, color-mix(in srgb, var(--accent-color) 14%, transparent 86%) 100%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
  pointer-events: none;
}

.grid-item:hover,
.grid-item:focus-within {
  transform: translateY(-2px) scale(1.008) var(--item-transform, none);
  box-shadow: var(--shadow-3);
  border-color: color-mix(in srgb, var(--accent-color) 32%, var(--surface-outline) 68%);
}

.grid-item:hover img,
.grid-item:focus-within img {
  transform: scale(1.03);
  filter: saturate(1.03);
}

.grid-item:hover::after,
.grid-item:focus-within::after {
  opacity: 1;
}

/* subtle parallax driven by JS */
.grid-item[data-tilt="true"] img {
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) scale(1.03);
}

[data-animation="zoom-in"] {
  animation-name: zoom-in;
}

[data-animation="fade-up"] {
  animation-name: fade-up;
}

[data-animation="slide-in"] {
  animation-name: slide-in;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 991.98px) {
  :root {
    --content-max-width: min(100%, 94vw);
  }

  .gallery-grid {
    grid-template-columns: repeat(var(--cols-tablet), minmax(0, 1fr));
    --grid-row-min: 64px;
    --grid-row-fluid: calc(var(--grid-row-base) * (0.56 + 0.44 * ((100vw - 320px) / 672)));
  }

  .card,
  .card-body {
    padding: var(--space-4);
  }
}

@media (max-width: 575.98px) {
  .gallery-grid {
    grid-template-columns: repeat(var(--cols-mobile), minmax(0, 1fr));
    gap: var(--space-3);
    --grid-row-min: 56px;
    --grid-row-fluid: calc(var(--grid-row-base) * (0.48 + 0.4 * ((100vw - 280px) / 296)));
  }

  .grid-item {
    grid-column: span min(2, var(--col-span));
  }

  .table > :not(caption) > * > * {
    padding: 0.58rem 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .grid-item,
  .grid-item img {
    animation: none !important;
    transform: none !important;
  }
}