.dict-status{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius-md, 8px);font-size:var(--font-size-sm, 14px);margin-bottom:16px;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-secondary);transition:var(--transition)}.dict-status.loading{border-color:#f59e0b;background-color:#f59e0b14;color:#d97706}.dict-status.loaded{border-color:#22c55e;background-color:#22c55e14;color:#16a34a}.dict-status.error{border-color:#ef4444;background-color:#ef444414;color:#dc2626}.dict-status-icon{flex-shrink:0;width:18px;height:18px}.loading-spinner{width:18px;height:18px;border:2px solid rgba(245,158,11,.3);border-top-color:#f59e0b;border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.input-section{margin-bottom:16px}.input-section .form-label{display:block;font-weight:600;margin-bottom:8px;color:var(--color-text);font-size:var(--font-size-base, 16px)}.input-section textarea{width:100%;min-height:120px;padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-md, 8px);background-color:var(--color-bg);color:var(--color-text);font-size:16px;font-family:inherit;resize:vertical;transition:var(--transition);box-sizing:border-box}.input-section textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px #8b5cf626}.furigana-type-toggle{display:flex;gap:12px;margin-bottom:16px;align-items:center}.furigana-type-toggle .toggle-label{font-size:var(--font-size-sm, 14px);font-weight:600;color:var(--color-text);margin-right:4px}.furigana-type-toggle label{display:flex;align-items:center;gap:4px;font-size:var(--font-size-sm, 14px);color:var(--color-text-secondary);cursor:pointer}.furigana-type-toggle input[type=radio]{accent-color:var(--color-accent)}.convert-btn{width:100%;padding:12px 24px;background-color:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-md, 8px);font-size:16px;font-weight:600;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-xs)}.convert-btn:hover:not(:disabled){opacity:.9}.convert-btn:disabled{opacity:.5;cursor:not-allowed}.output-section{margin-top:20px;display:none}.output-section.visible{display:block}.output-section-title{font-size:var(--font-size-base, 16px);font-weight:600;color:var(--color-text);margin-bottom:12px}.ruby-preview{padding:16px;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md, 8px);font-size:1.25rem;line-height:2.5;color:var(--color-text);overflow-wrap:break-word;margin-bottom:16px}.ruby-preview ruby rt{font-size:.55em;color:var(--color-text-secondary)}.output-format-options{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.output-format-options label{display:flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md, 8px);font-size:var(--font-size-sm, 14px);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition);background-color:var(--color-surface)}.output-format-options label:has(input:checked){border-color:var(--color-accent);color:var(--color-accent);background-color:#8b5cf614}.output-format-options input[type=radio]{accent-color:var(--color-accent)}.code-output{position:relative;margin-bottom:12px}.code-output pre{padding:14px;background-color:var(--color-bg-secondary, var(--color-bg));border:1px solid var(--color-border);border-radius:var(--radius-md, 8px);font-family:Courier New,Courier,monospace;font-size:var(--font-size-sm, 14px);color:var(--color-text);overflow-x:auto;white-space:pre-wrap;word-break:break-all;margin:0;max-height:200px;overflow-y:auto}.action-buttons{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}.action-button{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-md, 8px);background-color:var(--color-surface);border:1px solid var(--color-border);cursor:pointer;transition:var(--transition);font-size:var(--font-size-sm, 14px);color:var(--color-text);box-shadow:var(--shadow-xs)}.action-button:hover{background-color:var(--color-surface-hover, var(--color-bg-tertiary));border-color:var(--color-border-hover, var(--color-border))}@media(max-width:768px){.ruby-preview{font-size:1.1rem;line-height:2.4;padding:12px}.output-format-options{flex-direction:column}.output-format-options label{width:100%}.convert-btn{padding:14px 24px}.furigana-type-toggle{flex-wrap:wrap}}