/* Zavék mobile cinema layout. Photography, not decorative generated artwork. */
:root{--accent:#ffffff;--cine-pad:clamp(24px,4.2vw,60px)}
html{background:#080808;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#080808;color:#f8f8f8;font-family:Inter,'Helvetica Neue',Arial,sans-serif;-webkit-tap-highlight-color:transparent}
#app{min-height:100svh}.page:has(.cj-home){background:#080808}
button{user-select:none;-webkit-user-select:none}
.topbar{display:flex;justify-content:flex-start;position:absolute;height:78px;min-height:78px;padding:0 var(--cine-pad);gap:18px}
.brand-lockup{gap:0}.menu-btn{display:none}.topbar-logo{font-family:Inter,Arial,sans-serif;font-weight:900;font-size:26px;letter-spacing:-.075em;padding:8px 0;text-shadow:none}.topbar-logo span{display:none}
.desktop-header-links{position:static;left:auto;top:auto;transform:none;background:transparent;box-shadow:none;border:0;border-radius:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;gap:2px;margin-left:27px}
.header-route{color:#ffffffa8;padding:0 13px;font-size:14px;font-weight:600;height:38px;line-height:38px}
.header-route.selected{background:transparent;color:#fff;box-shadow:none}.header-route:hover:not(.selected){background:#ffffff10}
.nav-separator{display:none}.nav-icon-action{width:40px}.top-right{margin-left:auto}
.mobile-search{display:none!important}
.cj-hero{height:85svh;min-height:645px;max-height:940px;background:#0a0a0a}
.cj-hero-photo{background-size:cover!important;filter:saturate(.72) brightness(.74);transform:scale(1);opacity:1;animation:photoReveal .68s ease both}
.cj-hero.hero-book .cj-hero-photo{background-image:url('assets/hero-course.webp')!important;background-position:67% 39%!important}
.cj-hero.hero-library .cj-hero-photo{background-image:url('assets/hero-writing.webp')!important;background-position:62% 48%!important}
.cj-hero.hero-type .cj-hero-photo{background-image:url('assets/hero-translate.webp')!important;background-position:57% 50%!important}
.cj-hero.hero-study .cj-hero-photo{background-image:url('assets/hero-match.webp')!important;background-position:62% 46%!important}
.cj-hero:hover .cj-hero-photo{transform:scale(1.025)}
.cj-hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.58) 34%,transparent 78%),linear-gradient(0deg,#080808 0%,transparent 42%),linear-gradient(180deg,#0006,transparent 20%)}
.cj-hero-content{left:var(--cine-pad);top:50%;transform:translateY(-40%);max-width:700px;animation:heroReveal .5s ease both}
.cj-hero-content h1{font:900 clamp(69px,8vw,130px)/.96 Inter,'Arial Black',sans-serif;letter-spacing:-.09em;margin:0 0 21px;max-width:100%;text-shadow:0 3px 32px #0008}
.cj-meta{font-size:14px;letter-spacing:0;color:#fff;font-weight:700;gap:12px;margin-bottom:17px}
.cj-meta i{width:4px;height:4px}
.cj-hero-content p{font-size:17px;line-height:1.5;color:#eee;margin-bottom:27px;max-width:470px}
.cj-actions button{height:48px;transition:background .19s,transform .19s}
.cj-play{background:#fff;color:#111;border-radius:999px;font-size:16px;padding:0 27px;font-weight:800}
.cj-play:hover{background:#eee}.cj-play svg{width:19px;height:19px}
.cj-outline{background:#2229;border:1px solid #fff5;color:#fff;width:48px;backdrop-filter:blur(12px)}.cj-outline:hover{background:#fff3}
.cj-slides{bottom:19%;right:var(--cine-pad);gap:6px}.cj-slides button{background:#ffffff76;height:7px;width:7px}.cj-slides button.on{background:#fff;width:30px}
.cj-hero-bottom{height:160px;background:linear-gradient(transparent,#080808)}
.cj-feed{margin-top:-41px;z-index:8;padding:0 var(--cine-pad)}
.cj-section{margin-bottom:39px}.cj-shelf-heading{margin-bottom:15px}.cj-shelf-heading h2{font-size:21px;letter-spacing:-.02em;font-weight:700}.cj-shelf-heading>button{font-size:13px;font-weight:600;color:#bbb}
.cj-shelf{gap:15px;padding-bottom:14px;scroll-snap-type:x proximity;overscroll-behavior-inline:contain}
.cj-poster{flex:0 0 clamp(157px,15vw,213px);height:auto;display:block;align-self:start;min-height:0}
.cj-poster-image{width:100%;aspect-ratio:2/3;height:auto;border-radius:11px;box-shadow:0 3px 16px #0007;background:#1b1b1b}
.cj-poster-image:before{background-position:center;background-image:var(--card-img);filter:brightness(.90) saturate(.86)}
.cj-poster-image:after{display:none}
.cj-poster:hover .cj-poster-image{transform:scale(1.035)}
.cj-poster-caption{display:flex;flex-direction:column;gap:4px;text-align:left;padding:11px 2px 1px}
.cj-poster-caption strong{font-size:14px;color:#f0f0f0;font-weight:700;line-height:1.35;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cj-poster-caption span{font-size:12px;color:#999;font-weight:500}
.cj-poster-go{box-shadow:0 2px 14px #0007}
.cj-providers{margin-bottom:40px}.cj-provider-list{gap:9px;padding-bottom:8px}
.cj-provider-list button{font-size:13px;font-weight:700;padding:14px 20px;border-radius:9px;background:#181818;border:1px solid #272727}
.cj-provider-list button:hover{background:#252525;border-color:#444}
.cj-phrase{flex:0 0 clamp(210px,20vw,255px);height:154px;border-radius:10px;background:#161616;padding:18px;border:1px solid #242424}
.cj-phrase strong{font-size:23px}.cj-end-row{margin-bottom:50px}
.cj-progress-outer div{background:#ddd}
/* Interior screens: media-player style rather than a dashboard */
.page:not(:has(.cj-home)){padding-top:110px}
.page-title h1,.translate-head h1{font-family:Inter,Arial,sans-serif;font-size:clamp(35px,4.4vw,54px);font-weight:800;letter-spacing:-.06em}
.title-period{color:#aaa}.btn.primary{background:#fff!important;color:#0b0b0b!important;border-color:#fff!important}.btn.primary:hover{background:#ddd!important}.chip.active{border-color:#ddd}
.match-card.selected{background:#303030;border-color:#fff}.match-card.matched{background:#183025;border-color:#386348}
.lesson-card:hover,.match-card:hover:not(:disabled){border-color:#bbb}
.footer{background:#080808;border-top-color:#242424}
/* Mobile application shell */
@media(max-width:900px){
:root{--cine-pad:18px}
.topbar{height:66px;min-height:66px;padding:0 18px;gap:12px}.menu-btn{display:grid!important;place-items:center;margin:0 0 0 -5px;padding:3px;width:31px;height:40px}
.topbar-logo{font-size:23px}.desktop-header-links{display:none}.top-right{margin-left:auto}
.topbar .mobile-search{display:grid!important;place-items:center;width:37px;height:37px;border:0;background:#0005;border-radius:50%;color:#fff;backdrop-filter:blur(8px)}.mobile-search svg{width:19px;height:19px}
.cj-hero{height:76svh;min-height:560px;max-height:760px}
.cj-hero-photo{background-position:53% 44%!important;opacity:.9}
.cj-hero.hero-book .cj-hero-photo{background-position:64% 45%!important}
.cj-hero.hero-type .cj-hero-photo{background-position:68% 44%!important}
.cj-hero-shade{background:linear-gradient(0deg,#080808 0%,#08080855 30%,#0002 65%,#0008 100%),linear-gradient(90deg,#0009,transparent 88%)}
.cj-hero-content{top:auto;bottom:94px;left:20px;right:20px;transform:none;max-width:400px;animation:mobileHeroReveal .35s ease both}
.cj-hero-content h1,.cj-hero.hero-type .cj-hero-content h1{font-size:clamp(47px,11.5vw,69px);margin:0 0 16px;letter-spacing:-.084em;line-height:1.01}
.cj-hero-content p{font-size:14px;line-height:1.55;max-width:320px;margin-bottom:22px}
.cj-meta{font-size:12px;font-weight:700;gap:10px;margin-bottom:14px}
.cj-meta i{height:3px;width:3px}
.cj-actions{gap:10px}.cj-actions button{height:45px}.cj-play{font-size:14px;padding:0 23px}.cj-outline{width:45px}
.cj-slides{bottom:73px;right:20px}.cj-feed{margin-top:-25px;padding:0 18px}
.cj-shelf-heading h2{font-size:19px}.cj-shelf-heading>button{font-size:12px}
.cj-poster{flex:0 0 clamp(132px,38vw,165px)}.cj-poster-image{border-radius:9px}.cj-poster-caption{padding-top:9px}.cj-poster-caption strong{font-size:13px}.cj-poster-caption span{font-size:11px}
.cj-section,.cj-providers{margin-bottom:31px}.cj-provider-list button{padding:13px 17px;font-size:12px}
.cj-phrase{flex:0 0 74vw;max-width:290px;height:142px}
.cj-end-row{padding-bottom:8px}.cj-end-row h2{font-size:18px}
.page:not(:has(.cj-home)){padding:89px 17px calc(100px + env(safe-area-inset-bottom));max-width:100%!important}
.page:has(.cj-home){padding:0 0 30px}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(66px + env(safe-area-inset-bottom));padding:0 5px max(env(safe-area-inset-bottom),4px);display:flex;justify-content:space-around;align-items:center;background:rgba(12,12,12,.96);border-top:1px solid #ffffff15;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:90}
.bottom-nav button{display:flex;align-items:center;justify-content:center;flex-direction:column;height:57px;gap:6px;flex:1;min-width:0;background:none;border:0;color:#9c9c9c;font-size:10px;font-weight:600;letter-spacing:0}
.bottom-nav button.selected{color:#fff}.bottom-nav button.selected svg{stroke:#fff}.bottom-nav svg{width:23px;height:23px}
.footer{padding-bottom:92px!important}.top-streak{display:none!important}
.translate-columns{grid-template-columns:1fr}.translate-input-side{border-right:0;border-bottom:1px solid #333}.translate-input-side,.translate-output-side{min-height:180px}.translate-input-side textarea,.translation-output{min-height:140px;font-size:20px;padding:20px}
.translate-label-row{grid-template-columns:1fr 52px 1fr}.match-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.match-card{min-height:116px}
}
@media(max-width:360px){.cj-hero-content h1,.cj-hero.hero-type .cj-hero-content h1{font-size:43px}.cj-hero-content{bottom:89px}.cj-actions{gap:7px}.cj-play{padding:0 16px;font-size:13px}.cj-outline{width:42px}.topbar{padding:0 12px}.cj-feed{padding:0 14px}}
@media(min-width:901px){.bottom-nav{display:none!important}}
@keyframes photoReveal{from{opacity:.55}to{opacity:1}}
@keyframes heroReveal{from{opacity:.5;transform:translateY(calc(-40% + 12px))}to{opacity:1;transform:translateY(-40%)}}
@keyframes mobileHeroReveal{from{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cj-hero-photo,.cj-hero-content{animation:none!important;transition:none!important}.cj-shelf{scroll-behavior:auto}}
/* Install affordance: visible only when supported and not installed. */
.top-right #install-pwa:not([hidden]){display:inline-flex!important;align-items:center;justify-content:center;height:32px;padding:0 10px;margin-right:9px;background:#ffffff1c;border:1px solid #ffffff38;border-radius:999px;color:#fff;font:600 12px Inter,Arial,sans-serif;cursor:pointer}
.top-right #install-pwa:hover{background:#ffffff32}
@media(max-width:360px){.top-right #install-pwa:not([hidden]){font-size:11px;padding:0 8px;margin-right:4px}}

/* Standalone safe areas and thumb-friendly focus treatment. */
.pwa-install{padding:8px 12px;border:1px solid #ffffff55;border-radius:999px;background:#ffffff20;color:white;font:600 12px Inter,Arial,sans-serif;cursor:pointer}
.pwa-install[hidden]{display:none!important}
@media(max-width:900px){
.topbar{height:calc(66px + env(safe-area-inset-top));min-height:calc(66px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
.bottom-nav{transition:transform .22s ease}
body:has(textarea:focus) .bottom-nav,body:has(input:not([type=checkbox]):focus) .bottom-nav{transform:translateY(110%);pointer-events:none}
.pwa-install{font-size:11px;padding:7px 9px}
}
@media(prefers-reduced-motion:reduce){.bottom-nav{transition:none}}
/* Portrait lesson library, matching the site's content-browse pattern */
.course-collection{margin-top:37px}.course-collection .cj-shelf-heading{margin-bottom:17px}.course-unit-count{font-size:12px;color:#999}
.course-poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:25px 16px}
.course-poster{display:flex;flex-direction:column;align-items:stretch;text-align:left;border:0;background:transparent;color:#fff;padding:0;cursor:pointer;min-width:0}
.course-poster-photo{width:100%;aspect-ratio:2/3;background:#202020;display:block;position:relative;overflow:hidden;border-radius:10px;isolation:isolate;transition:transform .28s ease}
.course-poster-photo:before{content:'';position:absolute;inset:0;background-image:var(--card-img);background-size:cover;background-position:center;filter:brightness(.92) saturate(.85);transition:transform .35s ease}
.course-poster:hover .course-poster-photo:before{transform:scale(1.07)}.course-poster:hover .course-poster-photo{transform:translateY(-3px)}
.course-poster-number{position:absolute;top:12px;left:12px;z-index:2;background:#080808ac;border:1px solid #ffffff24;border-radius:5px;padding:5px 8px;font-weight:800;font-size:11px;backdrop-filter:blur(6px)}
.course-poster-check{position:absolute;bottom:13px;right:12px;z-index:2;background:#fff;color:#111;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-weight:900}
.course-poster strong{font-size:14px;font-weight:750;line-height:1.32;margin:11px 0 5px;letter-spacing:-.01em}
.course-poster-meta{font-size:12px;color:#9d9d9d;line-height:1.35}
@media(max-width:900px){.course-collection{margin-top:30px}.course-poster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:21px 12px}.course-poster strong{font-size:13px;margin:8px 0 5px}.course-poster-meta{font-size:11px}}
@media(min-width:1200px){.course-poster-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}