/* Shared header styles are scoped so calculator/admin styles stay independent. */
:root { --workspace-header-height:68px; scrollbar-gutter:stable; }
/* Clipping must not create a body scroll container that traps the sticky header. */
@media screen { body:has(> .topoai-header) { overflow-x:clip; } }
.topoai-header {
  --bg:#080808; --bg-soft:#111; --surface:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.2);
  --text:#f5f5f5; --muted:rgba(255,255,255,.6); --accent:#ff4a17;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(18px,4vw,40px);
  display:block; position:sticky; inset:0 0 auto; z-index:100; width:100%; min-height:0; margin:0; padding:0;
  border:0; border-bottom:1px solid rgba(255,255,255,.08);
  color-scheme:dark; color:var(--text); background:#080808;
  font:14px/1.4 var(--sans); letter-spacing:normal; text-align:left;
  -webkit-font-smoothing:antialiased;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:border-color .25s ease, background .25s ease;
}
.topoai-header.is-stuck { border-bottom-color:var(--line); background:rgba(8,8,8,.94); }
.topoai-header, .topoai-header *, .topoai-header *::before, .topoai-header *::after { box-sizing:border-box; }
/* Relative positioning keeps dropdowns above page content without pinning the header. */
body.page-prikaz > .topoai-header,
body.page-smeta > .topoai-header { position:relative; }
.topoai-header [hidden] { display:none !important; }
.topoai-header .topoai-header__inner {
  position:relative; display:flex; flex-wrap:nowrap;
  align-items:center; gap:20px; width:100%; max-width:none; min-height:68px; height:auto;
  margin:0 auto; padding:0 var(--gutter);
}
.topoai-header a { text-decoration:none; color:inherit; border:0; box-shadow:none; }
.topoai-header .topoai-header__brand {
  display:inline-flex; flex-shrink:0; align-items:center; gap:11px; margin:0; padding:0; white-space:nowrap;
  color:#f5f5f5; font:700 19.5px/1 var(--sans); letter-spacing:-.01em;
}
.topoai-header__brand img { display:block; width:32px; height:32px; margin:0; }
.topoai-header__accent { color:#ff4a17; }
.topoai-header__panel { display:flex; align-items:center; gap:20px; margin-left:auto; min-width:0; }
.topoai-header .topoai-header__button.topoai-header__menu { display:none; }
.topoai-header__nav { display:flex; align-items:center; gap:4px; min-width:0; }
.topoai-header__nav a { padding:8px 10px; border-radius:10px; color:var(--muted); white-space:nowrap; font-size:14px; }
.topoai-header__nav a:hover, .topoai-header__nav a[aria-current] { color:#fff; background:rgba(255,255,255,.055); }
.topoai-header__account { display:flex; align-items:center; gap:12px; min-width:0; }
.topoai-header__profile-wrap { position:relative; min-width:0; }
.topoai-header .topoai-header__profile {
  display:flex; align-items:center; gap:10px; min-width:0; width:auto;
  margin:0; padding:6px; border:1px solid transparent; border-radius:12px;
  background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; box-shadow:none;
}
.topoai-header .topoai-header__profile:hover, .topoai-header .topoai-header__profile[aria-expanded="true"] { background:#151515; border-color:var(--line); }
.topoai-header__chevron { flex:0 0 16px; color:var(--muted); transform:rotate(0deg); transition:transform .25s ease; }
.topoai-header__profile[aria-expanded="true"] .topoai-header__chevron { transform:rotate(180deg); }
.topoai-header__profile-options {
  position:absolute; top:calc(100% + 10px); right:0; width:240px; max-width:calc(100vw - 36px);
  display:grid; gap:4px; margin:0; padding:8px; border:1px solid var(--line-2); border-radius:14px;
  background:#111; color:var(--text); box-shadow:0 16px 40px rgba(0,0,0,.25);
}
.topoai-header .topoai-header__profile-options :is(a,button) {
  display:block; width:100%; min-height:40px; margin:0; padding:11px 12px; border:0; border-radius:8px;
  background:transparent; color:var(--text); font:500 13px/1.4 var(--sans); text-align:left; white-space:nowrap; cursor:pointer; box-shadow:none;
}
.topoai-header .topoai-header__profile-options :is(a,button):hover { background:rgba(255,255,255,.075); }
.topoai-header .topoai-header__profile-options button { border-top:1px solid var(--line); border-radius:0 0 8px 8px; color:#ff8b69; }
.topoai-header__avatar {
  display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px;
  overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#181818;
  color:var(--accent); font-weight:650;
}
.topoai-header__avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.topoai-header__avatar [data-header-initial] { width:100%; height:100%; }
.topoai-header__identity { display:grid; gap:3px; min-width:0; max-width:190px; }
.topoai-header__identity strong, .topoai-header__identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topoai-header__identity strong { color:#f5f5f5; font:650 13px/1.3 var(--sans); }
.topoai-header__identity small { color:var(--muted); font:11px/1.25 ui-monospace,Consolas,monospace; }
.topoai-header .topoai-header__button {
  display:inline-flex; align-items:center; justify-content:center; min-height:36px; width:auto;
  margin:0; padding:8px 12px; border:1px solid var(--line); border-radius:10px;
  color:#f5f5f5; background:rgba(255,255,255,.035); font:600 13px/1.3 var(--sans);
  white-space:nowrap; cursor:pointer; box-shadow:none; text-decoration:none;
}
.topoai-header .topoai-header__button:hover { border-color:var(--line-2); background:rgba(255,255,255,.075); }
.topoai-header .topoai-header__button:disabled { cursor:wait; opacity:.6; }
.topoai-header :is(a,button,input):focus-visible { outline:2px solid #ff4a17; outline-offset:3px; }
/* The theme switch occupies a regular header slot, including on phones. */
.topoai-header__panel { order:1; }
.topoai-header .topoai-header__button.topoai-header__theme {
  display:inline-grid; place-items:center; order:2; flex:0 0 44px; width:44px; height:44px; padding:0;
}
.topoai-header__theme svg {
  display:block; grid-area:1 / 1; width:18px; height:18px; pointer-events:none;
  transform-origin:center; transition:opacity .2s ease, transform .36s cubic-bezier(.22,1,.36,1);
}
.topoai-header__theme [data-theme-sun] { opacity:1; transform:rotate(0deg) scale(1); }
.topoai-header__theme [data-theme-moon] { opacity:0; transform:rotate(45deg) scale(.45); }
html[data-theme="dark"] .topoai-header__theme [data-theme-sun] { opacity:0; transform:rotate(-90deg) scale(.45); }
html[data-theme="dark"] .topoai-header__theme [data-theme-moon] { opacity:1; transform:rotate(0deg) scale(1); }
.topoai-header__menu { order:3; }
.topoai-header__menu-icon { display:block; position:relative; width:20px; height:20px; }
.topoai-header__menu-icon > span,
.topoai-header__menu-icon > span::before,
.topoai-header__menu-icon > span::after {
  position:absolute; left:0; width:20px; height:1.5px; border-radius:1px; background:currentColor;
}
.topoai-header__menu-icon > span { top:calc(50% - .75px); transition:background-color 0s .3s; }
.topoai-header__menu-icon > span::before,
.topoai-header__menu-icon > span::after { content:""; transform:rotate(0deg); }
.topoai-header__menu-icon > span::before { top:-6px; transition:top .3s .3s, transform .3s; }
.topoai-header__menu-icon > span::after { bottom:-6px; transition:bottom .3s .3s, transform .3s; }
.topoai-header__menu[aria-expanded="true"] .topoai-header__menu-icon > span { background:transparent; }
.topoai-header__menu[aria-expanded="true"] .topoai-header__menu-icon > span::before { top:0; transform:rotate(45deg); transition-delay:0s,.3s; }
.topoai-header__menu[aria-expanded="true"] .topoai-header__menu-icon > span::after { bottom:0; transform:rotate(-45deg); transition-delay:0s,.3s; }
@media (prefers-reduced-motion:reduce) {
  .topoai-header__theme svg { transition:none; }
  .topoai-header__chevron { transition:none; }
  .topoai-header__menu-icon > span,
  .topoai-header__menu-icon > span::before,
  .topoai-header__menu-icon > span::after { transition:none; }
}
body.has-site-header.has-fixed-header .page-wrap { padding-top:0 !important; }
body[data-site-layout="admin"] > .sidebar { top:var(--workspace-header-height); }
body[data-site-layout="extension-complete"] { display:block; }
body[data-site-layout="extension-complete"] > main { margin:clamp(40px,12vh,140px) auto; }
@media (max-width:1100px) {
  .topoai-header .topoai-header__inner { gap:12px; }
  .topoai-header__identity { max-width:145px; }
  .topoai-header__account { gap:9px; }
  .topoai-header__nav a { padding-inline:7px; }
}
.topoai-header[data-compact="true"] .topoai-header__button.topoai-header__menu { display:inline-flex; flex:0 0 44px; width:44px; height:44px; padding:0; margin-left:auto; }
.topoai-header[data-compact="true"] .topoai-header__theme + .topoai-header__menu { margin-left:0; }
.topoai-header[data-compact="true"] .topoai-header__button.topoai-header__theme { margin-left:auto; }
.topoai-header[data-compact="true"] .topoai-header__panel {
  display:none; position:fixed; inset:calc(var(--workspace-header-height) + 8px) var(--gutter) auto auto;
  width:min(340px,calc(100% - 2 * var(--gutter))); max-height:calc(100dvh - var(--workspace-header-height) - 24px);
  overflow:auto; margin:0; padding:18px; border:1px solid var(--line-2); border-radius:14px;
  background:#111; color:#f5f5f5; box-shadow:0 16px 40px rgba(0,0,0,.25);
}
.topoai-header[data-compact="true"] .topoai-header__panel:is(:popover-open,[data-open="true"]) { display:flex; flex-direction:column; align-items:stretch; gap:16px; }
.topoai-header[data-compact="true"] .topoai-header__nav { flex-direction:column; align-items:stretch; }
.topoai-header[data-compact="true"] .topoai-header__account { flex-wrap:wrap; }
.topoai-header[data-compact="true"] .topoai-header__profile-wrap { width:100%; }
.topoai-header[data-compact="true"] .topoai-header__profile { width:100%; padding-bottom:6px; }
.topoai-header[data-compact="true"] .topoai-header__identity { max-width:calc(100% - 70px); }
.topoai-header[data-compact="true"] .topoai-header__profile-options { position:static; width:100%; margin-top:8px; box-shadow:none; }
@media (max-width:620px) {
  .topoai-header .topoai-header__inner { gap:10px; }
  .topoai-header .topoai-header__inner { min-height:60px; }
  .topoai-header .topoai-header__brand { font-size:17px; gap:8px; }
  .topoai-header__brand img { width:28px; height:28px; }
}