@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-primary:#faf7f2;--bg-secondary:#fff;--border-color:#e7e2d8;--text-primary:#2c2c2c;--text-secondary:#706e66;--accent-color:#2d4a3e;--accent-hover:#1e332a;--accent-light:#ebf1ed;--accent-danger:#8b4a4a;--accent-danger-light:#f7eaea;--accent-warning:#9c723b;--shadow-sm:0 1px 3px #2d4a3e0d;--shadow-md:0 4px 20px #2d4a3e14;--radius-sm:6px;--radius-md:12px;--radius-lg:18px;--font-serif:"Playfair Display", Georgia, Cambria, serif;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", monospace;--transition-silky:all .35s cubic-bezier(.25, .8, .25, 1)}[data-theme=dark]{--bg-primary:#121212;--bg-secondary:#1c1c1c;--border-color:#2d2d2d;--text-primary:#e2e2e2;--text-secondary:#8e8e8e;--accent-color:#6aa483;--accent-hover:#83ba99;--accent-light:#1d2821;--accent-danger:#c06868;--accent-danger-light:#2d1a1a;--accent-warning:#cfa46b;--shadow-sm:0 1px 3px #0003;--shadow-md:0 4px 25px #0006}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);min-height:100vh;transition:var(--transition-silky);line-height:1.6;overflow-x:hidden}button,input,textarea,select{font-family:inherit;font-size:inherit}.app-container{flex-direction:column;min-height:100vh;display:flex}.app-header{background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);z-index:100;box-shadow:var(--shadow-sm);transition:var(--transition-silky);justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex;position:sticky;top:0}.logo-section{align-items:center;gap:.75rem;display:flex}.logo-icon{width:2.2rem;height:2.2rem;color:var(--accent-color)}.logo-text{font-family:var(--font-serif);letter-spacing:-.5px;color:var(--accent-color);font-size:1.4rem;font-weight:700}.logo-text span{color:var(--text-primary);font-weight:400}.mode-selector{background-color:var(--bg-primary);border-radius:var(--radius-md);border:1px solid var(--border-color);gap:.25rem;padding:.25rem;display:flex}.mode-tab{border-radius:calc(var(--radius-md) - 2px);cursor:pointer;color:var(--text-secondary);transition:var(--transition-silky);background:0 0;border:none;align-items:center;gap:.5rem;padding:.6rem 1.4rem;font-weight:500;display:flex}.mode-tab:hover{color:var(--text-primary)}.mode-tab.active{background-color:var(--bg-secondary);color:var(--accent-color);box-shadow:var(--shadow-sm);font-weight:600}.header-controls{align-items:center;gap:1rem;display:flex}.theme-toggle-btn{border:1px solid var(--border-color);cursor:pointer;width:2.4rem;height:2.4rem;color:var(--text-secondary);transition:var(--transition-silky);background:0 0;border-radius:50%;justify-content:center;align-items:center;display:flex}.theme-toggle-btn:hover{background-color:var(--accent-light);color:var(--accent-color);border-color:var(--accent-color)}.credit-badge{background-color:var(--accent-light);color:var(--accent-color);border-radius:var(--radius-md);border:1px solid #2d4a3e1a;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.85rem;font-weight:600;display:flex}.topup-btn{background-color:var(--accent-color);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-silky);border:none;padding:.5rem 1rem;font-size:.85rem;font-weight:600;color:#fff!important}.topup-btn:hover{background-color:var(--accent-hover);transform:translateY(-1px)}.login-btn{border:1px solid var(--accent-color);color:var(--accent-color);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-silky);background:0 0;padding:.5rem 1.2rem;font-size:.85rem;font-weight:600}.login-btn:hover{background-color:var(--accent-light);transform:translateY(-1px)}.user-info{align-items:center;gap:.75rem;display:flex}.phone-display{color:var(--text-primary);font-size:.9rem;font-weight:500}.logout-btn{color:var(--accent-danger);cursor:pointer;background:0 0;border:none;font-size:.8rem;text-decoration:underline}.main-content{box-sizing:border-box;flex:1;grid-template-columns:28% 44% 28%;gap:1.25rem;width:100%;max-width:1600px;margin:0 auto;padding:1.25rem;display:grid}@media (width<=1200px){.main-content{grid-template-columns:32% 68%}.column.notebook-column{grid-column:span 2}}@media (width<=768px){.main-content{grid-template-columns:1fr}.column.notebook-column{grid-column:span 1}}.column{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);height:calc(100vh - 100px);transition:var(--transition-silky);flex-direction:column;display:flex;overflow:hidden}.column:hover{box-shadow:var(--shadow-md)}.column-header{border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#fefdfb80;justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}[data-theme=dark] .column-header{background-color:#1c1c1c80}.column-title{font-family:var(--font-serif);color:var(--accent-color);align-items:center;gap:.5rem;font-size:1.1rem;font-weight:700;display:flex}.column-body{flex-direction:column;flex:1;gap:1rem;padding:1.25rem;display:flex;overflow-y:auto}.column-body::-webkit-scrollbar{width:6px}.column-body::-webkit-scrollbar-track{background:0 0}.column-body::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-sm)}.column-body::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.input-group{flex-direction:column;flex:1;gap:.5rem;display:flex}.input-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.85rem;font-weight:600}.text-area-input{border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-primary);width:100%;min-height:120px;color:var(--text-primary);resize:none;transition:var(--transition-silky);flex:1;padding:.75rem;font-size:.95rem;line-height:1.5}.text-area-input:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--accent-light);outline:none}.level-selector-container{justify-content:space-between;align-items:center;margin-top:.5rem;display:flex}.level-select{border-radius:var(--radius-sm);border:1px solid var(--border-color);background-color:var(--bg-primary);color:var(--text-primary);cursor:pointer;transition:var(--transition-silky);outline:none;padding:.5rem;font-size:.85rem}.level-select:focus{border-color:var(--accent-color)}.action-btn{background-color:var(--accent-color);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-silky);box-shadow:var(--shadow-sm);border:none;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;padding:.8rem;font-size:1rem;font-weight:600;display:flex}.action-btn:hover:not(:disabled){background-color:var(--accent-hover);transform:translateY(-1px)}.action-btn:disabled{opacity:.6;cursor:not-allowed}.ai-status-card{border:1px dashed var(--border-color);border-radius:var(--radius-md);text-align:center;color:var(--text-secondary);background-color:var(--bg-primary);flex-direction:column;align-items:center;gap:1rem;margin:auto 0;padding:1.5rem;display:flex}.ai-status-icon{width:3rem;height:3rem;color:var(--text-secondary);animation:3s ease-in-out infinite float}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}.ai-loader{flex-direction:column;align-items:center;gap:1rem;margin:auto 0;display:flex}.spinner{border:3px solid var(--border-color);border-top:3px solid var(--accent-color);border-radius:50%;width:2.5rem;height:2.5rem;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loader-step{color:var(--text-secondary);font-size:.9rem;font-style:italic;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.ai-output-section{flex-direction:column;gap:1.25rem;animation:.4s ease-out fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.section-card{border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-primary);flex-direction:column;gap:.75rem;padding:1.25rem;display:flex}.card-title{color:var(--accent-color);border-bottom:1px solid #2d4a3e1a;align-items:center;gap:.5rem;padding-bottom:.5rem;font-size:.95rem;font-weight:700;display:flex}.paragraph-text{font-family:var(--font-serif);white-space:pre-wrap;font-size:1.1rem;line-height:1.6}.correction-item{border-left:3px solid var(--accent-warning);flex-direction:column;gap:.25rem;margin-bottom:.75rem;padding-left:.75rem;display:flex}.correction-item.error{border-left-color:var(--accent-danger)}.correction-original{color:var(--text-secondary);font-size:.9rem;text-decoration:line-through}.correction-suggested{color:var(--accent-color);font-size:.95rem;font-weight:600}.correction-reason{color:var(--text-secondary);font-size:.8rem;font-style:italic}.reading-paragraph{border-bottom:1px solid var(--border-color);flex-direction:column;gap:.5rem;padding-bottom:1rem;display:flex}.reading-paragraph:last-child{border-bottom:none}.reading-original{font-family:var(--font-serif);color:var(--text-primary);font-size:1.15rem;line-height:1.5}.reading-translation{color:var(--text-secondary);font-size:.95rem}.reading-analysis{background-color:var(--bg-secondary);border-radius:var(--radius-sm);border:1px solid var(--border-color);color:var(--text-primary);padding:.75rem;font-size:.85rem}.score-circle{border:4px solid var(--accent-color);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:5rem;height:5rem;margin:0 auto;display:flex}.score-num{color:var(--accent-color);font-size:1.8rem;font-weight:700;font-family:var(--font-serif)}.score-label{text-transform:uppercase;color:var(--text-secondary);font-size:.65rem;font-weight:600}.notebook-tabs{border-bottom:1px solid var(--border-color);margin-bottom:1rem;display:flex}.notebook-tab-btn{color:var(--text-secondary);cursor:pointer;transition:var(--transition-silky);text-align:center;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:.5rem 1rem;font-size:.85rem;font-weight:600}.notebook-tab-btn.active{color:var(--accent-color);border-bottom-color:var(--accent-color)}.notebook-list{flex-direction:column;gap:.75rem;display:flex}.vocab-card{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:var(--transition-silky);flex-direction:column;gap:.25rem;padding:.75rem 1rem;display:flex;position:relative}.vocab-card:hover{border-color:var(--accent-color);transform:translate(2px)}.vocab-header{justify-content:space-between;align-items:center;display:flex}.vocab-word{font-family:var(--font-serif);color:var(--accent-color);font-size:1.1rem;font-weight:700}.level-tag{text-transform:uppercase;border-radius:4px;padding:.15rem .4rem;font-size:.7rem;font-weight:700}.level-tag.cet-4{color:#2e7d32;background-color:#e8f5e9}.level-tag.cet-6{color:#1565c0;background-color:#e3f2fd}.level-tag.kaoyan{color:#e65100;background-color:#fff3e0}.level-tag.none{background-color:var(--border-color);color:var(--text-secondary)}[data-theme=dark] .level-tag.cet-4{color:#81c784;background-color:#1b3820}[data-theme=dark] .level-tag.cet-6{color:#64b5f6;background-color:#152c3e}[data-theme=dark] .level-tag.kaoyan{color:#ffb74d;background-color:#3b2a1a}.vocab-meaning{color:var(--text-primary);font-size:.88rem}.vocab-collocation{color:var(--text-secondary);font-size:.8rem;font-style:italic}.vocab-actions{justify-content:space-between;align-items:center;margin-top:.4rem;font-size:.75rem;display:flex}.save-note-btn{border:1px solid var(--accent-color);color:var(--accent-color);cursor:pointer;transition:var(--transition-silky);background:0 0;border-radius:4px;padding:.2rem .6rem;font-size:.75rem}.save-note-btn:hover{background-color:var(--accent-color);color:#fff}.delete-note-btn{color:var(--accent-danger);cursor:pointer;background:0 0;border:none;align-items:center;gap:.2rem;font-size:.75rem;display:flex}.expression-item{background-color:var(--bg-primary);border-left:3px solid var(--accent-color);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:.5rem .75rem;font-size:.88rem}.expr-en{color:var(--accent-color);font-weight:600}.expr-zh{color:var(--text-primary)}.grammar-item{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.75rem;font-size:.85rem}.grammar-rule{color:var(--accent-color);margin-bottom:.25rem;font-weight:700}.grammar-desc{color:var(--text-primary)}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000080;justify-content:center;align-items:center;animation:.25s ease-out modalFadeIn;display:flex;position:fixed;inset:0}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);width:90%;max-width:420px;box-shadow:var(--shadow-md);flex-direction:column;gap:1.5rem;padding:2rem;animation:.3s cubic-bezier(.25,.8,.25,1) modalSlideUp;display:flex;position:relative}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-title{font-family:var(--font-serif);color:var(--accent-color);font-size:1.3rem;font-weight:700}.close-modal-btn{color:var(--text-secondary);cursor:pointer;transition:var(--transition-silky);background:0 0;border:none;font-size:1.5rem}.close-modal-btn:hover{color:var(--text-primary)}.form-group{flex-direction:column;gap:.5rem;display:flex}.form-label{color:var(--text-secondary);font-size:.85rem;font-weight:600}.form-input-wrapper{gap:.5rem;display:flex}.form-input{border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-primary);color:var(--text-primary);transition:var(--transition-silky);outline:none;flex:1;padding:.75rem;font-size:.95rem}.form-input:focus{border-color:var(--accent-color)}.send-code-btn{background-color:var(--accent-light);color:var(--accent-color);border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;transition:var(--transition-silky);border:1px solid #2d4a3e33;padding:0 1rem;font-size:.8rem;font-weight:600}.send-code-btn:hover:not(:disabled){background-color:var(--accent-color);color:#fff}.send-code-btn:disabled{opacity:.6;cursor:not-allowed}.topup-grid{grid-template-columns:repeat(3,1fr);gap:.75rem;display:grid}.topup-card{border:1px solid var(--border-color);border-radius:var(--radius-md);text-align:center;cursor:pointer;transition:var(--transition-silky);background-color:var(--bg-primary);padding:1rem}.topup-card:hover{border-color:var(--accent-color);background-color:var(--accent-light)}.topup-card.active{border-color:var(--accent-color);background-color:var(--accent-light);box-shadow:0 0 0 2px var(--accent-color)}.topup-credits{color:var(--accent-color);font-size:1.1rem;font-weight:700}.topup-price{color:var(--text-secondary);font-size:.8rem}.qr-section{border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:#fff;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;display:flex}.qr-image{width:130px;height:130px}.qr-label{color:#333;font-size:.8rem;font-weight:500}.toast-container{z-index:2000;flex-direction:column;gap:.5rem;display:flex;position:fixed;bottom:2rem;right:2rem}.toast{background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);border-left:4px solid var(--accent-color);border-radius:var(--radius-md);box-shadow:var(--shadow-md);justify-content:space-between;align-items:center;gap:1rem;min-width:250px;max-width:400px;padding:.75rem 1.25rem;font-size:.9rem;animation:.3s cubic-bezier(.25,.8,.25,1) toastSlideIn;display:flex}.toast.error{border-left-color:var(--accent-danger)}.toast.warning{border-left-color:var(--accent-warning)}@keyframes toastSlideIn{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}.toast-close{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;font-size:1rem}