:root { color-scheme: light; --text: #203129; --page: #f4f6f2; --surface: #fff; --muted: #53655b; --border: #718478; --panel-border: #c9d4ca; --action: #245c43; --action-text: #fff; --notice: #9a2525; --focus: #b16512; font-family: system-ui, sans-serif; line-height: 1.6; color: var(--text); background: var(--page); }
:root[data-theme="dark"] { color-scheme: dark; --text: #e3ece5; --page: #141d19; --surface: #1c2922; --muted: #bbcbbc; --border: #819f8b; --panel-border: #4d6455; --action: #a6dbb9; --action-text: #14251b; --notice: #ffa8a8; --focus: #f2bb72; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { max-width: 76rem; margin: 0 auto; padding: clamp(1.25rem, 5vw, 3rem); }
.login-panel { max-width: 34rem; margin: auto; }
.translation-panel { margin-top: 2rem; }
.directions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 1rem; }
.directions label { display: flex; align-items: center; gap: .5rem; }
.directions input { width: auto; margin: 0; }
.translation-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
textarea { display: block; width: 100%; margin-top: .5rem; padding: .9rem; resize: vertical; min-height: 14rem; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: .45rem; }
.translation-result { min-width: 0; }
.translation-result h3 { margin-top: 0; }
.result-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.translation-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.history-toolbar { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.history-dialog { color: var(--text); background: var(--surface); width: min(42rem, calc(100% - 2rem)); max-height: 85dvh; overflow: auto; border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; }
.history-dialog::backdrop { background: #0008; }
.history-list { list-style: none; padding: 0; }
.history-list li { padding: 1rem 0; border-top: 1px solid var(--border); }
.history-preview { white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.clear-confirm { margin: 1rem 0; }
@media (max-width: 600px) { .history-dialog { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 85dvh; border-radius: 1rem 1rem 0 0; } }
@media (max-width: 900px) { .translation-columns { grid-template-columns: 1fr; } }
.app-header { margin: 2rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
h1 { margin: 0; font-size: 2rem; letter-spacing: -.04em; }
h2 { font-size: 1.3rem; margin-top: 0; }
h3 { font-size: 1rem; }
.subtitle { color: var(--muted); }
.panel { padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--panel-border); border-radius: 1rem; background: var(--surface); }
fieldset { display: grid; border: 0; padding: 0; margin: 1.5rem 0 0; gap: .6rem; min-width: 0; }
input, button { font: inherit; border-radius: .45rem; padding: .7rem .9rem; }
input { width: 100%; min-width: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); margin-bottom: .6rem; }
button { cursor: pointer; border: 1px solid var(--action); color: var(--action-text); background: var(--action); font-weight: 600; }
button.secondary { color: var(--action); background: transparent; }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
a { color: var(--action); }
.account-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.account-row h2 { margin: 0; overflow-wrap: anywhere; }
.notice { color: var(--notice); }
#blazor-error-ui { display: none; position: fixed; bottom: 0; padding: 1rem; background: #fff1d4; color: #3a2a12; width: 100%; }

.translation-panel input[type="radio"], .translation-panel input[type="checkbox"] { width: auto; margin: 0 .35rem 0 0; }
.translation-options { margin-bottom: 1rem; }
.translation-options small { display: inline-block; margin-left: .5rem; }

.theme-control { display: flex; align-items: center; gap: .6rem; }
.theme-notice { flex-basis: 100%; }
select { font: inherit; padding: .6rem; border-radius: .45rem; border: 1px solid var(--border); color: var(--text); background: var(--surface); }
.shell, .panel, .translation-columns > * { min-width: 0; }
.shell { overflow-wrap: anywhere; }
body:has(.history-dialog[open]) .history-notice { display: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}