.App{min-height:100vh}header{position:sticky;top:0;background:var(--background);border-bottom:1px solid var(--border);padding:10px 24px;z-index:2;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 3px #0000000d;height:80px;min-height:80px}.header-center{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:20px;padding-right:5px}header h1{font-size:20px;margin:0;color:var(--blue);font-weight:700;letter-spacing:-.025em}.header-logo{height:100px;width:auto;max-width:400px;object-fit:contain;transition:opacity .2s ease}.header-title{text-decoration:none;color:inherit;transition:opacity .2s ease;display:flex;align-items:center;height:100%}.header-title:hover{opacity:.8}.header-title h1{margin:0}.header-nav{display:flex;gap:4px;align-items:center;background:var(--surface);padding:4px;border-radius:8px;border:1px solid var(--border);overflow:visible}.header-nav a,.header-nav button{padding:10px 18px;border-radius:6px;border:none;background:transparent;cursor:pointer;font-size:14px;font-weight:500;color:var(--text-secondary);transition:all .2s ease;white-space:nowrap;position:relative;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:40px}.header-nav a:hover,.header-nav button:hover{background:#2563eb14;color:var(--blue)}.header-nav a.active,.header-nav button.active{background:var(--blue);color:#fff;box-shadow:0 1px 2px #2563eb4d}.header-profile{position:relative;display:flex;align-items:center}.profile-btn{display:flex;align-items:center;justify-content:center;padding:16px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:500;box-shadow:0 1px 2px #0000000d}.profile-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 2px 4px #2563eb33}.dropdown-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999}.profile-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 20px #00000026;min-width:160px;z-index:9999;overflow:hidden}.dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:none;background:transparent;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:left}.dropdown-item:hover{background:#0d94880d;color:var(--blue)}.dropdown-item.logout{border-top:1px solid var(--border);color:#dc2626}.dropdown-item.logout:hover{background:#dc26260d;color:#dc2626}.wrap{max-width:800px;margin:0 auto;padding:40px 24px}.section-content h1{font-size:24px;margin:0 0 20px;color:var(--fg);font-weight:600}.section-content>p{font-size:16px;color:var(--text-secondary);margin-bottom:20px;line-height:1.6}.hero-section{text-align:center;margin-bottom:48px}.hero-section h1{font-size:32px;font-weight:300;color:var(--text-primary);margin:0 0 12px;letter-spacing:-.02em}.hero-section p{font-size:16px;color:var(--text-secondary);margin:0;line-height:1.5}.translation-form{max-width:600px;margin:0 auto 64px}.input-group{display:flex;gap:12px;margin-bottom:16px}.url-input{flex:1;padding:16px 20px;border:1px solid var(--border);border-radius:12px;font-size:16px;background:var(--surface);color:var(--text-primary);transition:all .2s ease}.url-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #3b82f61a}.url-input::placeholder{color:var(--text-muted)}.translate-btn{padding:16px 24px;background:var(--blue);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.translate-btn:hover:not(:disabled){background:#0f766e;transform:translateY(-1px)}.translate-btn:disabled{background:var(--text-muted);cursor:not-allowed;transform:none}.settings-row{display:flex;gap:12px;justify-content:center;margin-bottom:24px}.setting-select{padding:8px 32px 8px 16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-secondary);font-size:14px;cursor:pointer;transition:border-color .2s ease;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:16px;appearance:none;-webkit-appearance:none;-moz-appearance:none}.setting-select:focus{outline:none;border-color:var(--blue)}.status-message{text-align:center;padding:12px;border-radius:8px;font-size:14px;margin-top:16px}.status-message.loading{background:#3b82f61a;color:var(--blue)}.status-message.error{background:#ef44441a;color:#dc2626}.url-form{margin-bottom:20px}.input-wrapper{display:flex;gap:10px;margin-bottom:16px}.url-input-simple{flex:1;padding:10px 12px;border:1px solid var(--border-light);border-radius:6px;font-size:14px;font-family:var(--font-family-mono);background:var(--background);color:var(--fg);outline:none}.url-input-simple:focus{border-color:var(--blue)}.url-input-simple:disabled{background:var(--surface);opacity:.6}.submit-btn-simple{padding:10px 16px;background:var(--blue);color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;white-space:nowrap}.submit-btn-simple:hover:not(:disabled){background:#0f766e}.submit-btn-simple:disabled{opacity:.6;cursor:not-allowed}.status-indicator{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;font-size:14px;margin-bottom:16px}.status-indicator.loading{background:#eff6ff;color:var(--blue)}.status-indicator.error{background:#fef2f2;color:#dc2626}.status-indicator.success{background:#f0fdf4;color:#059669}.result-simple{border:1px solid var(--border);border-radius:8px;padding:20px;background:var(--background);margin-top:20px}.result-item{margin-bottom:20px}.result-item:last-child{margin-bottom:0}.result-item h3{font-size:16px;font-weight:600;color:var(--fg);margin-bottom:8px}.result-item p{color:var(--text-secondary);line-height:1.6;padding:12px;background:var(--surface);border-radius:6px;border-left:3px solid var(--blue);margin:0}.placeholder-content{text-align:center;padding:60px 20px;color:var(--text-muted)}.placeholder-icon{font-size:48px;margin-bottom:16px;opacity:.5}.placeholder-content p{font-size:16px}.legend{font-size:12px;color:var(--text-muted);margin-bottom:16px}.legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--blue);margin-right:6px}.filters-section{margin:32px 0;padding:24px;background:var(--surface);border-radius:12px;border:1px solid var(--border-light)}.filters-section h3{margin:0 0 16px;font-size:18px;font-weight:600;color:var(--text-primary)}.filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.filter-group{display:flex;flex-direction:column;gap:8px}.filter-group label{font-size:14px;font-weight:500;color:var(--text-primary)}.filter-select{padding:10px 32px 10px 12px;border:1px solid var(--border-light);border-radius:8px;background:var(--surface);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .2s;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:16px;appearance:none;-webkit-appearance:none;-moz-appearance:none}.filter-select:hover{border-color:var(--blue)}.filter-select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #3b82f61a}.articles-section{margin-top:64px}.articles-section h2{font-size:20px;font-weight:400;color:var(--text-primary);margin-bottom:32px;text-align:center}.articles-list{position:relative}.empty-state{text-align:center;padding:40px 20px;color:var(--text-muted);background:var(--surface);border-radius:8px;border:1px solid var(--border)}.empty-state p{margin:8px 0}.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:20px}.article-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000000d}.article-card:hover{border-color:var(--blue);box-shadow:0 2px 8px #2563eb1a}.article-card.selected{border-color:var(--blue);background:#2563eb0d}.article-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.article-title{font-size:14px;font-weight:600;color:var(--fg);margin:0;line-height:1.4;height:calc(1.4em * 3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.article-date{font-size:12px;color:var(--text-muted);white-space:nowrap;margin-left:12px}.article-translated-title{font-size:13px;color:var(--blue);margin:8px 0;font-weight:500;line-height:1.4;height:calc(1.4em * 3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.article-summary{font-size:12px;color:var(--text-secondary);line-height:1.5;margin:8px 0;height:4.5em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.article-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.vocabulary-preview{display:flex;align-items:center;gap:8px}.vocab-count{font-size:11px;color:var(--text-muted)}.vocab-dots{display:flex;align-items:center;gap:4px}.vocab-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.vocab-more{font-size:10px;color:var(--text-muted);margin-left:2px}.article-date-footer{font-size:11px;color:var(--text-muted);background:var(--surface);padding:2px 6px;border-radius:4px}.article-detail{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:1000;display:flex;justify-content:center;align-items:flex-start;padding:40px 20px;overflow-y:auto}.detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}.detail-header h2{font-size:18px;font-weight:600;color:var(--fg);margin:0}.close-detail{background:none;border:none;font-size:18px;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px}.close-detail:hover{background:var(--surface);color:var(--fg)}.detail-content{background:var(--surface);border-radius:8px;padding:24px;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a}.detail-section{margin-bottom:20px}.detail-section h3{font-size:14px;font-weight:600;color:var(--fg);margin-bottom:8px}.detail-section p{font-size:13px;color:var(--text-secondary);line-height:1.6;margin:0;padding:12px;background:var(--surface);border-radius:6px;border-left:3px solid var(--blue)}.vocab-list{display:grid;gap:8px}.vocab-item{display:grid;grid-template-columns:1fr 1fr auto auto;gap:8px;align-items:center;padding:8px 12px;background:var(--surface);border-radius:6px;font-size:12px}.vocab-word{font-weight:600;color:var(--fg)}.vocab-translation{color:var(--text-secondary)}.vocab-romaji{color:var(--text-muted);font-style:italic;font-size:11px}.vocab-difficulty{font-size:10px;font-weight:500;text-transform:uppercase;padding:2px 6px;border-radius:4px;color:#fff}.vocab-difficulty.beginner{background:#059669}.vocab-difficulty.intermediate{background:#ea580c}.vocab-difficulty.advanced{background:#dc2626}.source-link{color:var(--blue);text-decoration:none;font-size:13px}.source-link:hover{text-decoration:underline}.article-features{display:flex;flex-wrap:wrap;gap:8px}.feature-tag{display:inline-flex;align-items:center;padding:4px 8px;background:var(--surface);border:1px solid var(--border);border-radius:4px;font-size:11px;color:var(--text-secondary);font-weight:500}.reader-meta{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}.article-title{font-size:20px;font-weight:600;color:var(--fg);margin:0 0 8px;line-height:1.3}.article-source{font-size:14px;color:var(--text-secondary)}.article-source a{color:var(--blue);text-decoration:none}.article-source a:hover{text-decoration:underline}.article-image{margin:16px 0}.article-image img{width:100%;max-width:100%;height:auto;border-radius:8px;box-shadow:0 2px 8px #0000001a}.tokens{font-size:22px;line-height:1.9;margin-bottom:40px}.token.clickable{cursor:pointer;transition:background-color .2s;border-radius:3px;padding:2px 1px}.token.clickable:hover{background-color:#3b82f61a}.tooltip-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:transparent;z-index:999}.word-tooltip{position:absolute;background:#fff;border:1px solid var(--border-light);border-radius:8px;box-shadow:0 4px 20px #00000026;padding:16px;min-width:200px;max-width:300px;z-index:1000}.tooltip-content{display:flex;flex-direction:column;gap:8px}.word-surface{font-size:20px;font-weight:600;color:var(--text-primary);border-bottom:1px solid var(--border-light);padding-bottom:8px}.word-reading,.word-romaji{font-size:14px;color:var(--text-secondary)}.word-reading .label,.word-romaji .label{font-weight:500;color:var(--text-primary)}.tooltip-actions{display:flex;gap:8px;margin-top:8px}.favorite-btn,.close-btn{padding:6px 12px;border-radius:6px;border:1px solid var(--border-light);background:var(--background);color:var(--text-secondary);cursor:pointer;font-size:12px;font-weight:500;transition:all .2s;min-width:100px;text-align:center}.favorite-btn:hover,.close-btn:hover{background:var(--surface)}.favorite-btn.favorited{background:var(--blue);color:#fff;border-color:var(--blue)}.favorite-btn.favorited:hover{background:#0f766e}.token{display:inline-block;padding:2px 0}ruby{ruby-position:over}rt{font-size:.55em;line-height:1}.blue{color:var(--blue)}.controls{display:flex;gap:16px;align-items:center;font-size:14px;color:var(--text-secondary);margin-bottom:12px;flex-wrap:wrap}.controls button{padding:8px 16px;border-radius:8px;border:1px solid var(--border-light);background:var(--background);cursor:pointer;font-size:14px;color:var(--text-secondary);height:fit-content;min-width:120px;text-align:center}.controls button:hover{background:var(--surface)}.legend{font-size:14px;color:var(--text-muted);display:flex;align-items:center;line-height:1}.legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--blue);margin-right:6px;flex-shrink:0}.content{background:var(--background);padding:20px 0}.quiz-section{margin-top:40px;padding-top:20px;border-top:1px solid var(--border)}.quiz-section h3{font-size:18px;font-weight:600;color:var(--fg);margin-bottom:20px}.quiz-questions{display:flex;flex-direction:column;gap:20px}.quiz-question{background:var(--surface);padding:16px;border-radius:8px;border:1px solid var(--border)}.question-text{font-size:16px;font-weight:500;color:var(--fg);margin-bottom:12px}.question-options{display:flex;flex-direction:column;gap:8px}.option-label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease}.option-label:hover{background:#2563eb0d}.option-label input[type=radio]{margin:0}.quiz-submit{text-align:center;margin-top:30px;padding-top:20px;border-top:1px solid var(--border)}.submit-quiz-btn{background:var(--blue);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s ease}.submit-quiz-btn:hover:not(:disabled){background:#0f766e}.submit-quiz-btn:disabled{background:var(--text-muted);cursor:not-allowed}.quiz-results{margin-top:30px;padding:20px;background:var(--surface);border-radius:8px;border:1px solid var(--border)}.results-header{text-align:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--border)}.results-header h4{font-size:24px;font-weight:700;color:var(--fg);margin:0 0 16px}.score{display:flex;flex-direction:column;align-items:center;gap:8px}.score-number{font-size:48px;font-weight:800;color:var(--blue)}.score-details{font-size:16px;color:var(--text-secondary)}.results-breakdown{display:flex;flex-direction:column;gap:16px;margin-bottom:30px}.result-item{padding:16px;border-radius:8px;border:1px solid var(--border)}.result-item.correct{background:#f0fdf4;border-color:#059669}.result-item.incorrect{background:#fef2f2;border-color:#dc2626}.result-question{font-weight:600;color:var(--fg);margin-bottom:12px;font-size:15px}.result-answers{margin-bottom:12px}.your-answer,.correct-answer{font-size:14px;margin-bottom:4px}.your-answer span,.correct-answer span{font-weight:600}.your-answer{color:var(--text-secondary)}.correct-answer{color:#dc2626}.result-status{font-size:14px;font-weight:600;text-align:right}.result-status.correct{color:#059669}.result-status.incorrect{color:#dc2626}.quiz-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.retry-quiz-btn,.back-to-articles-btn{padding:10px 20px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.retry-quiz-btn{background:var(--blue);color:#fff;border:none}.retry-quiz-btn:hover{background:#0f766e}.back-to-articles-btn{background:var(--surface);color:var(--text-secondary);border:1px solid var(--border)}.back-to-articles-btn:hover{background:var(--border);color:var(--text-primary)}.flashcards-section{margin-top:32px}.flashcards-header{display:flex;flex-direction:column;gap:20px;margin-bottom:32px;align-items:center}.header-top{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:600px}.flashcards-section h2{font-size:20px;font-weight:400;color:var(--text-primary);margin:0}.add-flashcard-btn{padding:8px 16px;background:var(--blue);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.add-flashcard-btn:hover{background:#0f766e}.search-bar{position:relative;max-width:400px;width:100%}.search-input{width:100%;padding:12px 40px 12px 16px;border:1px solid var(--border);border-radius:8px;font-size:14px;background:var(--surface);color:var(--text-primary);transition:all .2s ease}.search-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #0d94881a}.search-input::placeholder{color:var(--text-muted)}.clear-search-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px;font-size:14px;transition:all .2s ease}.clear-search-btn:hover{background:var(--border);color:var(--text-secondary)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:1000;display:flex;justify-content:center;align-items:center}.modal-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border-radius:12px;padding:0;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;z-index:1001;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border)}.modal-header h3{margin:0;font-size:18px;font-weight:600;color:var(--text-primary)}.modal-close-btn{background:none;border:none;font-size:18px;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.modal-close-btn:hover:not(:disabled){background:var(--surface);color:var(--text-primary)}.modal-form{padding:24px}.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.form-group label{font-size:14px;font-weight:500;color:var(--text-primary)}.form-input,.form-textarea{padding:10px 12px;border:1px solid var(--border);border-radius:6px;font-size:14px;background:var(--surface);color:var(--text-primary);transition:all .2s ease;font-family:inherit}select.form-input{padding-right:32px;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:16px;appearance:none;-webkit-appearance:none;-moz-appearance:none}.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #0d94881a}.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted)}.form-textarea{resize:vertical;min-height:80px;line-height:1.5}.flashcard-detail-modal{max-width:600px}.header-actions{display:flex;gap:8px;align-items:center}.edit-btn,.delete-btn{padding:6px 12px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.edit-btn{background:var(--blue);color:#fff}.edit-btn:hover:not(:disabled){background:#0f766e}.delete-btn{background:#dc2626;color:#fff}.delete-btn:hover:not(:disabled){background:#b91c1c}.edit-btn:disabled,.delete-btn:disabled{opacity:.6;cursor:not-allowed}.flashcard-detail-content{padding:24px}.detail-section{text-align:center;padding:24px 0;border-bottom:1px solid var(--border);margin-bottom:24px}.detail-word{font-size:36px;font-weight:700;color:var(--blue);margin-bottom:8px;line-height:1.2}.detail-reading{font-size:20px;color:var(--text-primary);margin-bottom:6px;font-weight:500}.detail-romaji{font-size:16px;color:var(--text-secondary);font-style:italic;margin-bottom:6px}.detail-translation{font-size:18px;color:var(--text-primary);font-weight:500;margin-top:12px}.detail-field{margin-bottom:20px}.detail-field label{display:block;font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:6px}.field-value{font-size:15px;color:var(--text-secondary);line-height:1.5;padding:12px 16px;background:var(--surface);border-radius:8px;border-left:3px solid var(--blue)}.category-tag{display:inline-block;background:var(--blue);color:#fff;padding:6px 12px;border-radius:16px;font-size:12px;font-weight:500;text-transform:capitalize;border-left:none}.detail-meta{text-align:center;padding-top:20px;border-top:1px solid var(--border);margin-top:20px}.detail-meta span{font-size:12px;color:var(--text-muted);background:var(--surface);padding:4px 8px;border-radius:4px}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}.cancel-btn,.submit-btn{padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.cancel-btn{background:var(--surface);color:var(--text-secondary);border:1px solid var(--border)}.cancel-btn:hover:not(:disabled){background:var(--border)}.submit-btn{background:var(--blue);color:#fff;border:none}.submit-btn:hover:not(:disabled){background:#0f766e}.submit-btn:disabled,.cancel-btn:disabled{opacity:.6;cursor:not-allowed}.flashcards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:20px}.flashcard-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;transition:all .2s ease;cursor:pointer;box-shadow:0 1px 3px #0000000d}.flashcard-item:hover{border-color:var(--blue);box-shadow:0 4px 12px #0d94881a;transform:translateY(-2px)}.flashcard-content{text-align:center;margin-bottom:16px}.flashcard-word{font-size:28px;font-weight:700;color:var(--blue);margin-bottom:8px;line-height:1.2}.flashcard-reading{font-size:16px;color:var(--text-primary);margin-bottom:4px;font-weight:500}.flashcard-romaji{font-size:14px;color:var(--text-secondary);font-style:italic}.flashcard-footer{padding-top:12px;border-top:1px solid var(--border);text-align:center}.flashcard-date{font-size:12px;color:var(--text-muted);background:var(--surface);padding:4px 8px;border-radius:4px}.journal-section{margin-top:32px}.journal-header{display:flex;flex-direction:column;gap:20px;margin-bottom:32px;align-items:center}.journal-entries{display:flex;flex-direction:column;gap:24px;margin-bottom:20px}.journal-entry{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;transition:all .2s ease;box-shadow:0 1px 3px #0000000d}.journal-entry:hover{border-color:var(--blue);box-shadow:0 4px 12px #0d94881a}.entry-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}.entry-title{font-size:20px;font-weight:600;color:var(--text-primary);margin:0;line-height:1.3}.entry-date{font-size:12px;color:var(--text-muted);background:var(--surface);padding:4px 8px;border-radius:4px;white-space:nowrap;margin-left:16px}.entry-content{margin-bottom:16px}.entry-content p{font-size:15px;color:var(--text-secondary);line-height:1.6;margin:0;white-space:pre-wrap}.entry-mood{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:14px}.mood-label{font-weight:500;color:var(--text-primary)}.entry-tags{display:flex;flex-wrap:wrap;gap:8px}.tag{display:inline-block;background:var(--blue);color:#fff;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:500}.journal-modal{max-width:600px}@media (max-width: 768px){.journal-modal{max-width:95vw}}.journal-date-display{text-align:center;font-size:14px;color:var(--text-muted);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);font-style:italic}.journal-title-input{font-size:18px;font-weight:500}.journal-content{min-height:200px;line-height:1.6}.journal-metadata{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.content-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.japanese-mode-toggle{display:flex;align-items:center;gap:12px;padding:8px 0}.japanese-checkbox{width:16px;height:16px;accent-color:var(--blue)}.japanese-label{font-size:14px;color:var(--blue);font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.japanese-mode{font-family:Hiragino Sans,Yu Gothic,Meiryo,sans-serif;line-height:1.8;border-left:3px solid var(--blue);background:#3b82f605}.japanese-hint{margin-top:8px;padding:12px;background:#3b82f60d;border-radius:6px;font-size:13px;color:var(--text-secondary);border-left:3px solid var(--blue)}.evaluation-results{margin-top:24px;padding:20px;background:var(--surface);border-radius:8px;border:1px solid var(--border)}.evaluation-results h4{margin:0 0 16px;font-size:16px;color:var(--text-primary)}.evaluation-score{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding:12px;background:#3b82f60d;border-radius:6px}.score-label{font-weight:500;color:var(--text-primary)}.score-value{font-weight:600;color:var(--blue)}.score-number{font-weight:700;color:var(--blue);font-size:18px}.evaluation-section{margin-bottom:16px}.evaluation-section h5{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--text-primary)}.evaluation-section ul{margin:0;padding-left:20px;list-style-type:disc}.evaluation-section li{font-size:14px;color:var(--text-secondary);line-height:1.5;margin-bottom:4px}.loading-spinner{display:inline-block;margin-right:8px}.japanese-entry{border-left:4px solid var(--blue);background:#3b82f605}.entry-title-section{display:flex;align-items:center;gap:12px;flex:1}.japanese-badge{background:var(--blue);color:#fff;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:500}.japanese-text{font-family:Hiragino Sans,Yu Gothic,Meiryo,sans-serif;line-height:1.8}.entry-evaluation{margin:12px 0;padding:12px;background:#3b82f60d;border-radius:6px;border-left:3px solid var(--blue)}.evaluation-summary{display:flex;gap:16px;font-size:13px}.evaluation-level,.evaluation-score{font-weight:500;color:var(--text-primary)}@media (max-width: 768px){header{flex-direction:column;gap:16px;padding:20px 16px;height:auto;min-height:100px}.header-center{order:2;justify-content:center;display:flex;flex-direction:row;align-items:center;gap:12px}.header-profile{position:static;order:3}header h1{font-size:18px}.header-logo{height:55px!important;width:auto!important;max-width:380px!important;min-width:200px!important;object-fit:contain!important}.header-nav{width:100%;justify-content:center;overflow-x:auto;padding:6px}.header-nav a,.header-nav button{font-size:14px;padding:12px 16px;flex-shrink:0;min-height:44px;display:flex;align-items:center;justify-content:center}.wrap{margin:16px auto;padding:0 12px}.input-wrapper{flex-direction:column;gap:8px}.section-content h1{font-size:20px}.articles-grid{grid-template-columns:1fr;gap:12px}.flashcards-grid{grid-template-columns:1fr;gap:16px}.flashcards-header{gap:16px}.header-top{flex-direction:column;gap:12px;text-align:center}.search-bar{max-width:100%}.modal-content{width:95%;max-width:95vw;margin:10px;max-height:95vh}.modal-actions{flex-direction:column;gap:12px}.modal-actions button{width:100%;padding:14px 20px;font-size:16px}.article-detail{padding:20px 12px}.detail-content{padding:20px}.vocab-item{grid-template-columns:1fr;gap:8px;text-align:center}.entry-header{flex-direction:column;gap:8px;align-items:flex-start}.entry-date{margin-left:0}.journal-metadata{grid-template-columns:1fr;gap:16px}.content-header{flex-direction:column;align-items:flex-start;gap:8px}.evaluation-summary{flex-direction:column;gap:8px}.entry-title-section{flex-direction:column;align-items:flex-start;gap:8px}.form-input,.form-textarea{padding:14px 16px;font-size:16px;border-radius:8px}.journal-title-input{font-size:18px;padding:14px 16px}.japanese-mode-toggle{flex-direction:column;align-items:flex-start;gap:8px}.japanese-label{font-size:15px}}@media (max-width: 480px){.wrap{padding:0 8px}header h1{font-size:16px}.header-logo{height:50px!important;width:auto!important;max-width:320px!important;min-width:180px!important;object-fit:contain!important}.section-content h1{font-size:18px}.modal-content{width:98%;max-width:98vw;margin:5px;max-height:98vh}.modal-header{padding:16px 20px}.modal-form{padding:20px}.form-input,.form-textarea{padding:16px;font-size:16px;border-radius:10px}.journal-date-display{font-size:13px;margin-bottom:20px}.japanese-checkbox{width:18px;height:18px}.evaluation-results{padding:16px;margin-top:20px}}*{margin:0;padding:0;box-sizing:border-box}:root{--blue: #0d9488;--fg: #2c2c2c;--text-primary: #2c2c2c;--text-secondary: #6b6b6b;--text-muted: #9ca3af;--border: #e8e6e3;--border-light: #f0efec;--background: #fafaf9;--surface: #ffffff;--font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-family-mono: "Monaco", "Cascadia Code", monospace;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--radius-sm: .5rem;--radius-md: 1rem;--radius-lg: 1.5rem;--radius-xl: 2rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--ease-smooth: cubic-bezier(.4, 0, .2, 1)}body{font-family:var(--font-family);line-height:1.9;color:var(--fg);background:var(--background);margin:0}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;margin-bottom:var(--spacing-md)}a{color:var(--primary-color);text-decoration:none;transition:color .2s ease}a:hover{color:var(--primary-dark)}button{cursor:pointer;border:none;outline:none;font-family:inherit}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}