body{font-family:-apple-system,system-ui,sans-serif;margin:2rem;max-width:1000px}
header{display:flex;align-items:center;gap:1rem}
input,button{font:inherit;padding:.5rem .75rem}
table{border-collapse:collapse;width:100%;margin-top:1rem}
th,td{border-bottom:1px solid #ddd;padding:.5rem;text-align:left}
form.inline>*{margin-right:.5rem}
.banner{display:none;margin:1rem 0;padding:.75rem;border-radius:8px}
.banner.error{display:block;background:#fee;border:1px solid #f99;color:#600}
.banner.ok{display:block;background:#efe;border:1px solid #9c9;color:#064}
.pill{padding:.2rem .5rem;border-radius:999px;border:1px solid #ccc;font-size:.8rem}
.title{margin:0}
.header-actions{margin-left:auto;display:flex;gap:.5rem}
.key-input{width:16rem}

/* Status chips */
.status { padding:.15rem .45rem; border-radius:999px; font-size:.8rem; display:inline-block; border:1px solid transparent }
.status.active{ background:#e6fbec; color:#065f46; border-color:#a7f3d0 }
.status.pending{ background:#fff7ed; color:#92400e; border-color:#fed7aa }
.status.cancelled{ background:#fee2e2; color:#991b1b; border-color:#fecaca }

/* Delete button */
.btn-del{ padding:.25rem .5rem; border:1px solid #e5e7eb; background:#fff; cursor:pointer; border-radius:6px }
.btn-del:hover{ background:#fee; border-color:#fca5a5 }

th[data-sort]{cursor:pointer; user-select:none}
th[data-sort].asc::after{content:" ↑"; font-weight:normal}
th[data-sort].desc::after{content:" ↓"; font-weight:normal}