.auth-notify-dot{
  position:absolute;
  top:-2px;
  right:-2px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#ff4d5e;
  border:2px solid #262626;
  display:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
}

.auth-pill.has-unread .auth-notify-dot{
  display:block;
}

.auth-menu .auth-item{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:100% !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  text-align:left !important;
  text-decoration:none !important;
  background:transparent !important;
  border:0 !important;
  cursor:pointer !important;
  font:inherit !important;
  font-size:0.92rem !important;
  font-weight:600 !important;
  line-height:1 !important;
  color:rgba(255,255,255,0.92) !important;
  letter-spacing:0.2px !important;
}

.auth-menu .auth-item:hover{
  background:rgba(255,255,255,0.08) !important;
}

.auth-menu .auth-ico{
  width:16px !important;
  height:16px !important;
  flex:0 0 16px !important;
  filter:invert(1) saturate(0) brightness(2) !important;
  opacity:0.95 !important;
}

/* Stable auth area: prevents header buttons/avatar from jumping during auth load */
.site-right,
#authArea{
  height:38px !important;
  min-height:38px !important;
  min-width:186px !important;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

@media (max-width: 600px){
  .site-right,
  #authArea{
    min-width:152px !important;
    width:auto !important;
  }
}

#authArea:empty::before{
  content:"";
  display:block;
  width:100%;
  height:38px;
}
/* Stable shared header slot: reserve the finished header height before auth buttons render */
#header-slot{
  display:block;
  min-height:75px !important;
}
@media (max-width: 600px){
  #header-slot{
    min-height:63px !important;
  }
}

#authArea{
  contain: layout;
  transition: opacity 180ms ease;
}
#authArea.auth-loading{
  opacity:0.45;
  pointer-events:none;
}
#authArea.auth-ready{
  opacity:1;
}
#authArea:empty::before{
  content:"";
  display:block;
  width:100%;
  height:38px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
}

#header-slot .icon-btn,
#header-slot .auth-btn,
#header-slot .auth-pill{
  box-sizing:border-box;
  flex:0 0 auto;
}
#header-slot .icon-btn{
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
}
/* Mobile header lock: keep the finished header size reserved before auth renders */
#header-slot .site-header{
  box-sizing:border-box !important;
  min-height:75px !important;
  flex-wrap:nowrap !important;
}
#header-slot .site-left,
#header-slot .site-right,
#header-slot #authArea{
  flex-shrink:0 !important;
}
#header-slot .site-title-image{
  height:50px !important;
  width:auto !important;
  max-width:none !important;
  display:block !important;
}
#header-slot #authArea{
  min-width:186px !important;
  width:auto !important;
}

@media (max-width: 600px){
  #header-slot{
    min-height:63px !important;
  }
  #header-slot .site-header{
    min-height:63px !important;
  }
  #header-slot .site-title-image{
    height:30px !important;
  }
  #header-slot .site-right,
  #header-slot #authArea{
    min-width:152px !important;
    width:auto !important;
    gap:6px !important;
  }
}
/* shared mobile auth fit */
@media (max-width:600px){
  #header-slot #authArea,
  #header-slot .site-right{
    gap:6px !important;
  }
  #header-slot .icon-btn{
    width:32px !important;
    height:36px !important;
    min-width:32px !important;
    min-height:36px !important;
    flex:0 0 32px !important;
  }
  #header-slot .auth-btn{
    min-width:58px !important;
    height:36px !important;
    min-height:36px !important;
    padding:8px 6px !important;
    gap:0 !important;
    flex:0 0 auto !important;
    justify-content:center !important;
    white-space:nowrap !important;
  }
  #header-slot .auth-btn .auth-icon{
    display:none !important;
  }
}
/* Auth width fix: reserve height without squeezing header buttons */
#header-slot #authArea,
#header-slot .site-right{
  width:auto !important;
  min-width:max-content !important;
  max-width:calc(100vw - 170px) !important;
}
#header-slot .auth-btn{
  width:auto !important;
  min-width:max-content !important;
  flex:0 0 auto !important;
}
#header-slot .auth-label{
  white-space:nowrap !important;
}
@media (max-width:600px){
  #header-slot #authArea,
  #header-slot .site-right{
    width:auto !important;
    min-width:0 !important;
    max-width:calc(100vw - 112px) !important;
    gap:4px !important;
  }
  #header-slot .icon-btn{
    width:30px !important;
    min-width:30px !important;
    flex-basis:30px !important;
  }
  #header-slot .auth-btn{
    min-width:68px !important;
    padding:8px 7px !important;
    flex:0 0 68px !important;
  }
}


/* Facebook icon optical alignment */
.facebook-icon{
  transform: translateY(-2px);
}

/* Softer red donate icon */
.donate-icon{
  filter:
    brightness(0)
    saturate(100%)
    invert(33%)
    sepia(93%)
    saturate(1735%)
    hue-rotate(337deg)
    brightness(103%)
    contrast(96%);
}


/* Mobile header breathing room: avoid squeezed buttons */
@media (max-width:600px){
  #header-slot .site-right,
  #header-slot #authArea,
  .site-right,
  #authArea{
    width:auto !important;
    min-width:152px !important;
  }

  #header-slot .site-right,
  #header-slot #authArea{
    gap:6px !important;
  }

  #header-slot .auth-btn{
    padding:8px 10px !important;
  }

  #header-slot .icon-btn{
    width:34px !important;
    min-width:34px !important;
  }
}

/* === Shared header final parity: logged-out button === */
#header-slot .auth-btn,
.site-header .auth-btn{
  min-width:132px !important;
  height:36px !important;
  padding:8px 12px !important;
  gap:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:auto !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

#header-slot .auth-btn .auth-icon,
.site-header .auth-btn .auth-icon{
  flex:0 0 auto !important;
}

#header-slot .auth-label,
.site-header .auth-label{
  white-space:nowrap !important;
}

@media (max-width:600px){
  #header-slot .auth-btn,
  .site-header .auth-btn{
    min-width:92px !important;
    height:36px !important;
    padding:8px 10px !important;
    gap:0 !important;
  }

  #header-slot .auth-btn .auth-icon,
  .site-header .auth-btn .auth-icon{
    display:none !important;
  }

  #header-slot .auth-label,
  .site-header .auth-label{
    display:none !important;
  }

  #header-slot .auth-btn::after,
  .site-header .auth-btn::after{
    content:"Belépés" !important;
    font-weight:600 !important;
  }
}
/* Adatlap-style shared logged-out login button */
#header-slot .auth-btn,
.site-header .auth-btn{
  width:auto !important;
  min-width:132px !important;
  max-width:none !important;
  height:36px !important;
  min-height:36px !important;
  flex:0 0 auto !important;
  padding:8px 12px !important;
  gap:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  background:rgba(42,42,42,0.55) !important;
  color:#f5f5f5 !important;
  font-size:0.78rem !important;
  font-weight:600 !important;
  letter-spacing:0.06em !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  text-decoration:none !important;
}
#header-slot .auth-btn:hover,
.site-header .auth-btn:hover{
  border-color:rgba(255,255,255,0.35) !important;
  background:rgba(42,42,42,0.7) !important;
  transform:none !important;
}
#header-slot .auth-btn .auth-icon,
.site-header .auth-btn .auth-icon{
  display:inline-block !important;
  flex:0 0 18px !important;
  width:18px !important;
  height:16px !important;
}
#header-slot .auth-label,
.site-header .auth-label{
  display:inline !important;
  white-space:nowrap !important;
}
@media (max-width:600px){
  #header-slot .auth-btn,
  .site-header .auth-btn{
    width:92px !important;
    min-width:92px !important;
    max-width:92px !important;
    height:36px !important;
    flex:0 0 92px !important;
    padding:8px 10px !important;
    gap:0 !important;
    font-size:0.75rem !important;
  }
  #header-slot .auth-btn .auth-icon,
  .site-header .auth-btn .auth-icon,
  #header-slot .auth-label,
  .site-header .auth-label{
    display:none !important;
  }
  #header-slot .auth-btn::after,
  .site-header .auth-btn::after{
    content:"Belépés" !important;
    font-weight:600 !important;
  }
}
/* Mobile tap polish: remove the blue touch flash without blocking text input */
@media (hover: none), (pointer: coarse){
  a,
  button,
  select,
  summary,
  label,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  .icon-btn,
  .auth-btn,
  .auth-pill,
  .status-filter-btn,
  .metric-btn,
  .cover-like,
  .cover-details-btn,
  .read-btn,
  .adc-actionBtn,
  .tb,
  .emo,
  .notif-item,
  .chapter-row,
  .card-cover{
    -webkit-tap-highlight-color: transparent !important;
  }
}