/* ============ DF Premium Header - obsidian glass + gold hairline ============ */

/* top nav: sticky glass bar with gold hairline */
.menu{position:sticky;top:0;z-index:9998;background:rgba(10,13,18,.86) !important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #1c232e;border-bottom:1px solid rgba(251,191,36,.28) !important;border-radius:0 0 14px 14px;box-shadow:0 10px 34px rgba(0,0,0,.5) !important;padding:6px 10px !important}
.menu ul{display:flex;flex-wrap:wrap;gap:2px;justify-content:center}
.menu li{list-style:none}
.menu li a{color:#9fb0c2 !important;font-size:11.5px !important;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:9px 13px !important;border-radius:9px;transition:color .15s ease,background .15s ease,transform .15s ease;display:inline-flex;align-items:center;gap:7px}
.menu li a i{color:#fbbf24;opacity:.85;font-size:12px !important}
.menu li a:hover{color:#ffd57a !important;background:rgba(251,191,36,.09);transform:translateY(-1px)}
.menu li a:hover i{opacity:1}

/* brand row: obsidian panel with gold glow */
.topbar{background:linear-gradient(120deg,rgba(251,191,36,.10),rgba(11,14,18,0) 45%),linear-gradient(180deg,#12161c,#0d1117);border:1px solid #232a33;border-radius:16px;padding:16px 20px !important;margin:14px 0 !important;box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.df-topbrand{display:flex;align-items:center;gap:14px;text-decoration:none !important}
.df-topbrand img{width:56px;height:56px;border-radius:14px;box-shadow:0 0 0 2px rgba(251,191,36,.45),0 6px 18px rgba(0,0,0,.5)}
.df-topbrand-text strong{font-size:24px;font-weight:800;letter-spacing:.02em;background:linear-gradient(90deg,#ffe9a8,#fbbf24 55%,#d97706);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#fbbf24}
.df-topbrand-text em{display:block;font-style:normal;color:#7d8b9b;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-top:3px}
@media(max-width:640px){.df-topbrand img{width:44px;height:44px}.df-topbrand-text strong{font-size:20px}.df-topbrand-text em{font-size:10px}}

/* auth buttons: ghost-gold + solid-gold */
.df-welcome{margin-left:auto}
.df-welcome .button4.login{background:transparent !important;border:1px solid rgba(251,191,36,.5) !important;color:#ffd57a !important;border-radius:10px !important;padding:9px 18px !important;font-weight:700;letter-spacing:.04em;transition:all .15s ease}
.df-welcome .button4.login:hover{background:rgba(251,191,36,.1) !important;box-shadow:0 0 0 3px rgba(251,191,36,.12)}
.df-welcome .button5.register{background:linear-gradient(90deg,#d97706,#fbbf24 45%,#fde68a) !important;border:0 !important;color:#1a1408 !important;border-radius:10px !important;padding:9px 18px !important;font-weight:800;letter-spacing:.04em;box-shadow:0 8px 22px rgba(251,191,36,.35);transition:transform .15s ease,box-shadow .15s ease}
.df-welcome .button5.register:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(251,191,36,.45)}

/* member welcome state keeps alignment */
.df-welcome .userbg{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

@media(max-width:760px){
  .menu{position:static}
  .topbar{padding:12px 14px !important}
  .df-welcome{margin-left:0}
}

/* v3: topbar as first row */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 16px;margin:0 0 12px;background:linear-gradient(180deg,rgba(251,191,36,.07),rgba(251,191,36,.015));border:1px solid #232a33;border-radius:16px}
@media(max-width:640px){.topbar{padding:10px 12px}}

/* v4: member dropdown stacking + anchoring fix */
.topbar{position:relative;z-index:1005}
.menu{position:relative;z-index:900}
.topbar .dropdown{position:relative}
.topbar .dropdown-menu.dfud{left:auto !important;right:0 !important;top:calc(100% + 8px) !important;max-height:70vh;overflow:auto;max-width:calc(100vw - 20px);z-index:1006}
@media(max-width:640px){.topbar .dropdown-menu.dfud{position:fixed !important;top:64px !important;right:10px !important;left:auto !important;width:280px}}