:root {
  --ink: #17233c;
  --ink-soft: #526078;
  --paper: #f7f4ed;
  --paper-deep: #eee8dc;
  --terracotta: #bc573f;
  --terracotta-dark: #99402e;
  --gold: #d8a934;
}
body { background: var(--paper); color: var(--ink); min-height: 100vh; }
a { color: var(--terracotta-dark); }
.app-navbar { background: var(--ink); }
.brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: #f1cc6e; font-family: Georgia, serif; }
.btn-primary { --bs-btn-bg: var(--terracotta); --bs-btn-border-color: var(--terracotta); --bs-btn-hover-bg: var(--terracotta-dark); --bs-btn-hover-border-color: var(--terracotta-dark); --bs-btn-active-bg: var(--terracotta-dark); --bs-btn-active-border-color: var(--terracotta-dark); }
.text-accent { color: var(--terracotta); }
.eyebrow { color: var(--terracotta-dark); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.hero { background: radial-gradient(circle at 85% 20%, rgba(216,169,52,.15), transparent 28%); }
.greek-card, .auth-card, .panel, .set-card, .practice-card, .filter-bar, .empty-state { background: rgba(255,255,255,.72); border: 1px solid rgba(23,35,60,.12); border-radius: 1rem; }
.greek-card { transform: rotate(1deg); }
.greek-display { font: 1.8rem/1.55 Georgia, "Times New Roman", serif; }
.divider { height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.auth-card { max-width: 520px; box-shadow: 0 1.25rem 3rem rgba(23,35,60,.07); }
.form-control, .form-select { border-color: rgba(23,35,60,.2); background-color: rgba(255,255,255,.85); }
.form-control:focus, .form-select:focus { border-color: var(--terracotta); box-shadow: 0 0 0 .25rem rgba(188,87,63,.15); }
.set-card { transition: transform .18s ease, box-shadow .18s ease; }
.set-card:hover { transform: translateY(-3px); box-shadow: 0 .8rem 2rem rgba(23,35,60,.08); }
.owner-badge { background: #dce8f2; color: #24476a; }
.code-columns { padding: .9rem; border-radius: .5rem; background: var(--ink); color: #f5dfaa; font-family: ui-monospace, monospace; font-size: .85rem; }
.table { --bs-table-bg: transparent; }
.table thead th { background: var(--paper-deep); color: var(--ink); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.greek-text { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; }
.edit-row > td { background: #fffaf0; }
details summary { cursor: pointer; }
.practice-config { max-width: 680px; }
.practice-shell { max-width: 900px; }
.practice-card { box-shadow: 0 1rem 3rem rgba(23,35,60,.07); }
.greek-practice { font: 2rem/1.5 Georgia, "Times New Roman", serif; margin: 0; }
.answer-box { resize: vertical; min-height: 8rem; }
.translation-panel { background: #f2ead6; border-left: 4px solid var(--gold); border-radius: .5rem; }
.progress { height: .35rem; background: rgba(23,35,60,.1); }
.progress-bar { background: var(--terracotta); }
.not-found { max-width: 720px; overflow: hidden; }
.not-found p { max-width: 560px; }
.not-found-mark { color: rgba(188,87,63,.12); font: 800 clamp(5rem, 18vw, 10rem)/.85 Georgia, serif; letter-spacing: -.08em; }
@media (max-width: 767px) {
  .display-3 { font-size: calc(2.2rem + 1.5vw); }
  .greek-practice { font-size: 1.55rem; }
  .table { min-width: 760px; }
}