nftzone-header {
  display: block;
  flex: 0 0 auto;
}

/* ==========================================================================
   TOP NAVIGATION
   ========================================================================== */

.top-nav {
  min-height: 50px;
  background-color: var(--bg-surface-1);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 40;
}

.global-header-inner {
  width: var(--public-container-width, min(1180px, calc(100% - 48px)));
  min-height: 49px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  margin: 0 auto;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  justify-self: start;
  cursor: pointer;
}

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.brand-logo img,
.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 3px;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: 100px;
  background:
    linear-gradient(color-mix(in srgb, var(--bg-surface-1) 65%, var(--bg-surface-2)), color-mix(in srgb, var(--bg-surface-1) 65%, var(--bg-surface-2))) padding-box,
    linear-gradient(110deg, rgba(174,128,250,.9), rgba(125,143,243,.66) 55%, rgba(105,202,241,.84)) border-box;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.035);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.header-nav a,
.header-raffle-soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: 100px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease;
}

.header-nav-icon { display: none; }
.header-extra-nav { display: contents; }
.header-raffle-soon { position: relative; color: var(--text-muted); }
.header-nav-soon { position: absolute; top: 0; right: 8px; font: 500 8px/1 var(--font-sans); }

.header-nav a:hover,
.header-nav a:focus-visible {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.header-nav a:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

.header-nav a.is-active {
  color: var(--text-primary);
  background-image:
    linear-gradient(color-mix(in srgb, var(--bg-surface-1) 80%, transparent), color-mix(in srgb, var(--bg-surface-1) 80%, transparent)),
    linear-gradient(110deg, #ab7bf5, #7dd2ed);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  justify-self: end;
}

.header-auth { position: relative; min-width: 0; }
.header-notifications { flex: 0 0 auto; }
.header-notifications[hidden], .notification-panel[hidden], .notification-count[hidden], .notification-more[hidden] { display: none; }
.btn.frost-btn.notification-bell { --btn-height:36px; --btn-pad-x:0px; --btn-radius:var(--radius-md); position:relative; width:36px; height:36px; padding:0; gap:0; font-size:15px; overflow:visible; }
.notification-count { position:absolute; bottom:-8px; right:-3px; display:grid; place-items:center; box-sizing:border-box; width:16px; min-width:16px; height:16px; padding:0; border:0; border-radius:50%; background:var(--accent-violet); color:#fff; font:700 9px/1 var(--font-sans); font-variant-numeric:tabular-nums; letter-spacing:-.3px; white-space:nowrap; pointer-events:none; }
.notification-panel { position:fixed; z-index:110; display:flex; flex-direction:column; min-width:0; padding:0; border:1px solid var(--border-subtle-hover); border-radius:var(--radius-lg); background:var(--bg-surface-1); color:var(--text-primary); box-shadow:var(--shadow-card); text-align:left; overflow:hidden; font:400 12px/1.5 var(--font-sans); }
.notification-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 8px; }
.notification-panel-heading h2 { margin:0; font-size:15px; font-weight:700; }
.notification-panel-heading .btn.frost-btn { --btn-height:30px; --btn-pad-x:0px; --btn-radius:var(--radius-md); width:30px; height:30px; padding:0; gap:0; font-size:16px; }
.notification-toolbar { display:flex; justify-content:space-between; gap:12px; padding:0 16px 12px; border-bottom:1px solid var(--border-subtle); }
.notification-clear-dialog .dialog-footer .btn.frost-btn { width:68px; flex:0 0 auto; }
.notification-text-button { color:var(--text-secondary); font:600 11px/1.5 var(--font-sans); }
.notification-text-button { border:0; padding:0; background:transparent; text-align:left; cursor:pointer; }
.notification-text-button:hover { color:var(--text-primary); }
.notification-text-button:disabled { opacity:.5; cursor:default; }
.notification-panel :is(a,button):not(.frost-btn):focus-visible { outline:2px solid var(--accent-cyan); outline-offset:-2px; border-radius:4px; }
.notification-scroll { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.notification-list { list-style:none; padding:0; margin:0; }
.notification-item { border-bottom:1px solid var(--border-subtle); }
.notification-item.is-unread { background:color-mix(in srgb,var(--accent-violet) 4%,transparent); box-shadow:inset 2px 0 color-mix(in srgb,var(--accent-violet) 55%,transparent); }
.notification-link { display:grid; grid-template-columns:40px minmax(0,1fr); align-items:start; gap:6px; padding:9px 16px; color:var(--text-primary); text-decoration:none; overflow-wrap:anywhere; }
button.notification-link { width:100%; border:0; background:transparent; text-align:left; font:inherit; cursor:pointer; }
.notification-art { position:relative; display:grid; place-items:center; width:40px; height:40px; overflow:hidden; border:0; border-radius:var(--radius-sm); background:var(--bg-surface-2); color:var(--text-muted); font-size:16px; }
.notification-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.notification-art [hidden] { display:none; }
.notification-content { display:grid; gap:2px; min-width:0; line-height:1.4; }
.notification-link:hover { background:var(--bg-hover); color:var(--text-primary); }
.notification-link strong { font-size:12px; font-weight:650; }
.notification-title { display:flex; align-items:baseline; gap:6px; }
.notification-title > span:first-of-type { min-width:0; }
.notification-event-icon { flex:0 0 12px; width:12px; font-size:11px; line-height:1; color:color-mix(in srgb,var(--accent-violet) 55%,var(--text-secondary)); }
.notification-event-icon[data-notification-event="watchlist.mint_link"] { color:color-mix(in srgb,var(--accent-cyan) 55%,var(--text-secondary)); }
.notification-event-icon[data-notification-event="watchlist.opensea_link"] { color:color-mix(in srgb,var(--accent-blue) 55%,var(--text-secondary)); }
.notification-event-icon[data-notification-event="watchlist.checker_link"], .notification-event-icon[data-notification-event="watchlist.start"] { color:color-mix(in srgb,var(--accent-emerald) 55%,var(--text-secondary)); }
.notification-event-icon[data-notification-event="watchlist.schedule"] { color:color-mix(in srgb,var(--accent-amber) 55%,var(--text-secondary)); }
.notification-official { margin-left:auto; color:var(--text-secondary); font-size:9px; font-weight:500; white-space:nowrap; }
.notification-body { color:var(--text-secondary); white-space:pre-wrap; }
.notification-time { color:var(--text-secondary); font-size:10px; }
.notification-feedback { padding:12px 16px; margin:0; color:var(--text-secondary); }
.notification-feedback:empty { display:none; }
.notification-more { flex:0 0 auto; padding:12px 16px; border-top:1px solid var(--border-subtle); text-align:center; }
.notification-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.header-sign-in { text-decoration: none; white-space: nowrap; }
.btn.frost-btn.header-sign-in {
  --btn-height: 0px;
  --btn-radius: var(--radius-md);
  --btn-pad-x: calc(var(--header-sign-in-pad-x, 16px) - 1px);
  /* Compensate for Frost's 1px border to retain the original button bounds. */
  padding-block: 7px;
  gap: 8px;
  font: 600 13px/normal var(--font-sans);
  letter-spacing: normal;
}
.header-user-menu {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.header-user-menu:hover, .header-user-menu.open {
  background: var(--bg-surface-2);
  border-color: var(--border-subtle);
}
.header-user-trigger.header-profile-link {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  border-radius: 12px;
  padding: 4px 6px 4px 4px;
  cursor: pointer;
  text-decoration: none;
}
.header-user-trigger.header-profile-link:hover {
  color: var(--text-primary);
}
.header-user-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px 8px 8px 2px;
  font-size: 11px;
  border-radius: 8px;
  transition: color 0.15s ease;
}
.header-user-toggle:hover {
  color: var(--text-primary);
}
.header-user-avatar, .header-user-fallback { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; background: var(--bg-surface-3); }
.header-user-portrait { display: grid; width: 32px; height: 32px; flex: 0 0 32px; }
.header-user-portrait > * { grid-area: 1 / 1; }
.header-user-portrait > [hidden] { display: none; }
.header-user-fallback { display: grid; place-items: center; color: var(--accent-cyan); font-weight: 800; }
.header-user-name { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; font-size: 13px; }
.header-user-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; min-width: 210px; padding: 7px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-surface-1); box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.header-user-dropdown::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.header-user-menu:hover .header-user-dropdown, .header-user-menu:focus-within .header-user-dropdown, .header-user-menu.open .header-user-dropdown { display: grid; }
.header-user-dropdown a, .header-user-dropdown button { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: transparent; color: var(--text-secondary); text-decoration: none; text-align: left; padding: 10px; border-radius: 8px; cursor: pointer; font: inherit; }
.header-user-dropdown a:hover, .header-user-dropdown button:hover,
.header-user-dropdown .header-mobile-nav.is-active { background: var(--bg-surface-2); color: var(--text-primary); }
.header-user-dropdown .header-mobile-nav { display: none; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; letter-spacing: .08em; }
.brand-name span { color: var(--accent-cyan); }

/* Theme Toggle Button */
.theme-toggle-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Preserve the icon button geometry; surfaces and states belong to Frost V2. */
.btn.frost-btn.theme-toggle-btn {
  --btn-height: 0px;
  --btn-radius: var(--radius-md);
  --btn-pad-x: 0px;
  padding: 0;
  gap: 0;
  font: revert;
  font-size: 14px;
  letter-spacing: normal;
}

.theme-toggle-btn.is-switching i {
  animation: theme-toggle-pop 0.22s cubic-bezier(.2, .8, .2, 1);
}

@keyframes theme-toggle-pop {
  0% { transform: scale(.72) rotate(-16deg); opacity: .55; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle-btn.is-switching i { animation: none; }
  .header-nav a { transition: none; }
}

[data-theme="dark"] .theme-icon-sun {
  display: block;
  color: #fbbf24;
}

[data-theme="dark"] .theme-icon-moon {
  display: none;
}

[data-theme="light"] .theme-icon-sun {
  display: none;
}

[data-theme="light"] .theme-icon-moon {
  display: block;
  color: #6366f1;
}

[data-theme="light"] .top-nav {
  background-color: #ffffff;
  border-bottom-color: #e2e8f0;
}