/* LingoTotal newlook treatment for Skills 1–8. Visual changes only. */
:root{--nl-ink:#17324d;--nl-blue:#2563eb;--nl-blue-dark:#194fbf;--nl-soft:#eef5ff;--nl-pale:#f7fbff;--nl-bg:#eef3f8;--nl-muted:#607184;--nl-line:#d5e0ec;--nl-shadow:0 16px 40px rgba(35,63,92,.08)}
html{background:var(--nl-bg)!important}
body{margin:0!important;font-family:Inter,Arial,sans-serif!important;background:var(--nl-bg)!important;color:var(--nl-ink)!important;line-height:1.45!important}
button,input,textarea,select{font:inherit}
.banner,.topbar{position:sticky!important;top:0!important;z-index:100!important;min-height:66px!important;padding:9px clamp(12px,3vw,30px)!important;background:linear-gradient(135deg,#f9fcff 0%,#edf5ff 48%,#dceafa 100%)!important;color:var(--nl-ink)!important;border:0!important;border-bottom:1px solid var(--nl-line)!important;box-shadow:0 4px 16px rgba(35,63,92,.07)!important}
.brand-wrap,.bar{gap:10px!important}.brand-mark,.logo{width:40px!important;height:40px!important;min-width:40px!important;border-radius:0!important;background:var(--nl-blue)!important;color:#fff!important;box-shadow:none!important;font-size:.82rem!important;font-weight:900!important;letter-spacing:-.04em!important}
.brand{font-size:.88rem!important;font-weight:900!important;letter-spacing:.15em!important;color:var(--nl-ink)!important}.tagline{margin-top:2px!important;font-size:.65rem!important;font-weight:700!important;color:var(--nl-muted)!important;opacity:1!important}
.header-tools,.controls-right{gap:7px!important}.language-pair,.pill{padding:7px 10px!important;border:1px solid #c8d7e7!important;border-radius:7px!important;background:rgba(255,255,255,.74)!important;color:#456078!important;font-size:.7rem!important;font-weight:800!important;white-space:nowrap!important}
.home-link,.home{min-height:34px!important;padding:7px 10px!important;border:1px solid #b9cce0!important;border-radius:7px!important;background:#fff!important;color:var(--nl-blue-dark)!important;box-shadow:none!important;font-size:.7rem!important;font-weight:800!important;text-decoration:none!important}
.page,.workspace{width:min(900px,calc(100% - 28px))!important;margin:18px auto 44px!important;padding:0!important}
.panel,.card,.quiz-card{background:#fff!important;border:1px solid var(--nl-line)!important;border-radius:0!important;box-shadow:0 8px 24px rgba(35,63,92,.055)!important;padding:clamp(17px,2.7vw,25px)!important;margin-bottom:12px!important}
.hero,.hero-copy{position:relative!important;overflow:hidden!important;background:linear-gradient(135deg,#f9fcff 0%,#edf5ff 55%,#e4f0fc 100%)!important;border:1px solid var(--nl-line)!important;border-left:4px solid var(--nl-blue)!important;border-radius:0!important;box-shadow:0 8px 24px rgba(35,63,92,.055)!important}
.hero:before,.hero-copy:before{content:""!important;position:absolute!important;width:230px!important;height:230px!important;border-radius:50%!important;right:-140px!important;top:-150px!important;background:rgba(37,99,235,.07)!important}
h1,.hero h1{position:relative!important;margin:0 0 7px!important;font-size:clamp(1.42rem,3.5vw,2rem)!important;line-height:1.08!important;letter-spacing:-.035em!important;font-weight:900!important;color:var(--nl-ink)!important}
.hero p,.lead{position:relative!important;color:var(--nl-muted)!important;font-size:.9rem!important;line-height:1.5!important}
.section-head,.head,.step-head{gap:9px!important;margin-bottom:12px!important}.number,.num,.step,.badge{border-radius:7px!important;background:var(--nl-soft)!important;color:var(--nl-blue-dark)!important;font-weight:900!important;box-shadow:none!important}
.section-title,.title,.stage-title{font-size:1rem!important;font-weight:850!important;letter-spacing:-.015em!important;color:var(--nl-ink)!important}.helper,.help,.instruction,.meta,.status{color:var(--nl-muted)!important}
.level-grid,.length-grid,.situation-grid,.grid,.categories,.levels{gap:7px!important}.choice,.category,.answer-label{border:1px solid var(--nl-line)!important;border-radius:8px!important;background:#fff!important;color:var(--nl-ink)!important;box-shadow:none!important;transition:.15s ease!important}
.choice:hover,.choice.selected,.choice.active,.category:hover,.category.selected,.answer-label:hover{border-color:#9dbce0!important;background:var(--nl-soft)!important;color:var(--nl-blue-dark)!important}
input[type=text],input[type=number],textarea,select,.answer-input{min-height:44px!important;padding:10px 12px!important;border:1px solid #bdcde0!important;border-radius:8px!important;background:#fff!important;color:var(--nl-ink)!important;font-size:16px!important;box-shadow:none!important}
input:focus,textarea:focus,select:focus{outline:0!important;border-color:var(--nl-blue)!important;box-shadow:0 0 0 3px rgba(37,99,235,.10)!important}
.primary-btn,.primary,.generate{min-height:43px!important;padding:10px 15px!important;border:0!important;border-radius:8px!important;background:var(--nl-blue)!important;color:#fff!important;box-shadow:none!important;font-size:.82rem!important;font-weight:850!important}.primary-btn:hover,.primary:hover,.generate:hover{background:var(--nl-blue-dark)!important}
.secondary-btn,.secondary,.listen-btn,.sound-btn,.audio{border:1px solid var(--nl-line)!important;border-radius:7px!important;background:#fff!important;color:var(--nl-blue-dark)!important;box-shadow:none!important;font-weight:800!important}
.exercise,.exercise-intro,.feedback,.reading-box,.transcript,.score,.scorebox,.score-card,.question-box,.listen-box,.answer-zone,.word-bank,.reveal-box,.final-score,.results,.lesson-card,.setup{border:1px solid var(--nl-line)!important;border-radius:8px!important;background:#fff!important;box-shadow:none!important}
.feedback.success,.feedback.ok{border-left:3px solid #1f9d68!important;background:#f2fbf7!important}.feedback.error,.feedback.bad{border-left:3px solid #d04444!important;background:#fff7f7!important}
.score-value,.scoreval,.score-number{color:var(--nl-blue)!important;font-weight:900!important}.progress,.bar{accent-color:var(--nl-blue)!important}.footer{color:#8392a3!important;font-size:.67rem!important}
@media(max-width:700px){.banner,.topbar{min-height:52px!important;height:52px!important;padding:6px 8px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;overflow:hidden!important}.brand-mark,.logo{width:34px!important;height:34px!important;min-width:34px!important;font-size:.7rem!important}.brand{font-size:.76rem!important;white-space:nowrap!important}.tagline,.language-pair,.pill{display:none!important}.home-link,.home{width:35px!important;height:35px!important;min-height:35px!important;padding:0!important;display:grid!important;place-items:center!important;font-size:0!important}.home-link span:first-child,.home span:first-child{font-size:1rem!important}.page,.workspace{width:calc(100% - 14px)!important;margin:8px auto 28px!important}.panel,.card,.quiz-card{padding:14px 12px!important;margin-bottom:8px!important}.hero,.hero-copy{border-left-width:3px!important}h1,.hero h1{font-size:1.25rem!important}.hero p,.lead{font-size:.76rem!important}.section-title,.title,.stage-title{font-size:.9rem!important}.level-grid,.levels{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}.choice,.category{padding:9px 8px!important}.primary-btn,.primary,.generate{min-height:40px!important;padding:9px 10px!important;font-size:.76rem!important}.matching-grid,.form-grid,.report-grid{grid-template-columns:1fr!important}.actions,.action-row,.next-row,.controls{gap:6px!important;flex-wrap:wrap!important}}