@font-face{font-family:Niu;src:url('assets/NeedMoodNiuNiu.ttf') format('truetype');font-display:swap}*{box-sizing:border-box} :root{--cream:#fffdf4;--paper:#fffaf0;--blue:#a9c9da;--blue2:#e4f0f5;--red:#91434d;--red2:#b75c68;--ink:#49383a;--muted:#927e7a;--line:#eadfce;--shadow:0 8px 22px rgba(95,73,62,.09)}body{margin:0;background:#f5efe4;color:var(--ink);font-family:Niu,'Trebuchet MS',sans-serif;font-size:15px}.app-shell{max-width:760px;min-height:100dvh;margin:auto;background:var(--cream);position:relative;padding-bottom:94px;box-shadow:0 0 40px rgba(76,59,48,.08);overflow:hidden}.topbar{height:76px;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,253,244,.95);position:sticky;top:0;z-index:5;border-bottom:1px solid rgba(234,223,206,.65)}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:46px;height:46px;border-radius:17px;background:var(--blue2);display:grid;place-items:center;font-size:28px}.brand-name{font-size:19px;color:var(--red);line-height:1.15}.brand-sub{font-family:Arial,sans-serif;font-size:10px;letter-spacing:.7px;color:var(--muted);margin-top:3px}.icon-btn{border:0;background:var(--blue2);color:var(--red);width:40px;height:40px;border-radius:14px;font-size:25px;cursor:pointer}.main-content{padding:18px 19px 26px}.panel{background:var(--paper);border:1px solid #f0e7d8;border-radius:27px;box-shadow:var(--shadow)}.hero{min-height:220px;padding:24px 23px;display:flex;position:relative;overflow:hidden;background:linear-gradient(110deg,#fffaf0 0%,#fffaf0 56%,#e7f1f5 56%,#e7f1f5 100%)}.hero-copy{position:relative;z-index:2;max-width:65%}.eyebrow{font:10px Arial,sans-serif;letter-spacing:1.7px;color:#a77b78;font-weight:bold}.hero h1{font-size:28px;line-height:1.1;margin:12px 0 8px;color:var(--red)}.hero h1 span{color:#c98a91}.hero p{font-size:13px;line-height:1.55;color:#786b66;max-width:230px;margin:0}.hero-actions{display:flex;align-items:center;gap:13px;margin-top:19px;flex-wrap:wrap}.primary-btn{border:0;border-radius:14px;padding:11px 16px;background:var(--red);color:#fffaf0;font:inherit;font-size:13px;box-shadow:0 4px 0 #71343d;cursor:pointer}.primary-btn span{padding-left:8px}.streak{font:11px Arial,sans-serif;color:#927b71}.streak:first-letter{color:#c28d65}.hero-art{position:absolute;right:9px;top:14px;width:39%;height:190px}.shark-scene{position:absolute;inset:28px 3px 15px;background:#d6e8ef;border-radius:48% 42% 42% 50%;display:grid;place-items:center;transform:rotate(-5deg);border:2px solid #b8d0dc}.shark{font-size:82px;filter:drop-shadow(0 5px 0 rgba(83,111,126,.13));transform:rotate(-7deg)}.sun-doodle{position:absolute;right:22px;top:0;color:#bd8c8d;font-size:28px}.bubble{position:absolute;color:#a66c75;font-size:20px}.b1{top:4px;left:17px}.b2{bottom:12px;right:15px}.wave{position:absolute;bottom:12px;left:20%;width:60%;height:12px;border-bottom:2px dashed #91b6c7;border-radius:50%}.tiny-note{position:absolute;right:2px;bottom:0;font-size:10px;color:#8daebe;transform:rotate(-5deg)}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0 25px}.stat-card{display:flex;align-items:center;gap:8px;padding:12px 9px;background:#f7f0e5;border-radius:17px;min-width:0}.stat-icon{font-size:21px}.stat-card strong{display:block;color:var(--red);font-size:19px;line-height:1.1}.stat-card small{font:9px Arial,sans-serif;color:#927e7a;white-space:nowrap}.section-block{margin-top:24px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.section-heading h2{font-size:20px;color:var(--red);margin:4px 0 0}.date-pill,.mini-label{font:10px Arial,sans-serif;color:#987c74;background:#f5eadc;border-radius:20px;padding:7px 10px}.daily-plan{display:grid;gap:8px}.plan-row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:16px;background:#f7f3e9;border:1px solid #f0e8d9}.plan-check{width:25px;height:25px;border:1.5px solid #c8b8a6;border-radius:9px;background:#fffdf5;color:#fff;cursor:pointer}.plan-row.done .plan-check{background:#91b9c9;border-color:#91b9c9}.plan-row.done .plan-title{text-decoration:line-through;color:#9b9188}.plan-emoji{font-size:20px}.plan-title{font-size:13px;flex:1}.plan-time{font:10px Arial,sans-serif;color:#a18b80}.path-list{display:grid;gap:9px}.path-card{width:100%;border:0;border-radius:18px;padding:13px 14px;display:flex;align-items:center;text-align:left;gap:13px;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 rgba(110,82,66,.06)}.path-card b{display:block;font-size:14px;color:var(--red)}.path-card small{display:block;font:10px Arial,sans-serif;color:#897a74;margin-top:4px}.path-emoji{font-size:26px;width:39px;height:39px;border-radius:13px;background:rgba(255,255,255,.55);display:grid;place-items:center}.path-arrow{margin-left:auto;color:#9e6c71;font-size:20px}.blue{background:#e3f0f5}.pink{background:#f8e7e8}.cream{background:#f5eddd}.lavender{background:#eeeaf4}.text-btn{border:0;background:none;color:var(--red);font:12px inherit;cursor:pointer}.word-feature{padding:18px 19px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(115deg,#fffaf0 0 70%,#e5f0f4 70%)}.word-tag{font:9px Arial,sans-serif;letter-spacing:1.4px;color:#a98779}.word-feature h3{font-size:28px;color:var(--red);margin:7px 0 0}.phonetic{font:12px Arial,sans-serif;color:#8baebe;margin:5px 0}.word-feature p{font-size:13px;margin:8px 0;color:#6f5e59}.word-feature .example{font-size:11px;color:#9a7d75}.sound-btn{border:0;border-radius:15px;background:#fffdf4;width:46px;height:46px;font-size:22px;box-shadow:var(--shadow);cursor:pointer}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(760px,100%);height:78px;padding:8px 10px max(8px,env(safe-area-inset-bottom));display:flex;justify-content:space-around;background:#a9c9da;border-radius:24px 24px 0 0;z-index:8;box-shadow:0 -5px 18px rgba(75,100,110,.12)}.nav-item{border:0;background:transparent;color:#fffaf0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:54px;cursor:pointer;border-radius:15px;padding:4px 10px}.nav-item span{font-size:21px;line-height:1.1}.nav-item small{font-size:10px;color:#5b7580}.nav-item.active{background:rgba(255,253,244,.48)}.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,15px);background:#67474a;color:#fffaf0;padding:10px 17px;border-radius:30px;font:12px Arial,sans-serif;opacity:0;pointer-events:none;transition:.25s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}
/* inner pages */
.page-title{font-size:25px;color:var(--red);margin:4px 0}.page-intro{font-size:12px;color:#897a74;line-height:1.6;margin:5px 0 18px}.search-box{width:100%;border:1px solid #eadfce;border-radius:14px;padding:12px 14px;background:#fffaf0;font:13px Arial,sans-serif;outline:none;margin-bottom:13px}.topic-tabs{display:flex;gap:7px;overflow:auto;padding-bottom:8px;margin-bottom:10px}.topic-tab{border:1px solid #eadfce;background:#fffaf0;color:#927e7a;border-radius:20px;padding:8px 13px;white-space:nowrap;font:11px Arial,sans-serif}.topic-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}.lesson-card,.vocab-card,.phrase-card,.grammar-card{background:#fffaf0;border:1px solid #eee4d5;border-radius:19px;padding:15px;margin-bottom:10px;box-shadow:0 4px 13px rgba(95,73,62,.05)}.lesson-card{display:flex;align-items:center;gap:12px;cursor:pointer}.lesson-icon{width:44px;height:44px;border-radius:15px;background:#e4f0f5;display:grid;place-items:center;font-size:23px}.lesson-card b{display:block;color:var(--red);font-size:14px}.lesson-card small{font:10px Arial,sans-serif;color:#92817a;display:block;margin-top:4px}.lesson-card .go{margin-left:auto;color:#b27c7f}.vocab-top{display:flex;justify-content:space-between;align-items:center}.vocab-word{font-size:23px;color:var(--red);margin:0}.ipa{font:12px Arial,sans-serif;color:#85aabd;margin:5px 0}.translation{font-size:14px;margin:8px 0 3px}.pronounce{font-size:12px;color:#987d73}.example-line{font-size:12px;line-height:1.5;background:#f4eee3;padding:9px 11px;border-radius:12px;margin-top:10px}.card-actions{display:flex;gap:8px;margin-top:11px}.small-btn{border:0;border-radius:12px;padding:8px 12px;background:#e3eff4;color:#567887;font:11px Arial,sans-serif;cursor:pointer}.small-btn.red{background:#f4e2e3;color:var(--red)}.quiz-box{background:#e7f1f4;border-radius:22px;padding:18px;margin:12px 0}.quiz-question{font-size:19px;color:var(--red);margin:8px 0 15px}.quiz-option{display:block;width:100%;text-align:left;padding:12px 13px;border:1px solid #d6e3e8;background:#fffdf6;border-radius:13px;margin:7px 0;color:#675957;font:13px Arial,sans-serif;cursor:pointer}.quiz-option.correct{background:#e2f1e7;border-color:#83b59a}.quiz-option.wrong{background:#f7e3e3;border-color:#d59a9a}.progress-track{height:8px;background:#eee6d9;border-radius:9px;overflow:hidden}.progress-fill{height:100%;background:#9ec4d5;border-radius:9px;width:0}.profile-hero{text-align:center;padding:22px;background:#e6f0f4;border-radius:23px}.profile-hero .big-shark{font-size:66px}.profile-hero h2{color:var(--red);margin:4px}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid #eee4d5;font-size:13px}.setting-row button{border:0;border-radius:12px;background:#e4f0f5;padding:8px 12px;color:#567887}.empty-note{text-align:center;color:#9a8981;padding:25px;font-size:12px}
@media(min-width:650px){.main-content{padding:24px 30px 35px}.hero{min-height:250px;padding:30px}.hero h1{font-size:34px}.hero-art{height:220px;width:35%}.shark{font-size:100px}.path-list{grid-template-columns:1fr 1fr}.daily-plan{grid-template-columns:1fr 1fr}.stats-row{gap:14px}.stat-card{padding:15px}}
@media(max-width:380px){.main-content{padding:14px 13px}.hero{padding:18px 16px;min-height:215px}.hero h1{font-size:23px}.hero-art{width:37%;right:4px}.shark{font-size:65px}.stat-card{gap:5px;padding:10px 6px}.stat-icon{font-size:17px}.stat-card strong{font-size:16px}.stat-card small{font-size:8px}.nav-item{min-width:48px;padding:4px 6px}}