/* LIFZO V5 — mobile-first refinements and Font Awesome Free SVG icons */
.ico.fa-icon{fill:currentColor;stroke:none;stroke-width:0;width:19px;height:19px}
.ico.fa-icon.sm{width:15px;height:15px}
.ico.fa-icon.lg{width:25px;height:25px}
.ico.fa-icon.xl{width:33px;height:33px}
.fa-icon path{fill:currentColor;stroke:none}
.sound-toggle,.lesson-sound{transition:background .2s,border-color .2s,color .2s}
.sound-toggle[aria-pressed="false"],.lesson-sound[aria-pressed="false"]{color:var(--muted2);background:var(--panel2)}
.sound-toggle[aria-pressed="true"],.lesson-sound[aria-pressed="true"]{color:#bba7ff}
.lesson-score{display:flex;align-items:center;gap:9px;flex:none}
.lesson-score .score{white-space:nowrap}
.lesson-score .lesson-sound{width:41px;height:41px;padding:0;flex:none}
button,a,input,summary{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #c7b3ff;outline-offset:3px}
.choice.correct,.choice.correct.active{border:2px solid var(--green);background:rgba(36,199,147,.17);color:var(--text)}
.choice.wrong,.choice.wrong.active{border:2px solid var(--red);background:rgba(255,95,128,.14);color:var(--text)}
.choice[disabled]{opacity:1;cursor:default}
.choice.correct .choice-letter{background:var(--green);color:#072b22;border:0}
.answer-input:focus,.code-input:focus{outline:2px solid rgba(189,164,255,.35);outline-offset:2px}
.mobile-nav button .fa-icon{width:19px;height:19px}

@media(max-width:900px){
  :root{--mobile-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .shell,.content{min-width:0}
  .content{width:100%;padding-bottom:calc(var(--mobile-bottom) + 10px)}
  .topbar{min-width:0;gap:8px}
  .topbar .top-actions{gap:7px;flex:none}
  .topbar .stat-pill{min-width:0}
  .topbar .stat-pill b{white-space:nowrap}
  .topbar .circle-btn{min-width:40px;min-height:40px}
  .page-head h1{overflow-wrap:anywhere}
  .section-heading{align-items:center}
  .mobile-nav{padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px));min-height:68px;box-shadow:0 -12px 30px rgba(5,7,25,.23)}
  .mobile-nav button{min-height:51px;min-width:0;flex:1;max-width:none;justify-content:center;gap:6px;padding:7px 3px;font-size:11px;line-height:1.3}
  .mobile-nav button span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-nav button .fa-icon{width:20px;height:20px}
  .tabstrip{scroll-snap-type:x proximity;overscroll-behavior-inline:contain;padding-bottom:14px}
  .tabstrip .tab{scroll-snap-align:start;min-height:45px}
  .roadmap-node button,.btn,.choice,.audio-btn,.word-bank button,.order-result button{touch-action:manipulation}
  .premium-layout{grid-template-columns:1fr}
  .activation-panel,.premium-hero{min-width:0}
  body[data-route="lesson"] .mobile-nav{display:none}
  body[data-route="lesson"] .content{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  body[data-route="lesson"] .page-footer{display:none}
  .lesson-header .back{width:45px;height:45px;flex:none}
  .lesson-score .lesson-sound{min-width:43px;min-height:43px}
  .exercise-card{overflow:visible}
  .exercise-actions{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:15;padding:12px;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 13px 36px rgba(0,0,0,.25);margin-top:23px}
  .exercise-actions .btn{min-height:50px}
  .lesson-shell{width:100%;min-width:0}
}
@media(max-width:660px){
  body{font-size:14px}
  .content{padding-inline:14px}
  .topbar{height:66px}
  .topbar .brand.mini-logo{gap:7px}
  .topbar .mini-logo strong{font-size:20px}
  .topbar .mini-logo img{width:35px;height:35px}
  .topbar .stat-pill:not(.xp-stat){padding:0 8px;height:40px}
  .top-actions .circle-btn{width:40px;height:40px;min-width:40px}
  .topbar .pill-premium{display:none}
  .page-head h1{font-size:27px;line-height:1.5}
  .page-head p{font-size:12px;line-height:1.95}
  .hero{min-height:640px;padding:26px 21px 0}
  .hero h1{font-size:clamp(27px,8vw,34px);line-height:1.4}
  .hero p{font-size:12.5px;line-height:1.85}
  .hero-buttons .btn{min-height:49px;font-size:12px}
  .hero-micro{font-size:10px;line-height:1.7}
  .hero-visual{min-height:280px}
  .metric-card small{font-size:11px;white-space:normal;line-height:1.55}
  .panel-title{font-size:17px}
  .panel-sub,.desc{font-size:12.5px;line-height:1.85}
  .level-card h3{font-size:15px}
  .unit-card p,.unit-card .unit-meta{font-size:12px}
  .unit-card{min-height:110px}
  .unit-card h3{font-size:14px}
  .lesson-row{min-height:76px}
  .lesson-header{gap:9px;margin:3px 0 12px}
  .lesson-header .back{width:44px;height:44px}
  .lesson-header .step-label{font-size:11px;line-height:1.4}
  .lesson-header .score{font-size:11px}
  .lesson-score{gap:5px}
  .lesson-score .lesson-sound{width:42px;height:42px}
  .lesson-header .bar{height:10px}
  .exercise-card{padding:18px 15px 18px;min-height:unset;border-radius:24px}
  .exercise-top{margin-bottom:14px;gap:11px}
  .exercise-avatar{width:72px;height:72px;flex-shrink:0}
  .speech{font-size:12px;line-height:1.65;min-width:0}
  .exercise-card h2{font-size:19px;line-height:1.65}
  .exercise-phrase{font-size:19px;overflow-wrap:break-word}
  .choice-grid{gap:10px}
  .choice{min-height:63px;padding:13px 15px;font-size:13px;border-radius:14px;line-height:1.65}
  .choice .choice-letter{width:31px;height:31px;flex:none}
  .audio-btn{min-height:54px;font-size:13px}
  .word-bank button,.order-result button{min-height:46px;font-size:14px}
  .answer-input,.code-input{font-size:16px}
  .exercise-actions{flex-direction:column;align-items:stretch;gap:9px;padding:11px;margin-top:16px}
  .exercise-actions .btn{min-height:53px;width:100%;font-size:14px}
  .exercise-actions .hint{font-size:11px;line-height:1.4;text-align:center}
  .feedback p{font-size:12px;overflow-wrap:anywhere}
  .premium-layout{gap:14px}
  .premium-hero{padding:27px 18px}
  .premium-hero h1{font-size:clamp(27px,7vw,32px);line-height:1.5}
  .premium-hero p{font-size:12.5px}
  .premium-mini-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .premium-mini-stats div{padding:11px 7px;text-align:center;min-width:0}
  .premium-mini-stats b{font-size:12px;white-space:nowrap}
  .premium-mini-stats small{font-size:10px}
  .premium-cta-row{flex-direction:column;align-items:stretch}
  .premium-cta-row .btn{min-width:0;min-height:48px;flex:none}
  .activation-panel{padding:19px 16px}
  .membership-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .membership-steps div{padding:10px 7px;align-items:center;text-align:center;gap:6px;min-width:0}
  .membership-steps span{width:29px;height:29px}
  .membership-steps b{font-size:11px}
  .membership-steps small{font-size:10px;line-height:1.5}
  .activation-actions{flex-direction:column}
  .activation-actions .btn{min-height:50px}
  .code-input{width:100%;letter-spacing:1px;padding:0 9px}
  .premium-support-grid{grid-template-columns:1fr}
  .scenic-roadmap{border-radius:25px;padding-inline:12px;overflow:hidden}
  .scenic-roadmap .node-caption{background:rgba(15,22,32,.85);backdrop-filter:blur(9px)}
  .node-caption b{font-size:12px}
  .roadmap-node:nth-child(4n+1){--offset:-54px}
  .roadmap-node:nth-child(4n+2){--offset:25px}
  .roadmap-node:nth-child(4n+3){--offset:54px}
  .roadmap-node:nth-child(4n){--offset:-20px}
  .node-button{min-width:74px;min-height:74px}
  .page-footer{line-height:1.8}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px));font-size:12px;text-align:center}
  body[data-route="lesson"] .toast{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:390px){
  .content{padding-inline:11px}
  .topbar .mini-logo strong{font-size:18px}
  .topbar .top-actions{gap:5px}
  .topbar .stat-pill:not(.xp-stat){height:36px;min-width:43px}
  .top-actions .circle-btn{width:36px;height:36px;min-width:36px;min-height:36px}
  .hero{padding-inline:17px;min-height:650px}
  .hero-buttons{gap:8px}
  .hero-buttons .btn{padding:10px 13px}
  .lesson-header .back{width:39px;height:39px}
  .lesson-score .lesson-sound{width:39px;height:39px;min-width:39px;min-height:39px}
  .lesson-header .score{font-size:10px}
  .scenic-roadmap .node-caption{max-width:145px}
  .roadmap-node:nth-child(4n+1){--offset:-48px}
  .roadmap-node:nth-child(4n+3){--offset:48px}
  .mobile-nav{padding-inline:4px;gap:0}
  .mobile-nav button{font-size:10px;padding:7px 1px}
}
@media(max-width:345px){
 .mobile-nav button{font-size:9px}
 .topbar .stat-pill:not(.xp-stat){display:none}
 .premium-mini-stats b{font-size:11px}
 .lesson-header .step-label{font-size:10px}
 .scenic-roadmap .node-caption{max-width:126px}
}
@media(prefers-reduced-motion:reduce){
 .exercise-actions,.mobile-nav{transition:none}
 .scenic-roadmap .forest-haze,.scenic-roadmap .forest-spark{animation:none!important}
}
/* Font Awesome coverage for secondary visual UI elements */
.stat-pill span,.lesson-score .score,.hero-micro i,.premium-features i{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.stat-pill span .fa-icon{width:16px;height:16px}
.lesson-score .score .fa-icon{width:13px;height:13px;color:#faca66}
.level-icon .fa-icon{width:28px;height:28px;color:#af95ff}
.unit-detail-head .unit-badge .fa-icon{width:29px;height:29px}
.lesson-pict .fa-icon{width:27px;height:27px}
.mini-unit i{display:grid;place-items:center}
.mini-unit i .fa-icon{width:24px;height:24px}
.premium-crown .fa-icon{width:65px;height:65px;color:#ffcf67;filter:drop-shadow(0 8px 18px rgba(255,174,67,.28))}
.aside-promo .crown .fa-icon{width:32px;height:32px;color:#ffcf67}
.finish-trophy .fa-icon{width:70px;height:70px;color:#ffcf67}
.achievement-large-icon .fa-icon{width:70px;height:70px;color:#ffcf67}
.badge-card .emoji .fa-icon{width:32px;height:32px;color:#c2adff;margin-inline:auto}
.hero-micro i .fa-icon{width:12px;height:12px;color:#64e6bf}
.premium-features i .fa-icon{color:#6de5be;width:15px;height:15px}
.fb-icon .fa-icon{width:18px;height:18px}
@media(max-width:900px){body[data-route="lesson"] .topbar .sound-toggle{display:none}}