:root {
  --fonts-proportional:
    "IBM Plex Sans KR",
    "Pretendard Variable",
    "Inter",
    "Segoe UI",
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    Arial,
    sans-serif !important;
  --fonts-monospace:
    "JetBrains Mono",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace !important;
}

html[data-theme] {
  --color-primary: #dbe5f5;
  --color-primary-contrast: #0b0b0d;
  --color-primary-dark-1: #f4f1ec;
  --color-primary-dark-2: #ffffff;
  --color-primary-light-1: #c0cfe0;
  --color-primary-light-2: #9dadc0;
  --color-primary-alpha-10: rgba(219, 229, 245, 0.1);
  --color-primary-alpha-20: rgba(219, 229, 245, 0.18);
  --color-primary-alpha-30: rgba(219, 229, 245, 0.28);
  --color-primary-alpha-40: rgba(219, 229, 245, 0.4);
  --color-primary-hover: #f4f1ec;
  --color-primary-active: #ffffff;
  --color-body: #0b0b0d;
  --color-box-header: #121216;
  --color-box-body: #111318;
  --color-box-body-highlight: #171a20;
  --color-card: #111318;
  --fancy-card-bg: #111318;
  --fancy-card-border: rgba(255, 255, 255, 0.08);
  --color-text: #f4f1ec;
  --color-text-dark: #ffffff;
  --color-text-light: rgba(244, 241, 236, 0.86);
  --color-text-light-1: rgba(244, 241, 236, 0.76);
  --color-text-light-2: rgba(244, 241, 236, 0.62);
  --color-text-light-3: rgba(244, 241, 236, 0.48);
  --color-footer: #101014;
  --color-input-text: #f4f1ec;
  --color-input-background: #101216;
  --color-input-toggle-background: #101216;
  --color-input-border: rgba(255, 255, 255, 0.12);
  --color-input-border-hover: rgba(255, 255, 255, 0.22);
  --color-header-wrapper: #0f1014;
  --color-header-wrapper-transparent: rgba(15, 16, 20, 0);
  --color-hover: rgba(244, 241, 236, 0.05);
  --color-active: rgba(244, 241, 236, 0.08);
  --color-menu: #13161c;
  --color-button: #171a20;
  --color-code-bg: #111318;
  --color-markup-code-block: #111318;
  --color-markup-code-inline: rgba(255, 255, 255, 0.06);
  --color-secondary-bg: #15171c;
  --color-shadow: rgba(0, 0, 0, 0.32);
  --color-timeline: rgba(255, 255, 255, 0.08);
  --color-label-text: #f4f1ec;
  --color-label-bg: rgba(244, 241, 236, 0.08);
  --color-label-hover-bg: rgba(244, 241, 236, 0.12);
  --color-label-active-bg: rgba(244, 241, 236, 0.16);
  --color-accent: #dbe5f5;
  --color-small-accent: #9dadc0;
  --color-highlight-fg: #dbe5f5;
  --color-highlight-bg: rgba(219, 229, 245, 0.12);
  --color-overlay-backdrop: rgba(8, 8, 8, 0.78);
  --color-secondary-nav-bg: #0b0b0d;
  --color-nav-bg: #0f1014;
  --color-nav-hover-bg: rgba(244, 241, 236, 0.08);
  --color-nav-text: #f4f1ec;
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.08), transparent 22%),
    radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.03), transparent 16%),
    linear-gradient(180deg, #080809 0%, #101014 100%);
}

#navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(16px);
  background: rgba(11, 11, 13, 0.84);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
}

#navbar .navbar-left,
#navbar .navbar-right {
  gap: 4px;
}

#navbar .item,
.ui.secondary.menu .item,
.ui.tabular.menu .item {
  min-height: 38px;
  margin: 0 2px;
  border-radius: 8px;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

#navbar .item:hover,
.ui.secondary.menu .item:hover,
.ui.tabular.menu .item:hover {
  background: rgba(244, 241, 236, 0.05) !important;
}

#navbar .active.item,
.ui.menu .active.item,
.ui.tabular.menu .active.item {
  background: rgba(244, 241, 236, 0.08) !important;
  color: #f4f1ec !important;
}

#navbar-logo {
  padding-right: 10px;
}

#navbar-logo img {
  width: 28px;
  height: 28px;
}

.page-content.explore .ui.container,
.page-content.repository .ui.container,
.page-content.user.profile .ui.container,
.page-content.organization .ui.container {
  width: min(1280px, calc(100% - 40px));
}

.page-content.explore .ui.container {
  padding-top: 24px;
}

.ui.secondary.filter.menu,
.ui.segment,
.ui.attached.segment,
.ui.top.attached.segment,
.ui.message,
.ui.card,
.ui.fluid.card,
.ui.menu .ui.dropdown .menu,
.ui.selection.dropdown,
.ui.popup,
.ui.modal > .content {
  background: rgba(17, 19, 24, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24) !important;
}

.ui.segment,
.ui.attached.segment,
.ui.message,
.ui.card,
.ui.fluid.card {
  border-radius: 12px !important;
}

.ui.secondary.filter.menu {
  padding: 12px 14px;
  border-radius: 12px !important;
}

.ui.input > input,
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.form textarea,
.ui.selection.dropdown {
  min-height: 44px;
  border-radius: 10px !important;
  background: #101216 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f4f1ec !important;
}

.ui.form textarea {
  min-height: 120px;
}

.ui.input > input::placeholder,
.ui.form textarea::placeholder {
  color: rgba(244, 241, 236, 0.45);
}

.ui.button,
.ui.buttons .button,
.btn,
a.ui.button {
  min-height: 42px;
  border-radius: 10px !important;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.ui.button:hover,
.ui.buttons .button:hover,
.btn:hover {
  transform: translateY(-1px);
}

.ui.primary.button,
.ui.primary.buttons .button,
.ui.button.primary {
  background: #f4f1ec !important;
  color: #0b0b0d !important;
}

.ui.basic.button,
.ui.basic.buttons .button,
.ui.secondary.button,
.btn,
a.ui.basic.button {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f4f1ec !important;
}

.flex-list .flex-item,
.repo-button-row + .ui.segment,
.dashboard.feeds .news,
.user.profile .ui.card,
.organization.profile .ui.card {
  border-radius: 14px;
  background: rgba(17, 19, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.2);
}

.flex-list .flex-item {
  padding: 16px 18px;
  margin-bottom: 14px;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.flex-list .flex-item:hover {
  transform: translateY(-1px);
  border-color: rgba(219, 229, 245, 0.24);
  background: rgba(20, 23, 29, 0.92);
}

.flex-item-title .name,
a.text.primary,
.repo-title a,
.ui.header a,
.ui.list .list > .item a,
.ui.list > .item a {
  color: #f4f1ec !important;
}

.flex-item-title .name:hover,
a.text.primary:hover,
.repo-title a:hover,
.ui.header a:hover {
  color: #dbe5f5 !important;
}

.flex-item-body,
.muted,
.text.light,
.text.grey,
.ui.list > .item .description,
.ui.items > .item > .content > .description,
.ui.user.list .item .desc {
  color: rgba(244, 241, 236, 0.72) !important;
}

.ui.label,
.topic.label,
.repo-topic {
  border-radius: 999px !important;
  background: rgba(244, 241, 236, 0.08) !important;
  color: #f4f1ec !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ui.secondary.pointing.menu,
.ui.tabular.menu {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.ui.secondary.pointing.menu .item,
.ui.tabular.menu .item {
  border-bottom-width: 2px !important;
}

.ui.secondary.pointing.menu .active.item,
.ui.tabular.menu .active.item {
  border-color: #f4f1ec !important;
}

.ui.dropdown .menu > .item,
.ui.selection.dropdown .menu > .item {
  color: #f4f1ec !important;
}

.ui.dropdown .menu > .item:hover,
.ui.selection.dropdown .menu > .item:hover {
  background: rgba(244, 241, 236, 0.06) !important;
}

.page-footer {
  background: rgba(15, 16, 20, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.page-footer .left-links {
  display: none !important;
}

.page-footer .right-links {
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.page-footer .links {
  gap: 6px 10px;
}

.page-footer .links .item,
.page-footer .ui.language .item,
.page-footer .ui.dropdown > .text {
  color: rgba(244, 241, 236, 0.72) !important;
}

.page-footer .links .item:hover,
.page-footer .ui.language .item:hover {
  color: #f4f1ec !important;
}

a,
.ui.menu .item,
.ui.button,
.ui.dropdown > .text {
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

::selection {
  background: rgba(219, 229, 245, 0.3);
  color: #ffffff;
}

@media (max-width: 767px) {
  .page-content.explore .ui.container,
  .page-content.repository .ui.container,
  .page-content.user.profile .ui.container,
  .page-content.organization .ui.container {
    width: min(100%, calc(100% - 24px));
  }

  .ui.secondary.filter.menu {
    padding: 10px 12px;
  }

  .flex-list .flex-item {
    padding: 14px 14px 16px;
  }
}