/* Shared visual language and persistent navigation for every public page. */
:root {
  --brand-font: "Segoe UI", Arial, sans-serif;
  --brand-ink: #0b1934;
  --brand-muted: #65728a;
  --brand-paper: #f4f7ff;
  --brand-surface: #ffffffcc;
  --brand-raised: #ffffffeb;
  --brand-line: #839fc04d;
  --brand-input: #ffffffdb;
  --brand-blue: #245de8;
  --brand-cyan: #28d9ce;
  --brand-orange: #f29744;
  --brand-shadow: 0 18px 48px #1023440f;
  --brand-header: #0b1934f2;
  --brand-header-ink: #eef5ff;
  --brand-header-muted: #b2c6e3;
  --brand-header-line: #79a9e635;
  --legion-header-offset: 108px;
}
:root[data-theme=night] {
  --brand-ink: #e6edf9;
  --brand-muted: #adbed3;
  --brand-paper: #091426;
  --brand-surface: #122138cf;
  --brand-raised: #172a43db;
  --brand-line: #789ac34d;
  --brand-input: #0d1a2ce8;
  --brand-blue: #99bfff;
  --brand-cyan: #53ded4;
  --brand-orange: #ffb45e;
  --brand-shadow: 0 18px 48px #020a2038;
}

@media screen {
  html { scroll-padding-top: calc(var(--legion-header-offset) + 20px); }
  body.brand-site, body.guide-body, body.portal-glass { font-family: var(--brand-font); }
  :root body [data-header-chrome] {
    position: sticky;
    top: 0;
    z-index: 25;
    overflow: visible;
    color: var(--brand-header-ink);
    background: var(--brand-header);
    border-bottom: 1px solid var(--brand-header-line);
    box-shadow: inset 0 1px 0 #ffffff08, 0 8px 28px #020b1726;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    isolation: isolate;
  }
  :root .portal-glass .app-shell .topbar {
    background: var(--brand-header);
    border-color: var(--brand-header-line);
  }
  :root body [data-header-chrome]::before,
  :root body [data-header-chrome]::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    animation: brand-header-beacon 4.8s ease-in-out infinite;
  }
  :root body [data-header-chrome]::before {
    height: 8px;
    bottom: -5px;
    background-image: radial-gradient(ellipse at center,#ff8a1f40,transparent 70%),radial-gradient(ellipse at center,#ff8a1f40,transparent 70%);
    background-size: 24% 100%,24% 100%;
    filter: blur(2px);
  }
  :root body [data-header-chrome]::after {
    height: 2px;
    bottom: -2px;
    background-image: linear-gradient(90deg,transparent,#ff8a1f 30%,#ffd18a 50%,#ff8a1f 70%,transparent),linear-gradient(90deg,transparent,#ff8a1f 30%,#ffd18a 50%,#ff8a1f 70%,transparent),linear-gradient(90deg,transparent,#ff8a1f26 12%,#ff8a1f26 88%,transparent);
    background-size: 18% 100%,18% 100%,100% 100%;
  }
  :root .brand-site .site-header::before,
  :root .brand-site .site-header::after { display: none; }
  :root .brand-site .site-header { border: 0; }
  :root .guide-body .guide-header {
    min-height: 100px;
    padding-block: 20px;
    background: transparent;
    border: 0;
  }
  :root .guide-body .guide-brand { font-size: 15px; letter-spacing: 1.8px; font-weight: 650; }
  :root .guide-body .guide-brand b { color: var(--brand-header-ink); font-weight: inherit; }
  :root .guide-body .guide-brand small { font-size: 7.5px; letter-spacing: 1.8px; color: var(--brand-header-muted); }
  :root .guide-body .guide-brand img { width: 43px; height: 48px; object-fit: contain; }
  :root .guide-body .guide-actions { gap: 16px; }
  :root .guide-body .guide-actions>a { color: var(--brand-header-muted); font-size: 13px; }
  :root .guide-body .guide-actions>a:hover { color: var(--brand-header-ink); }

  .auth-screen { --brand-auth-gutter: max(40px,calc((100vw - 1360px)/2)); }
  .auth-header-shell {
    grid-column: 1/-1;
    align-self: start;
    margin-inline: calc(-1 * var(--brand-auth-gutter));
  }
  :root .auth-screen .portal-header {
    min-height: 100px;
    padding-inline: var(--brand-auth-gutter);
    border: 0;
  }
  :root .auth-screen .portal-header .brand { color: var(--brand-header-ink); }
  :root .auth-screen .portal-header .brand small,
  :root .auth-screen .portal-home-link { color: var(--brand-header-muted); }
  :root .auth-screen .portal-home-link:hover { color: var(--brand-header-ink); }
  :root .auth-screen .portal-home-link span { color: var(--brand-cyan); }

  :root body [data-header-chrome] :is(.theme-toggle,.notification-button,.management-toggle,.menu-toggle),
  :root .portal-glass .app-shell .topbar :is(.theme-toggle,.notification-button,.management-toggle,.menu-toggle),
  :root .auth-screen .portal-header .theme-toggle {
    color: #dceaff;
    background: #a6caff0c;
    border-color: #96b6e345;
    border-radius: 11px;
    box-shadow: inset 0 1px 0 #ffffff08;
  }
  :root body [data-header-chrome] :is(.theme-toggle,.notification-button,.management-toggle,.menu-toggle):hover,
  :root .portal-glass .app-shell .topbar :is(.theme-toggle,.notification-button,.management-toggle,.menu-toggle):hover,
  :root .auth-screen .portal-header .theme-toggle:hover {
    background: #a6caff19;
    border-color: #96b6e37a;
    color: #fff;
  }
  :root .portal-glass .app-shell #topbar-date { color: var(--brand-header-muted); }
  :root .portal-glass .app-shell .topbar-clock [data-clock-time] { color: var(--brand-header-ink); }
  :root .portal-glass .app-shell .topbar .secure-label {
    color: #b9ecd7;
    background: #153a33;
    border-color: #3c6c5d;
    box-shadow: inset 0 1px 0 #ffffff05;
  }
  :root .portal-glass .app-shell .topbar .secure-label i { background: #75ddba; box-shadow: 0 0 8px #75ddba33; }
  :root .portal-glass .app-shell .notifications-panel {
    max-height: calc(100vh - var(--legion-header-offset) - 26px);
    max-height: calc(100dvh - var(--legion-header-offset) - 26px);
  }
  .app-shell .estimate-panel { top: calc(var(--legion-header-offset) + 20px); scroll-margin-top: 0; }
  .app-shell :is(#catalog-brand-title,#client-results) { scroll-margin-top: 0; }
  :root body :is(.skip-link,.guide-skip) { z-index: 100; }

  @media (max-width: 1200px) { .auth-screen { --brand-auth-gutter: 32px; } }
  @media (max-width: 980px) { .auth-screen { --brand-auth-gutter: 28px; } }
  @media (max-width: 850px) {
    :root .brand-site .site-header { width: 100%; margin-inline: 0; padding-inline: 24px; }
    :root .brand-site .site-nav {
      top: 100%;
      left: 0;
      right: 0;
      max-height: calc(100vh - var(--legion-header-offset) - 4px);
      max-height: calc(100dvh - var(--legion-header-offset) - 4px);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: #0b1934fa;
      border-color: var(--brand-header-line);
      backdrop-filter: blur(18px);
    }
  }
  @media (max-width: 600px) {
    .auth-screen { --brand-auth-gutter: 20px; }
    :root .guide-body .guide-header { min-height: 82px; padding: 14px 18px; gap: 12px; }
    :root .guide-body .guide-brand { font-size: 12px; letter-spacing: 1px; gap: 9px; }
    :root .guide-body .guide-brand img { width: 36px; height: 42px; }
    :root .guide-body .guide-brand small { font-size: 6px; letter-spacing: 1px; }
    :root .guide-body .guide-actions { gap: 7px; }
    :root .guide-body .guide-actions>a { font-size: 11px; }
    :root .auth-screen .portal-header { min-height: 82px; }
    :root body [data-header-chrome] { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  }
  @media (max-width: 580px) { :root .brand-site .site-header { padding-inline: 20px; } }
  @media (max-width: 360px) {
    .auth-screen { --brand-auth-gutter: 16px; }
    :root .brand-site .site-header { padding-inline: 15px; }
  }
  @media (prefers-reduced-motion: reduce) {
    :root body [data-header-chrome]::before,
    :root body [data-header-chrome]::after { animation: none; background-position: 50% 50%,50% 50%,center; opacity: .5; }
  }
}
@keyframes brand-header-beacon {
  0%,100% { background-position: 0% 50%,100% 50%,center; }
  50% { background-position: 100% 50%,0% 50%,center; }
}
@media print {
  html { scroll-padding-top: 0; }
  [data-header-chrome] { position: static; top: auto; box-shadow: none; backdrop-filter: none; }
  [data-header-chrome]::before,[data-header-chrome]::after { display: none; }
}