@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=ZCOOL+KuaiLe&display=swap";:root{--bg: #FFFFFF;--surface: #F7F7F7;--primary: #3DA000;--primary-dark: #2C7A00;--accent: #E51919;--text: #1F1F1F;--text-muted: #5C5C5C;--border: #E5E5E5;--success: #3DA000;--warning: #A87C00;--danger: #E51919;--radius: 20px;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04)}body{margin:0;padding:0;background:radial-gradient(circle at 10% 20%,#E5191933 0%,transparent 40%),radial-gradient(circle at 90% 80%,#3DA00022 0%,transparent 40%),var(--bg);color:var(--text);font-family:Quicksand,ZCOOL KuaiLe,Nunito,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;display:flex;justify-content:center;align-items:center;overflow-x:hidden}#root{width:100%;max-width:600px;min-height:100vh;display:flex;flex-direction:column;box-shadow:var(--shadow);background-color:var(--surface);border-radius:var(--radius);overflow:hidden;position:relative}.app-container{flex-grow:1;display:flex;flex-direction:column;position:relative;padding-bottom:70px}.page{padding:20px;flex-grow:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:absolute;width:100%;height:100%;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;font-family:ZCOOL KuaiLe,sans-serif;color:var(--primary-dark)}.spinner{border:8px solid #f3f3f3;border-top:8px solid var(--primary);border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cloud-sync-message{position:absolute;top:10px;left:50%;transform:translate(-50%);background-color:rgba(var(--primary-dark),.9);color:var(--bg);padding:8px 15px;border-radius:var(--radius);font-size:.9em;z-index:100;box-shadow:var(--shadow);white-space:nowrap}.home-page{justify-content:flex-start;padding-top:40px}.main-title{font-family:ZCOOL KuaiLe,sans-serif;font-size:2.8em;color:var(--primary-dark);margin-bottom:10px;line-height:1.2}.subtitle{font-size:1.1em;color:var(--text-muted);margin-bottom:30px;max-width:80%}.start-button{background-color:var(--primary);color:var(--bg);border:none;padding:15px 30px;border-radius:var(--radius);font-size:1.2em;font-family:ZCOOL KuaiLe,sans-serif;cursor:pointer;box-shadow:var(--shadow);margin-bottom:40px;transition:background-color .3s ease}.start-button:hover{background-color:var(--primary-dark)}.section-title{font-family:ZCOOL KuaiLe,sans-serif;font-size:1.5em;color:var(--text);margin-bottom:20px}.progress-section{width:100%;max-width:400px;margin-bottom:40px}.progress-bar-container{width:100%;height:20px;background-color:var(--border);border-radius:10px;overflow:hidden;position:relative;box-shadow:inset 0 1px 3px #0000001a}.progress-bar-track{position:relative;width:100%;height:100%}.progress-bar-fill{height:100%;background:linear-gradient(to right,var(--primary),var(--primary-dark));border-radius:10px}.progress-flag{position:absolute;top:-10px;transform:translate(-50%);display:flex;align-items:center;justify-content:center;transition:left .8s ease-out}.progress-flag svg{filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}.progress-percentage{position:absolute;font-size:.7em;font-weight:700;color:var(--bg);top:50%;left:50%;transform:translate(-50%,-50%);text-shadow:0 1px 2px rgba(0,0,0,.3)}.teacher-previews{display:flex;justify-content:space-around;width:100%;max-width:500px;margin-top:20px}.teacher-preview{display:flex;flex-direction:column;align-items:center;cursor:pointer;position:relative;padding:10px;border-radius:var(--radius);transition:background-color .3s ease}.teacher-preview:not(.locked):hover{background-color:rgba(var(--primary),.05)}.teacher-preview.locked{opacity:.6;cursor:not-allowed}.teacher-preview-avatar{width:80px;height:80px;border-radius:50%;background-color:var(--surface);display:flex;justify-content:center;align-items:center;font-size:3em;margin-bottom:10px;box-shadow:var(--shadow);overflow:hidden}.teacher-avatar-img{width:100%;height:100%;object-fit:cover}.teacher-preview-name{font-weight:700;color:var(--text)}.lock-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2em;background-color:#ffffffb3;border-radius:50%;padding:5px}.teacher-select-page{padding-top:20px}.back-button{background:none;border:none;color:var(--text-muted);font-size:1em;cursor:pointer;display:flex;align-items:center;gap:5px;margin-bottom:20px;align-self:flex-start;padding:10px;border-radius:var(--radius);transition:background-color .3s ease}.back-button:hover{background-color:rgba(var(--primary),.05)}.page-title{font-family:ZCOOL KuaiLe,sans-serif;font-size:2em;color:var(--primary-dark);margin-bottom:30px}.teacher-cards-grid{display:grid;grid-template-columns:1fr;gap:20px;width:100%;max-width:450px;margin-bottom:30px}.teacher-card{background-color:var(--bg);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);text-align:center;border:3px solid transparent;transition:border-color .3s ease;position:relative;overflow:hidden}.teacher-card:not(.locked){cursor:pointer}.teacher-card.locked{opacity:.7;filter:grayscale(80%);cursor:not-allowed}.teacher-card-header{display:flex;justify-content:center;align-items:center;position:relative;margin-bottom:15px;padding:10px 0;border-radius:var(--radius) var(--radius) 0 0}.teacher-card-avatar{width:100px;height:100px;border-radius:50%;background-color:var(--surface);display:flex;justify-content:center;align-items:center;font-size:3.5em;box-shadow:var(--shadow);border:4px solid var(--bg);overflow:hidden}.teacher-card-badge{position:absolute;top:0;right:0;background-color:var(--bg);border-radius:50%;padding:8px;box-shadow:var(--shadow);display:flex;justify-content:center;align-items:center}.teacher-card-name{font-family:ZCOOL KuaiLe,sans-serif;font-size:1.8em;margin-bottom:10px}.teacher-card-description{font-size:.95em;color:var(--text-muted);margin-bottom:15px}.teacher-card-lock{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;color:var(--bg);display:flex;justify-content:center;align-items:center;font-size:1.5em;font-family:ZCOOL KuaiLe,sans-serif;border-radius:var(--radius)}.concepts-by-teacher{width:100%;max-width:450px}.concept-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-top:20px}.concept-card-wrapper{perspective:1000px;cursor:pointer;height:150px}.concept-card-wrapper.locked{opacity:.6;filter:grayscale(50%);cursor:not-allowed}.concept-card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .6s;transform-style:preserve-3d;box-shadow:var(--shadow);border-radius:var(--radius)}.concept-card-front,.concept-card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:var(--radius);background-color:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px;box-sizing:border-box}.concept-card-front{z-index:2;transform:rotateY(0)}.concept-card-back{transform:rotateY(180deg);background:linear-gradient(135deg,var(--primary)33,var(--accent)33);color:var(--text)}.concept-card-icon{font-size:2.5em;margin-bottom:10px}.concept-card-name{font-family:ZCOOL KuaiLe,sans-serif;font-size:1.2em;color:var(--text)}.concept-card-description-back{font-size:.85em;color:var(--text);margin-bottom:10px}.concept-card-action{font-size:.9em;color:var(--primary-dark);font-weight:700}.concept-card-lock{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0006;color:var(--bg);display:flex;justify-content:center;align-items:center;font-size:1.5em;border-radius:var(--radius)}.concept-show-page{padding-top:20px;background-size:cover;background-position:center;position:relative;color:var(--text)}.concept-show-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fffc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto}.concept-content{background-color:var(--bg);border-radius:var(--radius);padding:25px;box-shadow:var(--shadow);width:100%;max-width:500px;margin-top:20px;flex-grow:1;display:flex;flex-direction:column;align-items:center}.interactive-area{width:100%;min-height:200px;background-color:var(--surface);border-radius:var(--radius);margin-bottom:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;box-sizing:border-box;box-shadow:inset 0 1px 3px #0000001a}.pizza-container{width:180px;height:180px;position:relative;border-radius:50%;background-color:gold;cursor:pointer;box-shadow:0 5px 15px #0003;margin-bottom:15px}.pizza{width:100%;height:100%;position:relative;border-radius:50%;overflow:hidden}.pizza-slice{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:0% 50%;background-color:var(--accent);border:1px solid rgba(0,0,0,.1);box-sizing:border-box}.pizza-info{font-size:1em;color:var(--text-muted)}.geometry-playground{display:flex;gap:20px;margin-bottom:15px}.geometry-playground p{font-size:.9em;color:var(--text-muted)}.shape{width:50px;height:50px;background-color:var(--primary);border-radius:5px;box-shadow:var(--shadow)}.shape.triangle{width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:60px solid var(--accent);background-color:transparent;border-radius:0}.shape.circle{border-radius:50%;background-color:#5b9bd5}.shape.square{background-color:#ffd93d}.pattern-challenge{display:flex;flex-direction:column;align-items:center;gap:10px}.number-sequence{display:flex;gap:10px;font-size:1.5em;font-weight:700;color:var(--primary-dark)}.pattern-input{padding:10px;border:2px solid var(--border);border-radius:var(--radius);font-size:1em;text-align:center;width:100px}.pattern-submit-button{background-color:var(--primary);color:var(--bg);border:none;padding:8px 15px;border-radius:var(--radius);font-size:.9em;cursor:pointer}.explanation-text{font-size:1em;line-height:1.6;color:var(--text);margin-bottom:25px;text-align:left;width:100%}.complete-button{background-color:var(--primary);color:var(--bg);border:none;padding:15px 30px;border-radius:var(--radius);font-size:1.2em;font-family:ZCOOL KuaiLe,sans-serif;cursor:pointer;box-shadow:var(--shadow);transition:background-color .3s ease}.complete-button:hover{background-color:var(--primary-dark)}.star-field{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.star{position:absolute;width:8px;height:8px;background-color:gold;border-radius:50%;opacity:0;animation:twinkle 5s infinite ease-in-out;box-shadow:0 0 5px gold,0 0 10px gold}@keyframes twinkle{0%,to{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}.bottom-nav{position:fixed;bottom:0;left:0;width:100%;max-width:600px;background-color:var(--bg);box-shadow:0 -2px 10px #0000001a;display:flex;justify-content:space-around;padding:10px 0;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);z-index:50}.nav-item{background:none;border:none;color:var(--text-muted);display:flex;flex-direction:column;align-items:center;font-size:.8em;cursor:pointer;padding:5px 10px;border-radius:var(--radius);transition:color .3s ease,background-color .3s ease}.nav-item.active{color:var(--primary);background-color:rgba(var(--primary),.1)}.nav-item:hover{color:var(--primary-dark)}.nav-item svg{margin-bottom:5px}@media (min-width: 600px){#root{min-height:80vh;margin:50px auto}}@media (max-width: 480px){.main-title{font-size:2.2em}.subtitle{font-size:1em}.start-button,.complete-button{padding:12px 25px;font-size:1.1em}.teacher-preview-avatar{width:60px;height:60px;font-size:2.5em}.teacher-cards-grid,.concept-list{grid-template-columns:1fr}.teacher-card-avatar{width:80px;height:80px;font-size:3em}.teacher-card-name{font-size:1.5em}.page-title{font-size:1.8em}}