/* Class Zaban private hero harmony V96 — 2026-10-30.
   Preserve text, photos, original interaction and React DOM.
   Scope is the backend-validated owner preview on practice/translation only. */
html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero.learning-photo-panel,
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero.tool-hero--translation.learning-photo-panel {
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  width:100%!important;
  min-height:194px!important;
  padding:clamp(20px,2.4vw,33px)!important;
  border:1px solid #2b3b71!important;
  border-radius:19px!important;
  box-shadow:0 9px 24px rgba(21,27,69,.14)!important;
  background:#151b45!important;
  color:#fff!important;
  box-sizing:border-box!important;
}
html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero.learning-photo-panel > .learning-photo-backdrop,
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation.learning-photo-panel > .learning-photo-backdrop {
  opacity:.55!important;
  filter:brightness(.72) saturate(.68) contrast(1.03)!important;
  object-fit:cover!important;
  object-position:center 43%!important;
  pointer-events:none!important;
}
html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero.learning-photo-panel::before,
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation.learning-photo-panel::before {
  content:""!important;
  position:absolute!important;
  inset:0!important;
  display:block!important;
  z-index:-1!important;
  border-radius:inherit!important;
  background:linear-gradient(270deg,
    rgba(14,23,56,.98) 0%,
    rgba(22,34,75,.94) 44%,
    rgba(25,38,86,.79) 72%,
    rgba(30,42,93,.71) 100%)!important;
  pointer-events:none!important;
}
html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero.learning-photo-panel::after,
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation.learning-photo-panel::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  bottom:0!important;
  right:0!important;
  width:43%!important;
  height:3px!important;
  z-index:4!important;
  background:linear-gradient(270deg,#6274ff,#b0c1ff,transparent)!important;
  border:0!important;
  pointer-events:none!important;
}
html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero .tool-hero-copy,
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation .tool-hero-copy {
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
}
html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero .tool-hero-copy h2,
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation .tool-hero-copy h2 {
  font-size:clamp(21px,2vw,28px)!important;
  font-weight:900!important;
  line-height:1.65!important;
  color:#fff!important;
  margin:8px 0 9px!important;
  text-shadow:0 3px 14px rgba(8,14,41,.33)!important;
}
html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero .tool-hero-copy p,
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation .tool-hero-copy p {
  color:#e8edff!important;
  font-size:12px!important;
  line-height:1.95!important;
}
html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero .tool-hero-kicker,
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation .tool-hero-kicker {
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  width:fit-content!important;
  padding:6px 12px!important;
  border:1px solid rgba(225,235,255,.3)!important;
  border-radius:10px!important;
  background:rgba(228,238,255,.09)!important;
  color:#d9e4ff!important;
  font-size:11px!important;
}
html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero .tool-hero-badges,
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation .tool-hero-badges {
  z-index:2!important;
  position:relative!important;
  gap:7px!important;
}
html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero .tool-hero-badges > span,
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation .tool-hero-badges > span {
  border:1px solid rgba(214,228,255,.28)!important;
  border-radius:11px!important;
  background:rgba(214,226,255,.1)!important;
  color:#f5f8ff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08)!important;
  backdrop-filter:none!important;
}
/* Translation: book-photo hero becomes the first card; the current
   heading becomes secondary, without DOM changes or form reordering. */
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page {
  display:flex!important;
  flex-direction:column!important;
}
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page > .tool-hero--translation {
  order:-2!important;
}
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page > .page-header {
  order:-1!important;
  min-height:118px!important;
  margin:0!important;
  padding:17px 26px!important;
  border-radius:17px!important;
  background:linear-gradient(115deg,#f4f7ff,#e9eefc)!important;
  border:1px solid #d0daf0!important;
  box-shadow:0 5px 14px rgba(21,27,69,.06)!important;
}
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page > .page-header::before,
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page > .page-header::after {
  display:none!important;
  content:none!important;
}
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page > .page-header .page-eyebrow {
  background:#e4eaff!important;
  color:#343f87!important;
  border:1px solid #d4dffb!important;
}
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page > .page-header h1 {
  color:#151b45!important;
  text-shadow:none!important;
  font-size:clamp(19px,2vw,24px)!important;
}
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page > .page-header p {
  color:#506183!important;
  text-shadow:none!important;
  font-size:11px!important;
  line-height:1.8!important;
}
html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page > .page-header > div:first-child {
  max-width:100%!important;
}
@media(max-width:700px){
  html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero.learning-photo-panel,
  html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation.learning-photo-panel {
    min-height:183px!important;
    padding:19px!important;
    border-radius:16px!important;
  }
  html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page > .page-header {
    min-height:100px!important;
    padding:13px 16px!important;
  }
  html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero .tool-hero-badges,
  html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation .tool-hero-badges {
    flex-wrap:wrap!important;
  }
}

/* Compact-width hero: keep title and informational badges readable. */
@media(max-width:700px){
 html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero.learning-photo-panel,
 html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero.tool-hero--translation.learning-photo-panel {
   display:flex!important;
   flex-direction:column!important;
   align-items:stretch!important;
   justify-content:center!important;
   gap:12px!important;
 }
 html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero .tool-hero-copy,
 html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation .tool-hero-copy {
   max-width:100%!important;
   width:100%!important;
 }
 html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero .tool-hero-badges,
 html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation .tool-hero-badges {
   display:flex!important;
   flex-direction:row!important;
   justify-content:flex-start!important;
   align-items:center!important;
   flex-wrap:wrap!important;
 }
 html.cz-private-practice-preview .app-shell--student .student-tool-page .tool-hero.phase4-hero .tool-hero-badges>span,
 html.cz-private-translation-hero-v95 .app-shell--student .student-tool-page.translation-page .tool-hero--translation .tool-hero-badges>span {
   min-width:0!important;white-space:normal!important;
   font-size:10px!important;padding:6px 8px!important;
 }
}