:root{--ink:#17344d;--muted:#6d8090;--bg:#f6fbff;--card:#fff;--nav:#153a56;--blue:#2f80ed;--green:#31b878;--yellow:#fff3b2;--peach:#ffe4cb;--lav:#eee8ff;--line:#dbe7ef;--red:#d95870;--shadow:0 12px 30px rgba(35,82,112,.10)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(#f9fcff,#eef7ff);color:var(--ink)}button,input,textarea,select{font:inherit}button{cursor:pointer}.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.side{background:var(--nav);color:white;padding:24px 18px;position:sticky;top:0;height:100vh}.brand{font-weight:850;font-size:21px}.tag{font-size:12px;opacity:.78;line-height:1.45;margin:8px 0 22px}.nav button{display:block;width:100%;border:0;background:transparent;color:#fff;text-align:left;padding:11px 12px;border-radius:11px;margin:4px 0}.nav button.active,.nav button:hover{background:rgba(255,255,255,.14)}main{padding:28px}.page.hidden{display:none}.top{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:18px}h1{margin:0;font-size:28px}h2{margin:0 0 8px}h3{margin:0 0 8px}.sub{color:var(--muted);font-size:14px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.card{background:white;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.s12{grid-column:span 12}.s8{grid-column:span 8}.s6{grid-column:span 6}.s4{grid-column:span 4}.s3{grid-column:span 3}.hero{background:linear-gradient(135deg,#173b57,#2f80ed);color:white}.hero .sub{color:#dcecff}.pill,.badge{display:inline-block;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800}.pill{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.badge{background:var(--yellow);color:#635a00}.klabel{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.kpi{font-size:30px;font-weight:900;margin-top:5px}.progress{height:10px;background:#e8f0f6;border-radius:999px;overflow:hidden}.progress>div{height:100%;background:linear-gradient(90deg,var(--blue),var(--green))}.btn{border:0;border-radius:11px;padding:10px 14px;font-weight:800}.primary{background:var(--blue);color:white}.soft{background:#eaf3ff;color:#215fa9}.green{background:#e2f7ed;color:#247a55}.danger{background:#ffe8ed;color:#ad3d54}.btns{display:flex;gap:8px;flex-wrap:wrap}.motivation{background:linear-gradient(135deg,#fff5bd,#ffe4cf);border:1px solid #f0dfa3;border-radius:18px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}.quote{font-weight:900;font-size:20px;line-height:1.35}.quotevi{margin-top:7px;color:#6d6253}.section{border:1px solid var(--line);border-radius:15px;padding:16px;margin:12px 0;background:#fbfdff}.section.grammar{background:#f2f8ff}.section.natural{background:#f4efff}.section.thinking{background:#fff8e5}.section.review{background:#fff0e8;border-color:#f1cdb9}.examples{display:grid;gap:8px}.example{padding:10px 12px;border-radius:10px;background:white;border:1px solid var(--line)}.chunk{padding:12px;border-radius:12px;background:white;border:1px solid #ddd5fa;margin:8px 0}.chunk b{display:block}.chunk .vi{font-size:12px;color:var(--muted);margin-top:3px}textarea,input,select{width:100%;border:1px solid #cadae6;border-radius:10px;padding:10px 12px;background:white}textarea{min-height:125px;resize:vertical}.option{display:block;padding:9px 10px;margin:6px 0;border-radius:9px;background:#f6f9fc}.correct{background:#ddf6e9!important}.wrong{background:#ffe6ea!important}.small{font-size:12px;color:var(--muted)}.airesult{background:#edf8ff;border:1px solid #cae4f5;border-radius:14px;padding:15px;margin-top:12px}.scoregrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.scorebox{background:white;border:1px solid var(--line);border-radius:10px;padding:9px;text-align:center}.scorebox b{display:block;font-size:21px}.finalscore{font-size:34px;font-weight:950;color:#145a92}.daygrid{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}.daybtn{border:1px solid var(--line);background:white;border-radius:10px;padding:9px 5px;font-weight:800}.daybtn.review{background:#fff0e8}.daybtn.done{background:#dcf6e8}.daybtn.current{outline:2px solid var(--blue)}.hist{border:1px solid var(--line);border-radius:13px;padding:13px;margin:10px 0;background:#fff}.hist .title{font-weight:850}.hist .meta{font-size:12px;color:var(--muted);margin-top:3px}.barrow{display:grid;grid-template-columns:160px 1fr 46px;gap:9px;align-items:center;margin:10px 0}.bar{height:10px;background:#edf3f7;border-radius:999px;overflow:hidden}.bar>div{height:100%;background:var(--blue)}.spinner{display:inline-block;width:16px;height:16px;border:2px solid #d9e5ee;border-top-color:#2f80ed;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px;margin-right:6px}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;right:18px;bottom:18px;background:#173b57;color:white;padding:12px 16px;border-radius:10px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:none}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.review-note{font-weight:800;color:#944d2e}.mutedbox{padding:10px;border-radius:10px;background:#f7fafc;border:1px dashed var(--line)}
@media(max-width:980px){.app{grid-template-columns:1fr}.side{position:relative;height:auto}.nav{display:flex;flex-wrap:wrap}.nav button{width:auto}.s8,.s6,.s4,.s3{grid-column:span 12}.daygrid{grid-template-columns:repeat(5,1fr)}main{padding:18px}.scoregrid{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}