/* ==========================================================================
   Site header v2: logo hard left, account hard right, pill navigation.
   Loaded after app.css, so it overrides the older header rules.
   ========================================================================== */
.site-header.hv2{height:66px;background:rgba(8,13,24,.9);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);border-bottom:1px solid rgba(78,92,122,.32);box-shadow:0 10px 30px rgba(2,6,14,.22)}
.site-header.hv2 .header-inner{width:100%;max-width:none;margin:0;padding:0 clamp(14px,1.8vw,28px);display:flex;align-items:center;gap:clamp(14px,2vw,32px)}

/* Logo */
.site-header.hv2 .brand{flex:none;margin:0;font-size:24px}

/* Navigation */
.site-header.hv2 .hv2-nav{height:auto;display:flex;align-items:center;gap:4px;margin:0;padding:4px;border:1px solid rgba(78,92,122,.28);border-radius:14px;background:rgba(15,22,36,.7)}
.site-header.hv2 .nav-item{height:38px;min-width:0;padding:0 13px;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:10px;background:transparent;color:#95a1b7;font-size:13.5px;font-weight:650;letter-spacing:0;text-transform:none;white-space:nowrap;transition:color .15s,background .15s,border-color .15s}
.site-header.hv2 .nav-item:hover{color:#eef2fa;background:rgba(255,255,255,.04)}
.site-header.hv2 .nav-item.active{color:#fff;background:linear-gradient(180deg,#232b41,#1a2133);border-color:#34405a;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.site-header.hv2 .nav-item.active:after{display:none}
.site-header.hv2 .nav-item:focus-visible{outline:2px solid #b69aff;outline-offset:2px}
.site-header.hv2 .nav-ico{display:block;width:17px;height:17px;flex:none;color:#7f8aa3}
.site-header.hv2 .nav-item:hover .nav-ico{color:#c9b8ff}
.site-header.hv2 .nav-item.active .nav-ico{color:#b69aff}

/* Account area, pushed to the right edge */
.site-header.hv2 .account{margin-left:auto;height:auto;gap:10px;flex:none}
.site-header.hv2 .hv2-nav{min-width:0}
.site-header.hv2 .steam-sign{margin-left:auto;height:42px;padding:0 16px;border-radius:12px;clip-path:none;background:linear-gradient(180deg,#2a3450,#1e2740);border:1px solid #3a4666;font-size:13px;letter-spacing:.02em;text-transform:none;font-weight:750}
.site-header.hv2 .steam-sign:hover{background:linear-gradient(180deg,#323d5d,#242e4a)}

/* Wallet */
.site-header.hv2 .header-wallet{height:42px;border-radius:12px;overflow:hidden;border:1px solid #33405a;background:#121a2a}
.site-header.hv2 .header-wallet-balance{height:100%;min-width:0;padding:0 14px;gap:8px;background:transparent;border:0}
.site-header.hv2 .header-wallet-balance strong{font-size:15px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.site-header.hv2 .header-wallet-icon{color:#7ee2b8}
.site-header.hv2 .header-wallet-add{width:42px;height:100%;border-radius:0;border:0;border-left:1px solid #3d3470;background:linear-gradient(180deg,#8a6bff,#6c49e0);font-size:22px}

/* Notifications */
.site-header.hv2 .notification-btn{width:42px;height:42px;border-radius:12px;border:1px solid #33405a;background:#121a2a}
.site-header.hv2 .notification-btn:hover,.site-header.hv2 .notification-btn[aria-expanded="true"]{border-color:#6e5fc4;background:#1b2238}
.site-header.hv2 .notification-menu{top:56px;right:0}

/* Profile chip */
.site-header.hv2 .avatar-btn.hv2-profile{width:auto;height:42px;padding:0 10px 0 4px;display:inline-flex;align-items:center;gap:9px;border-radius:12px;border:1px solid #33405a;background:#121a2a;color:#dfe5f0;cursor:pointer;box-shadow:none}
.site-header.hv2 .avatar-btn.hv2-profile:hover,.site-header.hv2 .avatar-btn.hv2-profile[aria-expanded="true"]{border-color:#6e5fc4;background:#1b2238;box-shadow:none}
.site-header.hv2 .avatar-btn.hv2-profile:focus-visible{outline:2px solid #b69aff;outline-offset:2px}
.site-header.hv2 .hv2-avatar{position:relative;width:32px;height:32px;flex:none}
.site-header.hv2 .hv2-avatar img{width:32px;height:32px;border-radius:9px;object-fit:cover;display:block}
.site-header.hv2 .hv2-avatar .online-dot{position:absolute;right:-2px;bottom:-2px;top:auto;width:10px;height:10px;border-radius:50%;background:#35d49a;border:2px solid #121a2a}
.site-header.hv2 .hv2-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;color:#fff}
.site-header.hv2 .hv2-chev{width:16px;height:16px;color:#8f9ab0;flex:none;transition:transform .15s}
.site-header.hv2 .avatar-btn.hv2-profile[aria-expanded="true"] .hv2-chev{transform:rotate(180deg)}
.site-header.hv2 .avatar-btn .eco-header-level{position:static;order:3;min-width:0;height:20px;padding:0 7px;border-radius:6px;font-size:11px;line-height:20px;white-space:nowrap}
.site-header.hv2 .account-menu{top:56px;right:0;width:250px;border-radius:12px}

/* Menu button (phones and small tablets only) */
.site-header.hv2 .hv2-menu{display:none;flex:none;width:42px;height:42px;padding:0;border:1px solid #33405a;border-radius:12px;background:#121a2a;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.site-header.hv2 .hv2-menu span{display:block;width:18px;height:2px;border-radius:2px;background:#dfe5f0;transition:transform .2s,opacity .2s}
.site-header.hv2 .hv2-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-header.hv2 .hv2-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.site-header.hv2 .hv2-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.site-header.hv2 .hv2-menu:focus-visible{outline:2px solid #b69aff;outline-offset:2px}

/* Tighter desktop: keep labels, drop icons */
@media(max-width:1580px){
  .site-header.hv2 .nav-ico{display:none}
  .site-header.hv2 .nav-item{padding:0 11px}
}
@media(max-width:1340px){
  .site-header.hv2 .hv2-name{display:none}
  .site-header.hv2 .avatar-btn.hv2-profile{padding-right:8px}
}
/* Tablets and phones: navigation moves into a dropdown panel */
@media(max-width:1080px){
  .site-header.hv2 .hv2-menu{display:inline-flex}
  .site-header.hv2 .hv2-nav{position:fixed;left:0;right:0;top:66px;z-index:69;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px clamp(14px,3vw,24px) 18px;border:0;border-bottom:1px solid #26314a;border-radius:0;background:rgba(9,14,26,.98);box-shadow:0 24px 40px rgba(0,0,0,.45);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s}
  .site-header.hv2.menu-open .hv2-nav{transform:none;opacity:1;visibility:visible}
  .site-header.hv2 .nav-item{height:50px;padding:0 14px;justify-content:flex-start;font-size:15px;border:1px solid #242f45;background:#111a2a}
  .site-header.hv2 .nav-ico{display:block;width:20px;height:20px}
}
@media(max-width:680px){
  .site-header.hv2{height:60px}
  .site-header.hv2 .hv2-nav{top:60px}
  .site-header.hv2 .header-inner{gap:10px}
  .site-header.hv2 .brand{font-size:20px}
  .site-header.hv2 .header-wallet-icon{display:none}
  .site-header.hv2 .header-wallet,.site-header.hv2 .notification-btn,.site-header.hv2 .avatar-btn.hv2-profile,.site-header.hv2 .hv2-menu{height:38px}
  .site-header.hv2 .notification-btn,.site-header.hv2 .hv2-menu{width:38px}
  .site-header.hv2 .header-wallet-add{width:36px}
  .site-header.hv2 .header-wallet-balance{padding:0 10px}
  .site-header.hv2 .hv2-chev,.site-header.hv2 .avatar-btn .eco-header-level{display:none}
  .site-header.hv2 .avatar-btn.hv2-profile{padding:0 3px}
  .site-header.hv2 .steam-sign{height:38px;padding:0 11px}
}
@media(max-width:420px){
  .site-header.hv2 .hv2-nav{grid-template-columns:1fr}
}
.site-header.hv2 .notification-btn>b[hidden]{display:none}
.site-header.hv2 .hv2-name{order:1}.site-header.hv2 .avatar-btn .eco-header-level{order:2}.site-header.hv2 .hv2-chev{order:3}
/* Balance always visible, including on phones */
.site-header.hv2 .header-wallet-balance{display:flex}
@media(max-width:680px){.site-header.hv2 .header-wallet-balance strong{font-size:14px}}
/* Deposit page: the Steam inventory list scrolls inside its box instead of stretching the page */
@media(max-width:420px){
  .site-header.hv2 .header-inner{gap:7px;padding:0 10px}
  .site-header.hv2 .brand{font-size:17px}
  .site-header.hv2 .brand:after{width:16px;height:24px;margin-left:4px}
  .site-header.hv2 .account{gap:6px}
  .site-header.hv2 .header-wallet-balance{padding:0 8px}
  .site-header.hv2 .notification-btn,.site-header.hv2 .hv2-menu{width:36px}
}