:root {
  --primary:          #1463e9;
  --secondary:        #ec168a;
  --panel:            #fff;
  --line:             #e7ebf3;
  --text:             #101842;
  --soft:             #526284;
  --radius:           1rem;
  --shadow:           0 .6rem 2rem rgba(20, 48, 100, .06);
  --primary-subtle:   color-mix(in srgb, var(--primary) 5%, #fff);
  --primary-soft:     color-mix(in srgb, var(--primary) 9%, #fff);
  --primary-line:     color-mix(in srgb, var(--primary) 25%, var(--line));
  --primary-muted:    color-mix(in srgb, var(--primary) 45%, #fff);
  --primary-hover:    color-mix(in srgb, var(--primary) 85%, #000);
  --secondary-subtle: color-mix(in srgb, var(--secondary) 7%, #fff);
  --secondary-hover:  color-mix(in srgb, var(--secondary) 85%, #000);

  color: var(--text);
  font-family: Inter, Arial, sans-serif;
}

html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  height: 100dvh;
  margin: 0;
  display: flex;
  position: relative;
  isolation: isolate;
  overflow: hidden;

  [hidden] {
    display: none !important;
  }

  @media (max-width: 700px) {
    height: auto;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.sidebar {
  display: flex;
  flex: 0 0 15rem;
  flex-direction: column;
  min-width: 20rem;
  height: 100dvh;
  padding: 1.75rem 1rem;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);

  & nav {
    margin-top: 2.5rem;

    & ul {
      display: grid;
      gap: .45rem;
      margin: 0;
      padding: 0;
    }

    & li {
      list-style: none;
    }

    & a {
      display: flex;
      align-items: center;
      gap: .85rem;
      padding: 1rem 1.25rem;
      border-radius: .75rem;
      color: inherit;
      font-weight: bold;
      text-decoration: none;

      &.--active {
        color: var(--primary);
        background: var(--primary-soft);
        box-shadow: inset .25rem 0 var(--secondary);
      }
    }

    & i {
      font-size: 1.15rem;
    }

    & .__todo {
      display: grid;
      place-items: center;
      min-width: 1.5rem;
      height: 1.5rem;
      margin-left: auto;
      padding: 0 .5rem;
      border-radius: 999px;
      background: #f43f5e;
      color: #fff;
      font-size: .75rem;
      font-weight: 800;
    }
  }

  @media (max-width: 700px) {
    width: 100%;
    height: auto;
    min-height: auto;
    padding: 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);

    & nav {
      margin-top: 1rem;
    }
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 0 .55rem;
  color: inherit;
  font-size: 1.45rem;
  font-weight: bold;
  text-decoration: none;

  & img {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: .65rem;
  }
}

.account {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding: .85rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tone, var(--primary)) 25%, var(--line));
  border-radius: .75rem;
  background:
    radial-gradient(circle at 22% 28%, color-mix(in srgb, var(--tone, var(--primary)) 25%, transparent) 0 18%, transparent 50%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--tone, var(--primary)) 15%, transparent) 0 14%, transparent 50%),
    radial-gradient(circle at 56% 115%, color-mix(in srgb, var(--tone, var(--primary)) 20%, transparent) 0 22%, transparent 50%),
    color-mix(in srgb, var(--tone, var(--primary)) 6%, #fafbfe);
  background-size: 160% 160%, 150% 150%, 175% 175%, auto;
  box-shadow: 0 .25rem 1rem rgba(20, 48, 100, .05);

  & div {
    min-width: 0;

    & > span {
      overflow: hidden;
      font-size: .85rem;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  & small {
    display: block;
    margin-bottom: .2rem;
    color: var(--soft);
    font-size: .6rem;
    line-height: 1;
    text-transform: uppercase;
  }

  @media (max-width: 700px) {
    display: none;
  }
}

.account-avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  border: 1px solid color-mix(in srgb, var(--tone, var(--primary)) 25%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone, var(--primary)) 16%, transparent);
  color: var(--tone, var(--primary));

  & img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
  }
}

main {
  flex: 1 1 auto;
  min-width: 0;
  height: 100dvh;
  padding: 2.25rem 2.75rem;
  overflow-y: auto;

  @media (max-width: 700px) {
    height: auto;
    padding: 1rem;
    overflow: visible;
  }
}

button,
input {
  font: inherit;
}

button {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;

  &:disabled {
    cursor: not-allowed;
  }
}

input {
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--panel);
  color: inherit;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}