:root{--bg:#f6f8fb;--panel:#ffffff;--border:#d0d7e2;--text:#212529;--muted:#495057;--pending:#788399;--current-bg:#e7f1ff;--ok:#146c43;--err:#b02a37;--sound-on:#0d6efd;--sound-muted:#6c757d;--typing-font-scale:1}*{box-sizing:border-box}body,html{width:100%;min-height:100%;max-width:100vw;overflow-x:hidden;overflow-y:auto}body{margin:0;font-family:Lexend,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:radial-gradient(75rem 37.5rem at 20% -10%,#dbeafe 0,transparent 45%),var(--bg);color:var(--text)}#app{width:100%;max-width:100vw!important;min-height:100dvh;height:auto;overflow-y:visible;overflow-x:hidden;padding:1rem 1.25rem 2.5rem;margin:0 auto}#app .row{--bs-gutter-x:1rem;margin-left:0;margin-right:0}.small,.text-secondary{color:var(--muted)!important}.typing-card{transition:box-shadow .35s,border-color .35s;min-height:17rem}.typing-card .card-body{min-height:17rem}.typing-card.round-complete{box-shadow:0 0 0 .24rem rgba(25,135,84,.22),0 .8rem 1.6rem rgba(25,135,84,.14)!important;border-color:rgba(25,135,84,.55)}.typing-text{font-size:clamp(
    calc(1.2rem * var(--typing-font-scale)),
    calc(5vw * var(--typing-font-scale)),
    calc(2rem * var(--typing-font-scale))
  );line-height:1.6;letter-spacing:.05rem;word-spacing:0.15rem;min-height:clamp(6.5rem,19vh,11rem);max-width:100%;text-align:left;white-space:normal;overflow-wrap:normal;word-break:normal;text-wrap:pretty;color:var(--text)}.menu-controls{row-gap:.75rem}.field-group{min-width:9.5rem}.field-group label{display:block;margin-bottom:.3rem;font-weight:500}.menu-select{min-width:14rem;width:100%}.menu-select-small{min-width:10rem}.char{display:inline;min-width:.34ch;border-radius:.28rem;padding:.02rem .03rem;transition:color .15s,background-color .15s,transform .15s}.char-space{white-space:pre}.char-pending{color:var(--pending)}.char-current,.char.current{color:#0d6efd;background:var(--current-bg);border-bottom:.1875rem solid var(--sound-on);border-radius:.25rem;animation:pulseFocus 1.5s infinite}.char-correct,.char.ok{color:var(--ok);font-weight:500}.char-error,.char.err{color:var(--err);text-decoration:underline wavy;background-color:rgba(220,53,69,.1)}@keyframes pulseFocus{0%{box-shadow:0 0 0 0 rgba(13,110,253,.4)}70%{box-shadow:0 0 0 .375rem rgba(13,110,253,0)}100%{box-shadow:0 0 0 0 rgba(13,110,253,0)}}.control-row{margin-top:-.2rem;margin-bottom:.8rem!important}.control-btn{min-height:2.75rem;min-width:2.75rem;padding:.6rem .95rem;font-weight:600}.action-bar .control-row{margin-top:0;margin-bottom:0!important}.play-btn{min-width:8.5rem}.status-line{min-height:1.8rem;font-size:1.05rem;font-weight:500}.legal-footer{margin-top:.35rem;padding-bottom:.25rem}.legal-footer a{color:var(--muted);text-decoration:underline}.translation-slot{min-height:3.2rem;margin-bottom:.9rem}.metric-box{display:flex;gap:.55rem;align-items:center;background:var(--panel);border:.0625rem solid var(--border);border-radius:.7rem;padding:.7rem .85rem}.metric-box span{font-size:.9rem;color:var(--muted)}.metric-box output{margin-left:auto;font-weight:700;font-size:1.15rem}.discipline-card{border:.0625rem solid var(--border);transition:transform .18s,box-shadow .18s,border-color .18s;background:var(--panel)}.discipline-card:hover{transform:translateY(-.1875rem);box-shadow:0 .6rem 1.2rem rgba(31,41,55,.08)}.discipline-card.selected{border-color:#0d6efd;box-shadow:0 0 0 .18rem rgba(13,110,253,.16)}.sound-toggle{position:relative;transition:all .2s}.font-size-controls{display:flex;align-items:center;justify-content:space-between;gap:.55rem;padding:.25rem .75rem}.font-size-buttons{display:inline-flex;gap:.35rem}.font-size-buttons .btn{min-width:2.15rem;padding:.12rem .42rem;font-weight:700}.sound-toggle.sound-on{color:var(--sound-on);border-color:rgba(13,110,253,.42)}.sound-toggle.sound-on.is-speaking{box-shadow:0 0 0 .18rem rgba(13,110,253,.2)}.sound-toggle.sound-muted{color:var(--sound-muted);border-color:rgba(108,117,125,.45)}.btn.active{box-shadow:0 0 0 .15rem rgba(13,110,253,.2)}#app:-webkit-full-screen,#app:fullscreen{background:radial-gradient(75rem 37.5rem at 20% -10%,#dbeafe 0,transparent 45%),var(--bg);color:var(--text);width:100vw;max-width:100vw;height:100vh;max-height:100vh;overflow-y:hidden;overflow-x:hidden;padding:1rem 1.25rem}#app:-webkit-full-screen::backdrop,#app:fullscreen::backdrop{background:var(--bg)}.input-capture{position:fixed;left:-9999rem;top:auto;width:.0625rem;height:.0625rem;opacity:.01;pointer-events:none}body.high-contrast{--bg:#000;--panel:#000;--border:#fff;--text:#fff;--muted:#fff;--pending:#cfcfcf;--current-bg:#fff;--ok:#fff;--err:#fff;background:#000!important;color:#fff!important}body.high-contrast .alert,body.high-contrast .card,body.high-contrast .discipline-card,body.high-contrast .metric-box{background:#000!important;border-color:#fff!important;color:#fff!important}body.high-contrast .small,body.high-contrast .text-secondary{color:#fff!important}body.high-contrast .btn{background:#000!important;color:#fff!important;border-color:#fff!important}body.high-contrast .btn-primary,body.high-contrast .btn.active{background:#fff!important;color:#000!important;border-color:#fff!important;box-shadow:none!important}body.high-contrast .fa-brands,body.high-contrast .fa-regular,body.high-contrast .fa-solid,body.high-contrast [class*=" fa-"],body.high-contrast i{color:#fff!important}body.high-contrast .char-current{background:#fff!important;color:#000!important;border-bottom:.1875rem solid #000!important;box-shadow:0 0 0 .125rem #fff!important}body.high-contrast .char-error{text-decoration:underline wavy;background:#fff!important;color:#000!important}body.high-contrast .discipline-card.selected{box-shadow:0 0 0 .2rem #fff!important}body.high-contrast #app:-webkit-full-screen,body.high-contrast #app:fullscreen{background:#000!important}body.high-contrast .form-control,body.high-contrast .form-select{background-color:#000!important;color:#fff!important;border-color:#fff!important}body.high-contrast .form-control:focus,body.high-contrast .form-select:focus{border-color:#fff!important;box-shadow:0 0 0 .15rem #fff!important}body.high-contrast .form-select option{background:#000;color:#fff}body.high-contrast .dropdown-menu{background:#000!important;border-color:#fff!important}body.high-contrast .dropdown-item{color:#fff!important;background:#000!important}body.high-contrast .dropdown-item:focus,body.high-contrast .dropdown-item:hover{color:#000!important;background:#fff!important}body.high-contrast .dropdown-item.active,body.high-contrast .dropdown-item:active{color:#000!important;background:#fff!important}body.high-contrast .dropdown-item.active i,body.high-contrast .dropdown-item:active i,body.high-contrast .dropdown-item:focus i,body.high-contrast .dropdown-item:hover i{color:#000!important}@media (max-width:48rem){#app{padding:.85rem .75rem 7.25rem}.seo-copy{display:none}#menu-title{margin-bottom:.35rem!important}.menu-controls{width:100%;display:grid!important;grid-template-columns:1fr 1fr;column-gap:.75rem;align-items:end}.field-group{width:100%;min-width:0}.menu-select,.menu-select-small{min-width:0}header h1.h2{font-size:clamp(2rem, 9.4vw, 2.45rem);line-height:1.06;margin-bottom:.35rem!important}header p{font-size:1.05rem;line-height:1.42;max-width:28ch}h2.h5{font-size:2rem;line-height:1.12}#app>section{margin-bottom:1.1rem!important}main.container{padding-top:1rem!important;padding-bottom:1rem!important}.typing-card{min-height:11.2rem;border-radius:1rem}.typing-card .card-body{min-height:11.2rem;padding:.95rem .85rem}.typing-card .card-body>.d-flex{align-items:flex-start!important;gap:.55rem!important}#knowledgeBtn{padding:.3rem .5rem;font-size:.92rem}.typing-text{font-size:clamp(.98rem, 8.1vw, 1.85rem);line-height:1.27;min-height:5.2rem;text-wrap:balance}.char{padding:.01rem .02rem}.action-bar{position:sticky;bottom:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,#fff 10%);border-top:.0625rem solid var(--border);border-radius:.9rem .9rem 0 0;padding:.45rem .25rem .5rem;margin-bottom:0!important}.action-bar .control-row{width:100%;justify-content:stretch;display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.control-btn{width:100%;justify-content:center;min-height:2.75rem;font-size:1rem;border-radius:.8rem}.dropdown-item,.font-size-buttons .btn{min-height:2.75rem;display:flex;align-items:center}.play-btn{width:100%;margin-top:.2rem}.metric-box output{font-size:1rem}}@media (max-height:37.5rem){body{overflow-y:auto}.typing-card .card-body{min-height:auto}}@media (max-width:30rem){#app{padding-left:.62rem;padding-right:.62rem}.menu-controls{grid-template-columns:1fr}h2.h5{font-size:1.9rem}.typing-card{min-height:10.4rem}.typing-card .card-body{min-height:10.4rem}.action-bar .control-row{grid-template-columns:1fr}}
.site-title{font-weight:800}.site-title-main{font-weight:800}.site-title-suffix{font-weight:400;color:var(--muted);margin-left:.35rem}
/* Compact layout for shorter laptop screens */
#app{padding-top:.5rem;padding-bottom:1.25rem}
#app>header{margin-bottom:1rem!important}
.site-title{font-weight:800;line-height:1.1}
.site-title-main{font-weight:800}
.site-title-suffix{font-weight:400;color:var(--muted);margin-left:.35rem}
.typing-card,.typing-card .card-body{min-height:12.5rem}
.typing-text{min-height:clamp(4.5rem,12vh,7.5rem)}
@media (max-height:800px){
  .site-title{font-size:clamp(1.55rem,3.2vw,2rem)!important}
  #app>header{margin-bottom:.75rem!important}
  .seo-copy{margin-bottom:.75rem!important}
  .typing-card,.typing-card .card-body{min-height:10.5rem}
  .typing-text{font-size:clamp(1rem,3.3vw,1.8rem);min-height:4rem}
}
.narrator-controls{min-width:18rem;max-width:20rem}.narrator-controls .form-label{font-weight:500}.narrator-rate-range{margin-bottom:0}
.top-navbar{padding:.2rem 0}
.top-navbar .navbar-brand{margin-right:.5rem}
.top-navbar .brand-title{font-weight:800;line-height:1.1;color:var(--text)}
.top-navbar .nav-link{padding:.3rem .55rem;font-weight:500}
#app{padding-top:4.15rem!important}
@media (max-width:991.98px){
  #app{padding-top:4.4rem!important}
  .top-navbar .navbar-nav{padding-top:.25rem}
}
body.cover-background{background-image:linear-gradient(rgba(246,248,251,.74),rgba(246,248,251,.78)),url("background.png")!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;background-attachment:fixed!important}
body.cover-background #app,body.cover-background .top-navbar{background-color:transparent}
#app{display:flex;flex-direction:column}
.legal-footer{margin-top:auto!important;padding-top:.35rem;padding-bottom:0}
.mobile-lock-screen{display:none}
@media (max-width:767.98px){
  .top-navbar,#app{visibility:hidden;pointer-events:none}
  .mobile-lock-screen{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:1rem;overflow:auto}
  .mobile-lock-screen::before{content:"";position:absolute;inset:0;background:url("background.png") center/cover no-repeat;filter:blur(8px);transform:scale(1.06)}
  .mobile-lock-screen::after{content:"";position:absolute;inset:0;background:rgba(15,23,42,.42)}
  .mobile-lock-card{position:relative;z-index:1;max-width:42rem;width:min(92vw,42rem);background:rgba(255,255,255,.78)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:1rem}
}
.keyboard-hint-card{background:linear-gradient(180deg,#0f172a,#111c33);border:1px solid rgba(96,165,250,.24)}
.keyboard-hint-card .card-body{color:#dbeafe}
.keyboard-hint-grid{display:flex;flex-direction:column;gap:.35rem}
.kbd-row{display:flex;gap:.3rem;flex-wrap:nowrap}
.kbd-key{position:relative;flex:1;min-height:2rem;border:1px solid rgba(147,197,253,.25);background:rgba(30,41,59,.9);color:#f8fafc;border-radius:.45rem;font-weight:700;font-size:.9rem;pointer-events:none}
.kbd-key-wide{flex:1.35}
.kbd-key-space{flex:6}
.kbd-key-active{background:#fef08a!important;color:#111827!important;border-color:#facc15;box-shadow:0 0 .8rem rgba(250,204,21,.55)}
.kbd-key-held.kbd-key-active{box-shadow:inset 0 2px 4px rgba(0,0,0,.25),0 0 .8rem rgba(250,204,21,.55);transform:translateY(1px)}
body.high-contrast .keyboard-hint-card{background:#000!important;border-color:#fff!important}
body.high-contrast .kbd-key{background:#000!important;color:#fff!important;border-color:#fff!important}
body.high-contrast .kbd-key-active{background:#fff!important;color:#000!important}
body.high-contrast .kbd-key-held.kbd-key-active{box-shadow:inset 0 2px 4px rgba(0,0,0,.4)!important}
.kbd-key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.02rem;padding:.12rem .2rem}
.kbd-key .kbd-top,.kbd-key .kbd-alt{font-size:.62rem;line-height:1;opacity:.88;font-weight:600}
.kbd-key .kbd-main{font-size:1.06rem;line-height:1.05;font-weight:800}
.kbd-key-wide .kbd-main,.kbd-key-space .kbd-main{font-size:1.03rem}
.kbd-finger-badge{position:absolute;bottom:.12rem;left:0;right:0;font-size:.52rem;line-height:1.1;font-weight:600;opacity:.95;color:inherit;text-align:center;word-break:break-word;pointer-events:none}
.navbar-selectors{min-width:min(100%,28rem)}
.navbar-selectors .field-group{min-width:9rem}
.navbar-selectors .menu-select{min-width:12rem}
@media (max-width:991.98px){
  .navbar-selectors{width:100%;margin-top:.35rem}
  .navbar-selectors .field-group,.navbar-selectors .menu-select{width:100%;min-width:0}
}
.top-nav-tabs{gap:.4rem}
.top-nav-tabs .nav-link{border:1px solid #b6c4db;border-bottom:3px solid #8fb3ff;border-radius:.8rem .8rem .45rem .45rem;background:linear-gradient(180deg,#f8fbff,#e9f1ff);color:#344054!important;font-weight:700;padding:.34rem .8rem}
.top-nav-tabs .nav-link:hover{background:linear-gradient(180deg,#fff7db,#ffeab5);border-color:#f6cd62;border-bottom-color:#f3b800;color:#1f2937!important}
.top-nav-tabs .nav-link.active{background:linear-gradient(180deg,#fff1a8,#ffe173);border-color:#f6cd62;border-bottom-color:#e0ad00;color:#111827!important}
@media (max-width:991.98px){.top-nav-tabs{gap:.25rem}.top-nav-tabs .nav-link{display:inline-block}}
.discipline-dropdown .menu-select{display:flex;align-items:center;justify-content:space-between;min-height:2.35rem;font-weight:500}
.discipline-dropdown .dropdown-menu{max-height:18rem;overflow:auto}
.difficulty-dropdown .menu-select{display:flex;align-items:center;justify-content:space-between;min-height:2.35rem;font-weight:500}
.difficulty-dropdown .dropdown-menu{max-height:14rem;overflow:auto}
/* Menu top consistency */
.top-navbar .container{display:flex;align-items:center;gap:.85rem}
.top-navbar .navbar-collapse{display:flex;align-items:center;gap:.75rem}
.top-navbar .navbar-brand{margin-right:auto!important}
.top-nav-tabs .nav-link,
.navbar-selectors .menu-select{
  min-height:3.3rem;
  border-radius:.78rem;
  border:1px solid #b8c6dd;
  font-weight:800;
  font-size:1.08rem;
  line-height:1.1;
}
.top-nav-tabs .nav-link{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#f9fbff,#eaf1ff);
  color:#374151!important;
  padding:.55rem 1rem;
}
.top-nav-tabs .nav-link.active{
  background:linear-gradient(180deg,#fff2ad,#ffe27a);
  border-color:#f0c44d;
  color:#111827!important;
}
.top-nav-tabs .nav-link:hover{
  background:linear-gradient(180deg,#fff7dc,#ffebb8);
  border-color:#efcf76;
}
.navbar-selectors{display:flex;align-items:center;gap:.7rem;min-width:clamp(24rem,32vw,34rem)}
.navbar-selectors .field-group{min-width:11.5rem}
.navbar-selectors .menu-select{
  background:#f8fafc;
  color:#111827;
  text-align:left;
  padding:.55rem 1rem;
}
.navbar-selectors .menu-select:focus{
  box-shadow:0 0 0 .15rem rgba(59,130,246,.18);
  border-color:#8cb3ff;
}
.discipline-dropdown .dropdown-menu,
.difficulty-dropdown .dropdown-menu{
  border-radius:.75rem;
  border:1px solid #c7d2e6;
}
@media (max-width:991.98px){
  .top-navbar .container{align-items:flex-start}
  .top-navbar .navbar-collapse{width:100%}
  .navbar-selectors{min-width:0;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .navbar-selectors .field-group{min-width:0}
  .top-nav-tabs .nav-link,
  .navbar-selectors .menu-select{min-height:2.9rem;font-size:1rem}
}
.discipline-dropdown .menu-select.is-placeholder,
.difficulty-dropdown .menu-select.is-placeholder{color:#dc2626!important;border-color:#f87171!important;background:#fff5f5!important}
.round-selectors{flex:1 1 auto;justify-content:center}
.round-selectors .field-group{min-width:15rem}
.round-selectors .menu-select{min-width:15rem}
@media (max-width:1200px){.round-selectors{order:3;width:100%;justify-content:stretch}.round-selectors .field-group,.round-selectors .menu-select{width:100%;min-width:0}}
#restartBtn{background:#198754!important;border-color:#198754!important}
#restartBtn:hover,#restartBtn:focus{background:#157347!important;border-color:#146c43!important}
#replayTtsBtn{background:#facc15!important;border-color:#facc15!important;color:#111827!important}
#replayTtsBtn:hover,#replayTtsBtn:focus{background:#eab308!important;border-color:#ca8a04!important;color:#111827!important}
#replayTtsBtn i{color:#111827!important}
/* High contrast strict black/white override */
body.high-contrast,body.high-contrast #app,body.high-contrast .top-navbar{background:#000!important;color:#fff!important}
body.high-contrast .nav-link,body.high-contrast .brand-title,body.high-contrast a{color:#fff!important}
body.high-contrast .btn,
body.high-contrast #replayTtsBtn,
body.high-contrast #restartBtn,
body.high-contrast #disciplineDropdownBtn,
body.high-contrast #difficultyDropdownBtn,
body.high-contrast .menu-select,
body.high-contrast .dropdown-toggle,
body.high-contrast .dropdown-item{background:#000!important;color:#fff!important;border-color:#fff!important;box-shadow:none!important}
body.high-contrast .btn:hover,
body.high-contrast .btn:focus,
body.high-contrast .btn.active,
body.high-contrast .dropdown-item:hover,
body.high-contrast .dropdown-item:focus,
body.high-contrast .dropdown-item:active{background:#fff!important;color:#000!important;border-color:#fff!important}
body.high-contrast .discipline-dropdown .menu-select.is-placeholder,
body.high-contrast .difficulty-dropdown .menu-select.is-placeholder{background:#000!important;color:#fff!important;border-color:#fff!important}
body.high-contrast .keyboard-hint-card,body.high-contrast .kbd-key{background:#000!important;color:#fff!important;border-color:#fff!important}
body.high-contrast .kbd-key-active{background:#fff!important;color:#000!important;border-color:#fff!important;box-shadow:none!important}
body.high-contrast .kbd-key-held.kbd-key-active{box-shadow:inset 0 2px 4px rgba(0,0,0,.5)!important}
body.high-contrast .char-current{background:#fff!important;color:#000!important;border-bottom:.1875rem solid #000!important;box-shadow:none!important}
body.high-contrast .char-error{background:#fff!important;color:#000!important;text-decoration:underline wavy}
.status-line.text-danger,.small.text-danger{color:#dc3545!important;font-weight:700}

/* Educational feedback entrance + celebration */
#educationalFeedback{position:relative;overflow:hidden}
#educationalFeedback.edu-feedback-celebrate::before,#educationalFeedback.edu-feedback-celebrate::after{content:"";position:absolute;inset:-18% -10%;pointer-events:none}
#educationalFeedback.edu-feedback-celebrate::before{background:
radial-gradient(circle at 10% 25%,rgba(255,193,7,.65) 0 .24rem,transparent .25rem),
radial-gradient(circle at 24% 62%,rgba(13,110,253,.52) 0 .23rem,transparent .24rem),
radial-gradient(circle at 38% 32%,rgba(25,135,84,.55) 0 .22rem,transparent .23rem),
radial-gradient(circle at 52% 58%,rgba(220,53,69,.45) 0 .21rem,transparent .22rem),
radial-gradient(circle at 66% 28%,rgba(255,193,7,.6) 0 .22rem,transparent .23rem),
radial-gradient(circle at 80% 64%,rgba(13,110,253,.48) 0 .2rem,transparent .21rem),
radial-gradient(circle at 92% 38%,rgba(25,135,84,.52) 0 .2rem,transparent .21rem);
animation:eduConfettiBurst .95s ease-out}
#educationalFeedback.edu-feedback-celebrate::after{background:
radial-gradient(circle at 16% 48%,rgba(255,255,255,.75) 0 .15rem,transparent .16rem),
radial-gradient(circle at 46% 22%,rgba(255,255,255,.7) 0 .12rem,transparent .13rem),
radial-gradient(circle at 70% 50%,rgba(255,255,255,.72) 0 .13rem,transparent .14rem),
radial-gradient(circle at 88% 20%,rgba(255,255,255,.68) 0 .11rem,transparent .12rem);
animation:eduConfettiSparkle .95s ease-out}
@keyframes eduConfettiBurst{0%{opacity:0;transform:translateY(-.35rem) scale(.96)}35%{opacity:1}100%{opacity:0;transform:translateY(.85rem) scale(1.06)}}
@keyframes eduConfettiSparkle{0%{opacity:0;transform:scale(.96)}40%{opacity:1}100%{opacity:0;transform:scale(1.04)}}

/* Next action highlight */
#restartBtn.next-action-highlight{box-shadow:0 0 0 .2rem rgba(255,193,7,.38),0 0 1.25rem rgba(255,193,7,.48);filter:saturate(1.08);animation:nextActionBounce 1.45s ease-in-out infinite}
@keyframes nextActionBounce{0%,100%{transform:translateY(0)}35%{transform:translateY(-.12rem)}55%{transform:translateY(0)}72%{transform:translateY(-.05rem)}}

/* Keep strict black/white in high-contrast mode */
body.high-contrast #educationalFeedback{background:#000!important;color:#fff!important;border-color:#fff!important}
body.high-contrast #educationalFeedback.edu-feedback-celebrate::before,body.high-contrast #educationalFeedback.edu-feedback-celebrate::after{display:none!important}
body.high-contrast #restartBtn.next-action-highlight{box-shadow:0 0 0 .2rem #fff!important;filter:none!important;animation:none!important}
body.high-contrast #replayTtsBtn i,body.high-contrast #replayTtsBtn .fa-solid,body.high-contrast #replayTtsBtn .fa-volume-high{color:#fff!important}
body.high-contrast .modal-content,body.high-contrast .modal-header,body.high-contrast .modal-body,body.high-contrast .modal-footer{background:#000!important;color:#fff!important;border-color:#fff!important}
body.high-contrast .modal-title,body.high-contrast .modal-body p,body.high-contrast .modal-body .small,body.high-contrast #creativeValidationMsg{color:#fff!important}
body.high-contrast #creativeInput,body.high-contrast #aiPromptBox{background:#000!important;color:#fff!important;-webkit-text-fill-color:#fff!important;caret-color:#fff!important;border-color:#fff!important}
body.high-contrast #creativeInput::placeholder,body.high-contrast #aiPromptBox::placeholder{color:#fff!important;opacity:.9!important;-webkit-text-fill-color:#fff!important}
body.high-contrast .btn-close{filter:invert(1) grayscale(1) brightness(2)!important;opacity:1!important}
.top-navbar .brand-block{display:flex;flex-direction:column;line-height:1}
.top-navbar .brand-subtitle{font-size:.72rem;font-weight:500;letter-spacing:.02em;color:#6b7280;margin-top:.1rem}
.top-navbar .brand-logo{height:40px;width:auto;display:block}
.sw-toast-container{z-index:1080;max-width:min(95vw,32rem)}
body.high-contrast .top-navbar .brand-subtitle{color:#fff!important}

html{scroll-behavior:smooth}

/* Cross-browser consistency layer */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
}

#app {
  min-height: 100vh;
}

@supports (min-height: 100dvh) {
  #app {
    min-height: 100dvh;
  }
}

.typing-text {
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: wrap;
}

@supports (text-wrap: pretty) {
  .typing-text {
    text-wrap: pretty;
  }
}

@supports (text-wrap: balance) {
  .typing-text {
    text-wrap: balance;
  }
}

@media (max-width:48rem) {
  .action-bar {
    background: rgba(246, 248, 251, 0.96);
  }
}

@supports (background: color-mix(in srgb, #fff 90%, #000 10%)) {
  @media (max-width:48rem) {
    .action-bar {
      background: color-mix(in srgb, var(--bg) 90%, #fff 10%);
    }
  }
}

html.is-ios #app {
  min-height: calc(var(--visual-vh, 1vh) * 100);
}

html.is-safari .action-bar {
  -webkit-overflow-scrolling: touch;
}

html.is-firefox .typing-text {
  text-wrap: wrap;
}

@supports (backdrop-filter: blur(1px)) {
  html.is-safari .mobile-lock-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Teclas de atalho (atalhos.php, páginas de documentação) */
.atalho-kbd {
  font-family: Consolas, monospace;
  background: #e2e8f0;
  color: #1e293b;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
  border: 1px solid #cbd5e1;
}
body.high-contrast .atalho-kbd {
  background: #000;
  color: #fff;
  border-color: #fff;
}

/* Documentação para 1.º ciclo: texto maior para legibilidade infantil */
.doc-kids {
  font-size: 1.0625rem;
  line-height: 1.55;
}
.doc-kids .small {
  font-size: 1em;
}
.doc-kids .atalho-kbd {
  font-size: 0.95rem;
}
.doc-kids .keyboard-reference-legend {
  font-size: 1rem;
}