:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f4f6f8; color: #17212b; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #174f87; }
.site-header { min-height: 64px; padding: .5rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #173b67; color: white; }
.brand { color: white; font-size: 1.25rem; font-weight: 750; text-decoration: none; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; }
.header-actions a { color: white; font-weight: 650; }
.header-actions form { margin: 0; }
.link-button { color: white; background: transparent; border: 1px solid #b8cbe0; }
.warning { padding: .75rem 1rem; background: #fff0c2; color: #4d3a00; text-align: center; font-weight: 650; }
.container { width: min(760px, 100%); margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.page-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin: 1rem 0; }
.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.section-heading h2 { margin-top: 0; }
.section-heading p { margin-bottom: .75rem; }
h1, h2 { color: #173b67; line-height: 1.15; }
.panel, .card { background: white; border: 1px solid #d7dfe7; border-radius: 12px; box-shadow: 0 2px 8px rgb(17 42 67 / 6%); }
.panel { padding: 1.25rem; margin: 1rem 0; }
.narrow { max-width: 460px; margin: 2rem auto; }
.stack { display: grid; gap: 1rem; }
label { display: grid; gap: .4rem; font-weight: 650; }
input, textarea, button { min-height: 48px; border-radius: 8px; border: 1px solid #9aacbd; padding: .75rem; font: inherit; }
textarea { width: 100%; resize: vertical; line-height: 1.55; }
button { background: #17558f; color: white; border-color: #17558f; font-weight: 700; cursor: pointer; }
button:disabled { background: #758596; border-color: #758596; cursor: not-allowed; }
button.secondary { background: white; color: #174f87; }
.cards { display: grid; gap: .75rem; }
.card { display: grid; gap: .35rem; padding: 1rem; color: inherit; text-decoration: none; }
.card:hover { border-color: #17558f; }
.recorder-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; }
.status { display: inline-block; width: fit-content; border-radius: 999px; padding: .3rem .65rem; background: #e5ebf1; font-size: .875rem; font-weight: 750; }
.status-completed { background: #d8f2df; color: #175a2a; }
.status-failed, .status-purged { background: #f9dddd; color: #8a1c1c; }
.notice { border-left: 4px solid #c69720; padding-left: .75rem; }
.success { border-left: 4px solid #22813b; padding: .75rem; background: #e5f6e9; color: #175a2a; font-weight: 650; }
.error { color: #971f1f; font-weight: 650; }
.transcript { white-space: pre-wrap; line-height: 1.6; }
.form-actions { display: grid; gap: .75rem; }
.validation { display: inline-block; width: fit-content; border-radius: 999px; padding: .3rem .65rem; font-size: .875rem; font-weight: 750; }
.validation-approved { background: #d8f2df; color: #175a2a; }
.validation-pending { background: #fff0c2; color: #6b5000; }
.revision-list { display: grid; gap: .75rem; }
.revision-list details { border: 1px solid #d7dfe7; border-radius: 8px; padding: .75rem; }
.revision-list summary { cursor: pointer; font-weight: 700; }
.revision-list .transcript { border-top: 1px solid #e2e8ee; margin-top: .75rem; padding-top: .75rem; }
.dictionary-apply { display: grid; gap: .4rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e2e8ee; }
.dictionary-apply small, .help { color: #516170; line-height: 1.45; }
.dictionary-list { display: grid; gap: .75rem; }
.dictionary-entry { display: grid; gap: .6rem; margin: 0; }
.dictionary-entry p { margin: 0; }
.dictionary-status { display: inline-block; width: fit-content; border-radius: 999px; padding: .25rem .6rem; font-size: .82rem; font-weight: 750; }
.dictionary-status-draft { background: #fff0c2; color: #6b5000; }
.dictionary-status-active { background: #d8f2df; color: #175a2a; }
.dictionary-status-inactive { background: #e5ebf1; color: #455565; }
.summary-generate { margin: .75rem 0 1rem; }
.summary-panel textarea { min-height: 12rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; margin-top: 2rem; }
dt { font-weight: 700; }
dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .site-header { align-items: flex-start; } .header-actions { gap: .5rem; } .header-actions a { min-height: 44px; display: inline-flex; align-items: center; } }
@media (min-width: 640px) { .recorder-actions { grid-template-columns: repeat(4, 1fr); } .form-actions { grid-template-columns: 1fr 1fr; } .dictionary-apply { grid-template-columns: max-content 1fr; align-items: center; } }