/* Bootstrap Grey palette design tokens
   f8f9fa e9ecef dee2e6 ced4da adb5bd 6c757d 495057 343a40 212529 */
:root {
  --canvas:  #212529;   /* Carbon Black */
  --surface: #343a40;   /* Gunmetal */
  --edge:    #495057;   /* Iron Grey */
  --prose:   #f8f9fa;   /* Bright Snow */
  --dim:     #c4ccd4;   /* Pale Slate */
  --accent:  #dee2e6;   /* Alabaster Grey */
  --accent-h: #f8f9fa;  /* Bright Snow */
}

.light-mode {
  --canvas:  #f8f9fa;   /* Bright Snow */
  --surface: #e9ecef;   /* Platinum */
  --edge:    #ced4da;   /* Pale Slate */
  --prose:   #212529;   /* Carbon Black */
  --dim:     #6c757d;   /* Slate Grey */
  --accent:  #343a40;   /* Gunmetal */
  --accent-h: #212529;  /* Carbon Black */
}

body { background: var(--canvas); color: var(--prose); }

/* Hero panel glass */
.hero-glass {
  position: relative;
  overflow: hidden;
  background: rgba(52, 58, 64, 0.06);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  border: 1px solid rgba(206, 212, 218, 0.22);
  width: fit-content;
  max-width: 560px;
  transition: border-color 0.18s ease;
}
.light-mode .hero-glass {
  background: rgba(248, 249, 250, 0.06);
  border-color: rgba(52, 58, 64, 0.18);
}
.hero-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(248, 249, 250, 0.16) 0%,
    transparent 65%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.20s;
}
.hero-glass:hover::before { opacity: 1; }
.hero-glass:hover { border-color: rgba(206, 212, 218, 0.48); }
.light-mode .hero-glass:hover { border-color: rgba(52, 58, 64, 0.35); }

/* Material icons */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  vertical-align: middle;
  line-height: 1;
}

/* Sequence display */
.seq-display {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  word-break: break-all;
  line-height: 1.8;
}

.aa { display: inline-block; width: 1.1em; text-align: center; border-radius: 2px; }
.aa-H { background: rgba(173,181,189,0.45); color: #f8f9fa; }
.aa-P { background: rgba(108,117,125,0.45); color: #dee2e6; }
.aa-C { background: rgba(73, 80, 87, 0.55);  color: #e9ecef; }
.aa-N { background: rgba(52, 58, 64, 0.65);  color: #f8f9fa; }

/* Probability badges */
.prob-badge {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.prob-high {
  background: rgba(20, 83, 45, 0.88);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.45);
}
.prob-med {
  background: rgba(20, 83, 45, 0.58);
  color: #a7f3d0;
  border: 1px solid rgba(34, 197, 94, 0.28);
}
.prob-low {
  background: rgba(20, 83, 45, 0.28);
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, 0.18);
}
.light-mode .prob-high {
  background: rgba(22, 101, 52, 0.22);
  color: #14532d;
  border-color: rgba(22, 163, 74, 0.50);
}
.light-mode .prob-med {
  background: rgba(22, 101, 52, 0.13);
  color: #166534;
  border-color: rgba(22, 163, 74, 0.32);
}
.light-mode .prob-low {
  background: rgba(22, 101, 52, 0.07);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.20);
}

/* Kingdom badge — set --kg inline, CSS derives bg/text/border */
.kingdom-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--kg) 28%, transparent);
  color: color-mix(in srgb, var(--kg) 70%, #fff);
  border-color: color-mix(in srgb, var(--kg) 65%, transparent);
}
.light-mode .kingdom-badge {
  background: color-mix(in srgb, var(--kg) 22%, transparent);
  color: color-mix(in srgb, var(--kg) 85%, #000);
  border-color: color-mix(in srgb, var(--kg) 70%, transparent);
}

/* Kingdom stat number (browse page) */
.kingdom-num { color: color-mix(in srgb, var(--kg) 70%, #fff); }
.light-mode .kingdom-num { color: color-mix(in srgb, var(--kg) 85%, #000); }

/* Pipeline bar fills (index.html) — boost brightness in dark mode */
.pipeline-bar-fill { filter: brightness(1.8) saturate(1.3); }
.light-mode .pipeline-bar-fill { filter: none; }

/* Hero ghost buttons (index.html) */
.btn-hero-search  { background: rgba(105,108,175,0.42); border-color: rgba(145,148,215,0.80); }
.btn-hero-browse  { background: rgba(75,85,140,0.48);   border-color: rgba(120,130,195,0.80); }
.btn-hero-decrypt { background: rgba(88,98,120,0.48);   border-color: rgba(145,158,185,0.80); }
.light-mode .btn-hero-search  { background: rgba(71,73,115,0.14);  border-color: rgba(71,73,115,0.50); }
.light-mode .btn-hero-browse  { background: rgba(22,27,51,0.14);   border-color: rgba(22,27,51,0.50); }
.light-mode .btn-hero-decrypt { background: rgba(48,52,63,0.14);   border-color: rgba(48,52,63,0.50); }

/* CTA buttons (index.html) */
.cta-teal        { color: #7ABCD0; }
.cta-teal-sub    { color: rgba(122,188,208,0.80); }
.cta-purple      { color: #A89ED8; }
.cta-purple-sub  { color: rgba(168,158,216,0.80); }
.light-mode .cta-teal       { color: #4A8898; }
.light-mode .cta-teal-sub   { color: rgba(74,136,152,0.70); }
.light-mode .cta-purple     { color: #7B72A8; }
.light-mode .cta-purple-sub { color: rgba(123,114,168,0.70); }

/* Frosted glass card */
.stat-card {
  position: relative;
  overflow: hidden;
  background: rgba(52, 58, 64, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(173, 181, 189, 0.22);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.light-mode .stat-card {
  background: rgba(233, 236, 239, 0.72);
  border-color: rgba(73, 80, 87, 0.18);
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(248, 249, 250, 0.12) 0%,
    transparent 60%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.20s;
}
.stat-card:hover::before { opacity: 1; }
.stat-card:hover {
  border-color: rgba(173,181,189,0.45);
  box-shadow: 0 4px 24px rgba(33,37,41,0.50);
}
.light-mode .stat-card:hover {
  border-color: rgba(73,80,87,0.35);
  box-shadow: 0 4px 20px rgba(73,80,87,0.16);
}

/* Data table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.data-table th {
  text-align: left;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--edge);
  padding: 0.5rem 0.75rem;
}
.data-table td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--edge);
  color: var(--prose);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover {
  background: rgba(173,181,189,0.08);
}
.light-mode .data-table tbody tr:hover {
  background: rgba(73,80,87,0.06);
}

/* Prop grid */
.prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
}
.prop-card {
  position: relative;
  overflow: hidden;
  background: rgba(52, 58, 64, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(173, 181, 189, 0.18);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.light-mode .prop-card {
  background: rgba(233, 236, 239, 0.65);
  border-color: rgba(73, 80, 87, 0.16);
}
.prop-card:hover {
  border-color: rgba(173,181,189,0.42);
  box-shadow: 0 2px 12px rgba(33,37,41,0.38);
}
.light-mode .prop-card:hover {
  border-color: rgba(73,80,87,0.32);
}

.prop-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin-bottom: 0.2rem;
}
.prop-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--prose);
}

.bar-wrap { height: 6px; background: var(--edge); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }

/* Form inputs */
input[type=text], input[type=number], input[type=password], select, textarea {
  background: rgba(52,58,64,0.70);
  border: 1px solid var(--edge);
  color: var(--prose);
  border-radius: 4px;
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  font-family: 'Ubuntu', sans-serif;
  outline: none;
  width: 100%;
}
.light-mode input[type=text],
.light-mode input[type=number],
.light-mode input[type=password],
.light-mode select,
.light-mode textarea {
  background: rgba(233,236,239,0.70);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(173,181,189,0.20);
}

/* Buttons — frosted glass */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
}

.btn-primary {
  background: rgba(9, 161, 161, 0.20);
  border-color: rgba(9, 161, 161, 0.55);
  color: #5ACFCF;
  box-shadow: 0 2px 10px rgba(9,161,161,0.18);
}
.btn-primary:hover {
  background: rgba(9, 161, 161, 0.36);
  border-color: rgba(9, 161, 161, 0.82);
  color: #8FDFDF;
  box-shadow: 0 4px 18px rgba(9,161,161,0.28);
}
.light-mode .btn-primary {
  background: rgba(9, 161, 161, 0.10);
  border-color: rgba(9, 161, 161, 0.50);
  color: #066868;
  box-shadow: 0 2px 8px rgba(9,161,161,0.14);
}
.light-mode .btn-primary:hover {
  background: rgba(9, 161, 161, 0.20);
  border-color: rgba(9, 161, 161, 0.75);
  color: #044444;
}

.btn-ghost {
  background: rgba(84, 132, 164, 0.10);
  border-color: rgba(84, 132, 164, 0.30);
  color: var(--dim);
}
.btn-ghost:hover {
  background: rgba(84, 132, 164, 0.20);
  border-color: rgba(84, 132, 164, 0.55);
  color: var(--prose);
}
.light-mode .btn-ghost {
  background: rgba(84, 132, 164, 0.08);
  border-color: rgba(84, 132, 164, 0.28);
  color: var(--dim);
}
.light-mode .btn-ghost:hover {
  background: rgba(84, 132, 164, 0.16);
  border-color: rgba(84, 132, 164, 0.50);
  color: #212529;
}

.btn:hover { box-shadow: 0 2px 12px rgba(173,181,189,0.18); }
.btn-sm { padding: 0.25rem 0.65rem; font-size: 0.72rem; }

/* Enzyme name tags */
.etag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.etag-trypsin      { background: rgba(209,128,30,0.28);  color: #E8952A; border-color: rgba(209,128,30,0.70); }
.etag-chymotrypsin { background: rgba(230,57,70,0.28);  color: #FF8088; border-color: rgba(230,57,70,0.70); }
.etag-caspase      { background: rgba(170,133,82,0.28);  color: #C8A260; border-color: rgba(170,133,82,0.70); }
.etag-pseudoenzyme { background: rgba(122,125,130,0.28); color: #C0C3C8; border-color: rgba(122,125,130,0.70); }

.light-mode .etag-trypsin      { background: rgba(209,128,30,0.18);  color: #7A3E00; border-color: rgba(209,128,30,0.65); }
.light-mode .etag-chymotrypsin { background: rgba(230,57,70,0.14);  color: #8B0000; border-color: rgba(230,57,70,0.55); }
.light-mode .etag-caspase      { background: rgba(170,133,82,0.18);  color: #5A3808; border-color: rgba(170,133,82,0.65); }
.light-mode .etag-pseudoenzyme { background: rgba(122,125,130,0.18); color: #3A3D42; border-color: rgba(122,125,130,0.65); }

/* Labels */
.section-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.75rem;
}

/* Pagination */
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  font-size: 0.78rem;
  background: rgba(52,58,64,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(173,181,189,0.22);
  color: var(--prose);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.light-mode .pagination-btn {
  background: rgba(233,236,239,0.65);
  border-color: rgba(73,80,87,0.18);
}
.pagination-btn:hover {
  border-color: rgba(206,212,218,0.52);
  color: #f8f9fa;
}
.light-mode .pagination-btn:hover {
  border-color: rgba(52,58,64,0.48);
  color: #212529;
}
.pagination-btn.active {
  background: rgba(108,117,125,0.55);
  border-color: rgba(206,212,218,0.62);
  color: #f8f9fa;
}
.light-mode .pagination-btn.active {
  background: rgba(52,58,64,0.55);
  border-color: rgba(52,58,64,0.80);
  color: #f8f9fa;
}

/* Alert banners */
.alert { border-radius: 4px; padding: 0.65rem 1rem; font-size: 0.875rem; border: 1px solid transparent; }
.alert-success { background: rgba(44,80,44,0.28); border-color: rgba(90,160,90,0.38); color: #6bbf6b; }
.alert-warn    { background: rgba(80,60,10,0.28); border-color: rgba(180,140,30,0.38); color: #b89a30; }
.alert-error   { background: rgba(80,30,30,0.28); border-color: rgba(160,60,60,0.38); color: #c07070; }
.light-mode .alert-success { color: #2d6b2d; }
.light-mode .alert-warn    { color: #7a5a00; }
.light-mode .alert-error   { color: #8b2020; }

/* Delete button */
.btn-delete {
  background: rgba(120,40,40,0.25);
  border-color: rgba(180,70,70,0.45);
  color: #c08080;
}
.btn-delete:hover {
  background: rgba(150,50,50,0.40);
  border-color: rgba(210,90,90,0.65);
  color: #d09090;
}
.light-mode .btn-delete {
  background: rgba(160,50,50,0.14);
  border-color: rgba(150,50,50,0.50);
  color: #8b2020;
}
.light-mode .btn-delete:hover {
  background: rgba(160,50,50,0.26);
  border-color: rgba(140,40,40,0.72);
  color: #6a1010;
}