:root { font-family: system-ui, sans-serif; color: #153345; background: #f3f7f8; }
body { margin: 0; } header { display: flex; justify-content: space-between; padding: 1.4rem 3rem; background: #153345; color: white; } header a { color: white; margin-right: 1.5rem; } main { max-width: 1100px; margin: 2rem auto; padding: 0 2rem; } a { color: #146f7d; } form { margin: 1rem 0; } label { display: block; margin-top: .7rem; } input:not([type=checkbox]) { display: block; box-sizing: border-box; padding: .65rem; width: min(100%, 32rem); border: 1px solid #97b1ba; border-radius: 4px; } input[type=hidden] { display: none; } button { border: 0; border-radius: 4px; background: #146f7d; color: white; padding: .7rem 1rem; margin-top: .8rem; cursor: pointer; } button:disabled { opacity: .5; } table { width: 100%; border-collapse: collapse; background: white; } td, th { text-align: left; padding: .8rem; border-bottom: 1px solid #d8e4e8; } small { display: block; } section { border-bottom: 1px solid #b7cbd1; padding-bottom: 1rem; } dialog { border: 1px solid #97b1ba; border-radius: 8px; max-width: 30rem; } dialog::backdrop { background: #15334588; } [role=alert] { color: #a82121; }