.occ-account-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background: rgba(255, 255, 255, .06) !important;
    color: rgba(255, 255, 255, .9) !important;
    text-decoration: none !important;
}

.occ-account-link--desktop,
.occ-account-link--inner {
    min-height: 36px !important;
    border-radius: 999px !important;
    padding: 5px 12px 5px 6px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
}

.occ-account-link__avatar {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    border: 1px solid rgba(125, 211, 252, .42) !important;
    background: rgba(14, 165, 233, .16) !important;
}

.occ-account-link__avatar--empty::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: 7px auto 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 11px 0 4px rgba(255, 255, 255, .78);
}

.occ-account-link:hover {
    border-color: rgba(103, 232, 249, .5) !important;
    background: rgba(34, 211, 238, .12) !important;
    color: #fff !important;
}

.occ-account-menu {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.occ-account-menu__trigger {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 6px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(0,0,0,.18);
    cursor: pointer;
}

.occ-account-menu__trigger .occ-account-link__avatar { width: 28px !important; height: 28px !important; }
.occ-account-menu__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 10020;
    width: min(320px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background: rgba(3,12,28,.98);
    box-shadow: 0 24px 80px rgba(0,0,0,.55);
    backdrop-filter: blur(24px);
}
.occ-account-menu__panel[hidden] { display: none !important; }
.occ-account-menu__identity { display:flex; align-items:center; gap:12px; padding:5px 4px 14px; }
.occ-account-menu__identity span { display:grid; gap:3px; min-width:0; }
.occ-account-menu__identity strong { overflow:hidden; color:#fff; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.occ-account-menu__identity small,.occ-account-menu__metric small { color:#94a3b8; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.occ-account-menu__metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.occ-account-menu__metric { display:grid; gap:4px; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.04); }
.occ-account-menu__metric strong { color:#cffafe; font-size:12px; }
.occ-account-menu__panel > a { display:block !important; padding:11px 10px !important; border-top:1px solid rgba(255,255,255,.08); color:#e2e8f0 !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.1em !important; text-transform:uppercase !important; }

body.occ-tanstack-homepage > div.min-h-screen > header > div.mx-auto > nav { margin-left:auto; }
body.occ-tanstack-homepage > div.min-h-screen > header > div.mx-auto > nav + div { flex:0 0 auto; margin-left:auto; }
body.occ-tanstack-homepage > div.min-h-screen > header .occ-account-link--desktop { min-height:42px !important; padding:0 14px !important; }

@media (min-width: 1024px) {
    body.occ-tanstack-homepage > div.min-h-screen > header > div.mx-auto > nav {
        display:flex !important;
        gap:clamp(9px,1.1vw,20px) !important;
    }
    body.occ-tanstack-homepage > div.min-h-screen > header > div.mx-auto > nav a {
        font-size:clamp(7px,.72vw,10px) !important;
        letter-spacing:.12em !important;
        white-space:nowrap;
    }
    body.occ-tanstack-homepage > div.min-h-screen > header > div.mx-auto > nav + div {
        gap:8px !important;
    }
    body.occ-tanstack-homepage > div.min-h-screen > header > div.mx-auto > nav + div > a[href*="stream"] {
        padding-inline:clamp(14px,1.5vw,24px) !important;
        white-space:nowrap;
    }
    body.occ-tanstack-homepage > div.min-h-screen > header [aria-label="Open menu"] {
        display:none !important;
    }
}

@media (max-width: 640px) {
  .occ-inner-header__inner {
    gap: 8px;
  }

  .occ-inner-logo img {
    width: 122px;
  }

  .occ-inner-actions {
    gap: 6px;
    margin-left: auto;
  }

  .occ-inner-actions > .occ-inner-visit {
    display: none;
  }

  .occ-inner-mobile .occ-inner-visit {
    display: inline-flex;
  }

  .occ-pricing-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .occ-pricing-card {
    min-width: 0;
    padding: 24px;
  }
}

@media (max-width: 1023px) {
    body.occ-tanstack-homepage > div.min-h-screen > header > div.mx-auto > nav { display:none !important; }
    body.occ-tanstack-homepage > div.min-h-screen > header > div.mx-auto > nav + div { margin-left:auto; }
    body.occ-tanstack-homepage > div.min-h-screen > header [aria-label="Open menu"] { display:grid !important; flex:0 0 44px; }
    body.occ-tanstack-homepage > div.min-h-screen > header .occ-account-link--desktop,
    body.occ-tanstack-homepage > div.min-h-screen > header .occ-account-menu { display:none !important; }
}

@media (max-width: 639px) {
    body.occ-tanstack-homepage > div.min-h-screen > header { padding:10px !important; }
    body.occ-tanstack-homepage > div.min-h-screen > header > div.mx-auto { min-height:76px !important; padding:10px 14px !important; border-radius:22px !important; }
    body.occ-tanstack-homepage > div.min-h-screen > header img { height:42px !important; max-width:155px !important; }
    body.occ-tanstack-homepage > div.min-h-screen > header a[href*="stream"] { display:none !important; }
}

.occ-snapshot-menu nav a {
    padding: 14px 0 !important;
    font-size: clamp(22px, 6vw, 38px) !important;
}

.occ-snapshot-menu nav .occ-account-link,
.occ-inner-mobile nav .occ-account-link {
    justify-content: center !important;
    width: 100% !important;
}

.occ-account-link--mobile {
    border-radius: 18px !important;
    padding: 13px 16px !important;
    font-size: clamp(18px, 5vw, 28px) !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.occ-inner-mobile nav a {
    padding: 14px 0 !important;
    font-size: clamp(22px, 6vw, 36px) !important;
}

/* Keep shared inner-page commands anchored to the right at every width. */
.occ-inner-header__inner > .occ-inner-actions {
    margin-left: auto;
    padding-left: 12px;
}

.occ-inner-header__inner .occ-account-link--inner {
    min-height: 46px !important;
    padding: 7px 16px 7px 8px !important;
}

@media (max-width: 1050px) {
    .occ-inner-header__inner > .occ-inner-actions {
        flex: 0 0 auto;
    }
}

@media (max-width: 760px) {
    .occ-inner-header__inner > .occ-inner-actions {
        padding-left: 0;
    }
}