:root {
  --fonts-regular: "Jost", "Libre Franklin", "Noto Sans SC",
    "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --fonts-monospace: "JetBrains Mono", "SFMono-Regular", Consolas,
    "Liberation Mono", monospace;
  --border-radius: 0.55rem;
  --color-primary: #145267;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #103f50;
  --color-primary-dark-2: #0d3443;
  --color-primary-light-1: #1b687f;
  --color-primary-light-2: #247a8c;
  --color-primary-light-5: #b9dfe2;
  --color-primary-light-6: #dceff0;
  --color-primary-light-7: #eef7f7;
  --color-primary-alpha-10: #14526719;
  --color-primary-alpha-20: #14526733;
  --color-primary-alpha-30: #1452674b;
  --color-secondary: #d8e4e6;
  --color-secondary-dark-1: #cbdadd;
  --color-secondary-light-4: #f4f8f8;
  --color-body: #f4f8f8;
  --color-box-header: #eaf2f3;
  --color-box-body: #ffffff;
  --color-text-dark: #0d171b;
  --color-text: #172126;
  --color-text-light: #52646c;
  --color-text-light-1: #52646c;
  --color-text-light-2: #64757c;
  --color-input-text: #172126;
  --color-input-background: #ffffff;
  --color-input-border: #cbdadd;
  --color-nav-bg: #eaf2f3;
  --color-nav-hover-bg: #dcebed;
  --color-nav-text: #172126;
  --color-secondary-nav-bg: #f4f8f8;
  --color-menu: #ffffff;
  --color-card: #ffffff;
  --color-button: #f4f8f8;
  --color-code-bg: #f7fbfb;
  --color-hover: #1452670f;
  --color-hover-opaque: #eaf2f3;
  --color-active: #1452671a;
  --color-light: #14526708;
  --color-light-border: #d8e4e6;
  --color-shadow: #081c2d1a;
  --color-shadow-opaque: #cbdadd;
  --color-accent: #187c77;
  --color-small-accent: #dceff0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #5fc7c1;
    --color-primary-contrast: #061725;
    --color-primary-dark-1: #4db7b1;
    --color-primary-dark-2: #3ea49e;
    --color-primary-light-1: #75d2cc;
    --color-primary-light-2: #88ddd7;
    --color-primary-light-5: #25485c;
    --color-primary-light-6: #173d50;
    --color-primary-light-7: #123248;
    --color-primary-alpha-10: #5fc7c119;
    --color-primary-alpha-20: #5fc7c133;
    --color-primary-alpha-30: #5fc7c14b;
    --color-secondary: #25485c;
    --color-secondary-dark-1: #31596f;
    --color-secondary-light-4: #07131c;
    --color-body: #061725;
    --color-box-header: #123248;
    --color-box-body: #0d2638;
    --color-text-dark: #f4fbfb;
    --color-text: #edf7f7;
    --color-text-light: #aec2c8;
    --color-text-light-1: #aec2c8;
    --color-text-light-2: #91aab2;
    --color-input-text: #edf7f7;
    --color-input-background: #0d2638;
    --color-input-border: #31596f;
    --color-nav-bg: #0d2638;
    --color-nav-hover-bg: #173d50;
    --color-nav-text: #edf7f7;
    --color-secondary-nav-bg: #091e2e;
    --color-menu: #0d2638;
    --color-card: #0d2638;
    --color-button: #123248;
    --color-code-bg: #07131c;
    --color-hover: #88ddd714;
    --color-hover-opaque: #123248;
    --color-active: #88ddd724;
    --color-light: #ffffff09;
    --color-light-border: #25485c;
    --color-shadow: #00000040;
    --color-shadow-opaque: #020b12;
    --color-accent: #88ddd7;
    --color-small-accent: #173d50;
  }
}

html[data-drwater-theme="ocean"] {
  color-scheme: dark;
  --color-primary: #5fc7c1;
  --color-primary-contrast: #061725;
  --color-primary-dark-1: #4db7b1;
  --color-primary-dark-2: #3ea49e;
  --color-primary-light-1: #75d2cc;
  --color-primary-light-2: #88ddd7;
  --color-primary-light-5: #25485c;
  --color-primary-light-6: #173d50;
  --color-primary-light-7: #123248;
  --color-primary-alpha-10: #5fc7c119;
  --color-primary-alpha-20: #5fc7c133;
  --color-primary-alpha-30: #5fc7c14b;
  --color-secondary: #25485c;
  --color-secondary-dark-1: #31596f;
  --color-secondary-light-4: #07131c;
  --color-body: #061725;
  --color-box-header: #123248;
  --color-box-body: #0d2638;
  --color-text-dark: #f4fbfb;
  --color-text: #edf7f7;
  --color-text-light: #aec2c8;
  --color-text-light-1: #aec2c8;
  --color-text-light-2: #91aab2;
  --color-input-text: #edf7f7;
  --color-input-background: #0d2638;
  --color-input-border: #31596f;
  --color-nav-bg: #0d2638;
  --color-nav-hover-bg: #173d50;
  --color-nav-text: #edf7f7;
  --color-secondary-nav-bg: #091e2e;
  --color-menu: #0d2638;
  --color-card: #0d2638;
  --color-button: #123248;
  --color-code-bg: #07131c;
  --color-hover: #88ddd714;
  --color-hover-opaque: #123248;
  --color-active: #88ddd724;
  --color-light: #ffffff09;
  --color-light-border: #25485c;
  --color-shadow: #00000040;
  --color-shadow-opaque: #020b12;
  --color-accent: #88ddd7;
  --color-small-accent: #173d50;
}

html[data-drwater-theme="paper"] {
  color-scheme: light;
  --color-primary: #145267;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #103f50;
  --color-primary-dark-2: #0d3443;
  --color-primary-light-1: #1b687f;
  --color-primary-light-2: #247a8c;
  --color-primary-light-5: #b9dfe2;
  --color-primary-light-6: #dceff0;
  --color-primary-light-7: #eef7f7;
  --color-primary-alpha-10: #14526719;
  --color-primary-alpha-20: #14526733;
  --color-primary-alpha-30: #1452674b;
  --color-secondary: #d8e4e6;
  --color-secondary-dark-1: #cbdadd;
  --color-secondary-light-4: #f4f8f8;
  --color-body: #f4f8f8;
  --color-box-header: #eaf2f3;
  --color-box-body: #ffffff;
  --color-text-dark: #0d171b;
  --color-text: #172126;
  --color-text-light: #52646c;
  --color-text-light-1: #52646c;
  --color-text-light-2: #64757c;
  --color-input-text: #172126;
  --color-input-background: #ffffff;
  --color-input-border: #cbdadd;
  --color-nav-bg: #eaf2f3;
  --color-nav-hover-bg: #dcebed;
  --color-nav-text: #172126;
  --color-secondary-nav-bg: #f4f8f8;
  --color-menu: #ffffff;
  --color-card: #ffffff;
  --color-button: #f4f8f8;
  --color-code-bg: #f7fbfb;
  --color-hover: #1452670f;
  --color-hover-opaque: #eaf2f3;
  --color-active: #1452671a;
  --color-light: #14526708;
  --color-light-border: #d8e4e6;
  --color-shadow: #081c2d1a;
  --color-shadow-opaque: #cbdadd;
  --color-accent: #187c77;
  --color-small-accent: #dceff0;
}

html[data-drwater-theme="sand"] {
  color-scheme: light;
  --color-primary: #315f62;
  --color-primary-contrast: #fffaf0;
  --color-primary-dark-1: #274e50;
  --color-primary-dark-2: #1f4143;
  --color-primary-light-1: #3f7072;
  --color-primary-light-2: #568183;
  --color-primary-light-5: #d9cbb8;
  --color-primary-light-6: #e9decd;
  --color-primary-light-7: #f2e9dc;
  --color-primary-alpha-10: #315f6219;
  --color-primary-alpha-20: #315f6233;
  --color-primary-alpha-30: #315f624b;
  --color-secondary: #d8cbb7;
  --color-secondary-dark-1: #c8b9a3;
  --color-secondary-light-4: #f5efe2;
  --color-body: #f5efe2;
  --color-box-header: #ede4d4;
  --color-box-body: #fffaf0;
  --color-text-dark: #242521;
  --color-text: #2d302e;
  --color-text-light: #716b60;
  --color-text-light-1: #716b60;
  --color-text-light-2: #827b6f;
  --color-input-text: #2d302e;
  --color-input-background: #fffaf0;
  --color-input-border: #d8cbb7;
  --color-nav-bg: #ede4d4;
  --color-nav-hover-bg: #e3d7c4;
  --color-nav-text: #2d302e;
  --color-secondary-nav-bg: #f5efe2;
  --color-menu: #fffaf0;
  --color-card: #fffaf0;
  --color-button: #f5efe2;
  --color-code-bg: #eee5d5;
  --color-hover: #315f6212;
  --color-hover-opaque: #ede4d4;
  --color-active: #315f6222;
  --color-light: #315f6209;
  --color-light-border: #d8cbb7;
  --color-shadow: #3e34291f;
  --color-shadow-opaque: #d8cbb7;
  --color-accent: #8f7548;
  --color-small-accent: #e9dec9;
}

html[data-drwater-theme="slate"] {
  color-scheme: dark;
  --color-primary: #8bd3cf;
  --color-primary-contrast: #111820;
  --color-primary-dark-1: #74c4c0;
  --color-primary-dark-2: #63b5b1;
  --color-primary-light-1: #9cdbd7;
  --color-primary-light-2: #afe3df;
  --color-primary-light-5: #394956;
  --color-primary-light-6: #26333e;
  --color-primary-light-7: #1e2a35;
  --color-primary-alpha-10: #8bd3cf1a;
  --color-primary-alpha-20: #8bd3cf33;
  --color-primary-alpha-30: #8bd3cf4d;
  --color-secondary: #394956;
  --color-secondary-dark-1: #465867;
  --color-secondary-light-4: #111820;
  --color-body: #111820;
  --color-box-header: #26333e;
  --color-box-body: #1b252f;
  --color-text-dark: #f5f8f9;
  --color-text: #edf2f4;
  --color-text-light: #afbdc5;
  --color-text-light-1: #afbdc5;
  --color-text-light-2: #94a6b0;
  --color-input-text: #edf2f4;
  --color-input-background: #1b252f;
  --color-input-border: #394956;
  --color-nav-bg: #1b252f;
  --color-nav-hover-bg: #263844;
  --color-nav-text: #edf2f4;
  --color-secondary-nav-bg: #0e151b;
  --color-menu: #1b252f;
  --color-card: #1b252f;
  --color-button: #26333e;
  --color-code-bg: #15212a;
  --color-hover: #8bd3cf14;
  --color-hover-opaque: #263844;
  --color-active: #8bd3cf24;
  --color-light: #ffffff09;
  --color-light-border: #394956;
  --color-shadow: #00000045;
  --color-shadow-opaque: #080d12;
  --color-accent: #8bd3cf;
  --color-small-accent: #26333e;
}

html,
body {
  font-family: var(--fonts-regular);
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--color-primary) 11%, transparent), transparent 28rem),
    var(--color-body);
}

#navbar {
  position: relative;
  z-index: 100000;
  overflow: visible !important;
  border-bottom: 1px solid var(--color-secondary);
  background:
    linear-gradient(
      112deg,
      color-mix(in srgb, var(--color-nav-bg) 92%, black),
      color-mix(in srgb, var(--color-nav-bg) 82%, var(--color-primary))
    );
  box-shadow: 0 0.35rem 1.4rem color-mix(in srgb, var(--color-shadow) 70%, transparent);
  backdrop-filter: blur(16px);
}

#navbar .ui.container,
#navbar .ui.menu,
#navbar .ui.dropdown {
  overflow: visible !important;
}

#navbar .ui.dropdown {
  position: relative;
  z-index: 100001;
}

#navbar .ui.dropdown > .menu,
#navbar .ui.dropdown .menu,
#navbar .ui.floating.dropdown > .menu,
body > .ui.dropdown > .menu {
  z-index: 2147483200 !important;
}

#navbar .item:hover,
#navbar .item:focus-visible {
  background: var(--color-nav-hover-bg);
}

#navbar img[src*="/assets/img/logo.svg"] {
  content: url("/assets/img/logo.svg?v=20261029");
}

/* Keep the dashboard user/org selector, but avoid duplicating the account
   avatar that already appears in the top-right account menu. */
.dashboard .secondary-nav .ui.floating.dropdown.jump > .text > img {
  display: none !important;
}

.dashboard .secondary-nav .ui.floating.dropdown.jump > .text {
  gap: 0.25rem;
}

.ui.button,
.ui.menu,
.ui.card,
.ui.modal,
.ui.segment,
.ui.input > input,
.ui.form input:not([type="checkbox"], [type="radio"]),
.ui.form textarea {
  border-radius: var(--border-radius);
}

.ui.button.primary,
.ui.primary.button {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.ui.button.primary:hover,
.ui.primary.button:hover {
  background: var(--color-primary-dark-1);
}

.ui.card,
.ui.segment,
.repository .segment,
.ui.attached.segment {
  border-color: var(--color-light-border);
  box-shadow: 0 0.45rem 1.4rem color-mix(in srgb, var(--color-shadow) 55%, transparent);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 55%, transparent);
}