@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300&family=Oxanium:wght@200..800&display=swap');
:root {
  --h1: 32px;
  --h2: 28px;
  --h3: 24px;
  --h4: 20px;
  --h5: 16px;
  --h6: 12px;
  --p: 14px;
}
@media (min-width: 1800px) and (max-width:2000px) {
  :root {
    --h1: 33px;
    --h2: 29px;
    --h3: 25px;
    --h4: 22px;
    --h5: 17px;
    --h6: 13px;
    --p: 15px;
  }
}

@media (min-width: 2001px) {
  :root {
    --h1: 34px;
    --h2: 30px;
    --h3: 26px;
    --h4: 22px;
    --h5: 18px;
    --h6: 14px;
    --p: 16px;
  }
}

h1,
.h1 {
  font-size: var(--h1) !important;
}

h2,
.h2 {
  font-size: var(--h2) !important;
}

h3,
.h3 {
  font-size: var(--h3) !important;
}

h4,
.h4 {
  font-size: var(--h4) !important;
}

h5,
.h5 {
  font-size: var(--h5) !important;
}

h6,
.h6 {
  font-size: var(--h6) !important;
}

html,
body {
  margin: 0;
  padding: 0;
  position: relative;
  font-family: "Oxanium", sans-serif !important;
  background-color: #F3F7FF;
  color: #000;
  font-weight: 500;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.hdr-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyd), #6a1b9a);
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0
}

.profile-wrap {
  position: relative
}

.profile-dd {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--bg1);
  border: 1px solid var(--br0);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
  z-index: 200
}

.profile-dd.show {
  display: block
}

.profile-dd .pd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 1rem;
  color: var(--t2);
  cursor: pointer;
  transition: .12s;
  border: none;
  background: none;
  width: 100%;
  font-family: var(--ff)
}

.pd-item:hover {
  background: var(--bg2);
  color: var(--t1)
}

.pd-item.danger {
  color: var(--err)
}

.pd-item.danger:hover {
  background: var(--errg)
}

.pd-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0
}

.profile-dd .pd-info {
  padding: 10px 12px;
  border-bottom: 1px solid var(--br0);
  margin-bottom: 4px
}

.pd-info .pd-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--t1)
}

.pd-info .pd-email {
  font-size: .64rem;
  color: var(--t3);
  margin-top: 1px
}
.hdr-tabs {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-left: 24px;
      background: var(--bg2);
      border-radius: 8px;
      padding: 3px;
      border: 1px solid var(--br0)
    }

    .hdr-tab {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: .82rem;
      font-weight: 500;
      color: var(--t3);
      cursor: pointer;
      transition: all .18s;
      border: none;
      background: transparent;
      font-family: var(--ff);
      white-space: nowrap
    }

    .hdr-tab:hover {
      color: var(--t1)
    }

    .hdr-tab.active {
      color: var(--cy);
      background: var(--bg1);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
      font-weight: 600
    }

    .hdr-tab:disabled {
      opacity: .35;
      cursor: not-allowed
    }

    .hdr-tab svg {
      width: 14px;
      height: 14px
    }
    /* Theme toggle button */
    .theme-tog {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--bg2);
      border: 1px solid var(--br0);
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: .18s;
      color: var(--t2)
    }

    .theme-tog:hover {
      border-color: var(--cy);
      color: var(--cy)
    }

    .theme-tog svg {
      width: 16px;
      height: 16px
    }