:root{--bg:hsl(40,33%,98%);--fg:hsl(222,47%,11%);--card:#fff;--primary:hsl(222,47%,20%);--primary-fg:hsl(40,33%,98%);--secondary:hsl(38,92%,55%);--muted:hsl(220,14%,95%);--muted-fg:hsl(220,9%,46%);--border:hsl(220,13%,90%);--input:hsl(220,13%,90%);--destructive:hsl(0,84%,60%);--green:hsl(142,76%,36%);--red:hsl(0,84%,60%);--blue:hsl(213,94%,45%);--radius:.75rem;--font-sans:'Inter',sans-serif;--font-display:'Playfair Display',serif;--shadow-sm:0 1px 2px rgba(0,0,0,.04);--shadow:0 2px 8px rgba(0,0,0,.08);--shadow-lg:0 8px 24px rgba(0,0,0,.12)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg);color:var(--fg);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,textarea,select{font-family:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}.hidden{display:none!important}
#auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:linear-gradient(135deg,hsl(222,47%,96%),hsl(40,33%,96%))}.auth-card{background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius)*1.5);padding:2.5rem;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}.auth-logo,.logo{display:flex;align-items:center;gap:.75rem}.auth-logo{justify-content:center;margin-bottom:2rem}.logo{cursor:pointer}.auth-logo-icon,.logo-icon{background:var(--primary);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--primary-fg)}.auth-logo-icon{width:44px;height:44px}.logo-icon{width:36px;height:36px}.auth-logo-text,.logo-text{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}.auth-logo-text{font-size:1.5rem}.logo-text{font-size:1.2rem}.auth-tabs,.tabs{display:flex;background:var(--muted);border-radius:var(--radius);padding:3px}.auth-tabs{margin-bottom:1.5rem}.auth-tab,.tab-btn{flex:1;padding:.5rem;border:0;background:transparent;border-radius:calc(var(--radius) - 2px);font-size:.875rem;font-weight:500;color:var(--muted-fg);transition:.2s}.auth-tab.active,.tab-btn.active{background:var(--card);color:var(--fg);box-shadow:var(--shadow-sm)}.auth-form{display:flex;flex-direction:column;gap:1rem}.auth-error{background:hsl(0,84%,97%);border:1px solid hsl(0,84%,85%);color:hsl(0,72%,40%);border-radius:var(--radius);padding:.75rem 1rem;font-size:.875rem}.divider{display:flex;align-items:center;gap:1rem;color:var(--muted-fg);font-size:.75rem;margin:1rem 0}.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}.google-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.625rem 1rem;border:1px solid var(--border);background:var(--card);border-radius:var(--radius);font-size:.875rem;font-weight:500;transition:.2s;width:100%}.google-btn:hover{background:var(--muted)}
#app{min-height:100vh;display:flex;flex-direction:column}header{border-bottom:1px solid var(--border);background:rgba(255,255,255,.86);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50}.header-inner{max-width:1180px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:64px;gap:1rem}nav{display:flex;align-items:center;gap:2px;overflow-x:auto}.nav-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border:0;background:transparent;border-radius:var(--radius);font-size:.84rem;font-weight:500;color:var(--muted-fg);transition:.2s;white-space:nowrap}.nav-btn:hover{color:var(--fg);background:var(--muted)}.nav-btn.active{background:var(--primary);color:var(--primary-fg)}.nav-btn svg{width:16px;height:16px;flex-shrink:0}.user-area{display:flex;align-items:center;gap:.75rem}.user-email{font-size:.75rem;color:var(--muted-fg);display:none}@media(min-width:780px){.user-email{display:block}}.sign-out-btn{font-size:.75rem;padding:.375rem .75rem;border:1px solid var(--border);background:transparent;border-radius:var(--radius);color:var(--muted-fg)}main{flex:1}.page-inner{max-width:1180px;margin:0 auto;padding:2rem 1.5rem}.page{display:none}.page.active{display:block}.page-header{margin-bottom:2rem}.page-header h1{font-family:var(--font-display);font-size:2rem;font-weight:700}.page-header p{color:var(--muted-fg);margin-top:.25rem}.card{background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius)*1.25);padding:1.5rem}.grid{display:grid;gap:1rem}.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.form-max{max-width:620px}.field{margin-bottom:1rem}label.field-label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.375rem}.input{width:100%;padding:.55rem .75rem;border:1px solid var(--input);border-radius:var(--radius);font-size:.875rem;background:var(--card);color:var(--fg);transition:border-color .2s,box-shadow .2s;outline:0}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px hsl(222,47%,20%,.1)}.input.lg{height:52px;font-size:1rem;text-align:center}.input.sm{height:32px;padding:0 .625rem;font-size:.8rem}textarea.input{min-height:86px;resize:vertical}select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;padding-right:2rem}.hint{font-size:.76rem;color:var(--muted-fg);margin-top:.25rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;border:0;transition:.2s;white-space:nowrap}.btn svg{width:16px;height:16px}.btn-primary{background:var(--primary);color:var(--primary-fg)}.btn-primary:hover{opacity:.88}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-outline{background:transparent;border:1px solid var(--border);color:var(--fg)}.btn-outline:hover{background:var(--muted)}.btn-ghost{background:transparent;color:var(--fg)}.btn-ghost:hover{background:var(--muted)}.btn-danger{background:var(--destructive);color:#fff}.btn-lg{padding:.75rem 1.25rem;font-size:.9375rem}.btn-sm{padding:.25rem .625rem;font-size:.8rem}.btn-full{width:100%}.btn-icon{padding:.375rem;width:32px;height:32px}.row{display:flex;gap:.5rem;align-items:center}.row-wrap{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.dashboard-hero{text-align:center;margin-bottom:2.5rem}.dashboard-hero h1{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:.75rem}.dashboard-hero p{color:var(--muted-fg);font-size:1.1rem}.stat-card{text-align:center;padding:1.5rem 1rem}.stat-emoji{font-size:1.75rem;margin-bottom:.5rem}.stat-value{font-family:var(--font-display);font-size:2rem;font-weight:700;line-height:1}.stat-label{font-size:.8rem;color:var(--muted-fg);margin-top:.25rem}.action-card{background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius)*1.25);padding:1.5rem;cursor:pointer;transition:.25s;display:flex;flex-direction:column;gap:1rem}.action-card:hover{border-color:hsl(222,47%,60%,.4);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.action-icon{width:48px;height:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center}.action-icon svg{width:24px;height:24px}.action-card h3{font-size:1.05rem;font-weight:600}.action-card p{font-size:.85rem;color:var(--muted-fg);line-height:1.5}.pill{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--border);border-radius:999px;padding:.25rem .65rem;font-size:.78rem;background:var(--card);color:var(--muted-fg)}.pill.good{background:hsl(142,76%,36%,.08);color:hsl(142,76%,25%);border-color:hsl(142,76%,80%)}.pill.bad{background:hsl(0,84%,60%,.08);color:hsl(0,65%,40%);border-color:hsl(0,84%,85%)}.pill.warn{background:hsl(38,92%,55%,.12);color:hsl(35,80%,32%);border-color:hsl(38,92%,75%)}.group-chips{display:flex;flex-wrap:wrap;gap:.5rem}.group-chip{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--border);border-radius:999px;font-size:.8rem;cursor:pointer;transition:.2s;background:var(--card)}.group-chip.selected{border-color:var(--primary);background:hsl(222,47%,20%,.06)}.group-chip input{accent-color:var(--primary)}.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.25rem}.filter-btn{padding:.375rem .875rem;border-radius:999px;border:1px solid var(--border);background:var(--card);font-size:.8rem;font-weight:500;transition:.2s}.filter-btn.active{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}.table-wrap{border:1px solid var(--border);border-radius:calc(var(--radius)*1.25);overflow:auto;background:var(--card)}table{width:100%;border-collapse:collapse;font-size:.875rem}thead{background:var(--muted)}th{text-align:left;padding:.75rem 1rem;font-weight:700;font-size:.78rem;white-space:nowrap}td{padding:.625rem 1rem;border-top:1px solid var(--border);vertical-align:middle}tr:hover td{background:hsl(220,14%,97%)}.actions-cell{text-align:right;white-space:nowrap}.quiz-header{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;color:var(--muted-fg);margin-bottom:.75rem}.quiz-header-right{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.progress-bar-wrap{background:var(--muted);border-radius:999px;height:8px;overflow:hidden;margin-bottom:1.5rem}.progress-bar{background:var(--secondary);height:100%;border-radius:999px;transition:width .4s ease}.question-card{max-width:620px;margin:0 auto}.question-prompt{text-align:center;margin-bottom:2rem}.question-prompt .sub{font-size:.75rem;color:var(--muted-fg);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}.question-prompt .word{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);font-weight:700}.question-meta{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}.mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}@media(max-width:500px){.mc-grid{grid-template-columns:1fr}}.mc-option{position:relative;padding:1rem;border-radius:var(--radius);border:2px solid var(--border);text-align:left;font-size:.9rem;font-weight:500;background:var(--card);transition:.2s}.mc-option:hover:not(:disabled){border-color:hsl(222,47%,50%,.5);background:var(--muted)}.mc-option:disabled{cursor:default}.mc-option.correct{border-color:var(--green);background:hsl(142,76%,36%,.06)}.mc-option.wrong{border-color:var(--red);background:hsl(0,84%,60%,.06)}.mc-option.dim{opacity:.45}.typed-feedback{padding:.8rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;margin-top:.75rem}.typed-feedback.correct{background:hsl(142,76%,36%,.08);color:hsl(142,76%,28%)}.typed-feedback.wrong{background:hsl(0,84%,60%,.08);color:hsl(0,60%,40%)}.typed-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.5rem;margin-top:.75rem}.results-card{max-width:480px;margin:0 auto;text-align:center;padding:3rem 1.5rem}.trophy-wrap{width:80px;height:80px;border-radius:50%;background:hsl(38,92%,55%,.12);margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center}.trophy-wrap svg{width:40px;height:40px;color:var(--secondary)}.results-card h1{font-family:var(--font-display);font-size:2.25rem;font-weight:700;margin-bottom:.5rem}.score-text{color:var(--muted-fg);font-size:1.1rem;margin-bottom:1.5rem}.drop-zone{border:2px dashed var(--border);border-radius:calc(var(--radius)*1.25);padding:2rem 1.5rem;text-align:center;cursor:pointer;transition:.2s}.drop-zone:hover{border-color:hsl(222,47%,50%,.5);background:var(--muted)}.drop-icon{width:48px;height:48px;background:var(--muted);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem}.word-list-scroll{max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius)}.word-list-item{display:flex;align-items:center;gap:.75rem;padding:.55rem .75rem;font-size:.875rem}.word-list-item:not(:first-child){border-top:1px solid var(--border)}.word-list-item:hover{background:var(--muted)}.spinner-inline{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:1000;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}.toast{background:var(--fg);color:var(--bg);padding:.75rem 1.25rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;box-shadow:var(--shadow-lg);animation:slideIn .25s ease;pointer-events:auto}.toast.error{background:var(--destructive)}@keyframes slideIn{from{transform:translateX(110%);opacity:0}to{transform:none;opacity:1}}@keyframes fadeOut{to{opacity:0;transform:translateX(110%)}}.dialog-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem}.dialog{background:var(--card);border-radius:calc(var(--radius)*1.5);padding:1.75rem;width:100%;max-width:440px;box-shadow:var(--shadow-lg)}.dialog h3{font-family:var(--font-display);font-size:1.2rem;margin-bottom:.5rem}.dialog p{font-size:.875rem;color:var(--muted-fg);margin-bottom:1.25rem}.dialog-footer{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.5rem}.mini-list{display:flex;flex-direction:column;gap:.4rem}.mini-row{display:flex;justify-content:space-between;gap:.75rem;padding:.55rem .7rem;background:var(--muted);border-radius:var(--radius);font-size:.83rem}.audio-toggle{font-size:.75rem;padding:.25rem .625rem;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--muted-fg)}.suggestion-box{border:1px solid hsl(213,94%,85%);background:hsl(213,94%,97%);border-radius:var(--radius);padding:.75rem;margin-bottom:1rem}.suggestion-box strong{color:hsl(213,94%,30%)}
.grammar-panel{padding:1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--muted);margin-bottom:1rem}.mastery-meter{display:inline-flex;align-items:center;gap:.4rem;min-width:105px}.mastery-track{width:52px;height:6px;background:var(--border);border-radius:99px;overflow:hidden}.mastery-fill{height:100%;background:var(--green);border-radius:99px}.pos-badge{text-transform:capitalize}.grammar-word-btn{border:0;background:transparent;color:inherit;font:inherit;font-weight:700;text-align:left;padding:.15rem .25rem;margin:-.15rem -.25rem;border-radius:.35rem;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}.grammar-word-btn:hover,.grammar-word-btn:focus-visible{background:hsl(213,94%,94%);color:hsl(213,94%,32%);outline:none}.grammar-dialog{max-width:min(980px,96vw);max-height:90vh;overflow:auto;padding:0}.grammar-dialog-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.grammar-dialog-head h3{font-size:1.5rem;margin:0}.grammar-dialog-body{padding:1.5rem}.grammar-loading{text-align:center;padding:3rem 1rem;color:var(--muted-fg)}.grammar-section{margin-bottom:1.5rem}.grammar-section:last-child{margin-bottom:0}.grammar-section h4{font-family:var(--font-display);font-size:1.15rem;margin-bottom:.55rem}.grammar-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius)}.grammar-table{min-width:560px;font-size:.8rem}.grammar-table th{background:var(--muted);text-align:center}.grammar-table td{text-align:center;white-space:pre-line}.grammar-table td:first-child,.grammar-table th:first-child{text-align:left;font-weight:600}.grammar-source{display:flex;justify-content:space-between;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:.65rem;font-size:.74rem;color:var(--muted-fg)}.grammar-error{padding:1rem;border:1px solid hsl(0,84%,85%);background:hsl(0,84%,97%);color:hsl(0,62%,38%);border-radius:var(--radius)}.pwa-controls{position:fixed;left:1rem;bottom:1rem;z-index:120;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;max-width:calc(100vw - 2rem)}.offline-indicator{display:none;align-items:center;gap:.45rem;padding:.45rem .75rem;border-radius:999px;background:hsl(38,92%,93%);border:1px solid hsl(38,92%,70%);color:hsl(30,75%,27%);font-size:.78rem;font-weight:600;box-shadow:var(--shadow)}.offline-indicator.visible{display:inline-flex}.offline-dot{width:8px;height:8px;border-radius:50%;background:var(--secondary)}.install-btn{box-shadow:var(--shadow-lg)}.ios-install-banner{position:fixed;z-index:130;left:50%;bottom:1rem;transform:translateX(-50%);width:min(520px,calc(100vw - 2rem));padding:.85rem 3rem .85rem 1rem;background:var(--primary);color:var(--primary-fg);border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:.84rem}.ios-install-banner button{position:absolute;right:.5rem;top:.5rem;color:inherit}.ios-install-banner strong{display:block;margin-bottom:.15rem}