:root {
  --ink: #13284d;
  --muted: #66758b;
  --line: #dce4ee;
  --soft: #f4f7fb;
  --teal: #123a73;
  --teal-dark: #0b2a58;
  --aqua: #e7eef8;
  --climesa-navy: #102d5b;
  --climesa-navy-deep: #081f42;
  --climesa-orange: #f4a019;
  --climesa-orange-soft: #fff3dd;
  --shadow: 0 12px 34px rgba(15, 43, 84, .09);
}

body {
  background:
    radial-gradient(circle at 92% 3%, rgba(244, 160, 25, .08), transparent 26rem),
    #f7f9fc;
  color: var(--ink);
}

.sidebar {
  width: 242px;
  padding: 23px 16px 20px;
  background:
    linear-gradient(165deg, rgba(244, 160, 25, .08), transparent 32%),
    linear-gradient(180deg, var(--climesa-navy) 0%, var(--climesa-navy-deep) 100%);
  box-shadow: 8px 0 30px rgba(8, 31, 66, .12);
}

.brand {
  gap: 11px;
  margin: 0 2px 22px;
  padding: 9px 9px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  color: #fff;
  text-decoration: none;
}

.brand-mark {
  width: 49px;
  height: 49px;
  padding: 5px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand strong {
  color: #fff;
  font-size: 15px;
  letter-spacing: 1.6px;
}

.brand small {
  color: #d5dfef;
  font-size: 9px;
  letter-spacing: .35px;
}

.sidebar nav {
  gap: 4px;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 43px;
  color: #ced8e8;
  text-decoration: none;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.nav::before {
  content: "";
  position: absolute;
  left: -16px;
  width: 4px;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: var(--climesa-orange);
  transition: height .16s ease;
}

.nav:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transform: translateX(2px);
}

.nav.active {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-weight: 650;
}

.nav.active::before {
  height: 25px;
}

.nav.active span {
  color: var(--climesa-orange);
}

.sidebar-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  color: #d4deed;
}

.sidebar-foot small {
  grid-column: 2;
  color: #8192ac;
  font-size: 9px;
}

.status-dot {
  grid-row: 1 / 3;
  background: #49d59a;
  box-shadow: 0 0 0 4px rgba(73, 213, 154, .12);
}

main {
  margin-left: 242px;
  padding: 0 38px 55px;
}

.app-header {
  position: relative;
  height: 108px;
  margin-bottom: 3px;
}

.app-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--climesa-navy) 0 76%, var(--climesa-orange) 76% 100%);
  opacity: .25;
}

.header-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--climesa-orange);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.25px;
}

.app-header h1 {
  color: var(--climesa-navy);
  font-size: 25px;
  letter-spacing: -.3px;
}

.primary,
.outline,
.type-card,
.link {
  text-decoration: none;
}

.primary {
  border-color: var(--climesa-navy);
  background: var(--climesa-navy);
}

.primary:hover {
  border-color: var(--climesa-navy-deep);
  background: var(--climesa-navy-deep);
}

.primary.light {
  border-color: #fff;
  background: #fff;
  color: var(--climesa-navy);
}

.header-action {
  display: inline-flex;
  align-items: center;
  box-shadow: 0 7px 18px rgba(16, 45, 91, .17);
}

.welcome {
  min-height: 250px;
  background:
    radial-gradient(circle at 88% 26%, rgba(244, 160, 25, .3), transparent 13rem),
    linear-gradient(120deg, #102d5b, #17447f 72%, #c67f13 145%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 44px rgba(12, 39, 79, .18);
}

.welcome .eyebrow {
  color: #f9bd5c;
  font-weight: 800;
}

.welcome h2 {
  max-width: 620px;
  font-size: 31px;
}

.welcome p {
  color: #d9e3f1;
}

.mini-paper b,
.type-card em,
.link {
  color: var(--climesa-navy);
}

.type-grid {
  gap: 15px;
}

.type-card {
  position: relative;
  color: var(--ink);
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.type-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--climesa-navy) 0 72%, var(--climesa-orange) 72%);
  opacity: 0;
  transition: opacity .16s ease;
}

button.type-card:hover,
a.type-card:hover {
  border-color: #a8bad2;
  box-shadow: 0 12px 28px rgba(15, 43, 84, .11);
  transform: translateY(-3px);
}

.type-card:hover::after {
  opacity: 1;
}

.type-card i {
  color: var(--climesa-navy);
  background: var(--climesa-orange-soft);
}

.type-card:nth-child(3n) i {
  color: #fff;
  background: var(--climesa-navy);
}

.panel {
  border-color: #dbe3ed;
  box-shadow: var(--shadow);
}

.panel-head {
  border-bottom-color: #e3e9f1;
}

.badge {
  color: var(--climesa-navy);
  background: #e8eef7;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.filters input:focus {
  border-color: #6885ae;
  box-shadow: 0 0 0 3px #e8eef7;
}

.segmented button.active {
  color: var(--climesa-navy);
  box-shadow: 0 2px 8px rgba(16, 45, 91, .13);
}

@media (max-width: 760px) {
  .sidebar {
    width: 72px;
    padding: 17px 9px;
  }

  .brand {
    margin: 0;
    padding: 4px 3px 20px;
  }

  .brand-mark {
    width: 48px;
    height: 48px;
  }

  .brand > div,
  .sidebar-foot {
    display: none;
  }

  .sidebar nav .nav:not(.active) {
    font-size: 0;
  }

  main {
    margin-left: 72px;
    padding: 0 14px 30px;
  }

  .app-header {
    height: 94px;
  }
}