.pulscamCommonHeader,
.topBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  gap:10px;
  flex-wrap:wrap;
  background:#fff;
  color:#111;
  font-family:Arial,sans-serif;
}

.logoWrap{
  display:flex;
  align-items:center;
  text-decoration:none;
  padding:0;
  border-radius:0;
}

.logoWrap:hover{
  background:transparent;
}

.logoWrap img{
  height:56px;
  width:auto;
  display:block;
}

.topActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.topBtn{
  height:36px;
  padding:0 14px;
  border-radius:11px;
  font-size:13px;
  font-weight:650;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, transform .12s ease, box-shadow .12s ease;
  border:1px solid transparent;
  cursor:pointer;
  font-family:Arial,sans-serif;
}

.topBtnGhost{
  color:#111;
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.08);
}

.topBtnGhost:hover{
  background:linear-gradient(90deg,rgba(255,42,42,.08),rgba(255,138,26,.08));
  border-color:rgba(255,120,40,.35);
}

.topBtnPrimary{
  color:#fff;
  border:1px solid transparent;
  background:linear-gradient(90deg,#ff2a2a,#ff8a1a);
  box-shadow:0 5px 12px rgba(255,80,0,.30);
}

.topBtnPrimary:hover{
  background:linear-gradient(90deg,#ff2a2a,#ff8a1a);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(255,80,0,.38);
}

.topIdentity{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:11px;
  background:#fff;
  min-height:36px;
}

.topIdentityName{
  font-size:13px;
  font-weight:700;
  color:#111;
}

.walletMini{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:11px;
  background:#fff;
  font-size:13px;
  font-weight:700;
  min-height:36px;
}

.walletMiniMuted{
  color:#666;
  font-weight:600;
}

.topTokenPlus{
  display:none;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-left:3px;
  padding:2px 4px;
  border:0!important;
  border-radius:999px;
  background:transparent!important;
  box-shadow:none!important;
  text-decoration:none;
  line-height:1;
  cursor:pointer;
}

.topTokenPlus:hover{
  background:rgba(255,106,26,.08)!important;
  transform:none!important;
  box-shadow:none!important;
}

.tokenCoin{
  width:14px;
  height:14px;
  border-radius:50%;
  display:inline-block;
  position:relative;
  background:
    radial-gradient(circle at 35% 30%, #fff4b8 0 12%, transparent 14%),
    linear-gradient(135deg,#ffd36a,#ff9d1a);
  border:1px solid rgba(190,105,0,.38);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.65),
    0 1px 3px rgba(255,120,20,.25);
}

.tokenCoin::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  border:1px solid rgba(150,82,0,.22);
}

.tokenPlusMark{
  color:#ff6a1a;
  font-size:18px;
  font-weight:900;
  line-height:1;
  margin-top:-1px;
}

.headerAccentLine{
  height:3px;
  width:100%;
  background:linear-gradient(90deg,#ff2a2a 0%,#ff4a2a 25%,#ff7a1a 60%,#ffb11a 100%);
  box-shadow:0 1px 6px rgba(255,60,40,.45),0 0 12px rgba(255,140,40,.25);
}

@media(max-width:720px){
  .pulscamCommonHeader,
  .topBar{
    padding:10px 12px;
  }

  .logoWrap img{
    height:48px;
  }

  .topActions{
    width:100%;
    justify-content:flex-start;
    gap:7px;
  }

  .topBtn,
  .topIdentity,
  .walletMini{
    min-height:34px;
    height:34px;
  }
}

/* Pulscam header hard-normalize: force home header to match all pages */
header.topBar,
#pulscamSiteHeader,
.pulscamCommonHeader{
  padding:10px 18px!important;
  min-height:auto!important;
}

header.topBar .logoWrap img,
#pulscamSiteHeader .logoWrap img,
.pulscamCommonHeader .logoWrap img{
  height:50px!important;
  max-height:50px!important;
  width:auto!important;
}

header.topBar .topActions,
#pulscamSiteHeader .topActions,
.pulscamCommonHeader .topActions{
  gap:7px!important;
}

header.topBar .topBtn,
#pulscamSiteHeader .topBtn,
.pulscamCommonHeader .topBtn{
  height:34px!important;
  min-height:34px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  font-size:13px!important;
}

header.topBar .topIdentity,
#pulscamSiteHeader .topIdentity,
.pulscamCommonHeader .topIdentity,
header.topBar .walletMini,
#pulscamSiteHeader .walletMini,
.pulscamCommonHeader .walletMini{
  min-height:34px!important;
  height:34px!important;
  padding:6px 10px!important;
  border-radius:10px!important;
  font-size:13px!important;
}

header.topBar .topIdentityName,
#pulscamSiteHeader .topIdentityName,
.pulscamCommonHeader .topIdentityName,
header.topBar .walletMiniMuted,
#pulscamSiteHeader .walletMiniMuted,
.pulscamCommonHeader .walletMiniMuted,
header.topBar #walletMiniValue,
#pulscamSiteHeader #walletMiniValue,
.pulscamCommonHeader #walletMiniValue{
  font-size:13px!important;
}

header.topBar .tokenCoin,
#pulscamSiteHeader .tokenCoin,
.pulscamCommonHeader .tokenCoin{
  width:13px!important;
  height:13px!important;
}

header.topBar .tokenPlusMark,
#pulscamSiteHeader .tokenPlusMark,
.pulscamCommonHeader .tokenPlusMark{
  font-size:17px!important;
}

@media(max-width:720px){
  header.topBar,
  #pulscamSiteHeader,
  .pulscamCommonHeader{
    padding:9px 12px!important;
  }

  header.topBar .logoWrap img,
  #pulscamSiteHeader .logoWrap img,
  .pulscamCommonHeader .logoWrap img{
    height:46px!important;
    max-height:46px!important;
  }
}

/* Pulscam full-bleed header fix for pages with narrow body containers */
#pulscamSiteHeader,
.pulscamCommonHeader,
header.topBar{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

.headerAccentLine,
#pulscamHeaderAccent{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Header messages red badge */
.topBtnMsg {
  position: relative !important;
  overflow: visible !important;
}

.topMsgBadge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  border: 2px solid #fff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(225, 29, 72, .34);
  z-index: 10;
}

/* PULSCAM_GLOBAL_HEADER_OVERFLOW_FIX_V1
   Prevent global header/accent full-bleed 100vw rules from creating horizontal overflow.
   Header/footer visual width should follow the document viewport without negative 50vw margins.
*/
html, body {
  max-width: 100%;
}

body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  body {
    overflow-x: hidden;
  }
}

/* PULSCAM_GLOBAL_HEADER_ACTIONS_FIT_FIX_V1
   Keep the global header actions inside the viewport.
   Fixes cases where the last action button, usually Logout, is partially clipped.
   CSS-only. No header JS, footer, API or DB changes.
*/
header.topBar,
#pulscamSiteHeader,
.pulscamCommonHeader{
  box-sizing:border-box!important;
  max-width:100%!important;
  overflow:visible!important;
}

header.topBar .logoWrap,
#pulscamSiteHeader .logoWrap,
.pulscamCommonHeader .logoWrap{
  flex:0 0 auto!important;
}

header.topBar .topActions,
#pulscamSiteHeader .topActions,
.pulscamCommonHeader .topActions{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
  flex:1 1 auto!important;
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  overflow:visible!important;
}

header.topBar .topBtn,
#pulscamSiteHeader .topBtn,
.pulscamCommonHeader .topBtn{
  box-sizing:border-box!important;
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:nowrap!important;
}

@media(max-width:860px){
  header.topBar,
  #pulscamSiteHeader,
  .pulscamCommonHeader{
    gap:8px!important;
  }

  header.topBar .topActions,
  #pulscamSiteHeader .topActions,
  .pulscamCommonHeader .topActions{
    gap:6px!important;
  }

  header.topBar .topBtn,
  #pulscamSiteHeader .topBtn,
  .pulscamCommonHeader .topBtn{
    padding-left:9px!important;
    padding-right:9px!important;
  }
}

@media(max-width:520px){
  header.topBar,
  #pulscamSiteHeader,
  .pulscamCommonHeader{
    align-items:flex-start!important;
  }

  header.topBar .logoWrap img,
  #pulscamSiteHeader .logoWrap img,
  .pulscamCommonHeader .logoWrap img{
    height:42px!important;
    max-height:42px!important;
  }

  header.topBar .topActions,
  #pulscamSiteHeader .topActions,
  .pulscamCommonHeader .topActions{
    flex:1 1 0!important;
    justify-content:flex-end!important;
  }

  header.topBar .topBtn,
  #pulscamSiteHeader .topBtn,
  .pulscamCommonHeader .topBtn{
    height:32px!important;
    min-height:32px!important;
    padding-left:8px!important;
    padding-right:8px!important;
    font-size:12px!important;
  }
}
