*{box-sizing:border-box;margin:0;padding:0}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;color:#1a1a1a;background-color:#fafafa;overflow-x:hidden}#root{min-height:100vh}a{color:#374151;text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit;cursor:pointer}button:focus{outline:2px solid #4b5563;outline-offset:2px}.splash-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:1;transition:opacity .5s ease-out}.splash-screen.fade-out{opacity:0;pointer-events:none}.splash-content{text-align:center;animation:fadeInUp .8s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.splash-logo-container{width:180px;height:180px;margin:0 auto 2rem;border-radius:50%;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;box-shadow:0 20px 60px #0000004d,inset 0 0 30px #ffffff1a;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 20px 60px #0000004d,inset 0 0 30px #ffffff1a}50%{transform:scale(1.05);box-shadow:0 25px 80px #0006,inset 0 0 40px #ffffff26}}.splash-logo{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}.splash-title-wrapper{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:.5rem}.splash-brand{font-size:.875rem;font-weight:600;color:#fffc;letter-spacing:3px;text-transform:uppercase;margin-bottom:-4px}.splash-title{margin:0;font-size:3rem;font-weight:800;color:#fff;letter-spacing:-.02em;text-shadow:0 4px 20px rgba(0,0,0,.3)}.splash-subtitle{margin:0 0 2.5rem;font-size:1.125rem;color:#ffffffb3;font-weight:500;letter-spacing:.05em}.splash-loading{width:200px;height:4px;background:#fff3;border-radius:2px;margin:0 auto;overflow:hidden}.splash-loading-bar{width:100%;height:100%;background:linear-gradient(90deg,#e94560,#ff6b6b,#e94560);background-size:200% 100%;border-radius:2px;animation:loading 2s ease-in-out forwards}@keyframes loading{0%{transform:translate(-100%)}to{transform:translate(0)}}.splash-credit{margin-top:3rem;font-size:.875rem;color:#ffffff80;font-weight:400;letter-spacing:.05em}@media(max-width:768px){.splash-logo-container{width:140px;height:140px}.splash-logo{width:90px;height:90px}.splash-brand{font-size:.75rem;letter-spacing:2px}.splash-title{font-size:2.25rem}.splash-subtitle{font-size:1rem;padding:0 1rem}.splash-loading{width:160px}.splash-credit{font-size:.75rem;margin-top:2rem}}.browser-check-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10001;padding:20px;animation:fadeIn .3s ease-in-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.browser-check-card{background:#fff;border-radius:20px;padding:32px 28px;max-width:440px;width:100%;box-shadow:0 20px 60px #0000004d;animation:slideUp .4s ease-out}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.browser-check-icon{width:64px;height:64px;margin:0 auto 20px;color:#f59e0b;animation:pulse 2s ease-in-out infinite}.browser-check-icon svg{width:100%;height:100%}.browser-check-title{font-size:24px;font-weight:700;text-align:center;margin-bottom:20px;color:#1f2937}.browser-check-content{margin-bottom:24px}.browser-check-description{text-align:center;color:#4b5563;margin-bottom:20px;line-height:1.6;font-size:15px}.browser-check-description strong{color:#1f2937;font-weight:700}.browser-check-features{background:#f9fafb;border-radius:12px;padding:16px;margin-bottom:16px}.browser-check-feature{display:flex;align-items:center;gap:12px;padding:8px 0;color:#374151;font-size:14px}.feature-icon{font-size:20px;width:28px;text-align:center}.browser-check-note{background:#fef3c7;border-left:4px solid #f59e0b;padding:12px 16px;border-radius:8px;font-size:13px;color:#78350f;line-height:1.5;margin:0}.browser-check-actions{display:flex;flex-direction:column;gap:12px}.browser-check-primary-btn{width:100%;padding:14px;background:linear-gradient(135deg,#4285f4,#34a853);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #4285f466}.browser-check-primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #4285f480}.browser-check-primary-btn:active{transform:translateY(0)}.browser-check-secondary-btn{width:100%;padding:12px;background:transparent;color:#6b7280;border:none;font-size:14px;cursor:pointer;transition:color .2s}.browser-check-secondary-btn:hover{color:#374151}@media(max-width:480px){.browser-check-card{padding:28px 24px}.browser-check-title{font-size:20px}.browser-check-description{font-size:14px}.browser-check-icon{width:56px;height:56px}}body.in-chat .navigation,body.in-chat .mobile-header,.mobile-header{display:none}.navigation{background:linear-gradient(135deg,#1e3a8a,#1e293b);color:#fff;padding:.75rem 0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;position:sticky;top:0;z-index:100}.nav-container{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:center;gap:2rem}.nav-logo{display:flex;align-items:center;gap:1rem;cursor:pointer;transition:transform .2s ease}.nav-logo:hover{transform:translateY(-2px)}.logo-image{width:44px;height:44px;object-fit:contain;background:#fffffff2;border-radius:10px;padding:4px;box-shadow:0 2px 8px #0003;transition:all .3s ease}.nav-logo:hover .logo-image{transform:scale(1.08);box-shadow:0 4px 12px #ffd70066}.logo-text{display:flex;flex-direction:column;align-items:flex-start;gap:0}.logo-brand{font-size:.5rem;font-weight:600;color:#fffc;letter-spacing:2px;text-transform:uppercase;margin-bottom:-2px}.logo-title{font-size:1.5rem;font-weight:700;margin:0;background:linear-gradient(135deg,gold,#ffed4e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.5px}.logo-subtitle{font-size:.75rem;margin:0;color:#fffc;font-weight:400}.nav-menu{display:flex;gap:.5rem;align-items:center}.nav-item{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background:#ffffff1a;border:2px solid transparent;border-radius:8px;color:#fff;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.nav-item:hover{background:#fff3;border-color:#ffd70080;transform:translateY(-2px);box-shadow:0 4px 12px #ffd7004d}.nav-item.active{background:linear-gradient(135deg,gold,#ffed4e);color:#1e3a8a;border-color:gold;font-weight:600;box-shadow:0 4px 12px #ffd70066}.nav-item.active:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ffd70080}.nav-icon{width:20px;height:20px;stroke-width:2.5px}.nav-item.active .nav-icon{color:#1e3a8a}.nav-item.settings-btn{background:#ffffff26;border:2px solid rgba(255,255,255,.2)}.nav-item.settings-btn:hover{background:#ffffff40;border-color:#fff6;box-shadow:0 4px 12px #fff3}.nav-quest-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;background:#ef4444;color:#fff;border-radius:9px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}.nav-quest-badge.completed{background:#22c55e;animation:quest-complete-pulse 2s ease-in-out infinite}@keyframes quest-complete-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.nav-item{position:relative}@media(max-width:768px){.nav-container{flex-direction:row;gap:.75rem;padding:.5rem 1rem;justify-content:space-between}.nav-logo{gap:.5rem}.logo-text{display:flex}.logo-brand{font-size:.4rem}.logo-title{font-size:1rem}.logo-subtitle{display:none}.logo-image{width:32px;height:32px;padding:2px;border-radius:6px}.nav-menu{width:auto;gap:.25rem}.nav-item{padding:.5rem .6rem;font-size:.8rem}.nav-item span{display:none}.nav-icon{width:20px;height:20px}}@media(max-width:480px){.mobile-header{display:flex;align-items:center;gap:.625rem;padding:.625rem 1rem;background:linear-gradient(135deg,#1e3a8a,#1e293b);position:sticky;top:0;z-index:100;cursor:pointer}.mobile-header-logo{width:32px;height:32px;object-fit:contain;background:#fffffff2;border-radius:6px;padding:2px}.mobile-header-text{display:flex;flex-direction:column;gap:0}.mobile-header-brand{font-size:.5rem;font-weight:600;color:#fffc;letter-spacing:1.5px;text-transform:uppercase;line-height:1}.mobile-header-title{font-size:1.125rem;font-weight:700;margin:0;background:linear-gradient(135deg,gold,#ffed4e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.navigation{position:fixed;inset:auto 0 0;padding:0;background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 -4px 12px #00000014;z-index:1000}.nav-container{padding:.5rem 0;gap:0;justify-content:center}.nav-logo{display:none}.nav-menu{width:100%;display:flex;justify-content:space-around;gap:0}.nav-item{flex:1;flex-direction:column;gap:.25rem;padding:.5rem .25rem;background:transparent;border-radius:0;color:#6b7280;font-size:.625rem;border:none}.nav-item span{display:block}.nav-item:hover{background:transparent;transform:none;box-shadow:none;color:#1e3a8a}.nav-item.active{background:transparent;color:#1e3a8a;box-shadow:none}.nav-item.active .nav-icon{color:#1e3a8a}.nav-icon{width:24px;height:24px;stroke:currentColor}.nav-item.settings-btn{background:transparent;border:none}.nav-item.settings-btn:hover{background:transparent;box-shadow:none}.nav-quest-badge{top:2px;right:6px}body.in-chat .mobile-header,body.in-chat .navigation{display:none}}.footer{background:linear-gradient(135deg,#1e3a8a,#1e293b);color:#fff;padding:3rem 0 1rem;margin-top:auto}.footer-container{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem}.footer-section{display:flex;flex-direction:column;gap:.75rem}.footer-title-wrapper{display:flex;flex-direction:column;align-items:flex-start;gap:0}.footer-brand{font-size:.5rem;font-weight:600;color:#fffc;letter-spacing:2px;text-transform:uppercase;margin-bottom:-2px}.footer-title{font-size:1.5rem;font-weight:700;margin:0;background:linear-gradient(135deg,gold,#ffed4e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.footer-description{font-size:.875rem;line-height:1.6;color:#fffc;margin:0}.footer-heading{font-size:1rem;font-weight:600;margin:0 0 .5rem;color:gold}.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.footer-links li{font-size:.875rem;color:#ffffffb3;transition:color .2s ease}.footer-links a{color:#ffffffb3;text-decoration:none;transition:color .2s ease}.footer-links li:hover,.footer-links a:hover{color:gold;cursor:pointer}.footer-info{font-size:.875rem;line-height:1.6;color:#ffffffb3;margin:0}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.5rem 1.5rem 0;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.footer-copyright,.footer-credits,.footer-author{font-size:.813rem;color:#fff9;margin:0}.footer-author{font-style:italic;color:#ffd700cc}@media(max-width:768px){.footer{padding:2rem 0 1rem}.footer-container{grid-template-columns:repeat(2,1fr);gap:1.5rem;padding:0 1rem}.footer-bottom{flex-direction:column;text-align:center;padding:1rem 1rem 0}}@media(max-width:480px){.footer-container{grid-template-columns:1fr}}.book-card{background:#fff;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;display:flex;flex-direction:row;height:250px;position:relative}.book-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px -4px #00000026,0 8px 16px -4px #0000001a}.book-card.completed{border:2px solid #10b981}.book-card.completed:after{content:"학습 완료";position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-size:.625rem;font-weight:700;padding:.25rem .5rem;border-radius:4px;z-index:10}.book-card-cover{width:140px;min-width:140px;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.book-card-cover .completed-badge{position:absolute;bottom:8px;right:8px;width:32px;height:32px;background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:5;box-shadow:0 2px 8px #10b98166}.book-card-cover .completed-badge svg{width:18px;height:18px;color:#fff}.learning-progress-bar{position:absolute;bottom:0;left:140px;right:0;background:#fffffff2;padding:.375rem .625rem;border-top:1px solid #e2e8f0}.progress-compact{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.progress-item{display:flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:700;padding:.125rem .375rem;border-radius:4px}.progress-item.reading{color:#1e40af;background:#3b82f61a}.progress-item.speaking{color:#065f46;background:#10b9811a}.book-card-cover:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#0000001a)}.default-book-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;position:relative;z-index:1}.book-initial{font-size:3rem;font-weight:700;color:#fffffff2;text-shadow:0 2px 8px rgba(0,0,0,.2);font-family:Georgia,serif}.book-card-icon{width:40px;height:40px;position:relative;z-index:1;opacity:.7}.book-card-image{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}.book-card-content{padding:1rem 1.25rem 2.5rem;display:flex;flex-direction:column;gap:.75rem;flex:1;overflow:hidden}.book-card-header{display:flex;flex-direction:column;gap:.375rem}.book-card-title{margin:0;font-size:1.125rem;font-weight:700;color:#1e3a8a;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.book-card-title-korean{margin:0;font-size:.813rem;color:#6b7280;line-height:1.4;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.book-card-meta{display:flex;flex-wrap:wrap;gap:.375rem}.card-meta-item{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background:#f3f4f6;border-radius:6px;font-size:.688rem;font-weight:500;color:#4b5563;white-space:nowrap}.card-meta-icon{width:11px;height:11px;stroke-width:2px;flex-shrink:0}.card-meta-item.difficulty{font-weight:600}.card-meta-item.difficulty.easy{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46}.card-meta-item.difficulty.medium{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e}.card-meta-item.difficulty.hard{background:linear-gradient(135deg,#fecaca,#fca5a5);color:#991b1b}.book-card-stats{display:flex;gap:.625rem;padding-top:.625rem;border-top:1px solid #e5e7eb;margin-top:auto;margin-bottom:.5rem}.stat-item{display:inline-flex;align-items:center;gap:.313rem;font-size:.75rem;color:#6b7280;font-weight:500}.stat-icon{width:13px;height:13px;stroke-width:2px;flex-shrink:0}@media(max-width:768px){.book-card{height:auto;min-height:200px}.book-card-cover{width:120px;min-width:120px}.book-card-icon{width:48px;height:48px}.book-card-content{padding:.875rem 1rem 2.25rem;gap:.625rem}.book-card-title{font-size:1rem}.book-card-title-korean{font-size:.75rem}.card-meta-item{font-size:.625rem;padding:.188rem .438rem}.card-meta-icon{width:10px;height:10px}.stat-item{font-size:.688rem}.stat-icon{width:12px;height:12px}.learning-progress-bar{left:120px}}@media(max-width:480px){.book-card{height:auto;min-height:180px}.book-card-cover{width:100px;min-width:100px}.book-card-icon{width:40px;height:40px}.book-card-content{padding:.75rem .875rem 2.5rem;gap:.5rem}.book-card-title{font-size:.938rem}.book-card-stats{flex-direction:row;flex-wrap:wrap;gap:.375rem;margin-bottom:.75rem}.stat-item{font-size:.65rem}.learning-progress-bar{left:100px}}.loading-screen{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.loading-content{text-align:center;max-width:420px;width:100%;padding:0 1rem}.loading-icon{margin-bottom:1.5rem}.loading-icon-emoji{font-size:4rem;display:inline-block;animation:bookBounce 1.5s ease-in-out infinite}@keyframes bookBounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.05)}}.loading-message{margin-bottom:1.5rem}.loading-message h2{font-size:1.35rem;color:#1e3a8a;margin:0 0 .5rem;font-weight:700}.loading-submessage{color:#64748b;font-size:.9rem;margin:0;line-height:1.5}.server-waking-message{margin-top:1rem;padding:.75rem 1rem;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:12px;color:#92400e;font-size:.85rem;font-weight:500;line-height:1.5;animation:pulseGlow 2s ease-in-out infinite}.elapsed-time{display:inline-block;margin-top:.25rem;font-size:.75rem;color:#a16207;opacity:.8}@keyframes pulseGlow{0%,to{box-shadow:0 0 #fbbf2466}50%{box-shadow:0 0 0 6px #fbbf2400}}.loading-quote{background:#fff;padding:1.25rem 1.5rem;border-radius:16px;box-shadow:0 4px 20px #00000014;margin-bottom:1.25rem;text-align:left}.quote-text{font-size:1rem;color:#334155;line-height:1.6;margin:0 0 .5rem;font-style:italic}.quote-translation{font-size:.85rem;color:#64748b;margin:0 0 .5rem;line-height:1.5}.quote-author{font-size:.8rem;color:#94a3b8;margin:0;font-weight:500;text-align:right}.loading-tip{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#fef3c7,#fde68a);padding:.6rem 1rem;border-radius:50px;margin-bottom:1.25rem}.tip-icon{font-size:1rem;flex-shrink:0}.tip-text{font-size:.85rem;color:#92400e;font-weight:500}.loading-progress{max-width:280px;margin:0 auto}.loading-progress-bar{height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden}.loading-progress-fill{height:100%;width:30%;background:linear-gradient(90deg,#3b82f6,#1e3a8a);border-radius:2px;animation:progressSlide 1.5s ease-in-out infinite}@keyframes progressSlide{0%{transform:translate(-100%);width:30%}50%{transform:translate(150%);width:50%}to{transform:translate(400%);width:30%}}@media(max-width:768px){.loading-screen{padding:1.5rem 1rem;min-height:50vh}.loading-icon-emoji{font-size:3.5rem}.loading-message h2{font-size:1.2rem}.loading-submessage{font-size:.85rem}.quote-text{font-size:.95rem}.loading-quote{padding:1rem 1.25rem}}@media(max-width:480px){.loading-icon-emoji{font-size:3rem}.loading-message h2{font-size:1.1rem}.quote-text{font-size:.9rem}.quote-translation,.tip-text{font-size:.8rem}.loading-tip{padding:.5rem .875rem}}.book-list-container{max-width:1200px;margin:0 auto;padding:2rem}.filter-section{margin-bottom:2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.filter-section label{font-weight:600;color:#374151}.filter-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.filter-buttons button{padding:.625rem 1.5rem;border:2px solid #d1d5db;background:#fff;border-radius:8px;cursor:pointer;font-weight:600;color:#4b5563;transition:all .3s ease;box-shadow:0 1px 3px #0000001a}.filter-buttons button:hover{border-color:#1e3a8a;color:#1e3a8a;transform:translateY(-2px);box-shadow:0 4px 8px #1e3a8a33}.filter-buttons button.active{background:linear-gradient(135deg,#1e3a8a,#1e293b);border-color:#1e3a8a;color:#fff;box-shadow:0 4px 12px #1e3a8a4d}.books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem}.no-books{text-align:center;padding:3rem;color:#9ca3af;font-size:1.1rem}@media(max-width:768px){.book-list-container{padding:1rem}.book-list-header h1{font-size:2rem}.books-grid{grid-template-columns:1fr}}.book-reader{max-width:900px;width:100%;margin:0 auto;padding:2rem;overflow-x:hidden}.reader-header{background:#fff;border-radius:12px;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.reader-header-inner{display:flex;flex-direction:column;gap:1.5rem}.book-info-section{display:flex;gap:1.5rem;align-items:flex-start}.book-cover{width:120px;height:160px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 10px 25px #00000026;position:relative;overflow:hidden}.book-cover:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#0000001a)}.book-icon{width:48px;height:48px;position:relative;z-index:1}.book-cover-image{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}.book-info{flex:1;min-width:0}.book-info h1{margin:0 0 .5rem;font-size:1.875rem;font-weight:700;color:#1e3a8a;letter-spacing:-.025em;line-height:1.2}.book-title-korean{margin:0 0 1rem;color:#6b7280;font-size:.938rem;font-weight:500;line-height:1.5}.book-meta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem}.meta-item{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;background:#f3f4f6;border-radius:6px;font-size:.813rem;font-weight:500;color:#4b5563;white-space:nowrap}.meta-icon{width:14px;height:14px;stroke-width:2px;flex-shrink:0}.meta-item.difficulty{font-weight:600}.meta-item.difficulty.easy{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46}.meta-item.difficulty.medium{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e}.meta-item.difficulty.hard{background:linear-gradient(135deg,#fecaca,#fca5a5);color:#991b1b}.author-info{margin:0;color:#6b7280;font-size:1rem;font-weight:500}.reader-controls{display:flex;gap:.75rem;align-items:center;justify-content:center;flex-wrap:wrap}.mode-switch-button{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border:2px solid transparent;border-radius:8px;cursor:pointer;font-weight:600;font-size:.875rem;transition:all .3s ease;box-shadow:0 2px 4px #0000001a;color:#fff}.mode-icon{width:18px;height:18px;stroke-width:2.5px}.mode-switch-button.speaking{background:linear-gradient(135deg,#10b981,#059669)}.mode-switch-button.speaking:hover{transform:translateY(-2px);box-shadow:0 4px 12px #10b98166;border-color:#10b981}.font-size-control{display:flex;align-items:center;gap:.5rem;background:#fff;border:2px solid #d1d5db;border-radius:8px;padding:.375rem .75rem}.font-size-control button{background:none;border:none;cursor:pointer;font-weight:700;font-size:.875rem;color:#4b5563;padding:.25rem .5rem;border-radius:4px;transition:all .2s ease}.font-size-control button:hover{background:#f3f4f6;color:#1e3a8a}.font-size-control span{font-size:.813rem;font-weight:600;color:#6b7280;min-width:40px;text-align:center}.bookmark-button{padding:.625rem 1rem;background:#fff;border:2px solid #d1d5db;border-radius:8px;cursor:pointer;font-size:1.25rem;transition:all .3s ease;box-shadow:0 2px 4px #0000001a}.bookmark-button:hover{border-color:gold;transform:translateY(-2px);box-shadow:0 4px 12px #ffd7004d}.bookmark-button.bookmarked{background:linear-gradient(135deg,gold,#ffed4e);border-color:gold;color:#1e3a8a}.chapter-navigation{display:flex;gap:1rem;align-items:center;justify-content:space-between;background:#fff;padding:1.25rem 1.5rem;border-radius:12px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a}.chapter-navigation button{padding:.625rem 1.25rem;background:linear-gradient(135deg,#1e3a8a,#1e293b);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:.875rem;transition:all .3s ease;box-shadow:0 2px 4px #00000026}.chapter-navigation button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #1e3a8a4d}.chapter-navigation button:disabled{background:#e5e7eb;color:#9ca3af;cursor:not-allowed;box-shadow:none}.chapter-info-wrapper{flex:1;display:flex;flex-direction:column;gap:.5rem;align-items:center}.chapter-info{font-weight:600;color:#1e3a8a;font-size:.875rem}.progress-bar{width:100%;max-width:300px;height:8px;background:#e5e7eb;border-radius:100px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(135deg,#10b981,#059669);transition:width .3s ease;border-radius:100px}.progress-text{font-size:.75rem;color:#6b7280;font-weight:500}.reader-content{background:#fff;padding:3rem;border-radius:12px;box-shadow:0 2px 4px #0000001a;margin-bottom:2rem;width:100%;overflow-x:hidden}.chapter-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:3px solid #ffd700}.chapter-title{margin:0;font-size:1.75rem;font-weight:700;color:#1e3a8a;display:flex;align-items:center;gap:.75rem}.chapter-title .reading-completed-badge{font-size:.75rem;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:.25rem .75rem;border-radius:100px;font-weight:600}.mark-completed-btn{padding:.625rem 1.25rem;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s ease;white-space:nowrap}.mark-completed-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.translation-hint{background:linear-gradient(135deg,#eff6ff,#dbeafe);padding:1rem 1.5rem;border-radius:8px;margin-bottom:2rem;text-align:center;font-size:.875rem;color:#1e3a8a;font-weight:500;border:2px solid #bfdbfe}.chapter-text{line-height:1.8;color:#374151;overflow-wrap:break-word;word-break:break-word}.paragraph-container{margin-bottom:2rem;background:#fff;border-radius:12px;padding:1.5rem;border:2px solid #e5e7eb;transition:all .3s ease}.paragraph-container:hover{border-color:#3b82f6;box-shadow:0 4px 12px #3b82f61a}.paragraph-wrapper{display:flex;align-items:flex-start;gap:1rem;position:relative}.paragraph{margin:0;padding:0;line-height:1.8;color:#1f2937;flex:1}.paragraph.clickable{cursor:pointer;transition:all .2s ease;padding:.5rem;border-radius:8px;margin:-.5rem}.paragraph.clickable:hover{background:#f9fafb;color:#1e3a8a}.speaker-icon{flex-shrink:0;width:40px;height:40px;border:none;background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 2px 4px #3b82f64d}.speaker-icon:hover{transform:scale(1.1);box-shadow:0 4px 12px #3b82f666}.speaker-icon.playing{background:linear-gradient(135deg,#ef4444,#dc2626);animation:speaker-pulse 1.5s ease-in-out infinite}.speaker-icon svg{width:24px;height:24px;stroke:#fff;stroke-width:2px}@keyframes speaker-pulse{0%,to{box-shadow:0 2px 4px #ef44444d}50%{box-shadow:0 4px 16px #ef444499}}.paragraph-translation{background:linear-gradient(135deg,#fef3c7,#fde68a);padding:1.25rem;border-radius:8px;margin-top:1rem;border-left:4px solid #fbbf24;overflow-wrap:break-word;word-break:break-word}.paragraph-translation p{margin:0;color:#78350f;font-size:.9375rem;line-height:1.7;font-weight:500}.translating{color:#92400e;font-style:italic;opacity:.7}.pronunciation-recording{background:linear-gradient(135deg,#fef3c7,#fde68a);padding:1rem;border-radius:8px;margin-top:1rem;border-left:4px solid #f59e0b}.interim-text{margin:.75rem 0 0;color:#78350f;font-size:.875rem;font-style:italic}.pronunciation-result{background:#fff;border-radius:12px;padding:1.5rem;margin-top:1rem;border:2px solid #10b981;box-shadow:0 4px 12px #10b9811a;position:relative}.score-section{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:2px solid #e5e7eb}.score-value{font-size:2.5rem;font-weight:800;color:#fff;line-height:1}.feedback-section{margin-bottom:1.5rem}.feedback-section h4{margin:0 0 .75rem;font-size:1rem;font-weight:700;color:#1f2937}.feedback-section p{margin:0;color:#4b5563;line-height:1.7;font-size:.9375rem}.word-analysis h4{margin:0 0 .75rem;font-size:1rem;font-weight:700;color:#1f2937}.words-grid{display:flex;flex-wrap:wrap;gap:.5rem}.word-badge{padding:.5rem .875rem;border-radius:6px;font-weight:600;font-size:.875rem;transition:all .2s ease}.word-badge.correct{background:#d1fae5;color:#065f46;border:2px solid #10b981}.word-badge.incorrect{background:#fee2e2;color:#991b1b;border:2px solid #ef4444}.word-badge.missing{background:#fef3c7;color:#92400e;border:2px solid #f59e0b;opacity:.6}.word-badge.extra{background:#e0e7ff;color:#3730a3;border:2px solid #6366f1}.analyzing-overlay{position:absolute;inset:0;background:#fffffff2;border-radius:12px;display:flex;align-items:center;justify-content:center;z-index:10}.analyzing-overlay p{font-weight:600;color:#1f2937;font-size:1rem}.chapters-section{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 2px 4px #0000001a;margin-bottom:1.5rem}.chapters-section h3{margin:0 0 1rem;font-size:1.25rem;font-weight:700;color:#1e3a8a}.chapter-list{display:flex;flex-direction:column;gap:.5rem}.chapter-item{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;text-align:left;font-weight:500;color:#4b5563;transition:all .2s ease}.chapter-item:hover{border-color:#3b82f6;background:#eff6ff;color:#1e3a8a;transform:translate(4px)}.chapter-item.current{border-color:#3b82f6;background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1e3a8a;font-weight:600}.chapter-item.completed{border-color:#10b981}.chapter-item.completed .chapter-status{color:#10b981}.chapter-status{font-size:1rem;flex-shrink:0;width:24px;text-align:center;color:#d1d5db}.chapter-name{flex:1}.bookmarks-section{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 2px 4px #0000001a}.bookmarks-section h3{margin:0 0 1rem;font-size:1.25rem;font-weight:700;color:#1e3a8a}.bookmark-list{display:flex;flex-direction:column;gap:.5rem}.bookmark-item{display:flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem;background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;text-align:left;font-weight:500;color:#4b5563;transition:all .2s ease}.bookmark-item:hover{border-color:gold;background:#fffbeb;color:#1e3a8a;transform:translate(4px)}.bookmark-item.completed{border-color:#10b981}.bookmark-check{color:#10b981;font-weight:700}@media(max-width:768px){.book-reader{padding:1rem}.reader-header{padding:1.5rem}.book-info-section{flex-direction:column;align-items:center;text-align:center}.book-cover{width:100px;height:133px}.book-icon{width:40px;height:40px}.book-info h1{font-size:1.5rem}.book-title-korean{font-size:.875rem}.book-meta{justify-content:center;gap:.5rem}.meta-item{padding:.313rem .625rem;font-size:.75rem}.meta-icon{width:12px;height:12px}.reader-controls{gap:.5rem}.mode-switch-button span{display:none}.chapter-navigation{padding:1rem;gap:.5rem}.chapter-navigation button{padding:.5rem .875rem;font-size:.813rem}.reader-content{padding:1.5rem}.chapter-title{font-size:1.375rem}.translation-hint{font-size:.75rem;padding:.75rem 1rem}.paragraph-container{padding:1rem}.paragraph-wrapper{gap:.75rem}.speaker-icon{width:36px;height:36px}.speaker-icon svg{width:20px;height:20px}}@media(max-width:480px){.font-size-control span{min-width:35px}.chapter-info-wrapper{min-width:0}.progress-bar{max-width:150px}}.tts-control-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:12px;margin-bottom:1.5rem;border:2px solid #bae6fd;flex-wrap:wrap}.tts-buttons{display:flex;gap:.5rem}.tts-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:.875rem;transition:all .3s ease;box-shadow:0 2px 4px #0000001a}.tts-btn svg{width:20px;height:20px}.tts-btn.play{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.tts-btn.play:hover{transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.tts-btn.stop{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;animation:tts-pulse 1.5s ease-in-out infinite}.tts-btn.stop:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ef444466}@keyframes tts-pulse{0%,to{box-shadow:0 2px 4px #ef44444d}50%{box-shadow:0 4px 16px #ef444499}}.tts-speed-control{display:flex;align-items:center;gap:.75rem;color:#1e3a8a;font-size:.875rem;font-weight:500}.tts-speed-control label{color:#64748b}.tts-speed-control input[type=range]{width:100px;height:6px;-webkit-appearance:none;appearance:none;background:#cbd5e1;border-radius:100px;cursor:pointer}.tts-speed-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#3b82f6;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #3b82f64d}.tts-speed-control input[type=range]:disabled{opacity:.5;cursor:not-allowed}.translation-toggle-btn{padding:.625rem 1rem;background:#fff;border:2px solid #cbd5e1;border-radius:8px;cursor:pointer;font-weight:600;font-size:.813rem;color:#475569;transition:all .2s ease}.translation-toggle-btn:hover:not(:disabled){border-color:#3b82f6;color:#3b82f6}.translation-toggle-btn.active{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#fbbf24;color:#92400e}.translation-toggle-btn:disabled{opacity:.6;cursor:not-allowed}.reading-hint{background:linear-gradient(135deg,#f0fdf4,#dcfce7);padding:.875rem 1.25rem;border-radius:8px;margin-bottom:1.5rem;text-align:center;font-size:.813rem;color:#166534;font-weight:500;border:2px solid #bbf7d0}.reading-hint .hint-mobile{display:none}.chapter-text.tts-active{line-height:2}.chapter-text-content{line-height:1.8}.tts-word{transition:all .15s ease;border-radius:3px;padding:2px 0}.tts-word.current{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1f2937;font-weight:600;padding:2px 4px;margin:0 -2px;box-shadow:0 2px 8px #fbbf2480;animation:word-highlight .3s ease}.tts-word.past{color:#9ca3af}@keyframes word-highlight{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.chapter-translation{background:linear-gradient(135deg,#fef3c7,#fde68a);padding:1.5rem;border-radius:12px;margin-top:2rem;border-left:4px solid #fbbf24;overflow-wrap:break-word;word-break:break-word}.chapter-translation h3{margin:0 0 1rem;font-size:1rem;font-weight:700;color:#92400e}.chapter-translation p{margin:0;color:#78350f;font-size:.9375rem;line-height:1.8;font-weight:500}.chapter-translation .translating{color:#92400e;font-style:italic;opacity:.7}@media(max-width:768px){.tts-control-bar{flex-direction:column;align-items:stretch;gap:.75rem;padding:1rem}.tts-buttons,.tts-speed-control{justify-content:center}.translation-toggle-btn{width:100%}.reading-hint{font-size:.75rem;padding:.75rem 1rem}.reading-hint .hint-desktop{display:none}.reading-hint .hint-mobile{display:inline}}@media(max-width:480px){.tts-btn span{display:none}.tts-btn{padding:.75rem}.tts-speed-control input[type=range]{width:80px}}.vocabulary-highlight{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;padding:2px 6px;border-radius:4px;font-weight:600;border-bottom:2px solid #f59e0b;cursor:help;transition:all .2s ease}.vocabulary-highlight.clickable{cursor:pointer}.vocabulary-highlight:hover{background:linear-gradient(135deg,#fde68a,#fbbf24);transform:translateY(-1px);box-shadow:0 2px 8px #f59e0b4d}.vocabulary-item.highlight-flash{animation:vocabFlash 1.5s ease}@keyframes vocabFlash{0%,to{background:#fff;box-shadow:0 2px 8px #00000014}20%,60%{background:linear-gradient(135deg,#fef3c7,#fde68a);box-shadow:0 4px 16px #f59e0b66;transform:scale(1.02)}}.vocabulary-section{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);padding:2rem;border-radius:12px;margin-top:2rem;border:2px solid #bae6fd;overflow-x:hidden}.vocabulary-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.vocabulary-header h3{margin:0;font-size:1.25rem;font-weight:700;color:#0c4a6e}.extracting-badge{font-size:.75rem;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;padding:.25rem .75rem;border-radius:100px;font-weight:600;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.vocabulary-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.vocabulary-item{background:#fff;padding:1.25rem;border-radius:10px;border:2px solid #e0f2fe;transition:all .3s ease}.vocabulary-item:hover{border-color:#3b82f6;box-shadow:0 4px 12px #3b82f626;transform:translateY(-2px)}.vocabulary-word{margin-bottom:.75rem}.vocabulary-word{display:flex;align-items:center;gap:.5rem}.vocabulary-word mark{font-size:1.125rem;font-weight:700}.vocab-speak-btn{background:none;border:none;cursor:pointer;font-size:1.1rem;padding:2px 4px;border-radius:6px;transition:all .2s ease;opacity:.7;line-height:1}.vocab-speak-btn:hover{opacity:1;background:#3b82f61a;transform:scale(1.15)}.vocab-speak-btn:active{transform:scale(.95)}.vocabulary-phonetic{color:#6366f1;font-size:.875rem;font-style:italic;font-family:Segoe UI,Noto Sans,sans-serif;margin-bottom:.5rem;letter-spacing:.3px}.vocabulary-definition{color:#1e3a8a;font-size:.938rem;font-weight:600;line-height:1.6;margin-bottom:.5rem;overflow-wrap:break-word;word-break:break-word}.vocabulary-example{color:#64748b;font-size:.813rem;line-height:1.5;padding-top:.5rem;border-top:1px solid #e2e8f0;margin-top:.5rem;overflow-wrap:break-word;word-break:break-word}.vocabulary-example em{color:#475569;font-weight:600;font-style:normal}.vocabulary-item.skeleton{pointer-events:none}.skeleton-word,.skeleton-definition,.skeleton-example{background:linear-gradient(90deg,#e0f2fe 25%,#bae6fd,#e0f2fe 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border-radius:4px}.skeleton-word{width:120px;height:28px;margin-bottom:.75rem}.skeleton-definition{width:100%;height:20px;margin-bottom:.5rem}.skeleton-example{width:80%;height:16px}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.vocabulary-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center;color:#64748b}.vocabulary-empty .empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.7}.vocabulary-empty p{margin:0 0 .5rem;font-size:1rem;font-weight:600;color:#475569}.vocabulary-empty .empty-hint{font-size:.875rem;color:#94a3b8}.vocabulary-fade-in{animation:vocabulary-fade-in .4s ease-out}@keyframes vocabulary-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.vocabulary-section{padding:1.5rem}.vocabulary-list{grid-template-columns:1fr;gap:.75rem}.vocabulary-item{padding:1rem}.vocabulary-header h3{font-size:1.125rem}}@media(max-width:480px){.vocabulary-section{padding:1rem}.vocabulary-item{padding:.875rem}.vocabulary-word mark{font-size:1rem}.vocabulary-definition{font-size:.875rem}.vocabulary-example{font-size:.75rem}}.auto-complete-toast{position:sticky;bottom:80px;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:12px;margin-top:1rem;box-shadow:0 4px 12px #3b82f659;animation:slideUp .4s ease}.auto-complete-toast span{flex:1;font-size:.9rem;font-weight:500}.auto-complete-toast button{padding:.4rem 1rem;border:none;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;background:#fff;color:#2563eb}.auto-complete-toast button.dismiss{background:transparent;color:#ffffffb3;padding:.4rem .5rem;font-size:1rem}.auto-complete-toast button.dismiss:hover{color:#fff}.summary-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.summary-modal{background:#fff;border-radius:1.5rem;width:100%;max-width:600px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px #00000040;animation:slideUp .3s ease-out}.summary-header{background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;padding:1.5rem 2rem;text-align:center;position:relative}.summary-header h2{margin:0;font-size:1.5rem;font-weight:700}.summary-header .chapter-title{margin:.5rem 0 0;font-size:.9rem;opacity:.9}.summary-close-btn{position:absolute;top:1rem;right:1rem;background:#fff3;border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.summary-close-btn:hover{background:#ffffff4d}.summary-tabs{display:flex;border-bottom:1px solid #e5e7eb;background:#f9fafb}.tab-btn{flex:1;padding:1rem;border:none;background-color:#f9fafb;font-size:1rem;font-weight:500;color:#6b7280;cursor:pointer;transition:none;position:relative;outline:none}.tab-btn:hover{color:#374151;background-color:#eeeff1}.tab-btn:focus{outline:none}.tab-btn.active{color:#8b5cf6;background-color:#fff}.tab-btn.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:3px;background:#8b5cf6}.summary-content{flex:1;overflow-y:auto;padding:1.5rem}.overview-tab{display:flex;flex-direction:column;gap:1.5rem}.main-score-section{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1rem}.big-score-circle{width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,#faf5ff,#f3e8ff);border:4px solid #8b5cf6;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 25px -5px #8b5cf64d}.score-emoji{font-size:1.5rem;margin-bottom:.25rem}.score-value{font-size:2.5rem;font-weight:800;color:#1f2937;line-height:1}.score-unit{font-size:.9rem;color:#6b7280;margin-top:.25rem}.grade-info{text-align:left}.grade-badge{display:inline-block;padding:.375rem .75rem;border-radius:9999px;color:#fff;font-weight:600;font-size:.9rem}.grade-message{margin:.75rem 0 0;font-size:1.25rem;font-weight:600;color:#374151}.summary-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.summary-stat-card{background:#f9fafb;border-radius:1rem;padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1.25rem;transition:transform .2s,box-shadow .2s}.summary-stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000000d}.summary-stat-card.best{background:linear-gradient(135deg,#fef3c7,#fde68a)}.summary-stat-icon{font-size:1.75rem;flex-shrink:0;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center}.summary-stat-info{display:flex;flex-direction:column;gap:.375rem;margin-left:.25rem}.summary-stat-value{font-size:1.375rem;font-weight:700;color:#1f2937;line-height:1.2}.summary-stat-label{font-size:.9375rem;color:#6b7280;line-height:1.2}.score-distribution{background:#f9fafb;border-radius:1rem;padding:1rem}.score-distribution h4{margin:0 0 .75rem;font-size:.9rem;color:#374151}.distribution-bar{height:12px;background:#e5e7eb;border-radius:6px;position:relative;overflow:visible}.bar-fill{height:100%;border-radius:6px;transition:width .5s ease-out}.bar-markers{position:absolute;top:-24px;left:0;right:0;height:20px}.marker{position:absolute;transform:translate(-50%);font-size:.7rem;color:#6b7280;background:#fff;padding:.125rem .375rem;border-radius:4px;box-shadow:0 1px 3px #0000001a}.marker.best-marker{color:#f59e0b;font-weight:600}.distribution-labels{display:flex;justify-content:space-between;margin-top:.5rem;font-size:.75rem;color:#9ca3af}.strength-weakness{display:flex;flex-direction:column;gap:1rem}.strength-box,.weakness-box{padding:1rem;border-radius:1rem}.strength-box{background:linear-gradient(135deg,#d1fae5,#a7f3d0)}.weakness-box{background:linear-gradient(135deg,#fef3c7,#fde68a)}.strength-box h4,.weakness-box h4{margin:0 0 .5rem;font-size:.95rem}.strength-box p,.weakness-box p{margin:0;font-size:.875rem;color:#374151}.retry-weak-btn{margin-top:.75rem;padding:.5rem 1rem;background:#f59e0b;color:#fff;border:none;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s}.retry-weak-btn:hover{background:#d97706}.details-tab{display:flex;flex-direction:column;gap:1rem}.no-data{text-align:center;color:#6b7280;padding:2rem;font-size:1.125rem}.sentence-list{display:flex;flex-direction:column;gap:1rem}.sentence-item{background:#f9fafb;border-radius:.75rem;padding:1.25rem;border-left:5px solid #e5e7eb;transition:transform .2s}.sentence-item:hover{transform:translate(4px)}.sentence-item.excellent{border-left-color:#10b981;background:linear-gradient(135deg,#f0fdf4,#dcfce7)}.sentence-item.weak{border-left-color:#ef4444;background:linear-gradient(135deg,#fef2f2,#fee2e2)}.sentence-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.sentence-number{background:#e5e7eb;padding:.375rem .625rem;border-radius:.375rem;font-size:1rem;font-weight:600;color:#4b5563}.sentence-score{font-weight:700;font-size:1.25rem}.attempt-badge{background:#8b5cf6;color:#fff;padding:.25rem .625rem;border-radius:9999px;font-size:.875rem;font-weight:500}.sentence-text{margin:0;font-size:1.125rem;color:#374151;line-height:1.6}.spoken-text{margin:.75rem 0 0;font-size:1rem;color:#6b7280;font-style:italic}.spoken-label{font-style:normal;font-weight:500}.words-tab{display:flex;flex-direction:column;gap:1.5rem}.no-issues{text-align:center;padding:2rem}.success-icon{font-size:3rem;display:block;margin-bottom:1rem}.no-issues p{margin:0;font-size:1.25rem;color:#374151;font-weight:500}.word-section{background:#f9fafb;border-radius:1rem;padding:1.25rem}.word-section h4{margin:0 0 1rem;font-size:1.125rem}.incorrect-section{background:linear-gradient(135deg,#fef2f2,#fee2e2)}.missing-section{background:linear-gradient(135deg,#fffbeb,#fef3c7)}.word-chips{display:flex;flex-wrap:wrap;gap:.75rem}.word-chip{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:9999px;font-size:1.0625rem}.word-chip.incorrect{background:#fff;border:1px solid #fca5a5}.word-chip.missing{background:#fff;border:1px solid #fcd34d}.original-word{font-weight:600;color:#1f2937}.arrow{color:#9ca3af}.spoken-word{color:#ef4444;text-decoration:line-through}.word-tts-btn{background:#3b82f6;border:none;color:#fff;width:28px;height:28px;border-radius:50%;font-size:.875rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.word-tts-btn:hover{background:#2563eb;transform:scale(1.1)}.word-tts-btn:active{transform:scale(.95)}.tip-box{display:flex;align-items:flex-start;gap:.75rem;background:linear-gradient(135deg,#eff6ff,#dbeafe);padding:1.25rem;border-radius:.75rem}.tip-icon{font-size:1.5rem}.tip-box p{margin:0;font-size:1rem;color:#1e40af;line-height:1.6}.summary-footer{display:flex;gap:1rem;padding:1rem 1.5rem;background:#f9fafb;border-top:1px solid #e5e7eb}.secondary-btn{flex:1;padding:.75rem 1rem;background:#fff;border:1px solid #d1d5db;border-radius:.75rem;font-size:.9rem;font-weight:500;color:#4b5563;cursor:pointer;transition:all .2s}.secondary-btn:hover{background:#f3f4f6;border-color:#9ca3af}.primary-btn{flex:2;padding:.75rem 1rem;background:linear-gradient(135deg,#8b5cf6,#6366f1);border:none;border-radius:.75rem;font-size:.9rem;font-weight:600;color:#fff;cursor:pointer;transition:all .2s}.primary-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #8b5cf666}@media(max-width:768px){.summary-modal{max-height:95vh;border-radius:1rem 1rem 0 0;margin-top:auto}.summary-header{padding:1.25rem 1.5rem}.summary-header h2{font-size:1.25rem}.summary-content{padding:1rem}.main-score-section{flex-direction:column;gap:1rem}.big-score-circle{width:120px;height:120px}.score-value{font-size:2rem}.grade-info{text-align:center}.summary-stats-grid{grid-template-columns:1fr 1fr;gap:.75rem}.summary-stat-card{padding:.75rem}.summary-stat-icon{font-size:1.25rem}.summary-stat-value{font-size:1rem}.tab-btn{padding:.75rem .5rem;font-size:.8rem}}@media(max-width:480px){.summary-overlay{padding:0;align-items:flex-end}.summary-modal{border-radius:1.25rem 1.25rem 0 0;max-height:90vh}.summary-stats-grid{grid-template-columns:1fr}.summary-footer{flex-direction:column}.secondary-btn,.primary-btn{flex:none;width:100%}}.motivation-bar{position:relative;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:linear-gradient(135deg,#fbbf241a,#f59e0b0d);border:1px solid rgba(251,191,36,.2);border-radius:12px;margin-bottom:.75rem}.motivation-item{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background:#fff;border-radius:8px;font-size:.75rem;font-weight:600;box-shadow:0 1px 3px #00000014}.motivation-icon{font-size:.875rem}.motivation-value{color:#374151}.motivation-item.streak{background:linear-gradient(135deg,#fef3c7,#fde68a)}.motivation-item.streak .motivation-value{color:#b45309}.motivation-item.level{position:relative;padding-bottom:.5rem}.mini-progress{position:absolute;bottom:.125rem;left:.25rem;right:.25rem;height:3px;background:#0000001a;border-radius:2px;overflow:hidden}.mini-progress-fill{height:100%;background:linear-gradient(90deg,#10b981,#34d399);border-radius:2px;transition:width .3s ease}.motivation-item.today.completed{background:linear-gradient(135deg,#d1fae5,#a7f3d0)}.motivation-item.today.completed .motivation-value{color:#047857}.badges-btn-wrapper{position:relative}.badges-btn{border:none;cursor:pointer;transition:transform .2s ease}.badges-btn:hover{transform:scale(1.05)}.badges-panel{position:absolute;top:calc(100% + .5rem);right:0;z-index:100;width:280px;background:#fff;border-radius:12px;box-shadow:0 8px 30px #00000026;border:1px solid rgba(0,0,0,.08);animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.badges-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid #f3f4f6}.badges-header h4{margin:0;font-size:.875rem;color:#1f2937}.close-badges{background:none;border:none;font-size:1.25rem;color:#9ca3af;cursor:pointer;padding:0;line-height:1}.close-badges:hover{color:#6b7280}.badges-grid{padding:.75rem;display:flex;flex-direction:column;gap:.5rem;max-height:200px;overflow-y:auto}.badge-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;background:#f9fafb;border-radius:8px}.badge-icon{font-size:1.5rem}.badge-info{display:flex;flex-direction:column}.badge-name{font-size:.8125rem;font-weight:600;color:#1f2937}.badge-desc{font-size:.6875rem;color:#6b7280}.new-badge-toast{position:fixed;top:80px;left:50%;transform:translate(-50%);z-index:1000;animation:toastSlide .3s ease,toastFade .3s ease 2.7s forwards;cursor:pointer}@keyframes toastSlide{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastFade{to{opacity:0;transform:translate(-50%) translateY(-20px)}}.toast-content{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:linear-gradient(135deg,#fbbf24,#f59e0b);border-radius:100px;box-shadow:0 8px 30px #fbbf2466}.toast-icon{font-size:1.5rem}.toast-text{display:flex;flex-direction:column}.toast-title{font-size:.6875rem;color:#ffffffe6;font-weight:500}.toast-badge-name{font-size:.875rem;color:#fff;font-weight:700}@media(max-width:768px){.motivation-bar{padding:.375rem .5rem;gap:.375rem;margin-bottom:.5rem}.motivation-item{padding:.1875rem .375rem;font-size:.6875rem;gap:.1875rem}.motivation-icon{font-size:.75rem}.badges-panel{width:260px;right:-.5rem}.new-badge-toast{top:70px}.toast-content{padding:.625rem 1rem}.toast-icon{font-size:1.25rem}.toast-badge-name{font-size:.8125rem}}.speaking-mode{max-width:900px;margin:0 auto;padding:1.5rem}.speaking-header{background:#fff;border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1.25rem;box-shadow:0 2px 8px #00000014}.speaking-header-inner{display:flex;flex-direction:column;gap:1rem}.header-top-row{display:flex;justify-content:space-between;align-items:center;gap:1rem}.book-title{margin:0;font-size:1.5rem;font-weight:700;color:#1e3a8a;letter-spacing:-.025em;line-height:1.2}.header-controls-row{display:flex;align-items:center;gap:1rem;padding-top:.75rem;border-top:1px solid #e5e7eb}.chapter-selector-compact{flex:1}.chapter-selector-compact select{width:100%;padding:.5rem .75rem;border:2px solid #e5e7eb;border-radius:8px;font-size:.875rem;font-weight:500;color:#374151;background:#fff;cursor:pointer;transition:all .2s ease}.chapter-selector-compact select:hover{border-color:#3b82f6}.chapter-selector-compact select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.speed-control-compact{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.speed-label{font-size:.75rem;font-weight:600;color:#6b7280;white-space:nowrap}.speed-control-compact input[type=range]{width:80px;cursor:pointer}.chapter-completed-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-radius:20px;font-size:.75rem;font-weight:600;white-space:nowrap;flex-shrink:0}.mark-completed-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;border-radius:20px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.mark-completed-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #8b5cf64d}.mode-switch-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:8px;cursor:pointer;font-weight:600;font-size:.8125rem;transition:all .2s ease;color:#fff;flex-shrink:0}.mode-icon{width:16px;height:16px;stroke-width:2.5px}.mode-switch-button.reading{background:linear-gradient(135deg,#3b82f6,#2563eb)}.mode-switch-button.reading:hover{transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.speaking-content{display:flex;flex-direction:column;gap:1rem;position:relative}.sentence-navigation{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#fff;border-radius:10px;box-shadow:0 1px 3px #00000014}.sentence-navigation button{padding:.5rem 1rem;background:linear-gradient(135deg,#1e3a8a,#1e293b);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:.8125rem;transition:all .2s ease}.sentence-navigation button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #1e3a8a40}.sentence-navigation button:disabled{background:#e5e7eb;color:#9ca3af;cursor:not-allowed}.sentence-counter{font-weight:600;color:#1e3a8a;font-size:.8125rem;display:flex;align-items:center;gap:.5rem}.sentence-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014}.current-sentence{font-size:1.375rem;line-height:1.7;color:#1f2937;margin:0 0 1.25rem;text-align:center;padding:1.25rem;background:#f9fafb;border-radius:8px;border-left:4px solid #10b981}.keyword-highlight{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;padding:.125rem .375rem;border-radius:4px;font-weight:600;cursor:pointer;transition:all .2s ease;border-bottom:2px solid #fbbf24}.keyword-highlight:hover{background:linear-gradient(135deg,#fde68a,#fcd34d);transform:translateY(-1px);box-shadow:0 2px 4px #fbbf244d}.keyword-highlight.learned{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46;border-bottom:2px solid #10b981}.keyword-highlight.learned:hover{background:linear-gradient(135deg,#a7f3d0,#6ee7b7);box-shadow:0 2px 4px #10b9814d}.sentence-actions{display:flex;gap:.75rem;margin-bottom:1.5rem}.action-btn{flex:1;padding:.875rem 1rem;border:none;border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s ease;color:#fff;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 2px 4px #0000001a}.translation-btn{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.translation-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #fbbf2466}.listen-btn{background:linear-gradient(135deg,#3b82f6,#2563eb)}.listen-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.listen-btn.active{background:linear-gradient(135deg,#ef4444,#dc2626);animation:pulse 1.5s ease-in-out infinite}.practice-btn{background:linear-gradient(135deg,#10b981,#059669)}.practice-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #10b98166}.practice-btn.active{background:linear-gradient(135deg,#ef4444,#dc2626);animation:pulse 1.5s ease-in-out infinite}.practice-btn:disabled{opacity:.5;cursor:not-allowed}.practice-btn.has-result{background:linear-gradient(135deg,#3b82f6,#2563eb);animation:pulseRetry 2s ease-in-out infinite}.practice-btn.has-result:hover:not(:disabled){box-shadow:0 4px 12px #3b82f666}@keyframes pulseRetry{0%,to{box-shadow:0 2px 4px #3b82f64d}50%{box-shadow:0 4px 16px #3b82f680}}@keyframes pulse{0%,to{box-shadow:0 2px 4px #ef44444d}50%{box-shadow:0 4px 16px #ef444499}}.translation-box{background:linear-gradient(135deg,#fef3c7,#fde68a);padding:1.25rem;border-radius:8px;border-left:4px solid #fbbf24;margin-bottom:1.5rem}.translation-box p{margin:0;color:#78350f;font-size:1rem;line-height:1.7;font-weight:500}.recording-status{background:linear-gradient(135deg,#fef3c7,#fde68a);padding:1rem;border-radius:8px;margin-bottom:1.5rem;border-left:4px solid #f59e0b}.recording-indicator{display:flex;align-items:center;gap:.5rem;color:#92400e;font-weight:600;font-size:.875rem}.recording-dot{width:12px;height:12px;background:#ef4444;border-radius:50%;animation:recording-pulse 1s ease-in-out infinite}@keyframes recording-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.interim-transcript{margin:.75rem 0 0;color:#78350f;font-size:.875rem;font-style:italic}.recording-actions{display:flex;gap:.5rem;margin-top:.75rem}.recording-cancel-btn{flex:1;padding:.5rem .75rem;background:#fff;color:#78350f;border:1.5px solid #d97706;border-radius:6px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:all .2s ease}.recording-cancel-btn:hover{background:#fef3c7}.recording-restart-btn{flex:1;padding:.5rem .75rem;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:6px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:all .2s ease}.recording-restart-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #3b82f666}.analysis-result{background:#fff;border-radius:12px;padding:1.5rem;border:2px solid #10b981;box-shadow:0 4px 12px #10b9811a}.score-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:2px solid #e5e7eb}.score-circle{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,#10b981,#059669);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 12px #10b9814d;flex-shrink:0}.score-number{font-size:2.5rem;font-weight:800;color:#fff;line-height:1}.score-label{font-size:.875rem;font-weight:600;color:#ffffffe6;margin-top:.25rem}.score-info{flex:1}.score-title{margin:0 0 .5rem;font-size:1.125rem;font-weight:700;color:#1f2937}.score-grade{margin:0;font-size:1.25rem;font-weight:600;color:#10b981}.feedback-box{margin-bottom:1.5rem}.feedback-box h4{margin:0 0 .75rem;font-size:1rem;font-weight:700;color:#1f2937}.feedback-box p{margin:0;color:#4b5563;line-height:1.7;font-size:.9375rem}.word-analysis-box{margin-bottom:1.5rem}.word-analysis-box h4{margin:0 0 .75rem;font-size:1rem;font-weight:700;color:#1f2937}.words-list{display:flex;flex-wrap:wrap;gap:.5rem}.word-tag{padding:.5rem .875rem;border-radius:6px;font-weight:600;font-size:.875rem;transition:all .2s ease}.word-tag.correct{background:#d1fae5;color:#065f46;border:2px solid #10b981}.word-tag.incorrect{background:#fee2e2;color:#991b1b;border:2px solid #ef4444}.word-tag.missing{background:#fef3c7;color:#92400e;border:2px solid #f59e0b;opacity:.6}.word-tag.extra{background:#e0e7ff;color:#3730a3;border:2px solid #6366f1}.analysis-actions{display:flex;gap:.75rem;margin-top:.5rem}.playback-btn{flex:1;padding:.875rem 1rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #8b5cf64d}.playback-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #8b5cf666}.playback-btn:disabled{opacity:.7;cursor:not-allowed;animation:pulse-playing 1.5s ease-in-out infinite}@keyframes pulse-playing{0%,to{opacity:.7}50%{opacity:.9}}.retry-btn{flex:1;padding:.875rem 1rem;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #3b82f64d}.retry-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.next-sentence-btn{flex:1;padding:.875rem 1rem;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #10b9814d}.next-sentence-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #10b98166}.next-sentence-btn:disabled{opacity:.5;cursor:not-allowed}.floating-retry-bar{position:fixed;bottom:0;left:0;right:0;padding:.75rem 1rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px));background:#fffffff2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:2px solid #e5e7eb;box-shadow:0 -4px 12px #00000014;display:flex;gap:.75rem;z-index:50;animation:slideUp .3s ease-out}.floating-retry-btn{flex:2;padding:.875rem 1rem;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.9375rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #3b82f64d}.floating-retry-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.floating-next-btn{flex:1;padding:.875rem 1rem;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #10b9814d}.floating-next-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #10b98166}.floating-next-btn:disabled{opacity:.5;cursor:not-allowed}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sentence-card.has-floating-bar{padding-bottom:5rem}.analyzing-status{background:#eff6ff;padding:1rem;border-radius:8px;text-align:center;color:#1e3a8a;font-weight:600;margin-bottom:1.5rem}.error-message{background:#fee2e2;padding:1rem;border-radius:8px;color:#991b1b;font-weight:600;margin-bottom:1.5rem;border-left:4px solid #ef4444}.key-words-section{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);padding:1.5rem;border-radius:12px;margin-top:1.5rem;border:2px solid #3b82f6}.key-words-title{margin:0 0 1rem;font-size:1rem;font-weight:700;color:#1e40af;display:flex;align-items:center;gap:.5rem}.key-words-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-bottom:1rem}.key-word-item{display:flex;flex-direction:column;gap:.625rem}.key-word-card{background:#fff;padding:1rem;border-radius:8px;border:2px solid #e5e7eb;cursor:pointer;transition:all .3s ease;display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem}.key-word-card:hover{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f633}.key-word-card.learned{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border-color:#10b981}.key-word-card.learned:hover{box-shadow:0 4px 12px #10b9814d}.word-content{display:flex;flex-direction:column;gap:.375rem;flex:1;min-width:0}.word-header{display:flex;align-items:center;gap:.5rem}.word-text{font-weight:600;font-size:1rem;color:#1f2937}.word-pronunciation{font-size:.813rem;color:#6b7280;font-family:Courier New,monospace;font-style:italic}.learned-badge{background:#10b981;color:#fff;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}.word-actions{display:flex;flex-direction:column;gap:.5rem;align-items:center}.pronunciation-btn{width:32px;height:32px;border:2px solid #3b82f6;background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-radius:50%;cursor:pointer;font-size:.875rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.pronunciation-btn:hover{background:linear-gradient(135deg,#3b82f6,#2563eb);transform:scale(1.1);box-shadow:0 2px 8px #3b82f64d}.learn-toggle-btn{width:32px;height:32px;border:2px solid #d1d5db;background:#fff;border-radius:50%;cursor:pointer;font-size:1rem;color:#9ca3af;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.learn-toggle-btn:hover{border-color:#3b82f6;color:#3b82f6;transform:scale(1.1)}.key-word-card.learned .learn-toggle-btn{border-color:#10b981;color:#10b981;background:#d1fae5}.key-words-hint{margin:0;font-size:.813rem;color:#1e40af;text-align:center;font-style:italic}.word-details{background:#fff;padding:.875rem;border-radius:8px;border:1px solid #e5e7eb;animation:slideDown .3s ease;display:flex;flex-direction:column;gap:.75rem}.word-details.loading{text-align:center;padding:1rem}.loading-text{font-size:.875rem;color:#6b7280;font-style:italic}.word-meaning{font-size:.9375rem;color:#1f2937;line-height:1.6}.word-meaning strong{color:#3b82f6;font-weight:600;margin-right:.375rem}.word-example{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem;border-top:1px solid #e5e7eb}.example-english{font-size:.875rem;color:#1f2937;line-height:1.5;font-style:italic}.example-english strong{color:#10b981;font-weight:600;font-style:normal;margin-right:.375rem}.example-korean{font-size:.875rem;color:#6b7280;line-height:1.5;padding-left:1rem;border-left:2px solid #d1d5db}@keyframes slideDown{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.settings-panel{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 4px #0000001a;display:flex;gap:2rem;align-items:center}.speed-control{flex:1}.speed-control label{display:block;margin-bottom:.5rem;font-weight:600;color:#1f2937;font-size:.875rem}.speed-control input[type=range]{width:100%;cursor:pointer}.chapter-selector{flex:1}.chapter-selector label{display:block;margin-bottom:.5rem;font-weight:600;color:#1f2937;font-size:.875rem}.chapter-selector select{width:100%;padding:.625rem;border:2px solid #d1d5db;border-radius:8px;font-size:.875rem;font-weight:500;color:#1f2937;background:#fff;cursor:pointer;transition:all .2s ease}.chapter-selector select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}@media(max-width:768px){.speaking-mode,.speaking-header{padding:1rem}.header-top-row{flex-wrap:wrap}.book-title{font-size:1.25rem;flex:1}.header-controls-row{flex-wrap:wrap;gap:.75rem}.chapter-selector-compact{flex:1 1 100%;order:1}.speed-control-compact{order:2}.chapter-completed-badge,.mark-completed-btn{order:3}.current-sentence{font-size:1.125rem;padding:1rem}.sentence-actions{flex-direction:column}.action-btn{width:100%}.score-header{flex-direction:column;text-align:center}.score-circle{width:80px;height:80px}.score-number{font-size:2rem}.key-words-list{grid-template-columns:1fr;gap:.75rem}.key-word-card{padding:.875rem}.word-details{padding:.75rem}.word-text{font-size:.9375rem}.pronunciation-btn,.learn-toggle-btn{width:28px;height:28px}}@media(max-width:480px){.sentence-navigation{padding:1rem;gap:.5rem}.sentence-navigation button{padding:.5rem .875rem;font-size:.813rem}.sentence-card{padding:1.5rem}}.progress-bar-container{background:#fff;border-radius:1rem;padding:1rem 1.5rem;margin-bottom:1rem;box-shadow:0 2px 8px #0000000d}.progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.875rem;color:#4b5563}.avg-score{background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;padding:.25rem .75rem;border-radius:9999px;font-weight:600;font-size:.8rem}.progress-bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(135deg,#8b5cf6,#6366f1);border-radius:4px;transition:width .5s ease-out}.summary-btn{margin-top:.75rem;width:100%;padding:.625rem 1rem;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;border:none;border-radius:.5rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.summary-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #8b5cf666}.completed-badge{display:inline-flex;align-items:center;gap:.25rem;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:.25rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:600;margin-right:.5rem}@media(max-width:768px){.progress-bar-container{padding:.875rem 1rem}.progress-info{flex-direction:column;align-items:flex-start;gap:.5rem}.avg-score{align-self:flex-end}}@media(max-width:480px){.progress-bar-container{border-radius:.75rem;margin-bottom:.75rem}.summary-btn{padding:.5rem .75rem;font-size:.8rem}.completed-badge{font-size:.7rem;padding:.2rem .4rem}}.current-sentence.tts-active{line-height:2}.current-sentence .tts-word{transition:all .15s ease;border-radius:3px;padding:2px 0}.current-sentence .tts-word.current{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1f2937;font-weight:700;padding:2px 6px;margin:0 -3px;box-shadow:0 2px 8px #fbbf2480;animation:speaking-word-highlight .3s ease}.current-sentence .tts-word.past{color:#9ca3af}@keyframes speaking-word-highlight{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.improvement-indicator{margin-top:1rem;padding:.75rem 1rem;border-radius:8px;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);text-align:center;border:2px solid #bfdbfe}.improvement-positive{background:linear-gradient(135deg,#f0fdf4,#dcfce7);color:#166534;border-color:#86efac}.improvement-negative{background:linear-gradient(135deg,#fef2f2,#fee2e2);color:#991b1b;border-color:#fecaca}.improvement-neutral{background:linear-gradient(135deg,#f8fafc,#e2e8f0);color:#475569;border-color:#cbd5e1}.motivation-message{margin-top:1rem;padding:1rem 1.25rem;border-radius:12px;font-size:.9375rem;font-weight:500;text-align:center;animation:fadeInUp .5s ease-out}.motivation-success{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border:2px solid #fbbf24}.motivation-encourage{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;border:2px solid #60a5fa}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.improvement-indicator{padding:.625rem .875rem}.motivation-message{padding:.875rem 1rem;font-size:.875rem}}@media(max-width:480px){.improvement-indicator{padding:.5rem .75rem;font-size:.875rem}.motivation-message{padding:.75rem .875rem;font-size:.8125rem}}@media(max-width:768px){.floating-retry-bar{padding:.625rem .75rem;padding-bottom:calc(.625rem + env(safe-area-inset-bottom,0px))}.analysis-actions{flex-wrap:wrap}.analysis-actions .retry-btn{flex:2}.analysis-actions .next-sentence-btn{flex:1}}@media(max-width:480px){.floating-retry-bar{padding:.5rem .625rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom,0px));gap:.5rem}.floating-retry-btn,.floating-next-btn{padding:.75rem;font-size:.8125rem}.analysis-actions{gap:.5rem}.analysis-actions .retry-btn,.analysis-actions .playback-btn,.analysis-actions .next-sentence-btn{padding:.75rem;font-size:.8125rem}}.speaking-mode .auto-complete-toast{position:sticky;bottom:80px;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:12px;margin:1rem;box-shadow:0 4px 12px #3b82f659;animation:slideUpToast .4s ease}.speaking-mode .auto-complete-toast span{flex:1;font-size:.9rem;font-weight:500}.speaking-mode .auto-complete-toast button{padding:.4rem 1rem;border:none;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;background:#fff;color:#2563eb}.speaking-mode .auto-complete-toast button.dismiss{background:transparent;color:#ffffffb3;padding:.4rem .5rem;font-size:1rem}.speaking-mode .auto-complete-toast button.dismiss:hover{color:#fff}@keyframes slideUpToast{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.dictionary-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;padding:1rem}.dictionary-popup{background:#fff;border-radius:12px;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.dictionary-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:2px solid #e5e7eb;position:sticky;top:0;background:#fff;z-index:1}.word-with-speaker{display:flex;align-items:center;gap:.75rem}.dictionary-header h3{margin:0;font-size:1.75rem;color:#1a1a1a;text-transform:capitalize}.speaker-btn{background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 6px #3b82f64d}.speaker-btn:hover{transform:scale(1.1);box-shadow:0 4px 12px #3b82f666}.close-button{background:none;border:none;font-size:2rem;color:#9ca3af;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.close-button:hover{color:#1a1a1a}.dictionary-content{padding:1.5rem}.loading,.error{text-align:center;padding:2rem;color:#6b7280}.error p{margin:.5rem 0}.error-hint{font-size:.875rem;color:#9ca3af}.phonetic{color:#6b7280;font-size:1.1rem;margin-bottom:1.5rem;font-style:italic}.meaning-section{margin-bottom:2rem}.part-of-speech{display:inline-block;background:#e5e7eb;color:#374151;padding:.25rem .75rem;border-radius:4px;font-size:.875rem;font-weight:600;margin-bottom:1rem}.definitions-list{margin:0;padding-left:1.5rem}.definitions-list li{margin-bottom:1rem;color:#374151}.definition-text{margin:0 0 .5rem;line-height:1.6}.example{margin:0;color:#6b7280;font-size:.9rem;padding-left:1rem;border-left:3px solid #e5e7eb}.synonyms{margin-top:1rem;padding:.75rem;background:#f9fafb;border-radius:6px;font-size:.9rem;color:#4b5563}.synonyms strong{color:#1a1a1a}.source{margin-top:2rem;padding-top:1rem;border-top:1px solid #e5e7eb;text-align:center}.source a{color:#4b5563;text-decoration:none;font-size:.9rem}.source a:hover{text-decoration:underline}.word-title{display:flex;flex-direction:column;gap:.25rem}.korean-meaning{font-size:1.1rem;color:#3b82f6;font-weight:600}.definition-korean{margin:.5rem 0;padding:.5rem .75rem;background:linear-gradient(135deg,#eff6ff,#dbeafe);border-left:3px solid #3b82f6;border-radius:0 6px 6px 0;color:#1e3a8a;font-size:.9rem;line-height:1.6}.translate-btn{margin:.5rem 0;padding:.375rem .75rem;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;font-size:.813rem;color:#4b5563;cursor:pointer;transition:all .2s ease}.translate-btn:hover:not(:disabled){background:#e5e7eb;border-color:#9ca3af;color:#1f2937}.translate-btn:disabled{opacity:.6;cursor:not-allowed}.korean-only-result{padding:1rem}.korean-translation-box{display:flex;flex-direction:column;gap:.5rem;padding:1.5rem;background:linear-gradient(135deg,#eff6ff,#dbeafe);border-radius:12px;text-align:center}.korean-translation-box .label{font-size:.813rem;color:#64748b;font-weight:500}.korean-translation-box .value{font-size:1.5rem;color:#1e3a8a;font-weight:700}.translation-note{margin:1rem 0 0;font-size:.813rem;color:#9ca3af;text-align:center}@media(max-width:768px){.dictionary-popup{max-height:90vh}.dictionary-header h3{font-size:1.5rem}.korean-meaning{font-size:1rem}.korean-translation-box .value{font-size:1.25rem}}.hero-card{background:#fff;border-radius:16px;padding:1rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(156,163,175,.2);box-shadow:0 2px 12px #0000000f;display:flex;gap:1rem;align-items:flex-start}.hero-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #9ca3af40;border-color:#9ca3af66}.hero-card:active{transform:translateY(-2px)}.hero-card-left{flex-shrink:0;position:relative}.hero-avatar-image{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px #0000001f;transition:transform .3s ease}.hero-card:hover .hero-avatar-image{transform:scale(1.05)}.hero-avatar-emoji{width:72px;height:72px;font-size:2.5rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border-radius:50%}.difficulty-badge{position:absolute;bottom:-4px;left:50%;transform:translate(-50%);padding:.125rem .5rem;border-radius:100px;font-size:.625rem;font-weight:700;color:#fff;white-space:nowrap}.hero-card-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:.375rem}.hero-card-header{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}.hero-name{margin:0;font-size:1.125rem;font-weight:700;color:#1a1a1a}.hero-period{font-size:.75rem;color:#9ca3af}.roleplay-badge{padding:.125rem .5rem;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;border-radius:100px;font-size:.625rem;font-weight:600;white-space:nowrap}.hero-summary{margin:0;font-size:.8125rem;color:#6b7280;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hero-topics{display:flex;gap:.375rem;flex-wrap:wrap;margin-top:.25rem}.topic-tag{padding:.25rem .625rem;background:#9ca3af1f;border-radius:100px;font-size:.6875rem;font-weight:500;color:#4b5563}.start-btn{align-self:flex-start;margin-top:.5rem;padding:.5rem 1rem;background:linear-gradient(135deg,#2d2d2d,#1a1a1a);color:#fff;border:none;border-radius:100px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.start-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000040}@media(max-width:768px){.hero-card{padding:.875rem;gap:.875rem}.hero-avatar-image{width:60px;height:60px}.hero-avatar-emoji{width:60px;height:60px;font-size:2rem}.difficulty-badge{font-size:.5625rem;padding:.125rem .375rem}.hero-name{font-size:1rem}.hero-summary{font-size:.75rem}.topic-tag{font-size:.625rem;padding:.1875rem .5rem}.start-btn{padding:.4375rem .875rem;font-size:.75rem}}.hero-selector{min-height:100vh;background:linear-gradient(135deg,#fafafa,#f0f0f0);padding:1rem}.hero-selector-header{text-align:center;margin-bottom:1.25rem}.hero-selector-header h1{margin:0 0 .25rem;font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#1a1a1a,#4b5563);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-selector-header p{margin:0;font-size:.875rem;color:#6b7280}.hero-list{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem}.loading,.error{text-align:center;padding:3rem 1rem;color:#6b7280;font-size:.9375rem}.error{color:#dc2626}@media(max-width:768px){.hero-selector{padding:.75rem}.hero-selector-header{margin-bottom:1rem}.hero-selector-header h1{font-size:1.25rem}.hero-selector-header p{font-size:.8125rem}.hero-list{gap:.625rem}}.scenario-selector{max-width:1200px;margin:0 auto;padding:2rem;min-height:100vh}.scenario-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.back-btn,.skip-btn{padding:.75rem 1.5rem;background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s}.back-btn:hover,.skip-btn:hover{background:#f3f4f6;transform:translateY(-2px)}.scenario-title{font-size:1.75rem;font-weight:700;color:#1f2937}.hero-preview{display:flex;align-items:center;gap:1.5rem;padding:1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;margin-bottom:2rem;color:#fff}.hero-preview-img{width:100px;height:100px;border-radius:50%;object-fit:cover;border:4px solid white}.hero-preview-avatar{width:100px;height:100px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;font-size:3rem;border:4px solid white}.hero-preview-info h2{font-size:1.75rem;margin-bottom:.5rem}.hero-preview-info p{font-size:1rem;opacity:.95}.scenario-intro{background:#f0f9ff;padding:1.5rem;border-radius:12px;border-left:4px solid #3b82f6;margin-bottom:2rem}.scenario-intro h3{color:#1e40af;margin-bottom:.75rem;font-size:1.25rem}.scenario-intro p{color:#1e3a8a;line-height:1.6}.scenario-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;margin-bottom:2rem}.scenario-card{background:#fff;border:2px solid #e5e7eb;border-radius:16px;padding:1.5rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.scenario-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000001a;border-color:#3b82f6}.scenario-card.selected{border-color:#3b82f6;background:#eff6ff;box-shadow:0 8px 16px #3b82f633}.scenario-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.scenario-badge-icon{font-size:2.5rem}.scenario-difficulty{padding:.25rem .75rem;border-radius:12px;font-size:.875rem;font-weight:600;background:#ffffffe6}.scenario-card-title{font-size:1.25rem;font-weight:700;color:#1f2937;margin-bottom:.75rem}.scenario-card-description{color:#6b7280;font-size:.95rem;line-height:1.5;margin-bottom:1rem}.scenario-meta{display:flex;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e5e7eb}.scenario-time{color:#6b7280;font-size:.875rem}.scenario-objectives{margin-bottom:1rem}.scenario-objectives h4{font-size:.875rem;font-weight:600;color:#374151;margin-bottom:.5rem}.scenario-objectives ul{list-style:none;padding:0;margin:0}.scenario-objectives li{font-size:.875rem;color:#6b7280;padding-left:1.25rem;position:relative;margin-bottom:.25rem}.scenario-objectives li:before{content:"✓";position:absolute;left:0;color:#10b981;font-weight:700}.scenario-reward{display:flex;align-items:center;gap:.5rem;background:#fef3c7;padding:.75rem;border-radius:8px;font-size:.875rem;font-weight:500;color:#92400e}.reward-icon{font-size:1.25rem}.selected-indicator{position:absolute;top:1rem;right:1rem;background:#3b82f6;color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.875rem;font-weight:600}.no-scenarios{text-align:center;padding:4rem 2rem;background:#f9fafb;border-radius:12px}.no-scenarios p{font-size:1.125rem;color:#6b7280;margin-bottom:1.5rem}.free-chat-btn{padding:1rem 2rem;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.free-chat-btn:hover{background:#2563eb;transform:translateY(-2px)}.scenario-actions{position:fixed;bottom:0;left:0;right:0;padding:1.5rem;padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));background:#fff;border-top:2px solid #e5e7eb;box-shadow:0 -4px 12px #0000001a;display:flex;justify-content:center;z-index:100}.start-scenario-btn{padding:1rem 3rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:1.125rem;font-weight:700;cursor:pointer;transition:all .3s;box-shadow:0 4px 12px #667eea66}.start-scenario-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea80}.start-scenario-btn.disabled,.start-scenario-btn:disabled{background:#d1d5db;cursor:not-allowed;box-shadow:none}@media(max-width:768px){.scenario-selector{padding:1rem}.scenario-header{flex-wrap:wrap;gap:.75rem}.scenario-title{font-size:1.25rem;text-align:center;order:-1;width:100%;margin-bottom:.5rem}.back-btn,.skip-btn{flex:1;text-align:center;padding:.625rem .75rem;font-size:.875rem}.hero-preview{flex-direction:column;text-align:center}.scenario-grid{grid-template-columns:1fr}.scenario-actions{position:relative;padding:1rem;margin-top:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}.start-scenario-btn{width:100%;padding:1rem 2rem}}.message-bubble{display:flex;gap:.75rem;margin-bottom:1.5rem;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hero-message{justify-content:flex-start}.user-message{justify-content:flex-end}.message-avatar{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#e5e7eb,#d1d5db);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #9ca3af33}.avatar-emoji{font-size:1.75rem}.avatar-image{width:100%;height:100%;border-radius:50%;object-fit:cover}.message-content-wrapper{max-width:70%;display:flex;flex-direction:column;gap:.375rem}.user-message .message-content-wrapper{align-items:flex-end}.message-sender{padding:0 .75rem}.sender-name{font-size:.8125rem;font-weight:600;color:#4b5563}.message-bubble-content{background:#fff;border-radius:16px;padding:1rem 1.25rem;box-shadow:0 2px 8px #00000014;border:1px solid rgba(229,231,235,.5)}.hero-message .message-bubble-content{background:linear-gradient(135deg,#f3f4f6b3,#e5e7eb80);border-color:#9ca3af4d}.user-message .message-bubble-content{background:linear-gradient(135deg,#4b5563,#374151);color:#fff}.message-text{margin:0 0 .75rem;line-height:1.6;font-size:.9375rem;word-wrap:break-word}.user-message .message-text{color:#fff}.message-translation{margin:0 0 .75rem;padding:.75rem;background:#3b82f614;border-left:3px solid #3b82f6;border-radius:0 8px 8px 0;font-size:.875rem;color:#374151;line-height:1.6}.message-actions{display:flex;align-items:center;gap:.75rem;justify-content:space-between}.translate-btn{padding:.375rem .75rem;background:#fffc;border:1px solid rgba(209,213,219,.3);border-radius:100px;cursor:pointer;font-size:.875rem;transition:all .2s ease;display:flex;align-items:center;gap:.25rem}.translate-btn:hover:not(:disabled){background:#fff;border-color:#9ca3af80;transform:scale(1.05)}.translate-btn:disabled{opacity:.5;cursor:not-allowed}.user-message .translate-btn{background:#fff3;border-color:#ffffff4d}.user-message .translate-btn:hover:not(:disabled){background:#ffffff4d;border-color:#ffffff80}.message-time{font-size:.75rem;color:#9ca3af}.user-message .message-time{color:#ffffffb3}@media(max-width:768px){.message-content-wrapper{max-width:85%}.message-avatar{width:40px;height:40px}.avatar-emoji{font-size:1.5rem}.message-bubble-content{padding:.875rem 1rem}}.chat-input-container{background:#fff;border-top:1px solid rgba(229,231,235,.5);padding:1.25rem;padding-bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 12px #0000000a;flex-shrink:0}.voice-input-mode{display:flex;align-items:center;justify-content:center;gap:1rem}.main-mic-button{width:72px;height:72px;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:50%;cursor:pointer;font-size:2rem;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px #3b82f666;display:flex;align-items:center;justify-content:center}.main-mic-button:hover:not(:disabled){transform:scale(1.05);box-shadow:0 6px 28px #3b82f680}.main-mic-button.listening{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 20px #ef444466;animation:pulse-main-mic 1.5s ease-in-out infinite}@keyframes pulse-main-mic{0%,to{transform:scale(1);box-shadow:0 4px 20px #ef444466}50%{transform:scale(1.08);box-shadow:0 6px 30px #ef444499}}.main-mic-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.mic-icon,.mic-icon-listening{filter:brightness(0) invert(1)}.keyboard-toggle-btn,.mic-toggle-btn{width:44px;height:44px;background:#9ca3af1a;border:1px solid rgba(156,163,175,.3);border-radius:50%;cursor:pointer;font-size:1.25rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.keyboard-toggle-btn:hover,.mic-toggle-btn:hover{background:#9ca3af33;border-color:#9ca3af80}.voice-cancel-btn{width:44px;height:44px;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:50%;cursor:pointer;font-size:1.25rem;transition:all .3s ease;box-shadow:0 4px 12px #ef44444d;display:flex;align-items:center;justify-content:center}.voice-cancel-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 6px 16px #ef444466}.voice-cancel-btn:disabled{opacity:.5;cursor:not-allowed}.voice-send-btn{width:44px;height:44px;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:50%;cursor:pointer;font-size:1.25rem;transition:all .3s ease;box-shadow:0 4px 12px #10b9814d;display:flex;align-items:center;justify-content:center}.voice-send-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 6px 16px #10b98166}.voice-send-btn:disabled{opacity:.5;cursor:not-allowed}.chat-input-form{display:flex;gap:.75rem;align-items:flex-end}.chat-input-textarea{flex:1;min-height:48px;max-height:120px;padding:.875rem 1rem;border:2px solid rgba(229,231,235,.5);border-radius:16px;font-size:.9375rem;font-family:inherit;resize:none;transition:all .2s ease;line-height:1.5}.chat-input-textarea:focus{outline:none;border-color:#9ca3af;box-shadow:0 0 0 3px #9ca3af1a}.chat-input-textarea:disabled{background:#f9fafb;cursor:not-allowed}.chat-input-textarea::placeholder{color:#9ca3af}.send-button{width:48px;height:48px;background:linear-gradient(135deg,#2d2d2d,#1a1a1a);border:none;border-radius:50%;cursor:pointer;font-size:1.25rem;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000004d;display:flex;align-items:center;justify-content:center;flex-shrink:0}.send-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #0006}.send-button:active:not(:disabled){transform:translateY(0)}.send-button:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:0 2px 8px #0003}.stt-status{display:flex;align-items:flex-start;gap:.75rem;margin-top:1rem;padding:1rem;background:linear-gradient(135deg,#3b82f614,#3b82f60a);border:1px solid rgba(59,130,246,.2);border-radius:12px}.stt-indicator{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.stt-pulse{width:8px;height:8px;background:#3b82f6;border-radius:50%;animation:stt-blink 1s ease-in-out infinite}@keyframes stt-blink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.stt-label{font-size:.75rem;color:#3b82f6;font-weight:600}.stt-text{flex:1;font-size:1rem;color:#1f2937;font-weight:500;line-height:1.5;word-break:break-word}.stt-placeholder{color:#9ca3af;font-style:italic}.tts-status{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.75rem;padding:.5rem 1rem;background:#3b82f61a;border:1px solid rgba(59,130,246,.2);border-radius:8px}.tts-icon{font-size:1rem;animation:tts-pulse 1s ease-in-out infinite}@keyframes tts-pulse{0%,to{opacity:1}50%{opacity:.5}}.tts-text{font-size:.8125rem;color:#2563eb;font-weight:500}@media(max-width:768px){.chat-input-container{padding:1rem}.main-mic-button{width:64px;height:64px;font-size:1.75rem}.keyboard-toggle-btn,.mic-toggle-btn,.voice-cancel-btn,.voice-send-btn{width:40px;height:40px;font-size:1.125rem}.chat-input-textarea{font-size:.875rem;padding:.75rem .875rem}.send-button{width:44px;height:44px;font-size:1.125rem}.stt-status{margin-top:.75rem;padding:.875rem}.stt-label{font-size:.6875rem}.stt-text{font-size:.9375rem}}.end-conversation-btn{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:linear-gradient(135deg,#64748b,#475569);color:#fff;border:none;border-radius:20px;padding:8px 16px;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #4755694d;white-space:nowrap}.end-conversation-btn:hover:not(:disabled){background:linear-gradient(135deg,#475569,#334155);transform:translate(-50%) translateY(-2px);box-shadow:0 4px 12px #47556966}.end-conversation-btn:disabled{opacity:.5;cursor:not-allowed}.chat-input-container{position:relative}.insight-report-overlay{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem;animation:fadeIn .3s ease}.insight-report-modal{background:#fff;border-radius:24px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 80px #0000004d;animation:slideUp .4s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.insight-report-content{padding:2.5rem}.report-header{text-align:center;padding-bottom:2rem;border-bottom:2px solid rgba(156,163,175,.2);margin-bottom:2rem}.report-logo{width:80px;height:80px;object-fit:contain;margin-bottom:1rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15))}.report-title{margin:0 0 .5rem;font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,#1a1a2e,#16213e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.report-subtitle{margin:0;font-size:.9375rem;color:#6b7280;font-weight:500}.report-hero-section{display:flex;align-items:center;gap:1.25rem;padding:1.5rem;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:16px;margin-bottom:2rem}.report-hero-avatar{font-size:4rem;line-height:1}.report-hero-portrait{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid #e5e7eb}.report-hero-info{flex:1}.report-hero-name{margin:0 0 .25rem;font-size:1.5rem;font-weight:700;color:#1a1a1a}.report-hero-period{margin:0;font-size:.9375rem;color:#6b7280}.report-score-circle{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#10b981,#059669);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 12px #10b9814d}.report-score-circle .score-value{font-size:1.5rem;font-weight:800;color:#fff;-webkit-text-fill-color:white;background:none}.report-score-circle .score-label{font-size:.75rem;color:#ffffffe6}.report-stats{margin-bottom:2rem}.report-section-title{margin:0 0 1rem;font-size:1.125rem;font-weight:700;color:#374151}.report-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.stat-card{padding:1.25rem;background:linear-gradient(135deg,#fff,#f9fafb);border:1px solid rgba(156,163,175,.2);border-radius:12px;text-align:center;transition:all .3s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.stat-value{display:block;font-size:2rem;font-weight:800;background:linear-gradient(135deg,#1a1a2e,#0f3460);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.25rem}.stat-label{font-size:.8125rem;color:#6b7280;font-weight:500}.report-expressions{margin-bottom:2rem}.expressions-list{display:flex;flex-direction:column;gap:.5rem}.expression-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:linear-gradient(135deg,#eff6ff,#dbeafe);border-radius:8px;border:1px solid #bfdbfe}.expression-label{font-size:.9375rem;font-weight:600;color:#1e40af}.expression-count{font-size:.8125rem;font-weight:700;color:#3b82f6;background:#fff;padding:.25rem .5rem;border-radius:4px}.report-vocabulary{margin-bottom:2rem}.vocabulary-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.vocabulary-item{display:flex;flex-direction:column;padding:.875rem;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-radius:10px;border:1px solid #bbf7d0}.vocab-word{font-size:1rem;font-weight:700;color:#166534;margin-bottom:.25rem}.vocab-meaning{font-size:.8125rem;color:#15803d}.report-feedback{margin-bottom:2rem}.feedback-list{margin:0;padding:0;list-style:none}.feedback-item{position:relative;padding:.75rem .75rem .75rem 2rem;margin-bottom:.5rem;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:8px;font-size:.9375rem;color:#92400e;font-weight:500}.feedback-item:before{content:"→";position:absolute;left:.75rem;color:#d97706;font-weight:700}.report-footer{text-align:center;padding-top:1.5rem;border-top:2px solid rgba(156,163,175,.2)}.report-date{margin:0 0 .5rem;font-size:.8125rem;color:#9ca3af}.report-watermark{margin:0;font-size:.75rem;color:#d1d5db;font-weight:500}.report-actions{display:flex;gap:1rem;padding:1.5rem 2.5rem;background:#f9fafb;border-top:1px solid rgba(156,163,175,.2);border-radius:0 0 24px 24px}.report-save-btn{flex:1;padding:.875rem 1.5rem;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:.9375rem;cursor:pointer;transition:all .3s ease}.report-save-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #1a1a2e4d}.report-close-btn{padding:.875rem 1.5rem;background:#fff;color:#4b5563;border:1px solid rgba(156,163,175,.3);border-radius:12px;font-weight:600;font-size:.9375rem;cursor:pointer;transition:all .3s ease}.report-close-btn:hover{background:#f3f4f6;border-color:#9ca3af80}@media(max-width:768px){.insight-report-overlay{padding:1rem}.insight-report-content{padding:1.5rem}.report-logo{width:60px;height:60px}.report-title{font-size:1.5rem}.report-hero-avatar{font-size:3rem}.report-hero-name{font-size:1.25rem}.report-stats-grid{grid-template-columns:repeat(2,1fr)}.stat-value{font-size:1.5rem}.report-actions{flex-direction:column;padding:1rem 1.5rem}}.chat-interface{display:flex;flex-direction:column;flex:1;min-height:0;background:linear-gradient(135deg,#fafafa,#f0f0f0);overflow:hidden}.chat-header{position:sticky;top:0;z-index:100;background:#ffffffe6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(229,231,235,.3);box-shadow:0 4px 24px #0000000a}.chat-header-inner{max-width:900px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;gap:1.5rem}.back-button-chat{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;background:#9ca3af1a;border:1px solid rgba(156,163,175,.3);border-radius:100px;cursor:pointer;font-weight:600;font-size:.875rem;color:#4b5563;transition:all .3s cubic-bezier(.4,0,.2,1)}.back-button-chat:hover{background:#9ca3af33;border-color:#9ca3af80;transform:translate(-4px)}.hero-info{flex:1;display:flex;align-items:center;gap:.75rem}.hero-info-avatar{font-size:2.5rem}.hero-info-avatar-img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px #0000001a}.hero-info-text{flex:1}.hero-info-name{margin:0 0 .25rem;font-size:1.25rem;font-weight:700;background:linear-gradient(135deg,#1a1a1a,#4b5563);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-info-occupation{margin:0;font-size:.8125rem;color:#6b7280;font-weight:500}.chat-header-actions{display:flex;gap:.5rem}.auto-tts-btn,.report-btn,.reset-chat-btn{width:40px;height:40px;background:#fffc;border:1px solid rgba(209,213,219,.4);border-radius:50%;cursor:pointer;font-size:1.25rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}.auto-tts-btn.active{background:#3b82f61a;border-color:#3b82f666}.auto-tts-btn:hover{background:#3b82f626;border-color:#3b82f680;transform:scale(1.1)}.report-btn:hover{background:#fff;border-color:#9ca3af80;transform:scale(1.1)}.reset-chat-btn:hover{background:#fff;border-color:#9ca3af80;transform:rotate(180deg)}.chat-messages{flex:1;overflow-y:auto;padding:2rem}.chat-messages-inner{max-width:900px;margin:0 auto}.error-banner{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:#ef44441a;border:1px solid rgba(239,68,68,.2);border-radius:12px;margin-bottom:1.5rem}.error-icon{font-size:1.5rem;flex-shrink:0}.error-text{margin:0;color:#dc2626;font-size:.9375rem;line-height:1.5}.hero-intro-card{background:#fff;border-radius:16px;padding:1rem;margin-bottom:1rem;box-shadow:0 2px 12px #0000000f;border:1px solid rgba(156,163,175,.2);position:relative;overflow:hidden;display:flex;gap:1rem;align-items:flex-start}.hero-intro-card:before{content:"";position:absolute;top:50%;right:-20px;transform:translateY(-50%);width:100px;height:100px;background-image:url(/ClassicHero.png);background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.04;pointer-events:none;z-index:0}.intro-left{flex-shrink:0;position:relative;z-index:1}.intro-portrait{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgba(156,163,175,.2);box-shadow:0 2px 8px #0000001a}.intro-avatar{width:64px;height:64px;font-size:2rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border-radius:50%}.intro-right{flex:1;min-width:0;position:relative;z-index:1}.intro-header{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.25rem}.intro-name{margin:0;font-size:1.125rem;font-weight:700;background:linear-gradient(135deg,#1a1a1a,#4b5563);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.intro-period{font-size:.75rem;color:#9ca3af}.intro-summary{margin:0 0 .75rem;color:#6b7280;font-size:.8125rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.intro-topics{position:relative;z-index:1}.intro-topics-label{margin:0 0 .5rem;font-size:.75rem;font-weight:600;color:#374151}.intro-topics-list{display:flex;gap:.375rem;flex-wrap:wrap}.intro-topic-btn{padding:.375rem .75rem;background:linear-gradient(135deg,#9ca3af26,#d1d5db26);border:1px solid rgba(156,163,175,.3);border-radius:100px;cursor:pointer;font-size:.75rem;font-weight:600;color:#4b5563;transition:all .3s cubic-bezier(.4,0,.2,1)}.intro-topic-btn:hover:not(:disabled){background:linear-gradient(135deg,#4b5563,#374151);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #4b55634d}.intro-topic-btn:disabled{opacity:.5;cursor:not-allowed}.typing-indicator{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;animation:slideIn .3s ease}.typing-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#e5e7eb,#d1d5db);display:flex;align-items:center;justify-content:center;font-size:1.75rem;box-shadow:0 2px 8px #9ca3af33}.typing-dots{display:flex;gap:.375rem;padding:1rem 1.25rem;background:linear-gradient(135deg,#f3f4f6b3,#e5e7eb80);border:1px solid rgba(156,163,175,.3);border-radius:16px}.typing-dots span{width:8px;height:8px;background:#9ca3af;border-radius:50%;animation:typing 1.4s ease-in-out infinite}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typing{0%,60%,to{transform:translateY(0);opacity:.5}30%{transform:translateY(-8px);opacity:1}}@media(max-width:768px){.chat-header-inner{padding:1rem;gap:1rem}.hero-info-avatar{font-size:2rem}.hero-info-avatar-img{width:36px;height:36px}.hero-info-name{font-size:1.125rem}.chat-messages{padding:1rem}.hero-intro-card{padding:.875rem;gap:.75rem}.intro-portrait{width:56px;height:56px}.intro-avatar{width:56px;height:56px;font-size:1.75rem}.intro-name{font-size:1rem}.intro-period{font-size:.6875rem}.intro-summary{font-size:.75rem;-webkit-line-clamp:2;margin-bottom:.5rem}.intro-topics-label{font-size:.6875rem;margin-bottom:.375rem}.intro-topics-list{gap:.25rem}.intro-topic-btn{padding:.3125rem .625rem;font-size:.6875rem}}@media(max-width:480px){.chat-interface{padding-bottom:0}.back-button-chat{padding:.5rem .75rem;font-size:.75rem}.hero-info-name{font-size:1rem}.hero-info-occupation{font-size:.75rem}.auto-tts-btn,.report-btn,.reset-chat-btn{width:36px;height:36px;font-size:1.125rem}}.scenario-info{font-size:.875rem;color:#8b5cf6;font-weight:600;margin:0}.scenario-progress{display:flex;flex-direction:column;gap:.5rem}.progress-info{display:flex;align-items:center;gap:1rem;font-size:.875rem;color:#6b7280}.completed-badge{background:#10b981;color:#fff;padding:.25rem .75rem;border-radius:12px;font-weight:600;font-size:.75rem}.badge-modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.badge-modal{background:#fff;padding:3rem 2rem;border-radius:24px;max-width:500px;width:90%;text-align:center;box-shadow:0 25px 50px #0000004d;animation:slideUp .4s ease}.badge-celebration{font-size:4rem;animation:bounce .6s ease infinite}.badge-icon-large{font-size:6rem;margin:1rem 0;animation:scaleIn .5s ease}.badge-modal h2{font-size:2rem;color:#1f2937;margin-bottom:.5rem}.badge-name{font-size:1.5rem;color:#8b5cf6;margin-bottom:1rem}.badge-description{color:#6b7280;font-size:1.125rem;margin-bottom:2rem;line-height:1.6}.scenario-objectives-completed{background:#f0fdf4;padding:1.5rem;border-radius:12px;margin-bottom:2rem;text-align:left}.scenario-objectives-completed h4{color:#047857;margin-bottom:1rem;font-size:1rem}.scenario-objectives-completed ul{list-style:none;padding:0;margin:0}.scenario-objectives-completed li{color:#065f46;padding:.5rem 0;font-size:.95rem}.badge-close-btn{padding:1rem 2.5rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;border-radius:12px;font-size:1.125rem;font-weight:700;cursor:pointer;transition:all .3s;box-shadow:0 4px 12px #8b5cf666}.badge-close-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #8b5cf680}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.chat-ended-footer{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-top:1px solid #bbf7d0;padding:1.5rem;text-align:center;flex-shrink:0}.chat-ended-message{color:#16a34a;font-size:.9375rem;font-weight:600;margin:0 0 1rem}.chat-restart-btn{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:12px;padding:.75rem 1.5rem;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #3b82f64d}.chat-restart-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.settings-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:fadeIn .2s ease}.settings-modal{background:#fff;border-radius:16px;max-width:800px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;animation:slideUp .3s ease}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:2px solid #e5e7eb}.settings-header h2{margin:0;font-size:1.5rem;font-weight:700;color:#1e3a8a}.close-button{width:36px;height:36px;border:none;background:#f3f4f6;border-radius:8px;cursor:pointer;font-size:1.25rem;color:#6b7280;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.close-button:hover{background:#e5e7eb;color:#1f2937;transform:scale(1.05)}.settings-content{flex:1;overflow-y:auto;padding:2rem}.settings-section{margin-bottom:2.5rem}.settings-section:last-child{margin-bottom:0}.settings-section h3{margin:0 0 .5rem;font-size:1.125rem;font-weight:700;color:#1f2937}.section-description{margin:0 0 1.5rem;color:#6b7280;font-size:.875rem;line-height:1.5}.provider-selector{display:flex;flex-direction:column;gap:1rem}.provider-option{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:all .3s ease;background:#f9fafb}.provider-option:not(.disabled):hover{border-color:#3b82f6;background:#eff6ff;transform:translateY(-2px);box-shadow:0 4px 6px -1px #3b82f61a}.provider-option.active{border-color:#3b82f6;background:linear-gradient(135deg,#eff6ff,#dbeafe);box-shadow:0 4px 12px #3b82f633}.provider-option.disabled{opacity:.6;cursor:not-allowed;background:#f3f4f6}.provider-option input[type=radio]{margin-top:.25rem;width:20px;height:20px;cursor:pointer;accent-color:#3b82f6}.provider-option.disabled input[type=radio]{cursor:not-allowed}.provider-info{flex:1}.provider-name{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;color:#1f2937;margin-bottom:.25rem}.provider-emoji{font-size:1.25rem}.coming-soon{display:inline-block;padding:.125rem .5rem;background:#fef3c7;color:#92400e;font-size:.75rem;font-weight:600;border-radius:4px;margin-left:.5rem}.provider-description{margin:0;color:#6b7280;font-size:.875rem;line-height:1.5}.api-key-group{margin-bottom:1.5rem;padding:1.25rem;background:#f9fafb;border-radius:12px;border:2px solid #e5e7eb}.api-key-group.disabled{opacity:.6}.api-key-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.api-key-header label{font-weight:600;color:#1f2937;font-size:.9375rem}.coming-soon-badge{display:inline-block;padding:.125rem .5rem;background:#fef3c7;color:#92400e;font-size:.75rem;font-weight:600;border-radius:4px;margin-left:.5rem}.clear-key-btn{padding:.375rem .75rem;background:#fee2e2;color:#991b1b;border:none;border-radius:6px;font-size:.813rem;font-weight:600;cursor:pointer;transition:all .2s ease}.clear-key-btn:hover{background:#fecaca;transform:scale(1.05)}.api-key-input{width:100%;padding:.75rem 1rem;border:2px solid #d1d5db;border-radius:8px;font-size:.875rem;font-family:Courier New,monospace;transition:all .2s ease;background:#fff}.api-key-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.api-key-input:disabled{background:#f3f4f6;cursor:not-allowed}.api-key-preview{margin:.5rem 0 0;font-size:.813rem;color:#059669;font-family:Courier New,monospace}.api-key-link{display:inline-block;margin-top:.5rem;color:#3b82f6;font-size:.813rem;font-weight:600;text-decoration:none;transition:all .2s ease}.api-key-link:hover{color:#2563eb;text-decoration:underline}.api-key-note{margin:.5rem 0 0;font-size:.813rem;color:#6b7280;font-style:italic}.info-box{background:linear-gradient(135deg,#eff6ff,#dbeafe);padding:1.25rem;border-radius:12px;border-left:4px solid #3b82f6}.api-status-ok{color:#059669;font-weight:600;font-size:1rem;margin:0 0 .5rem}.api-note{color:#1e40af;font-size:.875rem;margin:0;line-height:1.5}.info-box ul{margin:0;padding-left:1.25rem}.info-box li{color:#1e40af;font-size:.875rem;line-height:1.7;margin-bottom:.5rem}.info-box li:last-child{margin-bottom:0}.settings-footer{padding:1.5rem 2rem;border-top:2px solid #e5e7eb;background:#f9fafb}.save-message{background:#d1fae5;color:#065f46;padding:.75rem 1rem;border-radius:8px;font-weight:600;font-size:.875rem;margin-bottom:1rem;text-align:center;border:2px solid #10b981}.settings-actions{display:flex;gap:.75rem;justify-content:flex-end}.cancel-btn,.save-btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s ease}.cancel-btn{background:#fff;color:#6b7280;border:2px solid #d1d5db}.cancel-btn:hover{background:#f3f4f6;color:#1f2937;border-color:#9ca3af}.save-btn{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 2px 4px #3b82f64d}.save-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}@media(max-width:768px){.settings-modal{max-height:95vh}.settings-header{padding:1.25rem 1.5rem}.settings-header h2{font-size:1.25rem}.settings-content{padding:1.5rem}.settings-footer{padding:1.25rem 1.5rem}.provider-option,.api-key-group{padding:1rem}.settings-actions{flex-direction:column}.cancel-btn,.save-btn{width:100%}}.install-prompt-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:fadeIn .3s ease-in-out}.install-prompt-card{background:#fff;border-radius:16px;padding:24px;max-width:400px;width:100%;position:relative;box-shadow:0 10px 40px #0003;animation:slideUp .3s ease-in-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.install-prompt-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:24px;color:#999;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.install-prompt-close:hover{background:#f3f4f6;color:#333}.install-prompt-icon{width:80px;height:80px;margin:0 auto 16px;border-radius:16px;overflow:hidden;box-shadow:0 4px 12px #0000001a}.install-prompt-icon img{width:100%;height:100%;object-fit:cover}.install-prompt-title{font-size:24px;font-weight:700;text-align:center;margin-bottom:12px;color:#1f2937}.install-prompt-content{margin-bottom:16px}.install-prompt-description{text-align:center;color:#6b7280;margin-bottom:16px;line-height:1.5}.install-prompt-steps{list-style:none;padding:0;margin:0}.install-prompt-steps li{padding:12px 16px;background:#f9fafb;border-radius:8px;margin-bottom:8px;color:#374151;line-height:1.6}.ios-share-icon{display:inline-block;font-size:18px;font-weight:700;color:#4f46e5;margin:0 4px}.install-prompt-button{width:100%;padding:14px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #667eea66}.install-prompt-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea80}.install-prompt-button:active{transform:translateY(0)}.install-prompt-later{width:100%;padding:12px;background:transparent;color:#6b7280;border:none;font-size:14px;cursor:pointer;transition:color .2s}.install-prompt-later:hover{color:#374151}@media(max-width:480px){.install-prompt-card{padding:20px}.install-prompt-title{font-size:20px}.install-prompt-icon{width:64px;height:64px}}.my-learning{max-width:800px;margin:0 auto;padding:1rem}.my-learning-tabs{display:flex;gap:.25rem;background:#f3f4f6;border-radius:12px;padding:4px;margin-bottom:1.25rem}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.625rem .5rem;border:none;border-radius:10px;background:transparent;color:#6b7280;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease}.tab-btn.active{background:#fff;color:#1e3a8a;font-weight:600;box-shadow:0 1px 3px #0000001a}.tab-icon{font-size:1rem}.my-learning-content{width:100%;box-sizing:border-box}.my-learning-content>div{width:100%;box-sizing:border-box}.dashboard-welcome{margin-bottom:1.25rem}.dashboard-welcome h2{font-size:1.4rem;color:#1f2937;margin:0 0 .25rem}.dashboard-welcome p{color:#6b7280;margin:0;font-size:.875rem}.stats-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.5rem}.stat-card{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#fff;border-radius:12px;box-shadow:0 1px 3px #00000014;min-width:0}.stat-card-icon{font-size:1.5rem;flex-shrink:0}.stat-card-info{display:flex;flex-direction:column;min-width:0}.stat-card-value{font-size:1.1rem;font-weight:700;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-card-label{font-size:.7rem;color:#9ca3af}.dashboard-section{background:#fff;border-radius:12px;padding:1rem 1.25rem;margin-bottom:1rem;box-shadow:0 1px 3px #00000014}.dashboard-section h3{font-size:.95rem;color:#374151;margin:0 0 .75rem}.progress-bar-large{height:12px;background:#e5e7eb;border-radius:6px;overflow:hidden;margin-bottom:.5rem}.progress-fill-large{height:100%;background:linear-gradient(90deg,#3b82f6,#2563eb);border-radius:6px;transition:width .6s ease}.progress-details{display:flex;justify-content:space-between;font-size:.75rem;color:#6b7280}.progress-percent{font-weight:700;color:#3b82f6}.recent-book-card{display:flex;gap:.75rem;align-items:center}.recent-book-cover{width:48px;height:64px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.recent-book-cover img{width:100%;height:100%;object-fit:cover}.recent-book-initial{color:#fff;font-size:1.25rem;font-weight:700}.recent-book-info{min-width:0}.recent-book-info h4{margin:0 0 .125rem;font-size:.9rem;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-book-info p{margin:0 0 .25rem;font-size:.75rem;color:#6b7280}.recent-chapter{font-size:.7rem;color:#3b82f6;font-weight:500}.badge-preview{display:flex;gap:.75rem}.badge-preview-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.badge-preview-icon{font-size:2rem}.badge-preview-name{font-size:.65rem;color:#6b7280}.empty-message{font-size:.8rem;color:#9ca3af;margin:0}.record-list{display:flex;flex-direction:column;gap:.5rem}.record-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #f3f4f6}.record-item:last-child{border-bottom:none}.record-label{font-size:.85rem;color:#6b7280}.record-value{font-size:.9rem;font-weight:600;color:#1f2937}.learning-calendar{overflow:hidden}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.calendar-header h3{margin:0;font-size:.95rem;color:#374151}.calendar-nav{display:flex;align-items:center;gap:.5rem}.calendar-nav-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;border-radius:6px;background:#f9fafb;color:#374151;font-size:1.1rem;cursor:pointer;transition:all .2s;font-family:inherit;line-height:1}.calendar-nav-btn:hover:not(:disabled){background:#e5e7eb}.calendar-nav-btn:disabled{opacity:.3;cursor:default}.calendar-month-label{font-size:.85rem;font-weight:600;color:#1f2937;min-width:90px;text-align:center}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.calendar-weekday{text-align:center;font-size:.7rem;font-weight:600;color:#9ca3af;padding:4px 0}.calendar-weekday.sunday{color:#ef4444}.calendar-weekday.saturday{color:#3b82f6}.calendar-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;position:relative;transition:background .2s}.calendar-day.empty{background:transparent}.calendar-day-number{font-size:.8rem;font-weight:500;color:#374151;line-height:1}.calendar-day-star{font-size:.5rem;line-height:1;margin-top:1px;color:#d97706}.calendar-day.today{outline:2px solid #3b82f6;outline-offset:-2px}.calendar-day.future{opacity:.3}.calendar-day.future .calendar-day-number{color:#d1d5db}.calendar-day.studied.level-1{background:#dbeafe}.calendar-day.studied.level-2{background:#93c5fd}.calendar-day.studied.level-2 .calendar-day-number{color:#1e3a8a}.calendar-day.studied.level-3{background:#3b82f6}.calendar-day.studied.level-3 .calendar-day-number{color:#fff}.calendar-day.perfect{background:linear-gradient(135deg,#fef3c7,#fde68a)}.calendar-day.perfect .calendar-day-number{color:#92400e;font-weight:700}.calendar-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem;padding-top:.625rem;border-top:1px solid #f3f4f6}.calendar-legend{display:flex;gap:.75rem}.legend-item{display:flex;align-items:center;gap:4px;font-size:.65rem;color:#6b7280}.legend-dot{width:10px;height:10px;border-radius:3px;background:#f3f4f6;border:1px solid #e5e7eb}.legend-dot.studied{background:#3b82f6;border-color:#3b82f6}.legend-dot.perfect{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#fbbf24}.calendar-summary{font-size:.7rem;font-weight:600;color:#374151}.badge-collection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.badge-collection-header h2{font-size:1.3rem;color:#1f2937;margin:0}.badge-count{font-size:.85rem;color:#6b7280;font-weight:500}.badge-progress-bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;margin-bottom:1.25rem}.badge-progress-fill{height:100%;background:linear-gradient(90deg,#f59e0b,#d97706);border-radius:4px;transition:width .6s ease}.badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.badge-card{text-align:center;padding:1rem .5rem;border-radius:12px;transition:transform .2s ease;min-width:0}.badge-card.unlocked{background:#fff;box-shadow:0 2px 8px #f59e0b26;border:1px solid rgba(245,158,11,.2)}.badge-card.locked{background:#f9fafb;border:1px solid #e5e7eb;opacity:.7}.badge-card.unlocked:hover{transform:translateY(-2px)}.badge-icon-wrapper{margin-bottom:.5rem}.badge-icon{font-size:2.25rem}.badge-card.locked .badge-icon{font-size:1.75rem}.badge-name{font-size:.8rem;color:#1f2937;margin:0 0 .25rem}.badge-desc{font-size:.65rem;color:#9ca3af;margin:0 0 .5rem;line-height:1.3}.badge-date{font-size:.6rem;color:#f59e0b;font-weight:500}.badge-progress-mini{height:4px;background:#e5e7eb;border-radius:2px;overflow:hidden;margin-bottom:.25rem}.badge-progress-mini-fill{height:100%;background:#d1d5db;border-radius:2px}.badge-progress-text{font-size:.6rem;color:#9ca3af}.statistics h2{font-size:1.3rem;color:#1f2937;margin:0 0 1rem}.stats-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem}.stats-summary-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem .5rem;background:#fff;border-radius:10px;box-shadow:0 1px 3px #00000014;min-width:0}.summary-icon{font-size:1.25rem}.summary-value{font-size:1.1rem;font-weight:700;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.summary-label{font-size:.65rem;color:#9ca3af}.donut-charts-section{background:#fff;border-radius:12px;padding:1rem 1.25rem;margin-bottom:1rem;box-shadow:0 1px 3px #00000014}.donut-charts-section h3{font-size:.95rem;color:#374151;margin:0 0 .75rem}.donut-charts-row{display:flex;justify-content:space-around;align-items:center}.donut-chart-item{display:flex;flex-direction:column;align-items:center;gap:.5rem}.donut-chart-svg{display:block}.donut-chart-text{font-size:.95rem;font-weight:700}.donut-chart-label{font-size:.7rem;color:#6b7280;font-weight:500}.streak-section{background:#fff;border-radius:12px;padding:1rem 1.25rem;margin-bottom:1rem;box-shadow:0 1px 3px #00000014}.streak-section h3{font-size:.95rem;color:#374151;margin:0 0 .75rem}.streak-cards{display:flex;gap:.75rem}.streak-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem;border-radius:10px;min-width:0}.streak-card.current{background:#fef3c7}.streak-card.best{background:#ede9fe}.streak-icon{font-size:1.25rem}.streak-value{font-size:1.5rem;font-weight:800;color:#1f2937}.streak-label{font-size:.7rem;color:#6b7280}.last-study{font-size:.75rem;color:#9ca3af;margin:.5rem 0 0;text-align:center}.weekly-chart-section{background:#fff;border-radius:12px;padding:1rem 1.25rem;box-shadow:0 1px 3px #00000014}.weekly-chart-section h3{font-size:.95rem;color:#374151;margin:0 0 .75rem}.weekly-chart{display:flex;justify-content:space-between;align-items:flex-end;height:140px;gap:.5rem}.chart-bar-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}.chart-bar-container{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}.chart-bar{width:70%;max-width:40px;background:#e5e7eb;border-radius:4px 4px 0 0;transition:height .4s ease}.chart-bar.active{background:linear-gradient(180deg,#3b82f6,#2563eb)}.chart-label{font-size:.7rem;color:#6b7280;margin-top:.375rem;font-weight:500}.chart-time{font-size:.55rem;color:#9ca3af}.data-management h2{font-size:1.3rem;color:#1f2937;margin:0 0 1rem}.data-section{background:#fff;border-radius:12px;padding:1rem 1.25rem;margin-bottom:1rem;box-shadow:0 1px 3px #00000014}.data-section.danger{border:1px solid #fecaca}.data-section h3{font-size:.95rem;color:#374151;margin:0 0 .5rem}.data-desc{font-size:.8rem;color:#6b7280;margin:0 0 .75rem}.data-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.6rem 1.25rem;border:none;border-radius:8px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease}.export-btn{background:#3b82f6;color:#fff}.export-btn:hover{background:#2563eb}.export-btn:disabled{background:#d1d5db;cursor:not-allowed}.import-options{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}.import-btn{background:#10b981;color:#fff}.import-btn.merge{background:#8b5cf6}.import-btn:hover{opacity:.9}.import-hint{font-size:.7rem;color:#9ca3af;margin:0}.reset-btn{background:#ef4444;color:#fff}.reset-btn:hover{background:#dc2626}.reset-btn:disabled{background:#d1d5db;cursor:not-allowed}.reset-btn.final{background:#991b1b}.cancel-btn{background:#e5e7eb;color:#374151}.cancel-btn:hover{background:#d1d5db}.reset-confirm{margin-top:.5rem}.reset-warning{font-size:.85rem;color:#ef4444;font-weight:500;margin:0 0 .5rem}.reset-warning.final{color:#991b1b;font-weight:600}.reset-actions{display:flex;gap:.5rem}.storage-bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;margin-bottom:.375rem}.storage-fill{height:100%;background:linear-gradient(90deg,#10b981,#059669);border-radius:4px}.storage-text{font-size:.75rem;color:#6b7280}.import-status{position:fixed;bottom:80px;left:50%;transform:translate(-50%);padding:.75rem 1.5rem;border-radius:10px;font-size:.85rem;font-weight:500;z-index:1000;animation:slideUp .3s ease}.import-status.success{background:#10b981;color:#fff}.import-status.error{background:#ef4444;color:#fff}@keyframes slideUp{0%{transform:translate(-50%) translateY(20px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}@media(min-width:769px){.my-learning{padding:1.5rem}.stats-cards{grid-template-columns:repeat(4,1fr)}.stats-summary-grid{grid-template-columns:repeat(6,1fr)}.badges-grid{gap:1rem}.badge-card{padding:1.25rem .75rem}.badge-icon{font-size:2.5rem}.badge-name{font-size:.85rem}.badge-desc{font-size:.7rem}.import-options{flex-direction:row}}@media(min-width:481px)and (max-width:768px){.my-learning{padding:1rem}.stats-cards{grid-template-columns:repeat(2,1fr)}.stats-summary-grid,.badges-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:480px){.my-learning{padding:.75rem}.tab-btn{padding:.5rem .25rem;font-size:.7rem;gap:.25rem}.tab-icon{font-size:.9rem}.tab-label{display:none}.dashboard-welcome h2{font-size:1.2rem}.calendar-grid{gap:2px}.calendar-day{border-radius:6px}.calendar-day-number{font-size:.7rem}.calendar-day-star{font-size:.4rem}.calendar-footer{flex-direction:column;gap:.375rem;align-items:flex-start}.stats-cards{grid-template-columns:repeat(2,1fr);gap:.5rem}.stat-card{padding:.75rem;gap:.5rem}.stat-card-icon{font-size:1.25rem}.stat-card-value{font-size:.95rem}.dashboard-section{padding:.75rem 1rem}.badge-collection-header h2{font-size:1.1rem}.badges-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}.badge-card{padding:.75rem .25rem}.badge-icon{font-size:1.75rem}.badge-card.locked .badge-icon{font-size:1.5rem}.badge-name{font-size:.7rem}.badge-desc{font-size:.6rem}.statistics h2{font-size:1.1rem}.stats-summary-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}.stats-summary-item{padding:.5rem .25rem}.summary-value{font-size:.85rem}.summary-label{font-size:.6rem}.donut-chart-svg{width:80px;height:80px}.donut-chart-text{font-size:.8rem}.donut-chart-label{font-size:.6rem}.streak-section,.donut-charts-section,.weekly-chart-section{padding:.75rem 1rem}.streak-value{font-size:1.25rem}.weekly-chart{height:120px;gap:.25rem}.data-management h2{font-size:1.1rem}.data-section{padding:.75rem 1rem}.import-options{flex-direction:column}.data-btn{width:100%;justify-content:center}}.today-quest-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px;color:#64748b}.loading-spinner{width:40px;height:40px;border:3px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.today-quest{max-width:600px;margin:0 auto;padding:20px 16px}.today-quest-header{margin-bottom:24px}.quest-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.quest-header-title{font-size:24px;font-weight:700;color:#1e293b;margin:0}.quest-header-streak{display:flex;align-items:center;gap:4px;background:#fff7ed;padding:6px 12px;border-radius:20px;border:1px solid #fed7aa}.streak-fire{font-size:16px}.streak-count{font-size:14px;font-weight:600;color:#ea580c}.quest-header-date{font-size:14px;color:#64748b;margin:0 0 16px}.quest-progress-bar{height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;margin-bottom:8px}.quest-progress-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#10b981);border-radius:4px;transition:width .5s ease}.quest-progress-text{font-size:13px;color:#64748b;margin:0}.quest-cards{display:flex;flex-direction:column;gap:12px}.quest-card{display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;cursor:pointer;transition:all .2s ease;width:100%;text-align:left;font-family:inherit}.quest-card:hover:not(:disabled){border-color:#3b82f6;box-shadow:0 2px 8px #3b82f61f;transform:translateY(-1px)}.quest-card:active:not(:disabled){transform:translateY(0)}.quest-card--completed{background:#f0fdf4;border-color:#bbf7d0}.quest-card--completed:hover{border-color:#86efac;box-shadow:0 2px 8px #22c55e1f;transform:translateY(-1px)}.quest-card-icon{font-size:28px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#f1f5f9;border-radius:12px;flex-shrink:0}.quest-card--completed .quest-card-icon{background:#dcfce7}.quest-card-info{flex:1;min-width:0}.quest-card-title{font-size:16px;font-weight:600;color:#1e293b;margin:0 0 2px}.quest-card--completed .quest-card-title{color:#16a34a}.quest-card-subtitle{font-size:13px;color:#64748b;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quest-card-right{flex-shrink:0}.quest-card-duration{font-size:12px;color:#94a3b8;background:#f1f5f9;padding:4px 8px;border-radius:6px}.quest-card-done{font-size:12px;color:#16a34a;font-weight:600;background:#dcfce7;padding:4px 10px;border-radius:6px}.quest-perfect-day{display:flex;align-items:center;gap:12px;margin-top:24px;padding:16px;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:14px;border:1px solid #fbbf24}.perfect-day-icon{font-size:32px}.perfect-day-text strong{display:block;font-size:16px;color:#92400e;margin-bottom:2px}.perfect-day-text p{font-size:13px;color:#a16207;margin:0}.quest-detail{max-width:600px;margin:0 auto;padding:20px 16px}.quest-detail-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}.quest-back-btn{display:flex;align-items:center;gap:6px;background:#f1f5f9;border:1.5px solid #e2e8f0;font-size:14px;font-weight:600;cursor:pointer;padding:8px 14px;border-radius:10px;color:#475569;transition:all .2s;white-space:nowrap}.quest-back-btn .back-arrow{font-size:16px;line-height:1}.quest-back-btn .back-label{font-size:13px}.quest-back-btn:hover{background:#e2e8f0;border-color:#cbd5e1;color:#334155}.quest-back-btn:active{background:#cbd5e1;transform:scale(.97)}.quest-detail-title{font-size:20px;font-weight:700;color:#1e293b;margin:0}.quest-section{margin-bottom:24px}.quest-section-label{font-size:12px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}.quest-complete-btn{width:100%;padding:14px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}.quest-complete-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.quest-complete-btn:active{transform:translateY(0)}.quest-complete-btn:disabled{background:#94a3b8;cursor:default;transform:none;box-shadow:none}.quest-completed-badge{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;color:#16a34a;font-size:16px;font-weight:600;margin-bottom:12px}.quest-complete-btn.secondary{background:linear-gradient(135deg,#64748b,#475569);color:#fff}.quest-complete-btn.secondary:hover{box-shadow:0 4px 12px #4755694d}@media(min-width:768px){.today-quest{padding:32px 24px}.quest-header-title{font-size:28px}.quest-cards{gap:14px}.quest-card{padding:20px}}.reading-quote-card{display:flex;gap:14px;padding:18px;background:linear-gradient(135deg,#eff6ff,#dbeafe);border-radius:14px;border:1px solid #bfdbfe}.reading-hero-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #fff;box-shadow:0 2px 8px #0000001a}.reading-quote-content{flex:1;min-width:0}.reading-quote-name{font-size:13px;font-weight:600;color:#3b82f6;margin:0 0 6px}.reading-quote-text{font-size:15px;line-height:1.6;color:#1e3a5f;margin:0 0 10px;font-style:italic;border:none;padding:0}.reading-btn-row{display:flex;gap:8px;flex-wrap:wrap}.reading-listen-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;background:#fff;border:1px solid #bfdbfe;border-radius:8px;font-size:13px;color:#3b82f6;cursor:pointer;transition:all .2s;font-family:inherit}.reading-listen-btn:hover:not(:disabled){background:#eff6ff}.reading-listen-btn:disabled{opacity:.6;cursor:default}.reading-listen-btn.stop{background:#fef2f2;border-color:#fecaca;color:#dc2626}.reading-listen-btn.stop:hover{background:#fee2e2}.reading-translate-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;color:#475569;cursor:pointer;transition:all .2s;font-family:inherit}.reading-translate-btn:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.reading-translate-btn:disabled{opacity:.6;cursor:default}.reading-translation{font-size:14px;line-height:1.6;color:#6b7280;margin:0 0 10px;padding:10px 12px;background:#ffffffb3;border-radius:8px;border-left:3px solid #3b82f6}.reading-translation.passage{background:#f8fafc;border-left-color:#6366f1}.reading-passage-card{padding:18px;background:#fff;border:1px solid #e2e8f0;border-radius:14px}.reading-passage-meta{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}.reading-passage-book{font-size:12px;color:#6366f1;background:#eef2ff;padding:3px 10px;border-radius:6px;font-weight:500}.reading-passage-chapter{font-size:12px;color:#64748b;background:#f1f5f9;padding:3px 10px;border-radius:6px}.reading-passage-desc{font-size:13px;color:#94a3b8;margin:0 0 14px;line-height:1.5}.reading-passage-text{font-size:16px;line-height:1.8;color:#334155;margin:0 0 16px;word-break:break-word}.reading-sentence{transition:background .3s,color .3s;border-radius:2px;padding:1px 0}.reading-sentence.highlight{background:#fef3c7;color:#92400e;padding:1px 2px;border-radius:3px}.reading-empty{text-align:center;padding:40px 20px;color:#94a3b8}.reading-empty p{margin:4px 0}.speaking-sentence-card{padding:18px;background:#fff;border:1px solid #e2e8f0;border-radius:14px}.speaking-sentence-text{font-size:18px;line-height:1.7;color:#1e293b;margin:0 0 8px;font-weight:500}.speaking-sentence-source{font-size:12px;color:#94a3b8;margin:0 0 10px}.speaking-translation{font-size:14px;color:#6b7280;background:#f8fafc;padding:10px 14px;border-radius:8px;margin:0 0 12px;border-left:3px solid #3b82f6;line-height:1.6}.speaking-btn-row{display:flex;gap:8px;flex-wrap:wrap}.speaking-listen-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;font-size:14px;color:#3b82f6;cursor:pointer;transition:all .2s;font-family:inherit}.speaking-listen-btn:hover:not(:disabled){background:#dbeafe}.speaking-listen-btn:disabled{opacity:.6;cursor:default}.speaking-translate-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;font-size:14px;color:#16a34a;cursor:pointer;transition:all .2s;font-family:inherit}.speaking-translate-btn:hover:not(:disabled){background:#dcfce7}.speaking-translate-btn:disabled{opacity:.6;cursor:default}.speaking-record-area{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 16px;background:#f8fafc;border-radius:14px;border:1px dashed #cbd5e1}.speaking-record-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 40px;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:3px solid #3b82f6;border-radius:20px;cursor:pointer;transition:all .3s;font-family:inherit;width:100%;max-width:280px}.speaking-record-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #3b82f64d;background:linear-gradient(135deg,#dbeafe,#bfdbfe)}.speaking-record-btn:disabled{opacity:.5;cursor:default}.record-btn-icon{font-size:48px;line-height:1}.record-btn-label{font-size:18px;font-weight:700;color:#1e40af}.record-btn-hint{font-size:12px;color:#64748b;text-align:center}.speaking-recording-controls{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:8px 0}.recording-indicator{display:flex;align-items:center;gap:8px}.recording-dot{width:12px;height:12px;background:#ef4444;border-radius:50%;animation:recording-blink 1s ease-in-out infinite}@keyframes recording-blink{0%,to{opacity:1}50%{opacity:.3}}.recording-label{font-size:16px;font-weight:600;color:#dc2626}.recording-actions{display:flex;gap:12px;width:100%;max-width:300px}.recording-cancel-btn{flex:1;padding:12px 16px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;font-size:15px;font-weight:600;color:#64748b;cursor:pointer;transition:all .2s;font-family:inherit}.recording-cancel-btn:hover{background:#e2e8f0}.recording-done-btn{flex:1.5;padding:12px 16px;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:10px;font-size:15px;font-weight:600;color:#fff;cursor:pointer;transition:all .2s;font-family:inherit}.recording-done-btn:hover{box-shadow:0 4px 12px #3b82f666}.speaking-live-transcript{width:100%;text-align:center;padding:12px;background:#fff;border-radius:10px;border:1px solid #e2e8f0}.live-text{font-size:15px;color:#475569;margin:0;font-style:italic;min-height:22px}.speaking-unsupported{text-align:center;color:#ef4444;font-size:14px}.speaking-result-card{padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:14px}.speaking-accuracy-display{text-align:center;margin-bottom:20px}.accuracy-circle{display:inline-flex;align-items:baseline;justify-content:center;width:80px;height:80px;border-radius:50%;margin-bottom:8px}.accuracy-high{background:#dcfce7;color:#16a34a}.accuracy-mid{background:#fef3c7;color:#d97706}.accuracy-low{background:#fee2e2;color:#dc2626}.accuracy-number{font-size:28px;font-weight:700;line-height:80px}.accuracy-percent{font-size:14px;font-weight:500}.accuracy-label{font-size:15px;font-weight:600;color:#475569;margin:0}.speaking-transcript-compare{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.transcript-row{display:flex;gap:10px;align-items:flex-start}.transcript-label{font-size:11px;font-weight:600;color:#94a3b8;flex-shrink:0;width:48px;padding-top:2px}.transcript-text{font-size:14px;line-height:1.5;color:#334155;margin:0;flex:1}.transcript-spoken{color:#3b82f6}.speaking-result-actions{text-align:center}.speaking-retry-btn{padding:10px 24px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;color:#475569;cursor:pointer;transition:all .2s;font-family:inherit}.speaking-retry-btn:hover{background:#e2e8f0}.speaking-empty{text-align:center;padding:40px 20px;color:#94a3b8}.speaking-empty p{margin:4px 0}.chat-hero-card{display:flex;gap:16px;padding:18px;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-radius:14px;border:1px solid #bbf7d0}.chat-hero-portrait{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid #fff;box-shadow:0 2px 8px #0000001a}.chat-hero-info{flex:1;min-width:0}.chat-hero-name{font-size:18px;font-weight:700;color:#166534;margin:0 0 2px}.chat-hero-period{font-size:12px;color:#16a34a;margin:0 0 8px}.chat-hero-summary{font-size:13px;line-height:1.5;color:#475569;margin:0}.chat-topic-card{padding:16px;background:#fff;border:1px solid #e2e8f0;border-radius:14px}.chat-topic-title{font-size:16px;font-weight:600;color:#1e293b;margin:0 0 10px}.chat-topic-questions{margin:0;padding-left:20px;list-style:none}.chat-topic-questions li{font-size:14px;color:#475569;line-height:1.6;position:relative;padding-left:4px}.chat-topic-questions li:before{content:"💬";position:absolute;left:-22px;font-size:12px}.chat-mission-info{display:flex;align-items:flex-start;gap:10px;padding:14px;background:#fefce8;border-radius:10px;border:1px solid #fde68a}.mission-info-icon{font-size:18px;flex-shrink:0}.chat-mission-info p{font-size:14px;color:#713f12;margin:0;line-height:1.5}.daily-chat-wrapper{display:flex;flex-direction:column;height:100%}.chat-quest-progress-bar{padding:10px 16px;background:#fff;border-bottom:1px solid #e2e8f0;z-index:10}.chat-quest-progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13px;color:#475569}.chat-quest-done{color:#16a34a;font-weight:600}.chat-quest-progress-track{height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden}.chat-quest-progress-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#10b981);border-radius:2px;transition:width .5s ease}.chat-quest-empty{text-align:center;padding:40px 20px;color:#94a3b8}.chat-quest-empty p{margin:4px 0}.app{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#fafafa,#f0f0f0)}.app-main{flex:1;display:flex;flex-direction:column}@media(max-width:480px){.app-main{padding-bottom:70px}body.in-chat .app-main{padding-bottom:0}}body.in-chat .talk-to-hero{display:flex;flex-direction:column;flex:1;min-height:0}body.in-chat .footer{display:none}body.in-chat .app{height:100vh;height:100dvh;overflow:hidden}body.in-chat .app-main{flex:1;min-height:0}.badge-unlock-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .3s ease}.badge-unlock-modal{background:#fff;border-radius:20px;padding:2rem 2.5rem;text-align:center;max-width:320px;width:90%;animation:scaleIn .4s cubic-bezier(.34,1.56,.64,1)}.badge-unlock-celebration{font-size:2rem;margin-bottom:.5rem}.badge-unlock-icon{font-size:3.5rem;margin-bottom:.5rem}.badge-unlock-title{font-size:1.25rem;color:#f59e0b;margin:0 0 .25rem}.badge-unlock-name{font-size:1.1rem;color:#1f2937;margin:0 0 .5rem}.badge-unlock-desc{font-size:.875rem;color:#6b7280;margin:0 0 1.25rem}.badge-unlock-close{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;padding:.6rem 2rem;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.storage-alert{position:fixed;top:0;left:0;right:0;z-index:9999;animation:slideDown .3s ease}.storage-alert.warning{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.storage-alert.error{background:linear-gradient(135deg,#f87171,#ef4444)}.storage-alert-content{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;max-width:800px;margin:0 auto}.storage-alert-icon{font-size:1.25rem;flex-shrink:0}.storage-alert-message{flex:1;font-size:.875rem;font-weight:500;color:#fff}.storage-alert-action{background:#ffffff40;color:#fff;border:1px solid rgba(255,255,255,.4);padding:.4rem 1rem;border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s}.storage-alert-action:hover{background:#ffffff59}.storage-alert-close{background:none;border:none;color:#fffc;font-size:1.1rem;cursor:pointer;padding:.25rem;line-height:1}.storage-alert-close:hover{color:#fff}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:480px){.storage-alert-content{padding:.75rem;gap:.5rem}.storage-alert-message{font-size:.8rem}.storage-alert-action{padding:.35rem .75rem;font-size:.75rem}}