@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
    --ink: #1c2a24;
    --paper: #f6f3ec;
    --panel: #ffffff;
    --accent: #b6572e;   /* burnt terracotta */
    --accent-dark: #8c421f;
    --forest: #2f5d4f;   /* deep teal-green */
    --forest-light: #e8efe9;
    --gold: #d4a13a;
    --line: #e2ddce;
}

body {
    font-family: 'IBM Plex Sans', sans-serif;
    background-color: var(--paper);
    color: var(--ink);
}

.font-display {
    font-family: 'Fraunces', serif;
}

.brand-mark {
    background: var(--forest);
    color: var(--paper);
}

.btn-primary {
    background: var(--forest);
    color: #fff;
    transition: background .15s ease;
}
.btn-primary:hover { background: var(--accent-dark); }

.btn-accent {
    background: var(--accent);
    color: #fff;
    transition: background .15s ease;
}
.btn-accent:hover { background: var(--accent-dark); }

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.symbol-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.75rem;
    padding: 0 .5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .8rem;
    font-family: 'Fraunces', serif;
}
.symbol-A { background: var(--forest); color: #fff; }
.symbol-B { background: var(--forest-light); color: var(--forest); }
.symbol-C { background: #fbeecf; color: #8a6212; }
.symbol-D { background: #fbe3d3; color: var(--accent-dark); }
.symbol-E { background: #f6d3cb; color: #922b1a; }
.symbol-U { background: #e6c6be; color: #6f1c0f; }

table.record-sheet th {
    background: var(--forest);
    color: #fff;
    font-weight: 500;
    font-size: .72rem;
    letter-spacing: .02em;
}
table.record-sheet td, table.record-sheet th {
    border: 1px solid var(--line);
}
table.record-sheet tbody tr:nth-child(even) { background: #faf8f2; }

.mark-input {
    width: 3.25rem;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: .25rem 0;
}
.mark-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(182,87,46,.15);
}

@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
}