:root,
:root.dark {
  --blue: #24d1c7;
  --dark-blue: #16aaa5;
  --background: #071014;
  --surfacePrimary: #0d171b;
  --surfaceSecondary: #122228;
  --divider: rgba(112, 235, 226, 0.08);
  --iconPrimary: #48ddd3;
  --iconSecondary: #f4ffff;
  --iconTertiary: #284047;
  --textPrimary: #9eb1b6;
  --textSecondary: #eff9fa;
  --hover: rgba(52, 218, 207, 0.09);
  --borderPrimary: rgba(133, 236, 228, 0.12);
  --borderSecondary: rgba(66, 221, 211, 0.4);
  color-scheme: dark;
}

* {
  scrollbar-color: #25434a #091216;
}

body {
  background:
    radial-gradient(circle at 82% -8%, rgba(31, 196, 188, 0.09), transparent 30rem),
    var(--background);
  color: var(--textSecondary);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

header {
  background: rgba(10, 21, 25, 0.92);
  border-bottom: 1px solid rgba(67, 222, 212, 0.13);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
}

header img {
  height: 2.6rem;
}

header title {
  color: #efffff;
  font-weight: 650;
  letter-spacing: 0.015em;
}

nav {
  background: linear-gradient(180deg, rgba(13, 25, 30, 0.97), rgba(8, 17, 21, 0.98));
  border-right: 1px solid rgba(77, 217, 208, 0.09);
  min-height: calc(100vh - 4em);
}

nav > div {
  border-color: rgba(126, 232, 224, 0.07);
}

.credits {
  display: none !important;
}

nav .action {
  border-left: 2px solid transparent;
  color: #9eb3b8;
  padding: 0.7em 0.8em;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

nav .action:hover,
nav .action[aria-current="page"] {
  background: linear-gradient(90deg, rgba(36, 209, 199, 0.12), transparent);
  border-left-color: #24d1c7;
  color: #f1ffff;
}

.breadcrumbs {
  background: rgba(7, 16, 20, 0.88);
  border-color: rgba(89, 222, 212, 0.1);
  backdrop-filter: blur(12px);
}

#listing .item {
  border-color: rgba(109, 225, 217, 0.08);
}

#listing.list .item:not(.header):hover {
  background: rgba(42, 205, 195, 0.07);
}

#listing.mosaic .item,
.card {
  background: linear-gradient(145deg, rgba(17, 32, 38, 0.96), rgba(11, 22, 26, 0.98));
  border: 1px solid rgba(100, 224, 215, 0.1);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.button {
  background: linear-gradient(135deg, #2bd6cb, #18aaa5);
  border: 1px solid rgba(168, 255, 248, 0.16);
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(21, 174, 168, 0.18);
  color: #031414;
  font-weight: 700;
  padding: 0.65em 1.15em;
}

.button:hover {
  background: linear-gradient(135deg, #54e6dd, #20bbb4);
  box-shadow: 0 10px 28px rgba(30, 206, 197, 0.25);
}

.button--flat {
  background: transparent;
  box-shadow: none;
  color: #55ddd5;
}

.button--flat:hover {
  background: rgba(44, 207, 197, 0.08);
}

.input {
  background: rgba(4, 12, 15, 0.72);
  border: 1px solid rgba(119, 225, 218, 0.16);
  border-radius: 9px;
  color: #f1fbfc;
  padding: 0.72em 0.95em;
}

.input:hover,
.input:focus {
  border-color: rgba(52, 221, 210, 0.65);
  box-shadow: 0 0 0 3px rgba(35, 207, 197, 0.09);
  outline: none;
}

#login {
  background:
    radial-gradient(circle at 50% 18%, rgba(36, 209, 199, 0.15), transparent 23rem),
    linear-gradient(160deg, #071014 0%, #09161a 48%, #050b0e 100%);
}

#login::before {
  background-image:
    linear-gradient(rgba(99, 231, 222, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 231, 222, 0.025) 1px, transparent 1px);
  background-size: 38px 38px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
  pointer-events: none;
  position: absolute;
}

#login form {
  background: linear-gradient(155deg, rgba(18, 34, 40, 0.95), rgba(8, 18, 22, 0.96));
  border: 1px solid rgba(104, 232, 223, 0.14);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  max-width: 24rem;
  padding: 2.25rem;
}

#login img {
  filter: drop-shadow(0 8px 20px rgba(41, 218, 207, 0.2));
  height: 5rem;
  width: 5rem;
}

#login h1 {
  color: #f3ffff;
  font-size: 1.65rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  margin: 0.7em 0 1.1em;
}

#login p {
  color: #55ddd5;
  text-transform: none;
}

.share__box__icon i {
  color: #24d1c7;
  filter: drop-shadow(0 8px 22px rgba(36, 209, 199, 0.18));
}

#modal-background {
  backdrop-filter: blur(8px);
}

@media (max-width: 736px) {
  #login form {
    max-width: calc(100% - 2rem);
    padding: 1.6rem;
  }

  nav {
    min-height: 100vh;
  }
}