.reader-tabs{display:flex;gap:var(--space-1);margin-bottom:var(--space-4)}.reader-tab{flex:1;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--text-sm);color:var(--color-text-secondary);cursor:pointer;text-align:center;transition:all var(--duration-normal) var(--ease-default)}.reader-tab.active{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-accent-text)}.camera-area{position:relative;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;aspect-ratio:4 / 3;margin-bottom:var(--space-4)}.camera-area video{width:100%;height:100%;object-fit:cover;display:block}.camera-area canvas{display:none}.camera-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.scan-frame{width:60%;aspect-ratio:1;border:2px solid rgba(255,255,255,.7);border-radius:var(--radius-lg);box-shadow:0 0 0 9999px #0000004d}.camera-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);height:100%;color:var(--color-text-tertiary);font-size:var(--text-sm)}.camera-btn-row{display:flex;gap:var(--space-2);margin-bottom:var(--space-4)}.camera-btn-row button{flex:1}.upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);border:2px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--space-8) var(--space-4);margin-bottom:var(--space-4);cursor:pointer;transition:border-color var(--duration-normal) var(--ease-default);color:var(--color-text-secondary);font-size:var(--text-sm);text-align:center}.upload-area:hover{border-color:var(--color-accent)}.upload-area input[type=file]{display:none}.upload-preview{max-width:100%;max-height:300px;border-radius:var(--radius-md);display:none;margin-bottom:var(--space-4)}.result-content{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-text);word-break:break-all;white-space:pre-wrap;margin-bottom:var(--space-3)}.result-type{display:inline-block;font-size:var(--text-xs);font-weight:var(--weight-medium);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);background:var(--color-accent-light);color:var(--color-accent);margin-bottom:var(--space-2)}.permission-error{text-align:center;padding:var(--space-4);color:var(--color-error);font-size:var(--text-sm)}
