:root{
  --platform-header-bar:76px;
  --platform-header-mobile:58px;
  --platform-header-gutter:clamp(20px,3.2vw,56px);
  --platform-frame-max:1280px;
  --platform-frame-gap:32px;
  --platform-frame-line:1px solid var(--black,#0a0a0a);
  --platform-frame-background:#deded8;
  --platform-frame-shadow:0 20px 64px rgba(0,0,0,.09);
}

body :is(.app,.app-shell) > .masthead{
  position:sticky!important;
  z-index:30!important;
  top:0!important;
  width:100%;
  height:calc(var(--platform-header-bar) + var(--safe-top,0px))!important;
  min-height:calc(var(--platform-header-bar) + var(--safe-top,0px));
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  justify-content:initial!important;
  padding:var(--safe-top,0px) var(--platform-header-gutter) 0!important;
  border-top:0!important;
  border-right:0!important;
  border-bottom:1px solid var(--black,#0a0a0a)!important;
  border-left:0!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:none!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

body :is(.app,.app-shell) > .masthead .header-back{
  grid-column:1;
  grid-row:1;
  justify-self:start;
}

body :is(.app,.app-shell) > .masthead .header-back[hidden]{display:none!important}

body :is(.app,.app-shell) > .masthead .logo{
  grid-column:2;
  grid-row:1;
  justify-self:center;
  align-self:center;
  display:inline-flex;
  align-items:center;
  width:auto;
  margin:0!important;
}

body :is(.app,.app-shell) > .masthead .logo :is(img,svg){
  display:block;
  width:104px!important;
  max-width:none;
  height:auto!important;
}

body :is(.app,.app-shell) > .masthead .head-links{
  grid-column:3;
  grid-row:1;
  justify-self:end;
  align-self:center;
  display:flex;
  align-items:center;
  gap:8px!important;
  height:auto;
  margin:0!important;
}

body :is(.app,.app-shell) > .masthead .head-button{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px!important;
  border:1px solid var(--black,#0a0a0a)!important;
  background:var(--white,#fff);
  color:var(--black,#0a0a0a);
  font-size:.78rem!important;
  line-height:1;
  text-decoration:none;
}

body :is(.app,.app-shell) > .masthead .head-button-primary{
  background:var(--black,#0a0a0a)!important;
  color:var(--white,#fff)!important;
}

body :is(.app,.app-shell) > .masthead .head-admin-button{
  margin-left:6px!important;
  border-color:var(--red,#d63d32)!important;
  background:var(--white,#fff)!important;
  color:var(--red,#d63d32)!important;
}

@media(max-width:700px){
  body :is(.app,.app-shell) > .masthead{
    height:calc(var(--platform-header-mobile) + var(--safe-top,0px))!important;
    min-height:calc(var(--platform-header-mobile) + var(--safe-top,0px));
    padding:var(--safe-top,0px) 12px 0!important;
  }
  body :is(.app,.app-shell) > .masthead .logo :is(img,svg){width:70px!important}
  body :is(.app,.app-shell) > .masthead .head-links{gap:6px!important}
  body :is(.app,.app-shell) > .masthead .head-button{
    min-height:36px;
    padding-inline:10px!important;
    font-size:.68rem!important;
  }
  body :is(.app,.app-shell) > .masthead .head-profile-link[aria-current="page"]{display:none!important}
  .page-lessons .app > .masthead .head-profile-link,
  .page-base .app > .masthead .head-profile-link,
  .page-orientirs .app > .masthead .head-profile-link{display:none!important}
  body :is(.app,.app-shell) > .masthead .head-admin-button{
    min-width:38px;
    margin-left:0!important;
    padding-inline:9px!important;
    font-size:0!important;
  }
  body :is(.app,.app-shell) > .masthead .head-admin-button::after{
    content:"CC";
    font-size:.68rem;
    letter-spacing:.04em;
  }
}

@media(min-width:1000px){
  body:is(.profile-page,.page-profile,.page-lessons,.page-base,.page-orientirs){
    padding:var(--platform-frame-gap)!important;
    background:var(--platform-frame-background)!important;
  }

  body:is(.profile-page,.page-profile,.page-lessons,.page-base,.page-orientirs) > :is(.app,.app-shell){
    width:100%!important;
    max-width:var(--platform-frame-max)!important;
    min-height:calc(100dvh - (var(--platform-frame-gap) * 2))!important;
    margin:0 auto!important;
    border:var(--platform-frame-line)!important;
    background:var(--white,#fff)!important;
    box-shadow:var(--platform-frame-shadow)!important;
  }

  body.detail-open:is(.page-base,.page-lessons) :is(.lesson-view,.viewer){
    border:0!important;
    box-shadow:none!important;
  }
}

@media(hover:hover) and (pointer:fine){
  body :is(.app,.app-shell) > .masthead .head-button:hover{background:var(--black,#0a0a0a);color:var(--white,#fff)}
  body :is(.app,.app-shell) > .masthead .head-button-primary:hover{border-color:var(--red,#d63d32)!important;background:var(--red,#d63d32)!important}
  body :is(.app,.app-shell) > .masthead .head-admin-button:hover{background:var(--red,#d63d32)!important;color:var(--white,#fff)!important}
}

@media(prefers-reduced-motion:reduce){
  body :is(.app,.app-shell) > .masthead *{transition:none!important}
}