.reader-warning{padding:8px 16px;margin-bottom:12px;background:#fef3c7;border:1px solid #f59e0b;border-radius:8px;color:#92400e;font-size:.875rem}.reader-text{font-size:var(--font-size-lg, 1.125rem);line-height:var(--line-height-relaxed, 1.75);color:var(--color-text, #111827);padding:var(--spacing-4, 16px);background:var(--color-background, #ffffff);border:1px solid var(--color-border, #e5e7eb);border-radius:var(--radius-lg, 12px);white-space:pre-wrap;word-wrap:break-word}.reader__word{cursor:pointer;border-radius:2px;transition:background-color .15s ease,border-color .15s ease;padding:0 1px}.reader__word--new{border-bottom:2px solid var(--color-info, #3b82f6);color:var(--color-info-dark, #1d4ed8)}.reader__word--new:hover{background:var(--color-info-50, #eff6ff)}.reader__word--learning{background:var(--color-warning-50, #fffbeb);border-bottom:2px solid var(--color-warning, #f59e0b)}.reader__word--learning:hover{background:var(--color-warning-100, #fef3c7)}.reader__word--learned{color:var(--color-text-muted, #6b7280);opacity:.7}.reader__word--learned:hover{opacity:1;background:var(--color-gray-50, #f9fafb)}.reader__word--to_review{border-bottom:2px dotted var(--color-error, #ef4444);color:var(--color-error-dark, #b91c1c)}.reader__word--to_review:hover{background:var(--color-error-50, #fef2f2)}.reader__phrase{background:#6366f114;border-radius:3px;padding:1px 0;border-bottom:2px solid rgba(99,102,241,.3);cursor:help;transition:background-color .15s ease}.reader__phrase:hover{background:#6366f126}.reader__punctuation{user-select:text}.reader-stats{display:flex;align-items:center;gap:var(--spacing-3, 12px);padding:var(--spacing-3, 12px) var(--spacing-4, 16px);background:var(--color-gray-50, #f9fafb);border:1px solid var(--color-border, #e5e7eb);border-radius:var(--radius-lg, 12px);flex-wrap:wrap;position:sticky;top:var(--spacing-2, 8px);z-index:10}.reader-stats__badge{display:inline-flex;align-items:center;gap:var(--spacing-1, 4px);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);padding:var(--spacing-1, 4px) var(--spacing-2, 8px);border-radius:var(--radius-md, 8px)}.reader-stats__badge--total{background:var(--color-gray-100, #f3f4f6);color:var(--color-text, #111827)}.reader-stats__badge--new{background:var(--color-info-50, #eff6ff);color:var(--color-info-dark, #1d4ed8)}.reader-stats__badge--learning{background:var(--color-warning-50, #fffbeb);color:var(--color-warning-dark, #92400e)}.reader-stats__badge--known{background:var(--color-success-50, #f0fdf4);color:var(--color-success-dark, #166534)}.reader-stats__spacer{flex:1}.reader-stats__clear{font-size:var(--font-size-sm, .875rem);color:var(--color-text-muted, #6b7280);background:none;border:1px solid var(--color-border, #e5e7eb);border-radius:var(--radius-md, 8px);padding:var(--spacing-1, 4px) var(--spacing-3, 12px);cursor:pointer;transition:all .15s ease}.reader-stats__clear:hover{color:var(--color-error, #ef4444);border-color:var(--color-error, #ef4444);background:var(--color-error-50, #fef2f2)}.reader-input{display:flex;flex-direction:column;gap:var(--spacing-4, 16px)}.reader-input__textarea{width:100%;min-height:200px;padding:var(--spacing-4, 16px);font-size:var(--font-size-base, 1rem);font-family:inherit;line-height:var(--line-height-relaxed, 1.75);color:var(--color-text, #111827);background:var(--color-background, #ffffff);border:2px solid var(--color-border, #e5e7eb);border-radius:var(--radius-lg, 12px);resize:vertical;transition:border-color .15s ease}.reader-input__textarea:focus{outline:none;border-color:var(--color-primary, #0d9488);box-shadow:0 0 0 3px var(--color-primary-50, rgba(13, 148, 136, .1))}.reader-input__textarea::placeholder{color:var(--color-text-muted, #9ca3af)}.reader-input__footer{display:flex;align-items:center;justify-content:space-between}.reader-input__meta{font-size:var(--font-size-sm, .875rem);color:var(--color-text-muted, #6b7280)}.reader-input__submit{padding:var(--spacing-2, 8px) var(--spacing-6, 24px);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-semibold, 600);color:#fff;background:var(--color-primary, #0d9488);border:none;border-radius:var(--radius-md, 8px);cursor:pointer;transition:background-color .15s ease,opacity .15s ease}.reader-input__submit:hover:not(:disabled){background:var(--color-primary-dark, #0f766e)}.reader-input__submit:disabled{opacity:.5;cursor:not-allowed}.reader-loading{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-4, 16px);padding:var(--spacing-12, 48px);color:var(--color-text-muted, #6b7280)}.reader-loading__spinner{width:32px;height:32px;border:3px solid var(--color-border, #e5e7eb);border-top-color:var(--color-primary, #0d9488);border-radius:50%;animation:reader-spin .8s linear infinite}@keyframes reader-spin{to{transform:rotate(360deg)}}.reader-error{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-4, 16px);padding:var(--spacing-8, 32px);text-align:center}.reader-error__message{color:var(--color-error, #ef4444);font-size:var(--font-size-base, 1rem)}.reader-error__retry{padding:var(--spacing-2, 8px) var(--spacing-4, 16px);font-size:var(--font-size-sm, .875rem);color:var(--color-primary, #0d9488);background:none;border:1px solid var(--color-primary, #0d9488);border-radius:var(--radius-md, 8px);cursor:pointer;transition:all .15s ease}.reader-error__retry:hover{background:var(--color-primary-50, rgba(13, 148, 136, .1))}.reader-page{padding:var(--spacing-8, 32px) var(--spacing-4, 16px);min-height:60vh}.reader-page__container{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-6, 24px)}.reader-page__header{text-align:center;margin-bottom:var(--spacing-4, 16px)}.reader-page__title{font-size:var(--font-size-3xl, 1.875rem);font-weight:var(--font-weight-bold, 700);color:var(--color-text, #111827);margin:0 0 var(--spacing-2, 8px) 0}.reader-page__subtitle{font-size:var(--font-size-lg, 1.125rem);color:var(--color-text-muted, #6b7280);margin:0}@media(max-width:640px){.reader-page{padding:var(--spacing-6, 24px) var(--spacing-4, 16px)}.reader-page__title{font-size:var(--font-size-2xl, 1.5rem)}.reader-page__subtitle{font-size:var(--font-size-base, 1rem)}.reader-stats{gap:var(--spacing-2, 8px)}.reader-text{font-size:var(--font-size-base, 1rem);padding:var(--spacing-3, 12px)}}