/* NOLIQO V2 — character-led, accessible, mobile-first visual system. */
:root{
  --ink:#13283a;--text:#22374a;--muted:#6b7c88;--paper:#f8faf7;
  --line:#e1eae5;--accent:#c0fa83;--accent-strong:#a9e966;
  --mint:#74d6b6;--violet:#786bcd;--coral:#ff947f;
  --shadow:0 14px 34px rgba(19,44,51,.068);
  font-family:Inter,"Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  color:#203345;background:#ecf1eb;
}
html{scroll-behavior:smooth}body{background:radial-gradient(circle at 10% 10%,#ecf9ed,#eaf0ec 48%,#e8eee9)}
button{transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
button:not(:disabled):active{transform:scale(.977)}
:focus-visible{outline:3px solid #4caa95!important;outline-offset:2px!important}
.app-frame{background:var(--paper);box-shadow:0 16px 90px #193a352b;border-inline:1px solid #e5ece8}
.desktop-context{left:max(3%,calc(50% - 700px));top:27%;max-width:min(360px,28vw)}
.context-label{color:#4c8c7c}.context-title{letter-spacing:-1.8px;font-weight:840;color:#13283a}
.context-line{background:linear-gradient(90deg,#5dc7a6,#bbef7a);height:6px;border-radius:8px}
.context-foot{color:#688078}
@media(max-width:1190px){.desktop-context{display:none}}
.page{padding:0 19px 30px}
.topbar{height:73px;padding:14px 19px;background:rgba(248,250,247,.94);position:relative;z-index:5}
.logo{gap:9px}.wordmark{font-size:23px;font-weight:920;color:#11283a;letter-spacing:-.9px}
.logo-box.n-mark{position:relative;letter-spacing:-2px;padding-right:3px;font-size:27px;border-radius:13px;background:#13283a;color:#fff;box-shadow:0 5px 12px #13283a22}
.n-dot{position:absolute;right:6px;top:-8px;font-size:21px;line-height:1;color:#ff947f;letter-spacing:normal}
.pill{background:#fff;font-size:11px;border-color:#e4ece7;color:#465762;min-height:34px}
.pill:first-child{color:#d78440}.xp-pill{color:#4a9272!important;background:#ebf8e6}
.avatar{border:2px solid white;border-radius:12px;background:#c4f3b1;color:#244631}
.eyebrow{color:#62797a;font-size:10px;letter-spacing:1.8px}
.hello-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;margin-bottom:14px}
.hello-date{font-size:11px;color:#859494}
.hero.hero-noli{min-height:315px;background:linear-gradient(135deg,#102839 0%,#183c45 60%,#1e5a52 100%);padding:22px 18px 20px;border-radius:27px;box-shadow:0 15px 26px #134d4632}
.hero.hero-noli::before{border-color:#a7f1aa0f;right:-120px;top:-120px}
.hero.hero-noli::after{border-color:#8ae1bf15;right:-40px;bottom:-60px}
.hero-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 85% 41%,#a8f3ab24,transparent 53%)}
.hero-copy-wrap{position:relative;z-index:2;width:66%;max-width:239px}
.hero-noli .eyebrow{color:#a1e1cf;font-size:10px}
.hero-noli .hero-title{position:relative;margin:15px 0 14px;font-size:29px;line-height:1.18;font-weight:880;max-width:235px;letter-spacing:-1.15px}
.hero-noli .hero-title em{color:#bdf883}
.hero-noli .hero-copy{font-size:12px;line-height:1.55;max-width:225px;margin:0 0 22px;color:#d0ded9;min-height:46px}
.hero-noli .hero-cta{padding:0 11px;font-size:11px;min-height:44px;white-space:normal;max-width:235px;text-align:center;line-height:1.4;border-radius:12px;box-shadow:0 8px 14px #0b28202f}
.hero-level{position:absolute;bottom:12px;right:18px;border-radius:100px;padding:7px 10px;background:#edfff12c;color:#eaffef;font-size:10px;z-index:3;font-weight:700;backdrop-filter:blur(10px)}
.noli{display:block;pointer-events:none;object-fit:contain;user-select:none;-webkit-user-drag:none}
.noli-hero{position:absolute;right:-16px;bottom:9px;width:184px;height:277px;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 13px 17px #0b2d263a);animation:noliFloat 5.5s ease-in-out infinite;z-index:1}
@keyframes noliFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
.noli-greeting{display:flex;justify-content:end;margin:-4px 12px 7px;position:relative;z-index:3}
.noli-greeting-bubble{max-width:96%;padding:12px 14px;background:#edfaf0;border:1px solid #d5eddb;border-radius:0 15px 15px 15px;color:#3b6257;font-size:11px;line-height:1.5}
.noli-greeting-bubble b{color:#1e6155}
.section-title{font-size:19px;color:#192f41;font-weight:870}.section-h{margin:22px 1px 12px}
.mini-tag{background:#e8f6e5;color:#45785c;border-radius:100px;padding:6px 10px;font-weight:840}
.panel.mission-panel{padding:15px;background:#fff;border-radius:20px}
.mission-top{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:12px;color:#314e50}
.mission-top span:last-child{color:#458769}
.bar{background:#edf2ed}.bar>span{background:linear-gradient(90deg,#68cb9e,#b7ed7a)}
.mission-progress{margin:12px 0}
.mission-row{display:flex;align-items:center;gap:11px;width:100%;border-top:1px solid #edf1ed;background:transparent;padding:12px 0;text-align:left;color:#263b48}
.mission-row:first-of-type{border-top:0}
.mission-check{width:27px;height:27px;flex:0 0 27px;border:1.5px solid #c8d9d0;color:#829c92;display:grid;place-items:center;border-radius:50%;font-weight:900;font-size:15px}
.mission-row.done .mission-check{color:#184438;background:#b8edb4;border-color:#b8edb4}
.mission-row strong{font-size:12px;display:block;font-weight:830}
.mission-row small{display:block;color:#78908e;font-size:10px;margin-top:3px}
.mission-count{font-size:11px;font-weight:830;color:#819395}
.mission-row.done .mission-count{color:#418866}
.tiles.bright-tiles{gap:11px}
.bright-tiles .tile{min-height:145px;border-color:#e1e9e4;border-radius:21px;padding:15px;background:#fff;box-shadow:0 5px 14px #18312b07}
.tile-icon{background:#e9f8e8;color:#355548;box-shadow:none;font-weight:800}
.tile-icon.violet{background:#eee9fb;color:#6d5ac2}.tile-icon.blue{background:#e8f5f8;color:#2c7890}.tile-icon.peach{background:#ffede6;color:#d17c63}
.tile-name{font-size:14px;color:#1b3648}.tile-desc{color:#697e89;font-size:11px}
.next-lesson,.mistake-invite{display:flex;align-items:center;gap:12px;padding:15px 14px;width:100%;background:#e9f8ed;border:1px solid #d9ecdf;border-radius:18px;text-align:left;color:#264d43;margin-bottom:10px}
.next-lesson-icon{height:48px;width:48px;display:grid;place-items:center;background:#c2efa8;border-radius:14px;flex-shrink:0}
.next-lesson strong,.mistake-invite strong{display:block;font-size:13px;line-height:1.3}
.next-lesson small,.mistake-invite small{display:block;font-size:10px;color:#618374;margin:3px 0}
.mistake-invite{background:#fff6f0;border-color:#f7e0d4}.mistake-invite>span:first-child{font-size:27px;color:#c98a65;width:48px;text-align:center}
.section-h .inline-link{display:flex;align-items:center;font-size:11px;font-weight:800;color:#4b866e}
.section-h .inline-link svg{width:14px;height:14px}
/* Course chapters */
.course-intro{display:flex;align-items:center;gap:13px;border-radius:18px;padding:14px;background:#edf7ec;border:1px solid #dcebd7;margin:18px 0 11px}
.course-intro-icon{font-size:25px}.course-intro strong{font-size:13px}.course-intro p{font-size:11px;color:#63806c;line-height:1.5;margin:4px 0 0}
.roadmap{display:grid;gap:18px;margin-top:10px}
.chapter{position:relative;border:1px solid #e3eae5;background:white;border-radius:24px;padding:16px 12px 13px;box-shadow:0 5px 15px #122f3109}
.chapter-header{display:flex;gap:11px;align-items:center;padding:5px 6px 15px;border-bottom:1px dashed #dce8df}
.chapter-badge{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;background:#ddf3e8;font-size:21px;flex-shrink:0}
.chapter-header small{font-size:10px;color:#65a084;font-weight:850;letter-spacing:.6px}
.chapter-header h2{font-size:17px;letter-spacing:-.45px;margin:3px 0 2px;color:#173344}
.chapter-header p{margin:0;font-size:11px;line-height:1.4;color:#84928d}
.chapter-fraction{background:#f1f7ed;color:#447658;border-radius:9px;padding:6px 7px;font-size:11px;font-weight:800}
.chapter-track{padding:8px 0 0 1px;position:relative}
.path-node{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 6px;background:transparent;border-bottom:1px solid #f0f3ef;color:#263f4c;position:relative}
.path-node:last-child{border:0}.path-node.recommended{background:#e9f8e7;border-radius:14px;margin:5px 0;padding:12px 6px}
.path-number{width:37px;height:37px;display:grid;place-items:center;background:#e9f1ee;border:2px solid #d8e8dd;border-radius:13px;color:#537663;font-weight:850;font-size:13px;flex-shrink:0}
.path-node.completed .path-number{background:#a9e8a5;border-color:#a9e8a5;color:#246240}
.path-node.recommended .path-number{background:#163c44;border-color:#163c44;color:#d6fd9b;box-shadow:0 3px 9px #113b3925}
.path-node strong{display:block;font-size:12px;line-height:1.3}.path-node small{display:block;margin-top:4px;color:#7c918b;font-size:10px}
.path-chevron{color:#89a29b}.path-chevron svg{height:17px;width:17px}
/* Practice and grammar */
.challenge-hero{background:linear-gradient(135deg,#e9f6ee,#d9f2eb);border:1px solid #cce7de;border-radius:23px;padding:22px 17px 19px;position:relative;overflow:hidden;min-height:225px;margin:13px 0 19px}
.challenge-hero>div{width:62%;position:relative;z-index:2}
.challenge-hero h2{margin:13px 0 9px;font-size:26px;line-height:1.13;letter-spacing:-.7px}
.challenge-hero p{font-size:11px;color:#507c70;line-height:1.55;margin:0 0 15px}
.challenge-hero .btn{background:#173d43;color:#e9fbe5;padding:0 12px;min-height:41px;font-size:11px}
.noli-challenge{position:absolute;width:151px;height:215px;right:-9px;bottom:-15px;object-position:bottom}
.test-modes .mode{border-radius:18px;min-height:81px;padding:13px 14px}
.mode strong{font-size:13px}.mode small{color:#74868c;font-size:10px}
.level-tile{min-height:122px}.test-level-tiles{gap:10px}
.grammar-hero{display:flex;align-items:center;position:relative;min-height:132px;border-radius:19px;background:#e9f5f2;border:1px solid #d8ece7;padding:17px;overflow:hidden;margin:16px 0}
.grammar-hero>div{position:relative;z-index:2;max-width:65%}.grammar-hero strong{font-size:14px;display:block;line-height:1.35}
.grammar-hero p{font-size:11px;line-height:1.5;color:#658881;margin:7px 0 0}
.noli-grammar{width:105px;height:145px;position:absolute;right:0;bottom:-18px}
.search-label{font-size:11px;font-weight:830;color:#5f7472;display:block;margin:12px 0 6px}
.search-wrapper{height:47px;display:flex;align-items:center;gap:10px;padding:0 15px;background:#fff;border:1px solid #dbe5e1;border-radius:15px}
.search-wrapper:focus-within{border-color:#5db99b;box-shadow:0 0 0 3px #60b89b1f}
.search-wrapper>span{font-size:26px;color:#5a887b}
.search-wrapper input{width:100%;height:100%;background:transparent;border:0;outline:0;font-size:13px;color:#193949}
.category-row{display:flex;gap:8px;overflow-x:auto;margin:0 0 14px;padding:3px 1px 6px;scrollbar-width:none}
.category-row::-webkit-scrollbar{display:none}
.category-chip{white-space:nowrap;background:#eff4ef;border-radius:10px;padding:10px;font-size:11px;font-weight:750;color:#607777}
.category-chip.active{background:#163b3e;color:white}
.topic-card{border-color:#e0e8e4;border-radius:16px}
.topic-card strong{color:#1f3849}.topic-card small{color:#718891}
.grammar-topic-icon{color:#368d73;font-weight:800;background:#e7f5e9!important}
.no-results{padding:25px;text-align:center;color:#677c7c}.no-results strong{display:block;color:#314b49}.no-results p{font-size:12px}
/* Profile and rewards */
.profile-v2.profile-cover{border-radius:22px;padding:16px 17px;background:linear-gradient(135deg,#112e3c,#1a4e4c);color:white;min-height:153px}
.profile-main{display:flex;align-items:center;gap:15px}
.profile-pic{width:84px;height:86px;border-radius:20px;background:#e8f5e7;position:relative;overflow:hidden;flex-shrink:0}
.noli-profile{height:107px;width:80px;object-fit:contain;object-position:bottom center;position:absolute;bottom:-28px;left:2px}
.profile-main .eyebrow{color:#a6e5c4}.profile-main h2{font-size:23px;margin:5px 0 6px;letter-spacing:-.5px}
.profile-level{font-size:12px;color:#b9d8cc}
.profile-progress{display:flex;justify-content:space-between;margin-top:14px;font-size:11px;color:#c0e4cd}
.stat-grid{gap:10px}.stat-box{border-radius:18px;min-height:119px;border-color:#e3eae6}.stat-box strong{font-size:23px;color:#183649}.stat-box small{color:#788995}
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;background:#fff;border:1px solid #e2eae5;border-radius:20px;padding:10px 8px}
.week-day{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 2px;border-radius:12px;color:#869a95;font-weight:770}
.week-day.active{background:#e0f6e2;color:#22674c}
.week-day small{font-size:10px}.week-day span{font-size:13px}.week-day b{font-size:13px}
.achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.achievement{min-height:135px;background:#f0f3f0;border:1px dashed #d9e1dc;border-radius:18px;padding:13px;opacity:.66}
.achievement.unlocked{background:#fff;border-style:solid;border-color:#d9ebde;opacity:1;box-shadow:0 5px 14px #183e3008}
.achievement-icon{width:35px;height:35px;border-radius:12px;background:#e1eee2;display:grid;place-items:center;font-size:19px;margin-bottom:9px}
.achievement.unlocked .achievement-icon{background:#e0f8ca}
.achievement strong{display:block;font-size:12px;color:#183749}.achievement small{font-size:10px;display:block;color:#71868a;line-height:1.4;margin-top:5px}
.skillrow-top span:last-child{font-size:10px;color:#497866}.skillrow-top small{color:#91a19c}
/* Quiz and emotional feedback */
.quiz-v2{padding-bottom:42px}.quiz-kicker{display:flex;align-items:center;justify-content:space-between;padding-top:7px;gap:8px}
.quiz-kicker>span:last-child{font-size:10px;font-weight:850;color:#528d6e;background:#e4f6e5;padding:6px 9px;border-radius:10px}
.question-title{margin:20px 0 13px;font-size:25px;line-height:1.3;color:#193449;letter-spacing:-.55px}
.quiz-v2 .hint{color:#6c8386;margin-bottom:17px}
.choice{border:1.5px solid #dce8e2;border-radius:17px;background:white;min-height:65px;padding:12px;color:#173447;font-size:14px;font-weight:730;display:flex;align-items:center;gap:13px}
.choice-letter{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:#eef4f0;color:#4f8371;font-weight:840;flex-shrink:0}
.choice.correct{background:#e7f8e6;border-color:#7ccfa4;color:#1c5f49}.choice.correct .choice-letter{background:#aaeb9f;color:#1b5836}
.choice.wrong{background:#fff1ec;border-color:#e8ab98;color:#995a4c}.choice.wrong .choice-letter{background:#ffe1d6;color:#92574a}
.option-tick{margin-left:auto;color:#318f66;font-weight:900;font-size:19px}
.feedback-noli{border-radius:19px;background:#e9f9eb;border:1px solid #c7eacb;padding:15px;margin:22px 0 12px}
.feedback-noli.wrong{background:#fff5ef;border-color:#f2dfd3}
.reaction-layout{display:flex;align-items:center;gap:13px}.noli-reaction{height:76px;width:63px;flex-shrink:0;object-position:top}
.feedback-noli h3{font-size:16px;line-height:1.25;margin:0 0 6px;color:#1f6048}.feedback-noli.wrong h3{color:#ac6952}
.feedback-noli p{font-size:12px;margin:0;color:#6c7f76;line-height:1.5}
.feedback-explanation{font-size:12px;line-height:1.6;color:#4c665e;margin-top:9px;padding-top:11px;border-top:1px solid #d7eadd}
.feedback-noli.wrong .feedback-explanation{border-color:#eedfd4}
.result-v2{text-align:center;padding-top:30px}
.result-art{height:185px;position:relative;display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse,#e1f6df 8%,transparent 70%);margin-bottom:12px}
.noli-result{width:145px;height:190px;object-position:center top;animation:noliFloat 5.5s ease-in-out infinite}
.result-spark{position:absolute;color:#73b695;font-size:25px}.result-spark.one{top:34px;left:20%}.result-spark.two{bottom:12px;right:18%;color:#ff9f7b}
.result-v2 .result-title{font-size:27px;color:#16384a}
/* Welcome experience */
.onboarding-v2{background:var(--paper);min-height:100dvh;padding:24px 24px 40px}
.onboarding-v2 .logo{margin-bottom:18px}
.onboarding-v2 h1{font-size:38px;letter-spacing:-1.6px;line-height:1.1;color:#173848}
.onboarding-v2 h1 em{font-style:normal;color:#3eab86}
.onboarding-v2>p,.onboarding-v2 p{color:#67828a;line-height:1.7;font-size:14px}
.onboard-visual{height:320px;position:relative;display:flex;justify-content:center;align-items:end;margin:15px 0 14px;background:linear-gradient(175deg,#edf7eb,#d9f2e4);border-radius:28px;overflow:hidden}
.onboard-glow{position:absolute;width:240px;height:240px;background:#b4edc3;border-radius:50%;top:38px;left:calc(50% - 120px);filter:blur(16px);opacity:.6}
.noli-onboard{position:relative;z-index:1;width:225px;height:306px;object-position:bottom;animation:noliFloat 5s ease-in-out infinite}
.onboard-sidekick{display:flex;align-items:center;gap:10px;background:#e8f7e9;padding:8px 12px;border-radius:17px;margin:24px 0 18px;color:#34725d;font-size:12px;font-weight:780}
.noli-sidekick{height:70px;width:54px;object-position:top}
.selector.selected{background:#e7f7e8;border-color:#80cba0;color:#264b42}
.selector-mark{color:#3a8d68}
.boot{padding:30px;text-align:center}.boot h2{font-size:24px;color:#183948;letter-spacing:.3px}.boot p{max-width:290px;font-size:13px;line-height:1.6}
.locked-mascot{height:155px;width:140px;object-position:center top}
.brand-mark{background:#173b44;color:#dff9e2}
.btn{background:linear-gradient(115deg,#c5fb9c,#b4ec7d);color:#13302a;box-shadow:0 4px 10px #1b4f3315}
.btn.secondary{background:white;box-shadow:none;border-color:#dce7e0;color:#28514a}
.back-btn{border-color:#e1eae4}
.bottom-nav{height:calc(77px + env(safe-area-inset-bottom,0px));background:rgba(248,252,249,.95);border-top-color:#e3ebe5}
.nav-link.active{background:#e3f6e3;color:#268362}
.nav-link{color:#738a92}.nav-link svg{width:20px;height:20px}
.notice{border-color:#e0eae4;color:#648079}
@media(max-width:380px){
  .hero-noli .hero-title{font-size:25px}.noli-hero{right:-25px;width:160px;height:260px}
  .hero-copy-wrap{width:67%}.hero-noli .hero-cta{font-size:10px;padding:0 8px}
  .topbar{padding:12px}.wordmark{font-size:19px}.pill{padding:6px 8px}
  .hello-date{display:none}.page{padding-left:14px;padding-right:14px}
}
@media(max-width:330px){.hero-copy-wrap{width:72%}.noli-hero{width:130px;height:230px;right:-30px}}
@media(prefers-reduced-motion:reduce){.noli-hero,.noli-onboard,.noli-result{animation:none}}