:root {
  --music-bg-top: #f5f8fb;
  --music-bg-bottom: #f4efe6;
  --music-surface: rgba(255, 255, 255, 0.86);
  --music-surface-strong: #ffffff;
  --music-border: rgba(27, 52, 74, 0.12);
  --music-text: #203245;
  --music-text-soft: #66788a;
  --music-navy: #14324c;
  --music-teal: #1e6e78;
  --music-gold: #c39357;
  --music-shadow: 0 20px 48px rgba(15, 29, 43, 0.1);
  --music-radius: 22px;
}

html,
body {
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at top left, #fbfdff 0%, rgba(251, 253, 255, 0.92) 22%, rgba(245, 248, 251, 0.88) 52%, rgba(244, 239, 230, 0.95) 100%),
    linear-gradient(180deg, var(--music-bg-top) 0%, var(--music-bg-bottom) 100%);
  color: var(--music-text);
}

body,
button,
input,
select,
textarea,
a,
p,
li,
td,
th,
label,
span,
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.page-header,
.paragraph,
p[class^="p"],
li[class^="li"],
span[class^="s"] {
  font-family: Arial, Helvetica, sans-serif !important;
}

a {
  color: var(--music-teal);
}

a:hover,
a:focus {
  color: var(--music-navy);
  text-decoration: none;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

.wrapper {
  position: relative;
  background: transparent;
}

#sidebar {
  background: linear-gradient(180deg, #d6e6e1 0%, #f3ede3 100%);
  border-right: 1px solid rgba(32, 50, 69, 0.1);
  box-shadow: 18px 0 42px rgba(32, 50, 69, 0.1);
}

#sidebar .sidebar-header {
  border-bottom: 1px solid rgba(32, 50, 69, 0.1);
  padding: 26px 20px 18px;
}

#sidebar .sidebar-header img {
  filter: drop-shadow(0 14px 24px rgba(32, 50, 69, 0.12));
}

#sidebar ul.list-unstyled {
  padding: 18px 14px 24px;
}

#sidebar ul li {
  margin-bottom: 8px;
}

#sidebar ul li a {
  border-radius: 16px;
  color: var(--music-navy);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 14px 16px;
}

#sidebar ul li a:hover {
  background: rgba(255, 255, 255, 0.55);
  color: var(--music-navy);
  transform: translateX(4px);
}

#sidebar ul li.active > a,
#sidebar ul li.active > a:hover,
#sidebar a[aria-expanded="true"] {
  background: linear-gradient(135deg, #f7e7d0 0%, #ffffff 100%);
  box-shadow: 0 12px 24px rgba(32, 50, 69, 0.12);
  color: var(--music-navy);
}

#content {
  background: transparent;
  padding: 28px 36px 40px;
}

.navbar.navbar-light.bg-light {
  backdrop-filter: blur(14px);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  margin-bottom: 30px;
  padding: 0 !important;
}

#content_button {
  background: linear-gradient(90deg, rgba(214, 230, 225, 0.96) 0%, rgba(243, 237, 227, 0.98) 100%) !important;
  border: 1px solid var(--music-border);
  border-radius: 24px;
  box-shadow: var(--music-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 20px 28px;
}

#content_button span {
  color: var(--music-navy) !important;
  display: block;
  font-size: 1.18rem !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  width: 100%;
}

.ul1,
#main form,
.card,
.panel,
.query-fragments,
.prediction-progress,
.result-card,
.contact-card {
  background: var(--music-surface);
  border: 1px solid var(--music-border);
  box-shadow: var(--music-shadow);
}

.ul1 {
  border-radius: var(--music-radius);
  list-style: none;
  margin: 0;
  padding: 34px 38px;
}

#main {
  margin-top: 24px !important;
}

#main form {
  border-radius: var(--music-radius);
  padding: 28px 28px 20px;
}

.result-card,
.contact-card {
  border-radius: var(--music-radius);
}

.result-card .card-header,
.contact-card-header {
  background: linear-gradient(90deg, rgba(214, 230, 225, 0.96) 0%, rgba(243, 237, 227, 0.98) 100%) !important;
  border-bottom: 1px solid var(--music-border) !important;
}

textarea,
select.form-control,
input.form-control,
.form-control,
.input-group-text {
  border-radius: 16px !important;
}

.form-control,
select.form-control {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(32, 50, 69, 0.14);
  color: var(--music-text);
}

.form-control:focus,
select.form-control:focus,
textarea:focus {
  border-color: rgba(30, 110, 120, 0.4) !important;
  box-shadow: 0 0 0 0.2rem rgba(30, 110, 120, 0.12) !important;
}

.input-group-text {
  background: #f5f7f8;
  border: 1px solid rgba(32, 50, 69, 0.12);
  color: var(--music-navy);
  font-weight: 700;
}

#div4_0 {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 0;
  margin-right: 0;
}

#div4_0 > [class*="col-"] {
  flex: 0 1 320px;
  max-width: 320px;
  padding-left: 0;
  padding-right: 0;
}

#protein_div1 {
  flex: 0 1 260px !important;
  max-width: 260px !important;
}

#species_div2 {
  flex: 0 1 360px !important;
  max-width: 360px !important;
}

#div4_0 .input-group {
  margin-left: 0 !important;
  width: 100%;
}

#div4_0 .input-group-text {
  margin-left: 0 !important;
}

.text-input-pale-blue,
.text-input-pale-blue:active,
.text-input-pale-blue:focus {
  background: rgba(248, 251, 252, 0.96) !important;
  border: 1px solid rgba(30, 110, 120, 0.16) !important;
  box-shadow: inset 0 1px 2px rgba(12, 24, 39, 0.05);
  color: var(--music-text) !important;
}

.btn,
button,
input[type="button"] {
  border-radius: 999px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.btn-outline-secondary,
.btn-outline-dark-blue {
  background: linear-gradient(135deg, #ffffff 0%, #edf5f5 100%) !important;
  border: 1px solid rgba(20, 50, 76, 0.16) !important;
  box-shadow: 0 12px 24px rgba(16, 34, 52, 0.08);
  color: var(--music-navy) !important;
}

.btn-outline-secondary:hover,
.btn-outline-dark-blue:hover,
.btn-outline-secondary:focus,
.btn-outline-dark-blue:focus {
  background: linear-gradient(135deg, #1e6e78 0%, #245b71 100%) !important;
  border-color: rgba(20, 50, 76, 0.05) !important;
  color: #ffffff !important;
}

.table {
  background: transparent;
}

.table thead th {
  background: linear-gradient(135deg, rgba(236, 243, 247, 0.96) 0%, rgba(247, 241, 231, 0.98) 100%);
  border-bottom: 0;
  color: var(--music-navy);
  font-weight: 700;
}

.table td,
.table th {
  border-top: 1px solid rgba(32, 50, 69, 0.08);
}

.table-hover tbody tr:hover {
  background: rgba(30, 110, 120, 0.05);
}

.prediction-progress-bar {
  background: #e4edf0;
}

.prediction-progress-fill {
  background: linear-gradient(90deg, var(--music-teal) 0%, var(--music-gold) 100%);
}

.prediction-stage.running {
  background: rgba(30, 110, 120, 0.08);
}

.prediction-stage.completed {
  background: rgba(197, 147, 87, 0.08);
}

.prediction-footer,
.prediction-empty,
.text-muted,
footer {
  color: var(--music-text-soft) !important;
}

footer .credits a {
  color: #55a9cd !important;
  font-weight: 700;
}

@media (max-width: 991.98px) {
  .wrapper {
    display: block;
  }

  #sidebar {
    height: auto;
    overflow: visible;
    position: relative;
    width: 100%;
  }

  #content {
    padding: 18px;
    position: relative;
    width: 100%;
  }

  .navbar.navbar-light.bg-light {
    margin-bottom: 22px;
  }

  #content_button {
    min-height: 80px;
    padding: 16px 18px;
  }

  #content_button span {
    font-size: 1rem !important;
  }

  .ul1,
  #main form {
    padding: 24px 18px;
  }

  #div4_0 {
    gap: 8px;
  }

  #div4_0 > [class*="col-"] {
    flex-basis: 100%;
    max-width: 100%;
  }
}