:root { font-family: system-ui, sans-serif; color: #211b12; background: #fff8e8; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(720px, 100%); margin: auto; padding: 24px 16px 64px; }
header { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
header span { font-size: 42px; }
h1, h2, p { margin: 0; }
header p { color: #6b604f; margin-top: 5px; }
.card { background: white; border: 1px solid #ebdfc7; border-radius: 18px; padding: 18px; margin: 14px 0; box-shadow: 0 8px 24px #8c6b2520; }
.card h2 { font-size: 18px; margin-bottom: 14px; }
form { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
#member-form { grid-template-columns: 1fr auto; }
.auth form { grid-template-columns: 1fr; }
.auth .link { background: transparent; color: #725500; margin-top: 8px; }
.error { min-height: 22px; color: #a52618; margin-top: 8px; }
.trip-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trip-heading button { width: auto; }
input, select, button { width: 100%; border-radius: 11px; border: 1px solid #d9ccb2; padding: 12px; font: inherit; }
button { border: 0; background: #f5b800; color: #241b00; font-weight: 700; cursor: pointer; }
.chips { display: grid; gap: 8px; margin-top: 12px; }
.chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff2c2; padding: 7px 11px; border-radius: 12px; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #eee5d3; }
.row small { display: block; color: #786d5d; margin-top: 3px; }
.row-main { min-width: 0; }
.row-actions { display: flex; align-items: center; gap: 7px; }
.action { width: auto; padding: 7px 10px; background: #f4ead4; font-size: 13px; }
.danger { background: #ffe0dc; color: #8d1d10; }
.secondary { background: #eee7d9; }
[hidden] { display: none !important; }
.summary strong { color: #8a6500; }
.empty { color: #786d5d; }
@media (max-width: 560px) { form { grid-template-columns: 1fr; } }