/* SURPRIA shared header — one visual/navigation system across the product. */
.surpria-header{
    position:sticky;top:0;z-index:1000;
    background:rgba(255,250,242,.94);
    border-bottom:1px solid rgba(21,21,21,.07);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.surpria-header__inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:3}
.surpria-header__start,.surpria-header__actions{display:flex;align-items:center;gap:18px;min-width:0}
.surpria-header__brand{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0}
.surpria-header__brand .surpria-brand-logo{width:76px;height:62px}
.surpria-header--editor .surpria-header__brand .surpria-brand-logo,.surpria-header--minimal .surpria-header__brand .surpria-brand-logo{width:68px;height:56px}
.surpria-header__nav{display:flex;align-items:center;gap:8px}
.surpria-header__nav a{padding:10px 13px;border-radius:999px;color:var(--text-soft,#68635c);font-size:.9rem;font-weight:800;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.surpria-header__nav a:hover,.surpria-header__nav a.active{background:#fff;color:var(--text,#151515);box-shadow:0 7px 22px rgba(30,24,16,.06)}
.surpria-header__create{min-height:42px;padding:0 15px;display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:var(--accent,#f4a51c);font-weight:900;box-shadow:0 8px 20px rgba(244,165,28,.20);transition:transform .16s ease,box-shadow .16s ease}
.surpria-header__create:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(244,165,28,.26)}
.surpria-header__create>span:first-child{font-size:1.18rem;line-height:1}
.surpria-header__lang-button,.surpria-header__user,.surpria-header__menu-toggle{border:0;background:transparent;color:inherit;cursor:pointer}
.surpria-header__lang-button{min-height:40px;padding:0 11px;display:flex;align-items:center;gap:6px;border:1px solid rgba(21,21,21,.09);border-radius:999px;background:#fff}
.surpria-header__user{display:flex;align-items:center;gap:10px;padding:5px 8px 5px 5px;border-radius:999px;transition:background .16s ease}
.surpria-header__user:hover{background:rgba(255,255,255,.75)}
.surpria-header__avatar,.surpria-header__panel-avatar{display:grid;place-items:center;border-radius:50%;background:#171717;color:#fff;font-weight:950}
.surpria-header__avatar{width:38px;height:38px;font-size:.86rem}
.surpria-header__user-copy{display:grid;text-align:left;line-height:1.15;max-width:180px}
.surpria-header__user-copy strong,.surpria-header__user-copy span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.surpria-header__user-copy strong{font-size:.82rem}.surpria-header__user-copy span{margin-top:3px;color:var(--text-soft,#68635c);font-size:.68rem}
.surpria-header__chevron{font-weight:900;color:var(--text-soft,#68635c)}

.surpria-header__menu-toggle{display:none;width:42px;height:42px;padding:9px;border-radius:12px;position:relative;transition:background .16s ease}
.surpria-header__menu-toggle:hover,.surpria-header__menu-toggle[aria-expanded="true"]{background:rgba(21,21,21,.055)}
.surpria-header__menu-toggle span{display:block;width:20px;height:2px;margin:4px auto;border-radius:3px;background:currentColor;transform-origin:center;transition:transform .2s ease,opacity .15s ease}
.surpria-header__menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.surpria-header__menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.surpria-header__menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.surpria-header__backdrop{position:fixed;inset:0;z-index:1;background:rgba(15,13,10,.28);opacity:1;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.surpria-header__panel{position:absolute;z-index:2;right:max(20px,calc((100vw - 1180px)/2));top:calc(100% + 10px);width:min(380px,calc(100vw - 32px));border:1px solid rgba(21,21,21,.08);border-radius:22px;background:#fffaf2;box-shadow:0 24px 65px rgba(32,24,14,.20);overflow:hidden}
.surpria-header__panel-inner{padding:14px}
.surpria-header__mobile-nav{display:grid;gap:5px}
.surpria-header__mobile-nav>a{padding:12px 13px;border-radius:13px;font-weight:850;transition:background .16s ease,transform .16s ease}
.surpria-header__mobile-nav>a:hover{background:#fff}
.surpria-header__panel-user{display:flex;align-items:center;gap:12px;padding:9px 8px 15px;margin-bottom:6px;border-bottom:1px solid rgba(21,21,21,.07)}
.surpria-header__panel-avatar{width:44px;height:44px;flex:0 0 44px;font-size:.95rem}
.surpria-header__panel-user-copy{display:grid;min-width:0;line-height:1.15}
.surpria-header__panel-user-copy strong,.surpria-header__panel-user-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.surpria-header__panel-user-copy strong{font-size:.91rem}.surpria-header__panel-user-copy span{margin-top:4px;color:var(--text-soft,#68635c);font-size:.73rem}
.surpria-header__panel-label{padding:7px 9px 5px;color:#8a837a;font-size:.67rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.surpria-header__nav-row{display:grid!important;grid-template-columns:34px 1fr 20px;align-items:center;gap:9px;min-height:50px;padding:7px 9px!important;color:#2b2824}
.surpria-header__nav-row.active{background:rgba(244,165,28,.11)!important;color:#171512}
.surpria-header__nav-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(21,21,21,.055);font-size:1.08rem}
.surpria-header__nav-row.active .surpria-header__nav-icon{background:rgba(244,165,28,.18)}
.surpria-header__nav-arrow{justify-self:end;color:#9b948b;font-size:1.25rem;font-weight:500}
.surpria-header__panel-separator{height:1px;margin:10px 0;background:rgba(21,21,21,.07)}
.surpria-header__language-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 2px}
.surpria-header__language-grid a,.surpria-header__languages a{display:grid;place-items:center;min-height:38px;border:1px solid rgba(21,21,21,.08);border-radius:11px;background:#fff;font-size:.75rem;font-weight:900;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.surpria-header__language-grid a:hover,.surpria-header__languages a:hover{transform:translateY(-1px)}
.surpria-header__language-grid a.active,.surpria-header__languages a.active{border-color:rgba(244,165,28,.55);background:rgba(244,165,28,.14);box-shadow:inset 0 0 0 1px rgba(244,165,28,.08)}
.surpria-header__logout{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:13px;padding:10px 13px;border-radius:12px;color:#9d3030;font-weight:850;background:rgba(179,51,51,.065);transition:background .16s ease}
.surpria-header__logout:hover{background:rgba(179,51,51,.10)}
.surpria-header__back{display:inline-flex;align-items:center;gap:8px;padding:9px 11px;border-radius:12px;color:var(--text-soft,#68635c);font-size:.84rem;font-weight:850}
.surpria-header__back:hover{background:#fff;color:var(--text,#151515)}
.surpria-header--editor .surpria-header__inner,.surpria-header--minimal .surpria-header__inner{min-height:68px}
.surpria-header--editor .surpria-header__brand,.surpria-header--minimal .surpria-header__brand{font-size:1.25rem}
.surpria-header--auth{position:relative}.surpria-header--auth .surpria-header__inner{min-height:72px}
.surpria-header__languages{display:flex;align-items:center;gap:5px}.surpria-header__languages a{min-width:36px;min-height:34px;padding:0 7px}
.surpria-header__lang-button--auth{display:none}
.surpria-header__prompt{color:var(--text-soft,#68635c);font-size:.85rem;font-weight:700}
body.surpria-menu-open{overflow:hidden}

@media(max-width:900px){
    .surpria-header__nav,.surpria-header__create>span:last-child,.surpria-header__user-copy,.surpria-header__chevron{display:none}
    .surpria-header--public .surpria-header__public-login{display:none}
    .surpria-header--creator .surpria-header__user-wrap,.surpria-header--editor .surpria-header__user-wrap,.surpria-header--minimal .surpria-header__user-wrap{display:none}
    .surpria-header__actions{gap:7px}
    .surpria-header__create{width:42px;padding:0;justify-content:center}
    .surpria-header__menu-toggle{display:block}
    .surpria-header__user{padding:2px}.surpria-header__avatar{width:39px;height:39px}
    .surpria-header__back span:last-child{display:none}.surpria-header__back{padding:9px}
    .surpria-header__languages--desktop,.surpria-header__prompt{display:none}
    .surpria-header__lang-button--auth{display:flex}
    .surpria-header__panel{position:fixed;left:12px;right:12px;top:74px;width:auto;max-height:calc(100dvh - 88px);overflow:auto;border-radius:20px}
    .surpria-header__panel-inner{padding:12px}
}

@media(max-width:520px){
    .surpria-header__inner{min-height:64px;gap:8px}
    .surpria-header__start,.surpria-header__actions{gap:6px}
    .surpria-header__brand .surpria-brand-logo{width:64px;height:52px}
    .surpria-header__lang-button{min-width:42px;padding:0 8px}.surpria-header__lang-button strong{display:none}
    .surpria-header--auth .btn{min-height:40px;padding:0 14px;font-size:.82rem}
    .surpria-header--public .surpria-header__public-cta{min-height:40px;padding:0 13px;font-size:.78rem}
    .surpria-header__panel{top:68px;left:8px;right:8px;max-height:calc(100dvh - 78px);border-radius:18px}
    .surpria-header__panel-user{padding-top:7px}
    .surpria-header__language-grid a{min-height:42px}
}

@media(prefers-reduced-motion:reduce){
    .surpria-header *, .surpria-header *::before, .surpria-header *::after{transition:none!important;scroll-behavior:auto!important}
}

.surpria-header__logout-form{margin:0}.surpria-header__logout{width:100%;border:0;font:inherit;cursor:pointer}

/* Language selector is independent from the hamburger navigation. */
.surpria-header{position:relative}
.surpria-header__language-popover{position:absolute;z-index:120;top:calc(100% - 4px);right:max(18px,calc((100vw - 1180px)/2));width:min(260px,calc(100vw - 28px));padding:14px;border:1px solid rgba(21,21,21,.09);border-radius:16px;background:#fff;box-shadow:0 18px 50px rgba(21,21,21,.14)}
.surpria-header__language-popover-title{margin:0 0 9px;font-size:.74rem;font-weight:900;color:#6d6d6d;text-transform:uppercase;letter-spacing:.06em}
.surpria-header__language-popover-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.surpria-header__language-popover-grid a{display:grid;place-items:center;min-height:40px;border:1px solid rgba(21,21,21,.08);border-radius:11px;background:#fff;font-size:.78rem;font-weight:900}
.surpria-header__language-popover-grid a.active{border-color:rgba(244,165,28,.55);background:rgba(244,165,28,.14)}
@media(max-width:900px){.surpria-header__language-popover{top:calc(100% - 2px);right:14px;width:min(250px,calc(100vw - 28px))}}
