* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--tm-cloud); color: var(--tm-ink); font: 16px "DM Sans", system-ui, sans-serif; }
header { background: var(--tm-navy); color: white; display: flex; align-items: center; justify-content: space-between; padding: 1rem max(1rem, calc((100% - 72rem) / 2)); }
main { max-width: 74rem; margin: auto; padding: 2rem 1rem; }
h1, h2 { font-family: "Inter Tight", system-ui, sans-serif; color: var(--tm-navy); }
nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
section, #login { border: 1px solid var(--tm-line); background: white; border-radius: .75rem; padding: 1.25rem; }
#login { max-width: 28rem; }
form { display: grid; gap: .75rem; }
#create { margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: end; }
label { display: grid; gap: .3rem; }
input, button { min-height: 2.65rem; font: inherit; border-radius: .35rem; padding: .4rem .65rem; }
input { width: 100%; border: 1px solid var(--tm-controlBorder); }
button { cursor: pointer; color: white; background: var(--tm-blue); border: 1px solid transparent; }
nav button { color: var(--tm-navy); background: white; border-color: var(--tm-line); }
nav button[aria-current="true"] { background: var(--tm-navy); color: white; }
#records { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--tm-line); overflow-wrap: anywhere; }
output { display: block; margin-top: .75rem; overflow-wrap: anywhere; }