:root{--bg-color:#0f172a;--text-color:#f8fafc;--primary-color:#3b82f6;--accent-color:#8b5cf6;--card-bg:#1e293bb3;--card-border:#ffffff1a}*{box-sizing:border-box;margin:0;padding:0}body{background:radial-gradient(circle at top right, #1e1b4b, var(--bg-color));color:var(--text-color);justify-content:center;min-height:100vh;padding:2rem 1rem;font-family:Inter,sans-serif;display:flex}@media (width<=600px){body{padding:.5rem}}.container{flex-direction:column;gap:2rem;width:100%;max-width:800px;display:flex}header{text-align:center;animation:.8s fadeInDown}header h1{background:linear-gradient(90deg,#60a5fa,#c084fc);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.5rem;font-size:2.5rem;font-weight:800}header p.subtitle{color:#94a3b8;margin-bottom:1.8rem;font-size:1.1rem}.search-box{width:100%;animation:.8s .2s both fadeInUp;position:relative}.search-box input{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172acc;border:2px solid #60a5fa80;border-radius:9999px;outline:none;width:100%;padding:1.2rem 2rem;font-size:1.5rem;transition:all .3s;box-shadow:0 0 15px #60a5fa40}.search-box input:focus{border-color:#60a5fa;box-shadow:0 0 25px #60a5fa99}.hidden{display:none!important}#loading{text-align:center;color:#cbd5e1;font-size:1.2rem;animation:1.5s infinite pulse}.results-container{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;display:grid}.phonetic-card{background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;border-radius:1rem;padding:1.5rem;transition:transform .3s,box-shadow .3s;animation:.5s forwards fadeIn}.phonetic-card:hover{border-color:#fff3;transform:translateY(-5px);box-shadow:0 10px 25px -5px #0000004d,0 8px 10px -6px #0003}.phonetic-header{border-bottom:1px solid var(--card-border);justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;display:flex}.phonetic-symbol{color:#60a5fa;font-size:2rem;font-weight:800}.word-count{color:#93c5fd;background:#60a5fa33;border-radius:9999px;padding:.2rem .6rem;font-size:.85rem;font-weight:600}.examples-list{list-style:none}.example-item{border-bottom:1px dashed #ffffff1a;flex-direction:column;padding:.8rem 0;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;display:flex}.example-item.fly-out-right{opacity:0;transform:translate(50px)scale(.85)}.example-item.fly-in-left{opacity:0;transform:translate(-50px)scale(.85)}.example-item.fly-start{opacity:0;transform:translateY(-10px)scale(.9)}.grapheme-chips{flex-wrap:wrap;gap:.3rem;margin-top:.3rem;display:flex}.grapheme-chip{color:#93c5fd;cursor:pointer;background:#3b82f626;border:1px solid #3b82f64d;border-radius:.25rem;padding:.1rem .4rem;font-size:.75rem;font-weight:600;transition:all .2s}.grapheme-chip:hover{color:#fff;background:#3b82f666;transform:scale(1.08)}.example-item:last-child{border-bottom:none}.example-hint{color:#64748b;margin-bottom:.15rem;font-size:.75rem;font-style:italic}.example-word-row{justify-content:space-between;align-items:center;margin-bottom:.3rem;display:flex}.example-word{color:#e2e8f0;font-size:1.1rem;font-weight:600}.cefr-badge{color:#78350f;background:#fbbf24;border-radius:.25rem;padding:.15rem .4rem;font-size:.75rem;font-weight:800}.example-details{justify-content:space-between;align-items:center;display:flex}.example-ipa{color:#94a3b8;font-family:monospace;font-size:1rem}.example-mean{color:#10b981;font-size:.95rem;font-style:italic}.mark-known-btn{color:#10b981;cursor:pointer;opacity:.3;background:0 0;border:none;margin-left:.5rem;padding:0 .5rem;font-size:1.2rem;transition:opacity .2s,transform .2s}.mark-known-btn:hover{opacity:1;transform:scale(1.2)}.load-more-btn{color:#94a3b8;cursor:pointer;background:#ffffff0d;border:1px dashed #fff3;border-radius:.5rem;width:100%;margin-top:.8rem;padding:.6rem;transition:all .2s}.load-more-btn:hover{color:#e2e8f0;background:#ffffff1a}.action-buttons{justify-content:center;gap:1rem;margin-top:1rem;display:flex}.action-btn{color:#60a5fa;cursor:pointer;background:#3b82f633;border:1px solid #3b82f666;border-radius:2rem;padding:.5rem 1rem;font-size:.9rem;transition:all .2s}.action-btn:hover{color:#fff;background:#3b82f666}.action-btn.hidden{display:none}.filter-container{flex-wrap:wrap;justify-content:center;align-items:center;gap:.8rem;margin-top:1rem;display:flex}.filter-label{color:#94a3b8;font-size:.9rem;font-weight:600}.level-pills{background:#0f172a99;border:1px solid #ffffff1a;border-radius:2rem;gap:.4rem;padding:.3rem;display:flex}.level-pill{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:1.5rem;padding:.3rem .8rem;font-size:.85rem;font-weight:700;transition:all .2s}.level-pill:hover{color:#e2e8f0}.level-pill.active{color:#78350f;background:#fbbf24;box-shadow:0 2px 8px #fbbf244d}.toggle-container{flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:.8rem;display:flex}.toggle-item{cursor:pointer;-webkit-user-select:none;user-select:none;color:#94a3b8;align-items:center;gap:.5rem;font-size:.85rem;display:flex}.toggle-item input[type=checkbox]{display:none}.toggle-slider{background-color:#ffffff1a;border:1px solid #fff3;border-radius:18px;width:32px;height:18px;transition:background-color .2s;position:relative}.toggle-slider:before{content:"";background-color:#94a3b8;border-radius:50%;width:14px;height:14px;transition:transform .2s,background-color .2s;position:absolute;top:1px;left:1px}.toggle-item input:checked+.toggle-slider{background-color:#10b9814d;border-color:#10b981}.toggle-item input:checked+.toggle-slider:before{background-color:#10b981;transform:translate(14px)}.toggle-item input:checked~.toggle-text{color:#10b981;font-weight:600}.example-item.is-known{opacity:.7;background:#10b9810d}.phonetic-card.is-known-rule{background:#fbbf2408;border-color:#fbbf2466}.card-body-2col{grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem;display:grid}@media (width<=500px){.card-body-2col{gap:.6rem}}@media (width<=360px){.card-body-2col{grid-template-columns:1fr;gap:.8rem}}.col-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding-bottom:.5rem;font-size:.9rem;font-weight:700;display:flex}.col-header.unlearned{color:#60a5fa}.col-header.learned{color:#10b981}.col-count{color:#e2e8f0;background:#ffffff1a;border-radius:1rem;padding:.1rem .5rem;font-size:.75rem}.exact-word-card{background:linear-gradient(135deg,#10b9811a 0%,#05966933 100%);border:1px solid #10b9814d;margin-bottom:2rem;box-shadow:0 4px 15px #0596691a}.exact-word-title{color:#10b981;justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:2rem;font-weight:800;display:flex}.exact-word-pronunciations{flex-direction:column;gap:.8rem;display:flex}.exact-pron-item{background:#0f172a80;border-radius:.5rem;justify-content:space-between;align-items:center;padding:.8rem;display:flex}.exact-pron-ipa{color:#e2e8f0;font-family:monospace;font-size:1.3rem}.exact-pron-mean{color:#34d399;font-size:1.1rem;font-style:italic}.gamification-dashboard{z-index:1000;background:linear-gradient(90deg,#1e293b,#0f172a);border-bottom:2px solid #fbbf24;justify-content:center;align-items:center;gap:.5rem;padding:.8rem;display:flex;position:fixed;top:0;left:0;right:0;box-shadow:0 4px 15px #fbbf241a}.trophy-icon{filter:drop-shadow(0 0 5px #fbbf2480);font-size:1.5rem}.score-text{color:#e2e8f0;font-size:1.1rem;font-weight:600}.score-number{color:#fbbf24;text-shadow:0 0 10px #fbbf244d;font-size:1.3rem;font-weight:800;transition:transform .2s;display:inline-block}.score-sub{color:#94a3b8;margin:0 .2rem;font-size:.85rem;font-weight:400}.score-number-sub{color:#34d399;font-size:1rem;font-weight:700}.btn-stats{color:#fbbf24;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:20px;margin-left:.5rem;padding:.3rem .8rem;font-size:.85rem;font-weight:700;transition:all .2s}.btn-stats:hover{color:#fff;background:#fbbf2433;transform:scale(1.05)}.stats-summary-grid{grid-template-columns:repeat(2,1fr);gap:.8rem;display:grid}.stats-card{text-align:center;background:#0f172a99;border:1px solid #ffffff14;border-radius:.8rem;padding:.8rem}.stats-card-title{color:#94a3b8;margin-bottom:.3rem;font-size:.8rem}.stats-card-value{color:#f8fafc;font-size:1.2rem;font-weight:800}.chart-section{background:#0f172a99;border:1px solid #ffffff14;border-radius:.8rem;padding:1rem}.chart-section h4{color:#94a3b8;text-align:center;margin-bottom:.8rem;font-size:.85rem}.weekly-chart{justify-content:space-around;align-items:flex-end;height:120px;padding-top:1rem;display:flex}.chart-bar-container{flex-direction:column;justify-content:flex-end;align-items:center;gap:.3rem;width:12%;height:100%;display:flex}.chart-bar{background:linear-gradient(#3b82f6,#1d4ed8);border-radius:4px 4px 0 0;width:100%;max-width:24px;min-height:4px;transition:height .5s}.chart-bar.today{background:linear-gradient(#fbbf24,#d97706)}.chart-label{color:#94a3b8;font-size:.7rem}.chart-val{color:#cbd5e1;font-size:.65rem;font-weight:600}.score-clickable{cursor:pointer;background:#ffffff0d;border-radius:.4rem;padding:.2rem .4rem;transition:all .2s}.score-clickable:hover{color:#fff;background:#fbbf2433}.cefr-section{background:#0f172a99;border:1px solid #ffffff14;border-radius:.8rem;padding:1rem}.cefr-section h4{color:#94a3b8;margin-bottom:.8rem;font-size:.85rem}.cefr-bars-container{flex-direction:column;gap:.6rem;display:flex}.cefr-row{cursor:pointer;border:1px solid #0000;border-radius:.5rem;align-items:center;gap:.8rem;padding:.4rem .6rem;transition:all .2s;display:flex}.cefr-row:hover{background:#ffffff14;transform:translate(4px)}.cefr-row.active{background:#3b82f633;border-color:#3b82f680}.cefr-label{width:30px;font-size:.85rem;font-weight:700}.cefr-track{background:#ffffff14;border-radius:6px;flex:1;height:12px;overflow:hidden}.cefr-fill{border-radius:6px;height:100%;transition:width .5s}.cefr-fill.a1{background:#10b981}.cefr-fill.a2{background:#3b82f6}.cefr-fill.b1{background:#eab308}.cefr-fill.b2{background:#f97316}.cefr-fill.c1{background:#ef4444}.cefr-stat-text{color:#cbd5e1;text-align:right;width:90px;font-size:.8rem}.mastered-words-section{background:#0f172a99;border:1px solid #ffffff14;border-radius:.8rem;flex-direction:column;gap:.8rem;padding:1rem;display:flex}.mastered-words-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.mastered-words-header h4{color:#94a3b8;font-size:.85rem}.mastered-words-header input{color:#fff;background:#0f172a;border:1px solid #ffffff26;border-radius:.4rem;outline:none;padding:.4rem .8rem;font-size:.85rem}.mastered-words-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem;max-height:220px;padding-right:.3rem;display:grid;overflow-y:auto}.mastered-word-card{background:#ffffff0a;border:1px solid #ffffff14;border-radius:.5rem;flex-direction:column;gap:.2rem;padding:.5rem .7rem;display:flex}.mw-top{justify-content:space-between;align-items:center;display:flex}.mw-word{color:#60a5fa;font-size:.95rem;font-weight:700}.mw-details{color:#94a3b8;font-size:.75rem}.mark-rule-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#fbbf24,#d97706);border:none;border-radius:20px;margin-left:.5rem;padding:.3rem .8rem;font-size:.8rem;font-weight:700;transition:transform .2s;box-shadow:0 2px 5px #fbbf244d}.mark-rule-btn:hover{transform:scale(1.05)}.btn-report-group{color:#f87171;cursor:pointer;background:#ef444426;border:1px solid #ef444466;border-radius:20px;margin-left:.4rem;padding:.3rem .7rem;font-size:.8rem;font-weight:600;transition:all .2s}.btn-report-group:hover{color:#fff;background:#ef44444d}.btn-report-single{cursor:pointer;opacity:.4;background:0 0;border:none;padding:0 .3rem;font-size:.9rem;transition:opacity .2s,transform .2s}.btn-report-single:hover{opacity:1;transform:scale(1.2)}.modal-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:2000;background:#000000b3;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-content{background:#1e293b;border:1px solid #ffffff26;border-radius:1rem;flex-direction:column;width:100%;max-width:500px;max-height:85vh;animation:.3s fadeInDown;display:flex;box-shadow:0 20px 25px -5px #00000080}.modal-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.modal-header h3{color:#f87171;align-items:center;gap:.5rem;font-size:1.2rem;display:flex}.modal-close{color:#94a3b8;cursor:pointer;background:0 0;border:none;font-size:1.3rem}.modal-close:hover{color:#fff}.modal-body{flex-direction:column;gap:1rem;padding:1.2rem 1.5rem;display:flex;overflow-y:auto}.modal-desc{color:#cbd5e1;font-size:.9rem}.modal-select-all{color:#fbbf24;background:#ffffff0d;border-radius:.5rem;padding:.6rem .8rem;font-size:.9rem}.modal-word-list{background:#0f172a99;border:1px solid #ffffff0d;border-radius:.5rem;flex-direction:column;gap:.4rem;max-height:200px;padding:.8rem;display:flex;overflow-y:auto}.modal-word-item{color:#e2e8f0;cursor:pointer;align-items:center;gap:.6rem;font-size:.95rem;display:flex}.modal-reason-box{flex-direction:column;gap:.4rem;display:flex}.modal-reason-box label{color:#94a3b8;font-size:.85rem;font-weight:600}.modal-reason-box select{color:#fff;background:#0f172a;border:1px solid #fff3;border-radius:.5rem;outline:none;padding:.6rem}.modal-footer{border-top:1px solid #ffffff1a;justify-content:flex-end;gap:.8rem;padding:1rem 1.5rem;display:flex}.btn-cancel{color:#94a3b8;cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:.5rem;padding:.6rem 1.2rem}.btn-copy-report{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:.5rem;padding:.6rem 1.2rem;font-weight:700;transition:transform .2s;box-shadow:0 4px 12px #ef44444d}.btn-copy-report:hover{transform:scale(1.03)}.toast{color:#fff;z-index:3000;background:linear-gradient(135deg,#10b981,#059669);border-radius:2rem;padding:.8rem 1.5rem;font-size:.95rem;font-weight:600;animation:.3s fadeInUp;position:fixed;bottom:2rem;left:50%;transform:translate(-50%);box-shadow:0 10px 25px #10b98166}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{to{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}