:root { font-family: system-ui, sans-serif; color: #18283e; background: #f2f5fa; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(720px, 100% - 2rem); margin: 4rem auto; }
.eyebrow { color: #315dcc; font-size: .8rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
h1 { font-size: clamp(2.5rem, 7vw, 4rem); margin: .2rem 0; }
header > p:last-child, #status, #entry-count { color: #617085; }
header { margin-bottom: 2rem; }
.card { background: #fff; border: 1px solid #e0e7f0; border-radius: 16px; padding: 1.5rem; margin: 1rem 0; box-shadow: 0 8px 30px #18283e0a; }
h2 { font-size: 1.15rem; margin: 0 0 1.2rem; }
#entry-count { font-size: .8rem; font-weight: 400; float: right; }
label { display: block; font-weight: 650; margin-bottom: .5rem; }
.form-row { display: flex; gap: .7rem; }
input { min-width: 0; flex: 1; font: inherit; padding: .8rem; border: 1px solid #abb7c6; border-radius: 8px; }
button { cursor: pointer; border: 0; border-radius: 8px; padding: .75rem 1rem; font: inherit; font-weight: 650; color: white; background: #2452c1; }
button:hover { background: #1a409b; }
button:focus-visible, input:focus-visible { outline: 3px solid #89aaff; outline-offset: 2px; }
button:disabled { opacity: .6; cursor: wait; }
.plain { color: #2452c1; background: transparent; padding: .6rem 0 0; }
.plain:hover { background: transparent; text-decoration: underline; }
#status.error { color: #ae2822; }
ul { list-style: none; padding: 0; margin: 0; }
li { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid #e7ecf3; }
li span { flex: 1; overflow-wrap: anywhere; }
.actions { display: flex; gap: .4rem; }
.actions button { font-size: .85rem; padding: .45rem .65rem; color: #2452c1; background: #edf2fa; }
.actions button:hover { background: #dce6fa; }
.actions .delete { color: #a72721; background: #ffefec; }
.actions .delete:hover { background: #ffdfdb; }
@media (max-width: 520px) { main { margin: 2rem auto; } .form-row, li { flex-direction: column; align-items: stretch; } .actions { justify-content: flex-end; } }