body { margin: 0; font-family: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif; color: #172033; background: #f6f7f4; }
header { display: flex; align-items: center; gap: 16px; padding: 14px 22px; background: #1c2744; color: white; }
header img { width: 42px; height: 42px; }
header a, header strong { color: white; }
header a { margin-left: auto; }
main { width: min(980px, calc(100% - 32px)); margin: 28px auto; }
h1 { font-family: Georgia, serif; font-weight: 500; }
.login { width: min(420px, calc(100% - 32px)); margin: 10vh auto; background: white; border: 1px solid #e4e8ef; border-radius: 16px; padding: 28px; }
.login img { width: 64px; }
form { display: grid; gap: 10px; }
input, button { font: inherit; padding: 12px 14px; border-radius: 10px; border: 1px solid #e4e8ef; }
button, .decks a, .pager a { background: #6ea31a; color: white; text-decoration: none; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700; }
.decks { list-style: none; padding: 0; display: grid; gap: 12px; }
.error { color: #8a2b2b; }
.empty { background: white; border: 1px solid #e4e8ef; border-radius: 12px; padding: 16px; }
.viewer img { width: 100%; background: white; border-radius: 12px; }
.pager { display: flex; gap: 10px; }