@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,400&display=swap');

  :root {
    --cream:        #faf8f5;
    --cream-warm:   #f5f0ea;
    --sand:         #ece5db;
    --blush:        #c9a99b;
    --blush-light:  #e8d5cc;
    --blush-deep:   #a87968;
    --taupe:        #8b7e74;
    --warm-brown:   #6b5b50;
    --charcoal:     #3a3330;
    --success-soft: #8bab7f;
    --success-bg:   #eef4eb;
    --warning-soft: #c4a44e;
    --warning-bg:   #faf5e8;
    --danger-soft:  #b8645a;
    --danger-bg:    #faeae8;
    --info-soft:    #7a9bb5;
    --info-bg:      #eaf1f6;
    --radius-sm:    10px;
    --radius-md:    16px;
    --radius-lg:    22px;
    --shadow-card:  0 2px 16px rgba(139,126,116,0.08), 0 1px 4px rgba(139,126,116,0.05);
    --shadow-hover: 0 6px 28px rgba(139,126,116,0.13), 0 2px 8px rgba(139,126,116,0.07);
  }

  body, .bslib-page-navbar {
    background: var(--cream) !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    color: var(--charcoal);
    -webkit-font-smoothing: antialiased;
  }

  /* ---- Navbar ---- */
  .navbar {
    background: var(--cream-warm) !important;
    border-bottom: 1px solid var(--sand) !important;
    box-shadow: none !important;
    padding: 0.6rem 1.2rem !important;
  }
  .navbar-brand {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    color: var(--warm-brown) !important;
    letter-spacing: -0.02em;
  }
  .nav-link {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
    color: var(--taupe) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.45rem 1rem !important;
    transition: all 0.2s ease !important;
    border: none !important;
  }
  .nav-link:hover {
    color: var(--warm-brown) !important;
    background: var(--sand) !important;
  }
  .nav-link.active, .nav-underline .nav-link.active {
    color: var(--cream) !important;
    background: var(--blush-deep) !important;
    border: none !important;
  }

  /* ---- Sidebar ---- */
  .bslib-sidebar-layout > .sidebar {
    background: var(--cream-warm) !important;
    border-right: 1px solid var(--sand) !important;
    border-radius: 0 !important;
  }
  .sidebar .form-label, .sidebar .control-label, .sidebar label {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--taupe) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .sidebar h5 {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 1.05rem !important;
    color: var(--warm-brown) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  /* ---- Form controls ---- */
  .form-control, .form-select, .selectize-input {
    background: #fff !important;
    border: 1.5px solid var(--sand) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.88rem !important;
    color: var(--charcoal) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    padding: 0.5rem 0.75rem !important;
  }
  .form-control:focus, .form-select:focus, .selectize-input.focus {
    border-color: var(--blush) !important;
    box-shadow: 0 0 0 3px rgba(201,169,155,0.18) !important;
    outline: none !important;
  }

  /* ---- Checkboxes ---- */
  .checkbox label, .form-check-label {
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--charcoal) !important;
  }
  .checkbox input[type='checkbox'],
  .form-check-input {
    accent-color: var(--blush-deep);
  }

  /* ---- Buttons ---- */
  .btn-primary {
    background: var(--blush-deep) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.02em;
    padding: 0.6rem 1.2rem !important;
    box-shadow: 0 2px 8px rgba(168,121,104,0.25) !important;
    transition: all 0.25s ease !important;
  }
  .btn-primary:hover {
    background: var(--warm-brown) !important;
    box-shadow: 0 4px 16px rgba(107,91,80,0.3) !important;
    transform: translateY(-1px);
  }
  .btn-success {
    background: var(--success-soft) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(139,171,127,0.25) !important;
  }
  .btn-success:hover {
    background: #7a9a6e !important;
  }
  .btn-warning {
    background: var(--warning-soft) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
  }

  /* ---- Cards (general) ---- */
  .card {
    border: 1px solid var(--sand) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-card) !important;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
    background: #fff !important;
  }
  .card:hover {
    box-shadow: var(--shadow-hover) !important;
  }
  .card-header {
    border-bottom: 1px solid var(--sand) !important;
    padding: 1rem 1.25rem !important;
    font-family: 'Fraunces', Georgia, serif !important;
  }
  .card-header h4, .card-header .h4 {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
  }
  .card-body {
    padding: 1.25rem !important;
    font-size: 0.9rem;
    line-height: 1.65;
  }

  /* Card header colour overrides */
  .card-header.bg-primary {
    background: var(--blush-deep) !important;
    color: #fff !important;
  }
  .card-header.bg-info {
    background: var(--info-soft) !important;
    color: #fff !important;
  }
  .card-header.bg-success {
    background: var(--success-soft) !important;
    color: #fff !important;
  }
  .card-header.bg-warning {
    background: var(--warning-soft) !important;
    color: #fff !important;
  }
  .card-header.bg-danger {
    background: var(--danger-soft) !important;
    color: #fff !important;
  }
  .card-header.bg-dark {
    background: var(--charcoal) !important;
    color: var(--cream) !important;
  }
  .card-header.bg-secondary {
    background: var(--taupe) !important;
    color: #fff !important;
  }

  /* ---- Summary cards (source / target) ---- */
  .card.border-primary {
    border: 1.5px solid var(--blush) !important;
    border-radius: var(--radius-md) !important;
  }
  .card.border-primary .card-header {
    background: linear-gradient(135deg, var(--blush-deep), var(--blush)) !important;
    color: #fff !important;
  }
  .card.border-success {
    border: 1.5px solid var(--success-soft) !important;
    border-radius: var(--radius-md) !important;
  }
  .card.border-success .card-header {
    background: linear-gradient(135deg, #7a9a6e, var(--success-soft)) !important;
    color: #fff !important;
  }

  /* ---- Tables ---- */
  .table {
    font-size: 0.85rem !important;
    border-color: var(--sand) !important;
  }
  .table thead th {
    background: var(--cream-warm) !important;
    color: var(--taupe) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--sand) !important;
  }
  .table-success, .table-success > td, .table-success > th {
    background-color: var(--success-bg) !important;
  }
  .table-info, .table-info > td, .table-info > th {
    background-color: var(--info-bg) !important;
  }
  .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(236,229,219,0.25) !important;
  }

  /* DataTables styling */
  .dataTables_wrapper {
    font-size: 0.85rem !important;
  }

  /* ---- Accordion ---- */
  .accordion {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    border: 1px solid var(--sand) !important;
  }
  .accordion-button {
    background: var(--cream-warm) !important;
    color: var(--warm-brown) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    border: none !important;
    box-shadow: none !important;
  }
  .accordion-button:not(.collapsed) {
    background: var(--blush-light) !important;
    color: var(--warm-brown) !important;
  }
  .accordion-body {
    background: #fff !important;
    padding: 1.25rem !important;
  }

  /* ---- Alerts ---- */
  .alert {
    border-radius: var(--radius-sm) !important;
    font-size: 0.87rem !important;
    border: none !important;
  }
  .alert-info {
    background: var(--info-bg) !important;
    color: var(--info-soft) !important;
  }
  .alert-warning {
    background: var(--warning-bg) !important;
    color: #8a7330 !important;
  }
  .alert-danger {
    background: var(--danger-bg) !important;
    color: var(--danger-soft) !important;
  }

  /* ---- Content headings ---- */
  h2, .h2 {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 600 !important;
    color: var(--charcoal) !important;
    letter-spacing: -0.02em;
  }
  h5, .h5, .fw-bold {
    color: var(--warm-brown);
  }
  .lead {
    color: var(--taupe) !important;
    font-size: 1.05rem !important;
  }
  .text-muted {
    color: var(--taupe) !important;
  }
  code {
    background: var(--cream-warm);
    color: var(--blush-deep);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.85em;
  }

  /* ---- Plotly overrides ---- */
  .plotly .main-svg {
    border-radius: var(--radius-sm);
  }
  .js-plotly-plot .plotly {
    border-radius: var(--radius-sm);
  }

  /* ---- Scrollbar ---- */
  ::-webkit-scrollbar {
    width: 7px;
  }
  ::-webkit-scrollbar-track {
    background: var(--cream);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--sand);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--blush);
  }

  /* ---- Instructions placeholder ---- */
  .text-center.text-muted.py-5 h5 {
    font-family: 'Fraunces', Georgia, serif !important;
    color: var(--warm-brown) !important;
  }
  .text-center.text-muted.py-5 ol {
    color: var(--charcoal);
  }

  /* ---- Radio & checkbox inputs (method comparison) ---- */
  .radio label, .form-check label {
    font-size: 0.85rem !important;
    color: var(--charcoal) !important;
  }

  /* ---- Misc ---- */
  hr {
    border-color: var(--sand) !important;
    opacity: 0.6;
  }
  .container-fluid {
    max-width: 1100px;
  }
  p {
    line-height: 1.7;
  }
  dl.row dt {
    color: var(--warm-brown);
    font-family: 'DM Sans', sans-serif;
  }