/* Shared site header — one markup and one width on every page of script-panel.com (owner request 2026-10-20).
   The inner width matches the content edge of every page: min(1120px, 100% - 2 × 72px), 24px gutters on phones.
   Generated pages, the homepage, the account page and the legal pages all load this file. */
/* Reserve the scrollbar on every page so short pages do not shift the header sideways. */
html{scrollbar-gutter:stable}
.sp-header{position:sticky;top:0;z-index:40;background:#121212;color:#f1ede4;font-family:"Manrope","Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.sp-header-inner{width:min(1120px,calc(100% - 144px));height:72px;margin:0 auto;display:flex;align-items:center;gap:22px}
.sp-brand{display:flex;align-items:center;gap:9px;margin-right:auto;color:#f1ede4;font-size:17px;font-weight:700;text-decoration:none;white-space:nowrap}
.sp-brand svg{flex:none;width:22px;height:25px}
.sp-brand em{font-style:normal;background-image:linear-gradient(105deg,#ffbd72,#ff9db3,#c5b5ff,#8ee8f4,#caffbf,#ffbd72);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:sp-pearl 6s ease-in-out infinite}
.sp-lang{display:flex;align-items:center;gap:8px;margin-left:8px}
.sp-lang a{color:#9a9a9a;font-size:12px;font-weight:700;letter-spacing:.04em;text-decoration:none}
.sp-lang a[aria-current=true],.sp-lang a:hover{color:#f1ede4}
.sp-nav{display:flex;align-items:center;gap:22px}
.sp-nav a{color:#dadada;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.sp-nav a:hover,.sp-nav a[aria-current=page]{color:#f1ede4}
.sp-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;color:#1c1c1c;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;background-image:linear-gradient(105deg,#ffbd72,#ff9db3,#c5b5ff,#8ee8f4,#caffbf,#ffbd72);background-size:280% 100%;animation:sp-pearl 6s ease-in-out infinite;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.sp-cta:hover{color:#1c1c1c}
.sp-cta:active,.sp-avatar:active{transform:scale(.97)}
.sp-account{display:flex;align-items:center;gap:12px;min-width:40px}
.sp-avatar{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#272727;color:#f1ede4;font:700 15px/1 "Manrope","Segoe UI",Arial,sans-serif;text-decoration:none;cursor:pointer;transition:background-color 150ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
.sp-avatar:hover{background:#373737;color:#f1ede4}
.sp-avatar svg{width:20px;height:20px}
.sp-avatar.is-user{background:#8bc1ca;color:#1e1e1e}
.sp-header :focus-visible{outline:2px solid #8bc1ca;outline-offset:3px}
.sp-menu{display:none;position:relative}
.sp-menu summary{list-style:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#272727;cursor:pointer}
.sp-menu summary::-webkit-details-marker{display:none}
.sp-menu summary svg{width:20px;height:20px}
.sp-menu nav{position:absolute;right:0;top:48px;display:flex;flex-direction:column;min-width:200px;padding:8px;border-radius:14px;background:#1d1d1d}
.sp-menu nav a{padding:12px 14px;border-radius:9px;color:#f1ede4;font-size:15px;font-weight:600;text-decoration:none}
.sp-menu nav a:hover{background:#272727}
@keyframes sp-pearl{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (max-width:780px){
  .sp-header-inner{width:calc(100% - 48px);height:64px;gap:10px}
  .sp-nav{display:none}
  .sp-menu{display:block}
  .sp-cta{min-height:40px;padding:0 14px}
}
@media (max-width:380px){.sp-brand span{font-size:15px}.sp-cta{display:none}}
@media (prefers-reduced-motion:reduce){.sp-brand em,.sp-cta{animation:none}}
.sp-menu summary{margin:0;padding:0}