@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";:root{--primary-orange:#ea8d2c;--primary-gradient:linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);--bg-cream:#fdfaf4;--text-brown:#3e2723;--text-dark:#2e1808;--text-gray:#8c827a;--card-border:#fed7aa;--tab-orange:#e88d2d;--badge-bg:#fdf0e2;--badge-text:#c0650e;--danger:#ef4444;--success:#10b981}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{-webkit-text-size-adjust:100%;height:100dvh;margin:0;padding:0;overflow:hidden}body{color:var(--text-dark);background:radial-gradient(circle at 50% 20%,#fef3c7 0%,#fae8d4 50%,#f5d0b5 100%);justify-content:center;align-items:center;height:100dvh;margin:0;padding:20px;font-family:Plus Jakarta Sans,-apple-system,sans-serif;display:flex;overflow:hidden}#root{justify-content:center;align-items:center;width:100%;height:100dvh;display:flex;overflow:hidden}.mobile-frame{background:var(--bg-cream);border-radius:32px;flex-direction:column;width:100%;max-width:1080px;height:92dvh;max-height:920px;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 60px #c26b1726,0 0 0 1px #ea8d2c26}@media (width<=1024px){html,body{background:var(--bg-cream);height:100dvh;margin:0;padding:0;overflow:hidden}#root{width:100%;height:100dvh;margin:0;padding:0;overflow:hidden}.mobile-frame{width:100%;max-width:100%;height:100dvh;max-height:100dvh;box-shadow:none;border-radius:0;overflow:hidden}}.screen-base{background:var(--bg-cream);flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow-y:auto}.screen-base::-webkit-scrollbar{display:none}.mascot-container{justify-content:center;align-items:center;display:flex}.mascot-bee{object-fit:contain;mix-blend-mode:multiply;-webkit-user-select:none;user-select:none;width:112px;height:112px;animation:3s ease-in-out infinite beeFloat}@keyframes beeFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.screen-account-list{box-sizing:border-box;padding:34px 24px 28px}.screen-account-list .header-section{flex-direction:column;align-items:center;margin-bottom:24px;display:flex}.screen-account-list .app-title{color:var(--text-brown);letter-spacing:-.5px;text-align:center;margin-top:6px;font-size:32px;font-weight:800}.screen-account-list .app-subtitle{color:var(--text-gray);text-align:center;margin-top:4px;font-size:15px;font-weight:500}.account-cards-stack{flex-direction:column;gap:16px;width:100%;display:flex}.account-card-box{border:2px solid var(--card-border);cursor:pointer;background:#fff;border-radius:22px;align-items:center;gap:16px;padding:16px 20px;transition:all .2s;display:flex;position:relative;box-shadow:0 8px 24px #f59e0b14}.account-card-box:hover{border-color:#f59e0b;transform:translateY(-2px);box-shadow:0 12px 28px #f59e0b29}.account-card-box:active{transform:scale(.98)}.account-avatar-circle{width:52px;min-width:52px;height:52px;color:var(--text-brown);background:#fae1c8;border-radius:50%;justify-content:center;align-items:center;font-size:22px;font-weight:800;display:flex}.account-info-box{flex-direction:column;flex:1;display:flex}.account-student-name{color:var(--text-dark);font-size:20px;font-weight:800}.account-student-class{color:var(--text-gray);margin-top:2px;font-size:14px;font-weight:500}.account-delete-cross{color:#9c8e82;cursor:pointer;background:#f4ede4;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:700;transition:all .2s;display:flex;position:absolute;top:14px;right:14px}.account-delete-cross:hover{color:#ef4444;background:#fee2e2}.btn-add-account-pill{background:var(--primary-orange);color:#fff;cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;width:100%;height:54px;margin-top:24px;font-size:16px;font-weight:700;transition:all .2s;display:flex;box-shadow:0 8px 22px #ea8d2c59}.btn-add-account-pill:hover{background:#df7e1b;transform:translateY(-1px)}.btn-add-account-pill:active{transform:scale(.98)}.btn-add-account-pill.disabled{opacity:.6;box-shadow:none;cursor:not-allowed;background:#94a3b8}.screen-login{box-sizing:border-box;padding:2px 20px 10px;position:relative}.screen-login .login-topbar{z-index:10;align-items:center;height:32px;margin-bottom:0;display:flex;position:absolute;top:6px;left:12px}.btn-login-back{color:var(--text-brown);cursor:pointer;background:0 0;border:none;align-items:center;padding:4px;font-size:24px;font-weight:700;transition:transform .2s;display:flex}.btn-login-back:hover{transform:translate(-3px)}.screen-login .mascot-container{margin-top:0;padding-top:0}.screen-login .mascot-bee{object-fit:contain;mix-blend-mode:multiply;-webkit-user-select:none;user-select:none;width:104px;height:104px;animation:3s ease-in-out infinite beeFloat}.login-header-section{flex-direction:column;align-items:center;margin-bottom:6px;display:flex}.login-title{color:var(--text-brown);letter-spacing:-.4px;text-align:center;margin-top:2px;font-size:24px;font-weight:800}.login-subtitle{color:var(--text-gray);text-align:center;margin-top:1px;font-size:13.5px;font-weight:500}.login-form-area{flex-direction:column;gap:8px;display:flex}.input-email-pill{box-sizing:border-box;text-align:center;width:100%;height:48px;color:var(--text-brown);background:#fff;border:1.5px solid #dcd3c8;border-radius:999px;padding:0 16px;font-size:15px;font-weight:600;transition:border-color .2s,box-shadow .2s}.input-email-pill::placeholder{color:#9c8e82;text-align:center;font-weight:400}.input-email-pill:focus{border-color:#f59e0b;outline:none;box-shadow:0 0 0 3px #f59e0b26}.input-pin-pill{box-sizing:border-box;cursor:pointer;background:#fff;border:1.5px solid #dcd3c8;border-radius:999px;justify-content:center;align-items:center;gap:14px;width:100%;height:48px;transition:border-color .2s,box-shadow .2s;display:flex;position:relative}.input-pin-pill:focus-within,.input-pin-pill.focused{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b26}.pin-dot-circle{border-radius:50%;width:13px;height:13px;transition:all .2s}.pin-dot-circle.empty{border:2px solid var(--text-gray);background:0 0}.pin-dot-circle.filled{background:var(--text-brown);border:2px solid var(--text-brown);transform:scale(1.1)}.hidden-pin-input{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.btn-start-learning-pill{background:var(--primary-orange);color:#fff;cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;width:100%;height:48px;margin-top:0;font-size:15px;font-weight:700;transition:all .2s;display:flex;box-shadow:0 6px 18px #ea8d2c52}.btn-start-learning-pill:hover{background:#df7e1b}.btn-start-learning-pill:active{transform:scale(.98)}.login-error-msg{color:var(--danger);text-align:center;margin-top:2px;font-size:12.5px;font-weight:600;line-height:1.3}.login-keypad-grid{grid-template-columns:repeat(3,1fr);gap:10px;max-width:250px;margin-top:6px;margin-left:auto;margin-right:auto;display:grid}.keypad-num-btn{width:58px;height:58px;color:var(--text-brown);cursor:pointer;background:#fff;border:1.5px solid #ebd9c8;border-radius:50%;justify-content:center;align-items:center;margin:0 auto;font-size:20px;font-weight:700;transition:all .15s;display:flex;box-shadow:0 3px 8px #0000000a}.keypad-num-btn:hover{background:#fef3c7;border-color:#f59e0b}.keypad-num-btn:active{transform:scale(.94)}@media (height<=670px){.screen-login .mascot-bee{width:86px;height:86px}.input-email-pill,.input-pin-pill,.btn-start-learning-pill{height:44px}.keypad-num-btn{width:52px;height:52px;font-size:18px}.login-keypad-grid{gap:8px}}.screen-folder-list{background:var(--bg-cream)}.folder-topbar{justify-content:space-between;align-items:center;padding:22px 22px 10px;display:flex}.btn-folder-back{color:#c26b17;cursor:pointer;background:0 0;border:none;align-items:center;padding:4px;font-size:26px;font-weight:700;transition:transform .2s;display:flex}.btn-folder-back:hover{transform:translate(-3px)}.greeting-name-title{color:#c26b17;align-items:center;gap:6px;font-size:24px;font-weight:800;display:flex}.btn-logout-door{color:#c26b17;cursor:pointer;background:0 0;border:none;align-items:center;padding:4px;font-size:24px;transition:transform .2s;display:flex}.btn-logout-door:hover{transform:scale(1.1)}.folder-course-subtitle{text-align:center;color:#78716c;margin-top:4px;margin-bottom:22px;font-size:17px;font-weight:600}.folders-grid-2col{grid-template-columns:1fr 1fr;gap:16px;padding:0 20px 30px;display:grid}.physical-folder-card{cursor:pointer;flex-direction:column;transition:transform .2s,box-shadow .2s;display:flex;position:relative}.physical-folder-card:hover{transform:translateY(-4px)}.physical-folder-card .folder-tab-top{background:var(--tab-orange);border-top-left-radius:12px;border-top-right-radius:12px;width:58%;height:18px;margin-bottom:-1px}.physical-folder-card .folder-main-body{border:2.5px solid var(--tab-orange);background:#fff;border-top-right-radius:18px;border-bottom-right-radius:18px;border-bottom-left-radius:18px;flex-direction:column;padding:10px;display:flex;box-shadow:0 8px 24px #e88d2d24}.physical-folder-card .folder-thumb-box{background:#fdfaf4;border-radius:12px;justify-content:center;align-items:center;width:100%;height:110px;display:flex;overflow:hidden}.physical-folder-card .folder-thumb-img{object-fit:cover;width:100%;height:100%;display:block}.physical-folder-card .folder-title-text{color:var(--text-brown);margin-top:10px;margin-bottom:6px;font-size:15.5px;font-weight:800;line-height:1.25}.physical-folder-card .folder-lessons-pill{background:var(--badge-bg);color:var(--badge-text);border-radius:999px;align-self:flex-start;padding:4px 10px;font-size:12px;font-weight:700}.screen-lesson-list{background:var(--bg-cream)}.lesson-topbar-orange{background:linear-gradient(135deg,#e67e22 0%,#ea8d2c 100%);border-bottom-right-radius:26px;border-bottom-left-radius:26px;align-items:center;padding:18px 20px 22px;display:flex;box-shadow:0 8px 20px #ea8d2c33}.btn-lesson-back{color:#fff;cursor:pointer;background:0 0;border:none;align-items:center;margin-right:14px;font-size:26px;font-weight:700;transition:transform .2s;display:flex}.btn-lesson-back:hover{transform:translate(-3px)}.lesson-folder-heading{color:#fff;align-items:center;gap:8px;font-size:22px;font-weight:800;display:flex}.lessons-list-stack{flex-direction:column;align-content:start;gap:14px;padding:22px 18px 30px;display:flex}.lesson-item-card{cursor:pointer;background:#fff;border-radius:22px;align-items:center;gap:16px;padding:16px 18px;transition:all .2s;display:flex;box-shadow:0 6px 20px #ea8d2c14}.lesson-item-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px #ea8d2c29}.lesson-item-card:active{transform:scale(.98)}.lesson-num-circle{background:var(--primary-orange);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:44px;min-width:44px;height:44px;font-size:20px;font-weight:800;display:flex}.lesson-info-details{flex-direction:column;flex:1;display:flex}.lesson-topic-title{color:var(--text-brown);font-size:16.5px;font-weight:800}.lesson-topic-desc{color:var(--text-gray);margin-top:3px;font-size:13px;font-weight:500}.lesson-chevron-arrow{color:#cbd5e1;margin-left:auto;font-size:22px;font-weight:700}.screen-chat,.screen-base.screen-chat{background:#fdfaf4;flex-direction:column;width:100%;height:100dvh;max-height:100%;display:flex;position:relative;overflow:hidden!important}.chat-nav-header{z-index:10;background:#fff;border-bottom:1.5px solid #f1e9dd;flex-shrink:0;align-items:center;gap:12px;padding:14px 18px;display:flex}.btn-chat-back{color:var(--text-brown);cursor:pointer;background:0 0;border:none;align-items:center;padding:4px;font-size:24px;display:flex}.chat-nav-title{flex:1}.chat-lesson-name{color:var(--text-brown);font-size:15px;font-weight:800}.chat-online-badge{color:#10b981;align-items:center;gap:4px;font-size:12px;font-weight:600;display:flex}.btn-chat-finish{color:#ef4444;cursor:pointer;background:#fee2e2;border:none;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700}.chat-messages-area{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;flex-direction:column;flex:1;gap:14px;min-height:0;padding:16px;display:flex;overflow-y:auto}.chat-bubble-row{gap:10px;max-width:85%;display:flex}.chat-bubble-row.bot{align-self:flex-start}.chat-bubble-row.student{flex-direction:row-reverse;align-self:flex-end}.chat-bubble-content{border-radius:18px;padding:12px 16px;font-size:14.5px;line-height:1.45}.chat-bubble-row.bot .chat-bubble-content{color:var(--text-brown);background:#fff;border:1.5px solid #fed7aa;border-top-left-radius:4px}.repeat-sentence{color:#dc2626;letter-spacing:.2px;background:#fef2f2;border:1.5px solid #fca5a5;border-radius:12px;margin:10px 0 4px;padding:8px 14px;font-size:16.5px;font-weight:800;line-height:1.4;display:block;box-shadow:0 2px 8px #dc262614}.chat-bubble-row.student .chat-bubble-content{background:var(--primary-orange);color:#fff;border-top-right-radius:4px}.chat-bottom-controls{padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));z-index:10;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#fff;border-top:1.5px solid #f1e9dd;flex-direction:column;flex-shrink:0;align-items:center;gap:10px;display:flex;box-shadow:0 -4px 16px #00000008}.chat-mic-button{background:var(--primary-gradient);color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;width:72px;height:72px;transition:all .2s;display:flex;box-shadow:0 8px 24px #f59e0b66}.chat-mic-button.recording{background:#ef4444;animation:1.5s infinite pulseMic;box-shadow:0 0 0 10px #ef444440}.chat-mic-button.disabled{cursor:not-allowed;opacity:.92}.chat-mic-button.speaking{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);animation:1.6s ease-in-out infinite gentleBeePulse;box-shadow:0 0 0 6px #f59e0b40}@keyframes gentleBeePulse{0%,to{transform:scale(.97)}50%{transform:scale(1.03)}}@keyframes pulseMic{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.screen-end{text-align:center;box-sizing:border-box;flex-direction:column;align-items:center;height:100%;padding:40px 24px 30px;display:flex}.end-trophy-emoji{margin-bottom:12px;font-size:72px;animation:2.5s ease-in-out infinite beeFloat}.end-title-text{color:var(--text-brown);margin-bottom:6px;font-size:28px;font-weight:800}.end-subtitle-text{color:var(--text-gray);margin-bottom:28px;font-size:15px}.end-metrics-grid{grid-template-columns:1fr 1fr;gap:16px;width:100%;margin-bottom:34px;display:grid}.metric-stat-card{border:2px solid var(--card-border);background:#fff;border-radius:20px;padding:18px 12px;box-shadow:0 8px 20px #f59e0b14}.metric-val-num{color:#c26b17;font-size:26px;font-weight:800}.metric-lbl-text{color:var(--text-gray);margin-top:4px;font-size:13px;font-weight:600}.btn-goback-lessons{background:var(--primary-orange);color:#fff;cursor:pointer;border:none;border-radius:999px;width:100%;height:54px;margin-top:auto;font-size:16px;font-weight:700;transition:all .2s;box-shadow:0 8px 22px #ea8d2c59}.btn-goback-lessons:hover{background:#df7e1b}.modal-dim-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;background:#0009;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.modal-dialog-card{text-align:center;background:#fff;border-radius:24px;width:100%;max-width:320px;padding:24px;box-shadow:0 20px 40px #0000004d}.modal-dialog-title{color:var(--text-brown);margin-bottom:8px;font-size:18px;font-weight:800}.modal-dialog-body{color:var(--text-gray);margin-bottom:20px;font-size:14px;line-height:1.5}.modal-actions-row{gap:12px;display:flex}.btn-dialog-cancel{height:44px;color:var(--text-gray);cursor:pointer;background:#fff;border:1.5px solid #e2dcd5;border-radius:999px;flex:1;font-size:14px;font-weight:700}.btn-dialog-confirm{background:var(--primary-orange);color:#fff;cursor:pointer;border:none;border-radius:999px;flex:1;height:44px;font-size:14px;font-weight:700}.chat-image-wrap{cursor:zoom-in;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin-top:10px;line-height:0;position:relative}.chat-bubble-image{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;background:#fff7ed;border:1.5px solid #fed7aa;border-radius:12px;width:100%;max-width:260px;transition:transform .15s,box-shadow .15s;display:block}.chat-image-wrap:hover .chat-bubble-image{transform:scale(1.02);box-shadow:0 6px 18px #c26b1740}.chat-image-zoom-hint{color:#fff;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#0000008c;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;line-height:1.3;position:absolute;bottom:8px;right:8px}.lightbox-backdrop{z-index:2000;background:#140e08eb;flex-direction:column;animation:.18s lightbox-fade-in;display:flex;position:fixed;inset:0}@keyframes lightbox-fade-in{0%{opacity:0}to{opacity:1}}.lightbox-toolbar{flex-shrink:0;justify-content:center;align-items:center;gap:10px;padding:14px 16px 8px;display:flex}.lightbox-btn{color:#fff;cursor:pointer;background:#ffffff29;border:none;border-radius:999px;min-width:44px;height:44px;padding:0 14px;font-size:22px;font-weight:700;transition:background .15s,transform .1s}.lightbox-btn:hover:not(:disabled){background:#ffffff47}.lightbox-btn:active:not(:disabled){transform:scale(.94)}.lightbox-btn:disabled{opacity:.35;cursor:not-allowed}.lightbox-btn-reset{min-width:64px;font-size:14px}.lightbox-btn-close{background:var(--primary-orange);font-size:18px}.lightbox-stage{touch-action:pan-x pan-y;flex:1;min-height:0;padding:8px 16px 24px;display:flex;overflow:auto}.lightbox-image{object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;cursor:zoom-in;background:#fff;border-radius:12px;max-width:100%;max-height:100%;margin:auto}.chat-video-wrap{aspect-ratio:16/9;background:#000;border:1.5px solid #fed7aa;border-radius:12px;width:260px;max-width:100%;margin-top:10px;position:relative;overflow:hidden}.chat-video-wrap iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.chat-video-link{background:var(--primary-orange);color:#fff;border-radius:999px;margin-top:10px;padding:8px 16px;font-size:13px;font-weight:700;text-decoration:none;display:inline-block}@media (width>=641px){.screen-account-list{flex-direction:column;justify-content:center;width:100%;max-width:520px;margin:auto;padding:36px 24px;display:flex}.account-cards-stack{flex-direction:column;gap:16px;width:100%;display:flex}.account-card-box{box-sizing:border-box;width:100%;height:84px}.btn-add-account-pill{max-width:320px;margin:24px auto 0}.screen-login{background:#fff;border-radius:28px;width:100%;max-width:460px;margin:auto;padding:32px 36px 36px;box-shadow:0 16px 40px #ea8d2c1f}.screen-login .login-topbar{height:auto;margin-bottom:8px;position:static}.screen-login .mascot-bee{width:108px;height:108px}.login-title{font-size:26px}.login-keypad-grid{gap:12px;max-width:260px}.folder-topbar{width:100%;max-width:1020px;margin:0 auto;padding:28px 36px 12px}.greeting-name-title{font-size:28px}.folder-course-subtitle{margin-bottom:24px;font-size:18px}.folders-grid-2col{grid-template-columns:repeat(3,1fr);grid-auto-rows:max-content;align-content:start;align-items:start;gap:22px;width:100%;max-width:1020px;margin:0 auto;padding:0 36px 40px}.lesson-topbar-orange{border-bottom-right-radius:28px;border-bottom-left-radius:28px;width:100%;max-width:1020px;margin:0 auto;padding:24px 36px}.lesson-folder-heading{font-size:24px}.lessons-list-stack{grid-template-columns:repeat(2,1fr);grid-auto-rows:max-content;align-content:start;align-items:start;gap:18px;width:100%;max-width:1020px;margin:0 auto;padding:30px 36px 40px;display:grid}.lesson-item-card{padding:18px 22px}.lesson-topic-title{font-size:18px}.screen-chat,.screen-base.screen-chat{background:#fff;flex-direction:column;width:100%;max-width:900px;height:100%;margin:0 auto;display:flex;box-shadow:0 0 40px #0000000a;overflow:hidden!important}.chat-nav-header{flex-shrink:0;padding:18px 28px}.chat-lesson-name{font-size:17px}.chat-messages-area{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;flex:1;gap:18px;min-height:0;padding:24px 32px;overflow-y:auto}.chat-bubble-row{max-width:78%}.chat-bubble-content{border-radius:20px;padding:16px 20px;font-size:16px;line-height:1.55}.chat-bubble-image{border-radius:16px;width:auto;max-width:100%;max-height:380px}.chat-video-wrap{border-radius:16px;width:440px;max-width:100%}.chat-bottom-controls{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex-shrink:0;padding:16px 32px 24px}.chat-mic-button{width:76px;height:76px}.screen-end{width:100%;max-width:580px;margin:auto;padding:40px}.end-trophy-emoji{font-size:72px}.end-title-text{font-size:32px}.end-metrics-grid{gap:20px;margin:32px 0 36px}.metric-stat-card{padding:24px 20px}.metric-val-num{font-size:32px}.btn-goback-lessons{max-width:360px;margin:0 auto}}@media (width>=960px){.folders-grid-2col{grid-template-columns:repeat(4,1fr);gap:24px}}