:root { font-family: system-ui, sans-serif; color: #1f2933; background: #f5f7fa; }
body { margin: 0; }
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: #102a43; color: #fff; }
header h1 { font-size: 1.25rem; margin: 0; }
#who { font-size: 0.9rem; display: flex; gap: 1rem; align-items: center; }
#who button { background: none; border: 1px solid #9fb3c8; color: #fff; }
main { max-width: 52rem; margin: 2rem auto; padding: 0 1rem; }
section { background: #fff; border-radius: 6px; padding: 1rem 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
ul { list-style: none; padding: 0; margin: 0; }
li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid #e4e7eb; }
li:last-child { border-bottom: none; }
.desc { color: #52606d; font-size: 0.9rem; }
button { font: inherit; padding: 0.4rem 1rem; border-radius: 4px; border: 1px solid #334e68; background: #334e68; color: #fff; cursor: pointer; }
button.secondary { background: #fff; color: #334e68; }
button:disabled { opacity: 0.5; cursor: default; }
.state { font-weight: 600; }
.actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
#message:empty { display: none; }
#message { background: #fffbea; border-left: 4px solid #f0b429; padding: 0.75rem 1rem; }