/* ======================================================
   TALER — UNIFIED NAVIGATION
   ====================================================== */

.tsn-wrap,
.tsn-wrap *,
.tsn-mobile-panel,
.tsn-mobile-panel * {
  box-sizing:
    border-box;
}

.tsn-wrap {
  position:
    fixed;

  z-index:
    999990;

  top:
    12px;

  left:
    50%;

  width:
    min(
      1280px,
      calc(100% - 32px)
    );

  transform:
    translateX(-50%);
}

.tsn-header {
  width:
    100%;

  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  gap:
    28px;

  padding:
    0 14px 0 18px;

  border:
    1px solid
    rgba(120,145,182,.18);

  border-radius:
    30px;

  background:
    rgba(5,10,25,.91);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  box-shadow:
    0 14px 38px
    rgba(0,0,0,.24);
}


/* LOGO */

.tsn-brand {
  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  color:
    #f4f6f8;

  text-decoration:
    none;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size:
    17px;

  font-weight:
    750;

  letter-spacing:
    -.025em;
}

.tsn-brand-mark {
  width:
    22px;

  height:
    22px;

  display:
    block;

  background:
    linear-gradient(
      145deg,
      #775cff,
      #446ff6
    );

  clip-path:
    polygon(
      50% 0,
      100% 100%,
      72% 100%,
      50% 54%,
      28% 100%,
      0 100%
    );
}


/* DESKTOP NAV */

.tsn-desktop-nav {
  margin-left:
    auto;

  display:
    flex;

  align-items:
    center;

  gap:
    25px;
}

.tsn-desktop-nav > a,
.tsn-user-button {
  margin:
    0;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    none;

  color:
    #98a3b8;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size:
    12px;

  font-weight:
    500;

  line-height:
    1;

  text-decoration:
    none;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    color .15s ease;
}

.tsn-desktop-nav > a:hover,
.tsn-user-button:hover {
  color:
    #fff;
}


/* USER */

.tsn-user {
  position:
    relative;
}

.tsn-user-button {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;
}

.tsn-user-button span {
  color:
    #596879;

  font-size:
    9px;
}

.tsn-user-dropdown {
  position:
    absolute;

  top:
    calc(100% + 19px);

  left:
    50%;

  width:
    230px;

  padding:
    6px;

  transform:
    translateX(-50%)
    translateY(-4px);

  visibility:
    hidden;

  opacity:
    0;

  pointer-events:
    none;

  border:
    1px solid
    rgba(120,145,182,.16);

  border-radius:
    9px;

  background:
    #09131d;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.36);

  transition:
    opacity .15s ease,
    transform .15s ease,
    visibility .15s;
}

.tsn-user-dropdown.is-open {
  visibility:
    visible;

  opacity:
    1;

  pointer-events:
    auto;

  transform:
    translateX(-50%)
    translateY(0);
}

.tsn-user-dropdown a {
  min-height:
    37px;

  display:
    flex;

  align-items:
    center;

  padding:
    0 10px;

  border-radius:
    6px;

  color:
    #98a3ad;

  text-decoration:
    none;

  font-family:
    Inter,
    sans-serif;

  font-size:
    11px;
}

.tsn-user-dropdown a:hover {
  color:
    #fff;

  background:
    rgba(55,149,238,.06);
}


/* ACTIONS */

.tsn-actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}

.tsn-login {
  color:
    #9ca7b0;

  text-decoration:
    none;

  font-family:
    Inter,
    sans-serif;

  font-size:
    12px;
}

.tsn-account {
  position:
    relative;

  width:
    44px;

  height:
    44px;

  display:
    block;

  border:
    1px solid
    rgba(107,101,245,.36);

  border-radius:
    50%;

  background:
    rgba(60,56,145,.14);
}

.tsn-account-head {
  position:
    absolute;

  top:
    11px;

  left:
    50%;

  width:
    8px;

  height:
    8px;

  border:
    1.5px solid #d5d9e4;

  border-radius:
    50%;

  transform:
    translateX(-50%);
}

.tsn-account-body {
  position:
    absolute;

  left:
    50%;

  bottom:
    10px;

  width:
    13px;

  height:
    8px;

  border:
    1.5px solid #d5d9e4;

  border-bottom:
    0;

  border-radius:
    8px 8px 0 0;

  transform:
    translateX(-50%);
}


/* MOBILE BUTTON */

.tsn-menu-button {
  display:
    none;
}


/* ======================================================
   MOBILE DRAWER
   ====================================================== */

.tsn-overlay {
  position:
    fixed;

  z-index:
    999991;

  inset:
    0;

  visibility:
    hidden;

  opacity:
    0;

  pointer-events:
    none;

  background:
    rgba(2,7,12,.72);

  backdrop-filter:
    blur(3px);

  transition:
    opacity .2s ease,
    visibility .2s;
}

.tsn-overlay.is-open {
  visibility:
    visible;

  opacity:
    1;

  pointer-events:
    auto;
}

.tsn-mobile-panel {
  position:
    fixed;

  z-index:
    999992;

  top:
    0;

  right:
    0;

  width:
    min(
      390px,
      100%
    );

  height:
    100dvh;

  padding:
    16px;

  transform:
    translateX(100%);

  background:
    #071018;

  overflow-y:
    auto;

  transition:
    transform .25s ease;
}

.tsn-mobile-panel.is-open {
  transform:
    translateX(0);
}

.tsn-mobile-top {
  min-height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-bottom:
    1px solid
    rgba(137,166,188,.10);
}

.tsn-mobile-close {
  width:
    36px;

  height:
    36px;

  border:
    1px solid
    rgba(137,166,188,.13);

  border-radius:
    8px;

  background:
    rgba(255,255,255,.02);

  color:
    #aab4bc;

  font-size:
    22px;

  cursor:
    pointer;
}

.tsn-mobile-nav {
  display:
    flex;

  flex-direction:
    column;

  padding-top:
    12px;
}

.tsn-mobile-nav > a,
.tsn-mobile-user-button {
  width:
    100%;

  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0;

  border:
    0;

  border-bottom:
    1px solid
    rgba(137,166,188,.08);

  background:
    none;

  color:
    #e1e5e8;

  text-decoration:
    none;

  text-align:
    left;

  font-family:
    Inter,
    sans-serif;

  font-size:
    21px;

  font-weight:
    600;

  letter-spacing:
    -.025em;

  cursor:
    pointer;
}

.tsn-chevron {
  color:
    #617483;

  font-size:
    13px;
}

.tsn-mobile-user-links {
  display:
    none;

  padding:
    8px 0 12px 12px;

  border-bottom:
    1px solid
    rgba(137,166,188,.08);
}

.tsn-mobile-user-links.is-open {
  display:
    block;
}

.tsn-mobile-user-links a {
  min-height:
    38px;

  display:
    flex;

  align-items:
    center;

  color:
    #8f9da7;

  text-decoration:
    none;

  font-family:
    Inter,
    sans-serif;

  font-size:
    12px;
}

.tsn-mobile-divider {
  height:
    18px;

  border-bottom:
    1px solid
    rgba(137,166,188,.08);
}


/* ======================================================
   BREAKPOINT
   ====================================================== */

@media (max-width:900px) {

  .tsn-wrap {
    top:
      8px;

    width:
      calc(100% - 16px);
  }

  .tsn-header {
    min-height:
      52px;

    padding:
      0 8px 0 13px;

    border-radius:
      26px;
  }

  .tsn-desktop-nav {
    display:
      none;
  }

  .tsn-account {
    width:
      36px;

    height:
      36px;
  }

  .tsn-login {
    display:
      none;
  }

  .tsn-menu-button {
    position:
      relative;

    width:
      68px;

    height:
      36px;

    display:
      inline-flex;

    align-items:
      center;

    gap:
      8px;

    padding:
      0 10px;

    border:
      1px solid
      rgba(137,166,188,.13);

    border-radius:
      18px;

    background:
      rgba(255,255,255,.018);

    color:
      #b3bdc5;

    font-family:
      Inter,
      sans-serif;

    font-size:
      10px;

    cursor:
      pointer;
  }

  .tsn-menu-button i {
    position:
      absolute;

    right:
      10px;

    width:
      12px;

    height:
      1px;

    background:
      #9ba8b2;
  }

  .tsn-menu-button i:nth-of-type(1) {
    transform:
      translateY(-3px);
  }

  .tsn-menu-button i:nth-of-type(2) {
    transform:
      translateY(3px);
  }

}

/* ======================================================
   MOBILE HEADER SPACING FIX
   logo left / controls right
   ====================================================== */

@media (max-width:900px) {

  .tsn-header {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;

    gap:12px !important;
  }

  .tsn-brand {
    flex:0 0 auto !important;
    margin-right:auto !important;
  }

  .tsn-actions {
    margin-left:auto !important;

    display:flex !important;
    align-items:center !important;

    gap:8px !important;

    flex:0 0 auto !important;
  }

  .tsn-menu-button {
    margin-left:auto !important;
    flex:0 0 auto !important;
  }

}

@media (max-width:480px) {

  .tsn-wrap {
    width:calc(100% - 16px) !important;
  }

  .tsn-header {
    padding:
      0 8px 0 12px !important;
  }

  .tsn-brand {
    min-width:0 !important;
  }

  .tsn-actions {
    min-width:max-content !important;
  }

}

/* MOBILE HEADER — TRUE SPACE BETWEEN */

@media (max-width:900px) {

  .tsn-header {
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;

    width:100% !important;
  }

  .tsn-brand {
    grid-column:1 !important;
    justify-self:start !important;

    margin:0 !important;
  }

  .tsn-actions {
    grid-column:3 !important;
    justify-self:end !important;

    margin:0 !important;

    display:flex !important;
    align-items:center !important;

    gap:8px !important;
  }

  .tsn-menu-button {
    margin:0 !important;
  }

}


/* ======================================================
   MOBILE NAV — HARD POSITION FIX
   ====================================================== */

@media (max-width:900px) {

  body .tsn-wrap {
    position:fixed !important;

    top:8px !important;
    left:8px !important;
    right:8px !important;

    width:auto !important;
    max-width:none !important;

    margin:0 !important;

    transform:none !important;
  }


  body .tsn-header {
    width:100% !important;

    display:flex !important;
    align-items:center !important;

    min-height:52px !important;

    padding:0 8px 0 13px !important;

    gap:10px !important;
  }


  body .tsn-brand {
    flex:0 0 auto !important;

    margin:
      0 auto 0 0 !important;
  }


  body .tsn-actions {
    flex:0 0 auto !important;

    display:flex !important;
    align-items:center !important;

    margin:
      0 0 0 auto !important;

    gap:8px !important;
  }


  body .tsn-menu-button {
    flex:0 0 auto !important;

    margin:0 !important;
  }

}

/* ======================================================
   DESKTOP NAV — TRUE ITEM ALIGNMENT
   ====================================================== */

@media (min-width: 901px) {

  .tsn-desktop-nav {
    display: flex !important;
    align-items: center !important;
  }

  .tsn-desktop-nav > a,
  .tsn-user,
  .tsn-user-button {
    height: 32px !important;
    min-height: 32px !important;
  }

  .tsn-desktop-nav > a,
  .tsn-user-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
  }

  .tsn-user {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .tsn-user-button {
    position: static !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    border: 0 !important;
    background: transparent !important;

    font-family:
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif !important;

    font-size: 12px !important;
    font-weight: 500 !important;

    vertical-align: middle !important;
  }

  .tsn-user-button span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 32px !important;

    margin: 0 0 0 5px !important;

    line-height: 32px !important;
  }

}

/* mobile anchor offset */

@media (max-width:900px) {

  #analytics,
  #opportunities,
  #how,
  #stats {
    scroll-margin-top: 92px !important;
  }

}