/* =====================================================
   Find.tj — Stage 8.2.1.4 Premium Header Layer
   Additive override only. Production style.css is untouched.
   ===================================================== */

html,body{max-width:100%;overflow-x:hidden}
.app-shell,.desktop-layout,.main-column,.app-header,.app-nav,.header-profile-wrap{min-width:0}
.age-gate[hidden]{display:none!important}

/* Preserve the Explorer route-button fix from 8.2.1.3. */
body[data-theme="explorer"] .path-item{min-width:0}
body[data-theme="explorer"] .path-body{min-width:0;padding-right:42px}
body[data-theme="explorer"] .path-title,
body[data-theme="explorer"] .path-reason{max-width:100%!important;overflow-wrap:anywhere}
body[data-theme="explorer"] .path-action{
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
  padding:0!important;font-size:22px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important
}

@media (min-width:761px){
  .app-header{
    --ph-bg:rgba(255,255,255,.82);
    --ph-surface:rgba(255,255,255,.64);
    --ph-surface-strong:rgba(255,255,255,.9);
    --ph-line:rgba(116,145,187,.22);
    --ph-ink:#122b54;
    --ph-muted:#7086a7;
    --ph-accent:#2477ff;
    --ph-accent2:#24c8ef;
    position:sticky!important;top:10px;z-index:650;
    width:100%;min-height:76px;height:auto!important;
    grid-template-columns:minmax(186px,auto) minmax(0,1fr) auto auto!important;
    align-items:center;gap:10px!important;
    padding:10px!important;margin:10px 0 16px!important;
    border:1px solid var(--ph-line)!important;border-radius:26px!important;
    background:
      linear-gradient(135deg,rgba(255,255,255,.15),transparent 44%),
      var(--ph-bg)!important;
    box-shadow:0 14px 42px rgba(17,46,93,.10),inset 0 1px 0 rgba(255,255,255,.65)!important;
    backdrop-filter:blur(22px) saturate(145%);
    -webkit-backdrop-filter:blur(22px) saturate(145%);
    isolation:isolate;
  }
  .app-header::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:linear-gradient(90deg,rgba(36,200,239,.08),transparent 26%,transparent 72%,rgba(88,91,255,.08));
  }

  body[data-theme="explorer"] .app-header,
  body[data-theme="academy"] .app-header{
    --ph-bg:rgba(5,24,54,.88);
    --ph-surface:rgba(20,52,95,.58);
    --ph-surface-strong:rgba(17,57,108,.84);
    --ph-line:rgba(91,169,255,.24);
    --ph-ink:#f6fbff;
    --ph-muted:#9cb9db;
    --ph-accent:#3f79ff;
    --ph-accent2:#23d5f3;
    box-shadow:0 18px 48px rgba(0,10,34,.26),inset 0 1px 0 rgba(255,255,255,.07)!important;
  }
  body[data-theme="advanced"] .app-header{
    --ph-bg:rgba(250,252,255,.9);
    --ph-surface:rgba(238,244,255,.78);
    --ph-surface-strong:rgba(255,255,255,.94);
    --ph-line:rgba(100,124,196,.22);
    --ph-ink:#243d70;
    --ph-muted:#7182aa;
    --ph-accent:#5968ff;
    --ph-accent2:#b35cff;
  }

  .brand{
    height:56px;min-width:0;padding:5px 10px 5px 5px!important;gap:10px!important;
    border:1px solid transparent!important;border-radius:19px!important;
    transition:background .2s ease,border-color .2s ease,transform .2s ease;
  }
  .brand:hover{background:var(--ph-surface)!important;border-color:var(--ph-line)!important;transform:translateY(-1px)}
  .brand-symbol{
    width:46px!important;height:46px!important;flex:0 0 46px;border-radius:15px!important;
    background:linear-gradient(145deg,var(--ph-accent),var(--ph-accent2))!important;
    box-shadow:0 10px 24px color-mix(in srgb,var(--ph-accent) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.28)!important;
  }
  .brand-copy{min-width:0!important}
  .brand-copy strong{color:var(--ph-ink)!important;font-size:26px!important;letter-spacing:-1.1px!important}
  .brand-copy strong span{color:var(--ph-accent2)!important}
  .brand-copy small{color:var(--ph-muted)!important;letter-spacing:.55px!important;opacity:.92}

  .app-nav{
    justify-self:center;justify-content:center!important;min-width:0;max-width:100%;
    padding:5px!important;gap:2px!important;border:1px solid var(--ph-line);border-radius:18px;
    background:var(--ph-surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.11);
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain;
  }
  .app-nav::-webkit-scrollbar{display:none}
  .app-nav__link{
    position:relative;flex:0 0 auto;min-height:42px!important;padding:0 13px!important;
    border:1px solid transparent!important;border-radius:13px!important;background:transparent!important;
    color:var(--ph-muted)!important;font-size:13.5px!important;font-weight:900!important;white-space:nowrap;
    box-shadow:none!important;transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease!important;
  }
  .app-nav__link:hover{
    color:var(--ph-ink)!important;background:color-mix(in srgb,var(--ph-surface-strong) 72%,transparent)!important;
    border-color:var(--ph-line)!important;transform:translateY(-1px)
  }
  .app-nav__link.is-active{
    color:#fff!important;
    background:linear-gradient(135deg,var(--ph-accent),color-mix(in srgb,var(--ph-accent2) 72%,var(--ph-accent)))!important;
    border-color:rgba(255,255,255,.16)!important;
    box-shadow:0 8px 20px color-mix(in srgb,var(--ph-accent) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.25)!important;
    transform:none!important;
  }
  .app-nav__link.is-active::after{
    content:"";position:absolute;left:28%;right:28%;bottom:4px;height:2px;border-radius:3px;background:rgba(255,255,255,.8)
  }

  .header-actions{
    flex-shrink:0;display:flex!important;align-items:center;gap:4px!important;padding:4px!important;
    border:1px solid var(--ph-line);border-radius:17px;background:var(--ph-surface);
  }
  .header-actions .icon-btn,.header-actions .lang-select{
    height:44px!important;border:1px solid transparent!important;border-radius:13px!important;
    background:transparent!important;color:var(--ph-ink)!important;box-shadow:none!important;
    transition:background .18s ease,border-color .18s ease,transform .18s ease;
  }
  .header-actions .icon-btn{width:44px!important}
  .header-actions .lang-select{min-width:66px;padding:0 10px!important;cursor:pointer}
  .header-actions .icon-btn:hover,.header-actions .lang-select:hover{
    background:var(--ph-surface-strong)!important;border-color:var(--ph-line)!important;transform:translateY(-1px)
  }

  .header-profile-wrap{flex-shrink:0;position:relative}
  .header-profile{
    min-height:54px!important;max-width:210px;padding:5px 9px 5px 5px!important;gap:9px!important;
    border:1px solid var(--ph-line)!important;border-radius:18px!important;
    background:var(--ph-surface)!important;color:var(--ph-ink)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.11)!important;
    transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
  }
  .header-profile:hover,.header-profile[aria-expanded="true"]{
    background:var(--ph-surface-strong)!important;border-color:color-mix(in srgb,var(--ph-accent) 42%,var(--ph-line))!important;
    transform:translateY(-1px);box-shadow:0 10px 28px color-mix(in srgb,var(--ph-accent) 10%,transparent)!important;
  }
  .header-profile__avatar{
    position:relative;width:42px!important;height:42px!important;flex:0 0 42px!important;
    background:linear-gradient(145deg,var(--ph-accent),var(--ph-accent2))!important;
    box-shadow:0 7px 18px color-mix(in srgb,var(--ph-accent) 24%,transparent)!important;
  }
  body[data-authenticated="1"] .header-profile__avatar::after{
    content:"";position:absolute;right:-1px;bottom:1px;width:9px;height:9px;border-radius:50%;
    background:#38d88a;border:2px solid color-mix(in srgb,var(--ph-bg) 92%,#fff)
  }
  .header-profile__copy{min-width:0!important;max-width:128px}
  .header-profile__copy strong{max-width:128px!important;color:var(--ph-ink)!important;font-size:13.5px!important;font-weight:900!important}
  .header-profile__copy small{color:var(--ph-muted)!important;font-size:9.5px!important}
  .header-profile__chevron{color:var(--ph-muted)!important;font-size:15px!important;transition:transform .18s ease}
  .header-profile[aria-expanded="true"] .header-profile__chevron{transform:rotate(180deg)}

  .header-profile-menu{
    top:calc(100% + 9px)!important;width:224px!important;padding:8px!important;border-radius:18px!important;
    border:1px solid var(--ph-line)!important;background:color-mix(in srgb,var(--ph-bg) 94%,#fff 6%)!important;
    box-shadow:0 22px 55px rgba(0,22,58,.24)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)
  }
  .header-profile-menu button{border-radius:12px!important;color:var(--ph-ink)!important}
  .header-profile-menu button:hover{background:var(--ph-surface)!important}

  @media (max-width:1450px){
    .app-header{grid-template-columns:minmax(160px,auto) minmax(0,1fr) auto auto!important;gap:8px!important}
    .brand-copy small{display:none!important}
    .app-nav__link{padding-left:11px!important;padding-right:11px!important;font-size:13px!important}
    .header-profile__copy small{display:none!important}
  }
  @media (max-width:1260px){
    .app-header{grid-template-columns:auto minmax(0,1fr) auto auto!important}
    .brand{padding-right:6px!important}
    .brand-copy{display:none!important}
    .app-nav__link{padding-left:9px!important;padding-right:9px!important;font-size:12.5px!important}
    .header-actions .icon-btn{display:none!important}
  }
  @media (max-width:1080px){
    .header-profile__copy{display:none!important}
    .header-profile{padding-right:6px!important;max-width:56px}
    .header-profile__chevron{display:none!important}
    .header-actions{padding:3px!important}
    .header-actions .lang-select{min-width:58px!important;padding:0 7px!important}
    .app-nav__link{padding-left:7px!important;padding-right:7px!important}
  }
}

@media (prefers-reduced-motion:reduce){
  .app-header *{transition:none!important}
}


/* Stage 8.2.1.5 — authenticated age strip lock */
body[data-authenticated="1"] #ageTabs,
body[data-authenticated="1"] .age-gate#ageTabs,
#ageTabs.age-gate--locked {
  display:none !important;
}