:root {font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #253831; background: #f8f9f5; --green: #2a6654; --muted: #687a71; --border: #dce4dd}
* {box-sizing: border-box}
body {margin: 0; line-height: 1.55}
a {color: inherit}
h1, h2, p {margin-top: 0}
h1 {font-size: clamp(2rem, 4vw, 3rem); line-height: 1.16; letter-spacing: -.035em; margin-bottom: 16px}
h2 {font-size: 1.2rem; line-height: 1.4; letter-spacing: -.015em; margin-bottom: 12px}
button, input, textarea, select {font: inherit}
button {border: 0; border-radius: 9px; padding: 11px 18px; background: var(--green); color: #fff; cursor: pointer; font-weight: 600}
button:disabled {opacity: .6; cursor: wait}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline: 3px solid #7dac91; outline-offset: 3px}
input, textarea, select {display: block; width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 11px; background: #fff; color: #253831; margin-bottom: 18px}
label {display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px}
.muted {color: var(--muted)}
.small {font-size: .85rem}
.brand {display: inline-block; font-size: 1.75rem; font-weight: 800; letter-spacing: -.045em; text-decoration: none; margin-bottom: 24px}
.brand span {color: var(--green)}
.eyebrow {font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); margin-bottom: 12px}
.sign-in-page {min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: linear-gradient(145deg, #eaf0e6, #f8f9f5 65%)}
.sign-in-card {max-width: 490px; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 42px; box-shadow: 0 12px 40px #25383109}
.sign-in-card form {margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border)}
.sign-in-card button {width: 100%}
.preview-note {padding: 14px; background: #f3f6ee; font-size: .85rem; border-radius: 9px; margin: 22px 0 12px}
.app-layout {display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh}
.sidebar {padding: 32px 24px; border-right: 1px solid var(--border); background: #f1f5ed; display: flex; flex-direction: column; align-items: stretch}
.sidebar select {font-size: .9rem; padding: 9px; margin-bottom: 12px}
.sidebar nav {display: grid; gap: 5px; margin-top: 28px}
.sidebar nav button {text-align: left; background: transparent; color: #4a6055; font-weight: 500; padding: 12px}
.sidebar nav button[aria-current="page"] {color: #244e3e; background: #dce9dc; font-weight: 700}
.quiet-button {background: transparent; color: var(--green); padding: 7px 0; font-size: .85rem; text-align: left}
.account {margin-top: auto; padding-top: 32px; font-size: .8rem; overflow-wrap: anywhere}
.account span {display: block}
.main-content {max-width: 1160px; width: 100%; padding: 28px 48px 40px}
.preview-banner {border: 1px solid #e5ddc6; background: #faf7ec; padding: 11px 15px; border-radius: 9px; font-size: .82rem; color: #756538; margin-bottom: 36px}
.page-heading {margin-bottom: 28px}
.card {padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: #fff; margin-bottom: 20px}
.stats {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px}
.stat strong {display: block; font-size: 2rem; font-weight: 650; letter-spacing: -.03em}
.stat span {font-size: .85rem; color: var(--muted)}
.empty {padding: 40px 24px; border: 1px dashed #c8d4ca; border-radius: 14px; background: #f4f7f0; color: var(--muted); margin-bottom: 24px}
.word-list {display: flex; flex-wrap: wrap; gap: 9px; margin: 16px 0 26px; padding: 0; list-style: none}
.word-list li {padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff}
.word-list.recent-words {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr))}
.word-detail {display: block; font-size: .72rem; margin-top: 2px}
.listening-control {margin-top: 10px}
.listen-button {padding: 6px 10px; font-size: .78rem; background: #e8f0e5; color: var(--green)}
.review-actions {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px}
.secondary-button {background: #e8f0e5; color: var(--green)}
.review-comparison {border-top: 1px solid var(--border); margin-top: 20px; padding-top: 20px}
.review-comparison h3 {font-size: .9rem; margin-bottom: 6px}
.compared-text {white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; border-radius: 8px; background: #f4f7f0}
.listening-control audio {display: block; max-width: 100%; height: 36px; margin-top: 10px}
.entry-row, .recording-row {border-bottom: 1px solid var(--border); padding: 15px 0}
.entry-row:last-child, .recording-row:last-child {border-bottom: 0}
.entry-row p {margin-bottom: 5px; white-space: pre-wrap; overflow-wrap: anywhere}
mark {background: #fff0a6; border-radius: 2px; padding: 1px 0}
.recording-row strong {display: block; overflow-wrap: anywhere}
#message {min-height: 1.5em; color: #6c5536; font-size: .9rem}
footer {font-size: .78rem; color: var(--muted); margin-top: 42px}
progress {width: 100%; margin-top: 15px}
[hidden] {display: none !important}
@media (max-width: 760px) {.app-layout {display: block} .sidebar {padding: 18px 20px; border-right: 0; border-bottom: 1px solid var(--border); display: block} .sidebar .brand {margin-bottom: 12px} .sidebar .eyebrow {display: none} .sidebar select {display: inline-block; width: calc(50% - 8px); margin-right: 4px} .sidebar label {display: inline-block; width: 48%} .sidebar nav {display: flex; overflow-x: auto; gap: 3px; margin-top: 8px} .sidebar nav button {white-space: nowrap; padding: 9px 10px; font-size: .83rem} .account {padding-top: 12px; display: flex; justify-content: space-between; align-items: center} .main-content {padding: 22px 20px 32px} .preview-banner {margin-bottom: 25px} .stats {gap: 8px} .stats .card {padding: 14px 10px} .stat strong {font-size: 1.7rem} .stat span {font-size: .75rem} .sign-in-card {padding: 30px 24px}}