/* Screenshot-matched public navigation header. */
.topbar {
  --header-line: rgba(97, 125, 224, .64);
  width: calc(100% - 56px);
  max-width: 2200px;
  height: clamp(82px, 6.65vw, 132px);
  margin: 10px auto 0;
  padding: 0 clamp(18px, 1.55vw, 30px);
  position: sticky;
  top: 10px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 2.2vw, 44px);
  border: 1px solid transparent;
  border-radius: clamp(18px, 1.35vw, 27px);
  background:
    linear-gradient(112deg, rgba(5, 14, 29, .96), rgba(7, 18, 40, .92) 58%, rgba(5, 13, 30, .96)) padding-box,
    linear-gradient(105deg, rgba(79, 79, 255, .8), rgba(78, 133, 255, .7) 55%, rgba(142, 49, 255, .84)) border-box;
  box-shadow: 0 12px 35px rgba(2, 7, 25, .35), 0 0 24px rgba(63, 74, 239, .12), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}
.header-brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: clamp(12px, 1.5vw, 30px); min-width: 0; color: #f7f8ff; text-decoration: none; }
.header-brand-mark { width: clamp(54px, 4.35vw, 86px); height: clamp(54px, 4.35vw, 86px); flex: 0 0 auto; display: grid; place-items: center; border-radius: clamp(14px, 1.05vw, 21px); background: linear-gradient(140deg, #5724f4 2%, #8428f7 56%, #b31eee 100%); box-shadow: 0 7px 25px rgba(74, 32, 224, .23); }
.header-brand-mark svg { width: 70%; height: 70%; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.header-brand-name { color: #f7f8ff; font-size: clamp(29px, 2.8vw, 56px); line-height: 1; font-weight: 790; letter-spacing: -.035em; white-space: nowrap; }
.header-brand-name strong { font-weight: 820; background: linear-gradient(110deg, #1597ff 0%, #3954ff 49%, #9d2cff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.navlinks { flex: 1 1 auto; display: flex; align-items: stretch; justify-content: center; gap: clamp(22px, 3.1vw, 62px); height: 100%; min-width: 0; margin: 0; }
.navlink { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 2px; color: #d8e2fa; font-size: clamp(16px, 1.32vw, 27px); line-height: 1; font-weight: 600; white-space: nowrap; text-decoration: none; transition: color .18s ease; }
.navlink:hover, .navlink.is-active { color: #a477ff; }
.navlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 5px; border-radius: 4px 4px 0 0; opacity: 0; background: linear-gradient(90deg, #276bff, #a72bff); box-shadow: 0 0 16px rgba(115, 55, 255, .65); transition: opacity .18s ease; }
.navlink.is-active::after { opacity: 1; }
.header-nav-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; }
.header-nav-icon svg { width: 100%; height: 100%; }
.header-nav-icon.is-purple { color: #9a4bff; }
.header-nav-icon.is-blue { color: #8ea5c8; }
.header-nav-icon.is-teal { color: #c1d2f3; }
.header-nav-icon.is-orange { color: #dbe7ff; }
.nav-actions { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(14px, 1.4vw, 28px); margin: 0; }
.theme-toggle { width: clamp(54px, 4.35vw, 86px); height: clamp(54px, 4.35vw, 86px); flex: 0 0 auto; display: grid; place-items: center; position: relative; border: 2px solid rgba(125, 153, 211, .48); border-radius: 50%; background: rgba(9, 20, 41, .66); color: #fff; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.theme-toggle:hover { border-color: #8d78ff; background: rgba(57, 70, 141, .35); transform: translateY(-1px); }
.theme-toggle svg { width: 43%; height: 43%; fill: currentColor; stroke: currentColor; }
.theme-sun { display: none; }
.header-login { height: clamp(54px, 4.35vw, 86px); min-width: clamp(122px, 10.55vw, 210px); padding: 0 clamp(20px, 1.8vw, 36px); display: inline-flex; align-items: center; justify-content: center; gap: 14px; border-radius: 999px; color: #fff; font-size: clamp(18px, 1.38vw, 28px); line-height: 1; font-weight: 700; text-decoration: none; white-space: nowrap; background: linear-gradient(105deg, #a629f4 0%, #6d27ff 47%, #078cf5 100%); box-shadow: 0 9px 26px rgba(77, 48, 255, .23), inset 0 1px rgba(255,255,255,.15); transition: transform .18s ease, filter .18s ease; }
.header-login:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.header-login-icon { width: 30px; height: 30px; display: grid; place-items: center; }
.header-login-icon svg { width: 100%; height: 100%; }
.header-menu-toggle { display: none; width: 50px; height: 50px; padding: 0; place-items: center; border: 1px solid rgba(115, 147, 219, .52); border-radius: 13px; background: rgba(9, 20, 41, .72); color: #fff; cursor: pointer; }
.menu-bars { width: 25px; height: 21px; display: flex; flex-direction: column; justify-content: space-between; }
.menu-bars i { display: block; width: 100%; height: 3px; border-radius: 5px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
#site-topbar.menu-open .menu-bars i:first-child { transform: translateY(9px) rotate(45deg); }
#site-topbar.menu-open .menu-bars i:nth-child(2) { opacity: 0; }
#site-topbar.menu-open .menu-bars i:last-child { transform: translateY(-9px) rotate(-45deg); }
body[data-theme="light"] { --bg: #f5f7ff; --panel: #fff; --panel2: #edf1ff; --text: #17223c; --muted: #566581; --border: rgba(38, 56, 104, .16); background: radial-gradient(circle at 8% 0, #dbe4ff 0, transparent 32%), radial-gradient(circle at 92% 0, #eee0ff 0, transparent 30%), var(--bg); color: var(--text); }
body[data-theme="light"] .topbar { background: linear-gradient(112deg, rgba(255,255,255,.97), rgba(244,247,255,.96) 58%, rgba(255,255,255,.97)) padding-box, linear-gradient(105deg, #6751dc, #5792ee 55%, #a650e4) border-box; box-shadow: 0 12px 35px rgba(34, 45, 90, .14), 0 0 18px rgba(93, 98, 218, .12); }
body[data-theme="light"] .header-brand, body[data-theme="light"] .header-brand-name, body[data-theme="light"] .navlink { color: #17223c; }
body[data-theme="light"] .navlink:hover, body[data-theme="light"] .navlink.is-active { color: #6a39d9; }
body[data-theme="light"] .theme-toggle, body[data-theme="light"] .header-menu-toggle { color: #263450; background: rgba(236, 240, 255, .9); border-color: rgba(82, 107, 164, .48); }
body[data-theme="light"] .theme-moon { display: none; }
body[data-theme="light"] .theme-sun { display: block; }
body[data-theme="light"] .site-footer { --footer-bg: #080f1f; color: #f7f8ff; }
@media (max-width: 1180px) {
  .topbar { width: calc(100% - 36px); height: 96px; padding: 0 18px; gap: 20px; }
  .header-brand-mark { width: 60px; height: 60px; }
  .header-brand-name { font-size: clamp(27px, 3vw, 36px); }
  .navlinks { gap: clamp(18px, 2.4vw, 30px); }
  .navlink { gap: 9px; font-size: 17px; }
  .header-nav-icon { width: 23px; height: 23px; }
  .theme-toggle, .header-login { height: 60px; }
  .theme-toggle { width: 60px; }
  .header-login { min-width: 132px; padding: 0 21px; font-size: 18px; }
  .header-menu-toggle { display: none; }
}
@media (max-width: 720px) {
  .topbar { width: calc(100% - 40px); height: 126px; padding: 0 28px; gap: 16px; }
  .header-brand { gap: 20px; }
  .header-brand-mark { width: 78px; height: 78px; }
  .header-brand-name { font-size: clamp(30px, 4vw, 42px); }
  .navlinks { display: none; position: absolute; top: calc(100% - 5px); right: 0; width: min(735px, 100%); height: auto; margin: 0; padding: 20px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; border: 1px solid transparent; border-radius: 22px; background: linear-gradient(125deg, rgba(5, 14, 29, .98), rgba(7, 18, 40, .98)) padding-box, linear-gradient(125deg, rgba(78, 124, 233, .65), rgba(132, 60, 255, .9)) border-box; box-shadow: 0 18px 44px rgba(0,0,0,.46); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
  #site-topbar.menu-open .navlinks { display: flex; opacity: 1; visibility: visible; transform: translateY(0); }
  .navlink { min-height: 64px; justify-content: flex-start; gap: 26px; padding: 0 20px; border-radius: 12px; font-size: 23px; }
  .navlink::after { display: none; }
  .navlink.is-active { background: linear-gradient(105deg, rgba(73, 45, 203, .24), rgba(28, 41, 142, .42)); color: #c4b0ff; }
  .header-nav-icon { width: 31px; height: 31px; }
  .header-nav-icon.is-blue { color: #58aaff; }
  .header-nav-icon.is-teal { color: #1be1b4; }
  .header-nav-icon.is-orange { color: #ff741d; }
  .nav-actions { gap: 16px; }
  .theme-toggle { width: 78px; height: 78px; }
  .header-login { height: 78px; min-width: 190px; font-size: 25px; }
  .header-login-icon { width: 31px; height: 31px; }
  .header-menu-toggle { width: 78px; height: 78px; display: grid; border-radius: 17px; }
}
@media (max-width: 600px) {
  .topbar { width: calc(100% - 16px); height: 76px; margin-top: 10px; top: 6px; padding: 0 8px; gap: 6px; border-radius: 18px; }
  .header-brand { gap: 8px; }
  .header-brand-mark { width: 46px; height: 46px; border-radius: 13px; }
  .header-brand-mark svg { width: 72%; height: 72%; stroke-width: 5.2; }
  .header-brand-name { font-size: clamp(21px, 5.7vw, 25px); letter-spacing: -.045em; }
  .nav-actions { gap: 6px; }
  .theme-toggle { width: 44px; height: 44px; border-width: 1.5px; }
  .header-login { height: 44px; min-width: 80px; padding: 0 8px; gap: 6px; font-size: 15px; }
  .header-login-icon { width: 20px; height: 20px; }
  .header-menu-toggle { width: 44px; height: 44px; border-radius: 12px; }
  .menu-bars { width: 21px; height: 17px; }
  .menu-bars i { height: 2.5px; }
  #site-topbar.menu-open .menu-bars i:first-child { transform: translateY(7px) rotate(45deg); }
  #site-topbar.menu-open .menu-bars i:last-child { transform: translateY(-7px) rotate(-45deg); }
  .navlinks { top: calc(100% - 2px); width: 100%; padding: 12px; border-radius: 0 0 18px 18px; }
  .navlink { min-height: 54px; padding: 0 12px; gap: 18px; font-size: 18px; }
  .header-nav-icon { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar *, .topbar *::before, .topbar *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body:not(.auth-page) { position: relative; isolation: isolate; }
body:not(.auth-page)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 270px;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 270' preserveAspectRatio='none'%3E%3Cpath d='M0 250 C260 226 430 127 680 177 S1040 290 1280 181 S1670 8 2000 28' fill='none' stroke='%23005cff' stroke-opacity='.76' stroke-width='3'/%3E%3Cpath d='M0 265 C350 170 540 250 850 205 S1360 65 1680 135 S1850 235 2000 182' fill='none' stroke='%238b21ff' stroke-opacity='.38' stroke-width='2'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat,
    radial-gradient(ellipse at 0% 100%, rgba(78, 23, 238, .66), transparent 36%),
    radial-gradient(ellipse at 79% 19%, rgba(0, 76, 219, .4), transparent 43%),
    radial-gradient(ellipse at 100% 100%, rgba(152, 22, 224, .42), transparent 31%),
    linear-gradient(115deg, #191248 0%, #071126 43%, #101d4b 100%);
}
@media (max-width: 980px) {
  body:not(.auth-page)::before { height: 230px; opacity: .6; }
}
@media (max-width: 600px) {
  body:not(.auth-page)::before { height: 180px; opacity: .35; }
}
@media (max-width: 980px) {
  /* The mobile reference keeps the menu on a clean dark canvas. */
  body:not(.auth-page)::before { display: none; }
}

/* Narrow phone header: keep brand, theme and menu within the viewport. */
@media (max-width: 430px) {
  .topbar { width: calc(100% - 12px); padding-left: 7px; padding-right: 7px; gap: 4px; }
  .header-brand { gap: 6px; }
  .header-brand-name { font-size: clamp(19px, 5.3vw, 22px); }
  .nav-actions { gap: 4px; }
  .theme-toggle, .header-menu-toggle { width: 42px; height: 42px; }
  .header-login { width: 42px; min-width: 42px; height: 42px; padding: 0; gap: 0; }
  .header-login-label { display: none; }
  .header-login-icon { width: 21px; height: 21px; }
}
@media (max-width: 360px) {
  .topbar { width: calc(100% - 10px); height: 68px; padding: 0 5px; gap: 3px; }
  .header-brand { gap: 4px; }
  .header-brand-mark { width: 38px; height: 38px; border-radius: 11px; }
  .header-brand-name { font-size: 18px; letter-spacing: -.05em; }
  .nav-actions { gap: 3px; }
  .theme-toggle, .header-menu-toggle, .header-login { width: 38px; min-width: 38px; height: 38px; }
  .menu-bars { width: 19px; height: 15px; }
}

/* Homepage/public header spacing refinement */
@media (max-width: 1180px) {
  .topbar { width: calc(100% - 28px); padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 720px) {
  .topbar { width: calc(100% - 20px); padding-left: 10px; padding-right: 10px; }
  .header-brand { gap: 8px; }
}

/* v12: compact brand mark + consistent header/body alignment */
.header-brand{font-size:clamp(22px,2.05vw,32px);gap:.48em}
.header-brand-mark{width:1.42em;height:1.42em;border-radius:50%;}
.header-brand-name{font-size:1em;}
@media(max-width:1180px){.header-brand{font-size:27px;gap:12px}.header-brand-mark{width:38px;height:38px;border-radius:50%}.header-brand-name{font-size:27px}}
@media(max-width:600px){.header-brand{font-size:22px;gap:7px}.header-brand-mark{width:32px;height:32px;border-radius:50%}.header-brand-name{font-size:22px}.header-brand-mark svg{width:70%;height:70%}}


/* v13: signed-in header profile replaces Dashboard label with user avatar + name */
.header-user-profile{min-width:0;max-width:min(260px,22vw);padding:0 clamp(10px,1.15vw,20px);gap:10px;}
.header-user-avatar{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;font-size:14px;font-weight:850;box-shadow:0 4px 14px rgba(72,55,220,.25);}
.header-user-avatar img{width:100%;height:100%;display:block;object-fit:cover;}
.header-user-name{display:block;min-width:0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:1180px){.header-user-profile{max-width:190px}.header-user-name{max-width:125px}}
@media(max-width:720px){.header-user-profile{max-width:190px;min-width:0;height:78px;padding:0 14px}.header-user-avatar{width:40px;height:40px;flex-basis:40px;font-size:15px}.header-user-name{max-width:112px}}
@media(max-width:600px){.header-user-profile{height:44px;min-width:0;width:auto;padding:0 9px;gap:6px}.header-user-avatar{width:26px;height:26px;flex-basis:26px;font-size:11px}.header-user-name{display:block;max-width:76px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:430px){.header-user-profile{width:auto;min-width:0;height:42px;padding:0 7px;gap:5px}.header-user-avatar{width:25px;height:25px;flex-basis:25px}.header-user-name{max-width:58px;font-size:12px}}
@media(max-width:360px){.header-user-profile{padding:0 5px;gap:4px}.header-user-avatar{width:23px;height:23px;flex-basis:23px}.header-user-name{max-width:48px;font-size:11px}}