:root {
    --color-bg: #FAF9F6;
    --color-ink: #1B2430;
    --color-red: #B3182F;
    --color-green: #2F6E4F;
    --color-graphite: #6B7280;
    --color-rule: #D8DCE3;

    --font-display: "Source Serif 4", Georgia, serif;
    --font-body: "Public Sans", -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.5em;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.4rem;
    margin-top: 1.8rem;
}

h3 {
    font-size: 1.1rem;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--color-red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

a:hover, a:focus-visible {
    border-bottom-color: var(--color-red);
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}

.siteHeader {
    border-bottom: 1px solid var(--color-rule);
    padding: 18px 24px;
}

.siteNav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    max-width: 900px;
    margin: 0 auto;
}

.siteNav a, .siteNav button {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-graphite);
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

.siteNav a:hover, .siteNav a:focus-visible, .siteNav button:hover, .siteNav button:focus-visible {
    color: var(--color-red);
    border-bottom-color: var(--color-red);
}

.siteNav .navEmail {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-ink);
}

main.paper {
    max-width: 860px;
    margin: 32px auto;
    background: #FFFFFF;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    padding: 32px 36px;
    box-shadow: 0 1px 3px rgba(27, 36, 48, 0.06);
}

@media (max-width: 640px) {
    main.paper {
        margin: 16px;
        padding: 20px;
    }

    .siteNav {
        gap: 12px;
    }
}

label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-graphite);
    margin: 1em 0 0.35em;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
    width: 100%;
    max-width: 420px;
    padding: 9px 11px;
    background: var(--color-bg);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

input[type="file"] {
    font-family: var(--font-body);
    font-size: 0.9rem;
}

button, input[type="submit"] {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--color-ink);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius);
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 14px;
}

button:hover, input[type="submit"]:hover {
    background: var(--color-red);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.92rem;
}

th {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-graphite);
    text-align: left;
    border-bottom: 1px solid var(--color-ink);
    padding: 8px 10px;
}

td {
    font-family: var(--font-mono);
    border-bottom: 1px solid var(--color-rule);
    padding: 8px 10px;
}

.markedScore {
    display: inline-block;
    position: relative;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-red);
    padding: 2px 10px;
}

.markedScore::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--color-red);
    border-radius: 40% 45% 40% 45% / 55% 45% 55% 45%;
    transform: rotate(-1.5deg);
    pointer-events: none;
}

.dashboardGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 20px 0 32px;
}

.dashboardCard {
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    padding: 18px 20px;
    min-width: 220px;
    flex: 1 1 220px;
}

.dashboardCard h3 {
    margin-bottom: 0.6em;
}

.dashboardCard p {
    margin-bottom: 0.4em;
}

.fieldGroup {
    margin-bottom: 4px;
}

.radioRow {
    display: flex;
    gap: 24px;
    margin: 8px 0 4px;
}

.radioRow label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--font-body);
    font-size: 0.95rem;
    columns: var(--color-ink);
    margin: 0;
}

.resultArea {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--color-rule);
}

#progressStatus {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-graphite);
}

.errorText {
    color: var(--color-red);
    font-weight: 600;
}

.authForm {
    max-width: 340px;
}

.authFooter {
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--color-graphite);
}

.actionLink {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid var(--color-ink);
    border-radius: var(--radius);
    padding: 8px 16px;
    color: var(--color-ink);
}

.actionLink:hover, .actionLink:focus-visible {
    background: var(--color-ink);
    color: #FFFFFF;
    border-bottom: 1px solid var(--color-ink);
}

.hidden {
    display: none !important;
}

.flashcardBox {
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    padding: 28px 24px;
    min-height: 100px;
    margin: 16px 0;
    background: var(--color-bg);
}

.flashcardFront {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 0;
}

.flashcardBack {
    font-family: var(--font-body);
    color: var(--color-graphite);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-rule);
}

.cardCounter {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-graphite);
    margin-bottom: 0;
}

.ratingRow {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.ratingRow button {
    background: #FFFFFF;
    margin-top: 0;
}

.ratingRow button[data-quality="1"] {
    color: var(--color-red);
    border: 1px solid var(--color-red);
}

.ratingRow button[data-quality="1"]:hover {
    background: var(--color-red);
    color: #FFFFFF;
}

.ratingRow button[data-quality="3"] {
    color: var(--color-graphite);
    border: 1px solid var(--color-graphite);
}

.ratingRow button[data-quality="3"]:hover {
    background: var(--color-graphite);
    color: #FFFFFF;
}

.ratingRow button[data-quality="4"] {
    color: var(--color-ink);
    border: 1px solid var(--color-ink);
}

.ratingRow button[data-quality="5"] {
    color: var(--color-green);
    border: 1px solid var(--color-green);
}

.ratingRow button[data-quality="5"]:hover {
    background: var(--color-green);
    color: #FFFFFF;
}

.generateForm {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-rule);
    margin-bottom: 20px;
}

.generateForm .fieldGroup {
    margin-bottom: 0;
}

.generateForm button {
    margin-top: 0;
}

#generateStatus {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-graphite);
}

.questionCard {
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}

.questionCard .questionMeta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-graphite);
    margin-bottom: 8px;
}

.questionCard .questionText {
    font-family: var(--font-body);
    margin-bottom: 16px;
}

.gradeResult {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-rule);
    font-family: var(--font-body);
    font-size: 0.92rem;
}

.chatWindow {
    max-height: 440px;
    overflow-y: auto;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-message {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 0.94rem;
    line-height: 1.5;
}

.chat-message strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 500;
}

.chat-user {
    align-self: flex-end;
    background: var(--color-ink);
    color: #FFFFFF;
}

.chat-user strong {
    color: rgba(255, 255, 255, 0.65);
}

.chat-assistant {
    align-self: flex-start;
    background: #FFFFFF;
    border: 1px solid var(--color-rule);
    color: var(--color-ink);
}

.chat-assistant strong {
    color: var(--color-red);
}

.chatInputRow {
    display: flex;
    gap: 10px;
}

.chatInputRow input[type="text"] {
    flex: 1;
    max-width: none;
}

.chatInputRow button {
    margin-top: 0;
}