:root { font: 15px/1.45 system-ui, "Segoe UI", sans-serif; color: #1b1b1b; background: #fafafa; }
body { margin: 0; }
header { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.5rem; background: #1f3a5f; color: #fff; }
header h1 { font-size: 1.15rem; margin: 0; flex: 1; }
header button { background: transparent; color: #fff; border: 1px solid #fff8; }
main { padding: 1rem 1.5rem 3rem; max-width: 72rem; }
#banner { margin: 1rem 1.5rem 0; padding: .75rem 1rem; background: #fff4d6; border: 1px solid #e0b400; border-radius: 4px; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid #e3e3e3; vertical-align: top; }
th { font-weight: 600; background: #f0f2f5; }
tr.row { cursor: pointer; }
tr.row:hover, tr.row:focus { background: #eef4fb; outline: none; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; }
dt { font-weight: 600; }
dd { margin: 0; }
button { font: inherit; padding: .3rem .8rem; border: 1px solid #888; border-radius: 4px; background: #fff; cursor: pointer; }
button.primary { background: #1f3a5f; color: #fff; border-color: #1f3a5f; }
button.danger { border-color: #a40000; color: #a40000; }
.soon { color: #a40000; font-weight: 600; }
.tag { font-size: .8em; color: #666; }
h2 button { font-size: .95rem; margin-left: .5rem; vertical-align: middle; }
.note { color: #555; font-size: .9em; }
.plan { margin: 1rem 0; padding: .75rem 1rem; background: #fff; border: 1px solid #c8c8c8; border-radius: 4px; }
.plan li { margin: .2rem 0; }
form.change { margin: 1rem 0; padding: .75rem 1rem; background: #fff; border: 1px solid #c8c8c8; border-radius: 4px; }
form.change label { display: block; margin: .4rem 0; }
form.change input, form.change select { font: inherit; padding: .2rem .4rem; }