body { background: #f4f7fb; color: #172b4d; }
.container { max-width: 1120px; }
.login-card { max-width: 520px; border-radius: 20px; }
.card { border-radius: 16px; }
.word-display { font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.word-index { font-size: 50%; color: #8a94a3; font-weight: 500; vertical-align: .12em; }
.reader-panel { max-width: 520px; }
.paper-notice { flex-shrink: 0; padding: 12px 0; background: #dbeafe; color: #084298; border-bottom: 1px solid #9ec5fe; font-weight: 600; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.reader-app .alert { margin: 0 0 .75rem; padding: .45rem .7rem; font-size: .875rem; line-height: 1.35; }
.reader-task-page { --reader-bottom-height: calc(110px + env(safe-area-inset-bottom, 0px)); background: #f4f7fb; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.reader-task-page > header { flex-shrink: 0; }
.reader-task-page > main { flex: 1; display: flex; flex-direction: column; padding-bottom: calc(var(--reader-bottom-height) + 58px) !important; }
.has-bottom-controls { flex: 1; width: 100%; display: flex; flex-direction: column; }
.has-bottom-controls > .recording-content { flex: 1; }
.reader-bottom-controls { position: fixed; inset: auto 0 0; z-index: 1030; height: var(--reader-bottom-height); padding: 8px 13px calc(5px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #e5eaf0; }
.reader-bottom-buttons { max-width: 416px; min-height: 72px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr); gap: 13px; align-items: center; justify-items: center; }
.reader-bottom-buttons #previous { grid-column: 1; grid-row: 1; }
.reader-bottom-buttons #next { grid-column: 3; grid-row: 1; }
.reader-bottom-buttons > .btn { width: 100%; max-width: 90px; padding: .3rem .6rem; font-size: .8rem; white-space: nowrap; }
.reader-bottom-controls #record-hint {font-size: .7rem !important; }
.record-hold svg { width: 32px; height: 32px; }
.record-hold-area { position: absolute; left: 50%; top: -46px; transform: translateX(-50%); display: flex; }
.record-hold { width: 116px; height: 116px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 50%; background: #198754; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.record-hold * { pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.record-hold.is-recording { background: #dc3545; box-shadow: 0 0 0 8px #f8d7da; }
.record-hold.is-canceling { background: #6c757d; box-shadow: 0 0 0 8px #e2e3e5; }
.record-cancel-overlay { position: fixed; inset: 0; z-index: 1040; display: flex; align-items: center; justify-content: center; background: rgba(220, 53, 69, .14); color: #a52834; font-size: clamp(1.6rem, 7vw, 2.6rem); font-weight: 700; pointer-events: none; }
.record-hold:focus-visible { outline: 3px solid #172b4d; outline-offset: 6px; }
.record-hold:disabled { background: #e9ecef; color: #6c757d; cursor: default; }
.recording-preview { height: 54px; }
.recording-preview audio { display: block; height: 100%; }
.recording-preview-empty { height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 12px; background: #fce8e8; color: #a33a3a; font-size: 14px; }
.reader-panel .btn:disabled { color: #6c757d; background-color: #e9ecef; border-color: #dee2e6; opacity: 1; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.btn { touch-action: manipulation; }
@media (max-width: 575px) { .container { padding-inline: 16px; } }