* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: #202938; background: #f4f6f9; }
.topbar { background: #172554; color: white; padding: 18px max(5%, calc((100% - 1100px)/2)); display:flex; justify-content:space-between; align-items:center; }
.brand { color:white; text-decoration:none; font-weight:700; font-size:20px; }
.topbar span { color:#cbd5e1; font-size:14px; }
.container { max-width:1100px; margin:35px auto; padding:0 20px; min-height:65vh; }
.heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:22px; }
h1 { margin:0 0 8px; font-size:28px; }
p { color:#64748b; margin-top:0; }
.btn { display:inline-block; border:0; border-radius:7px; padding:10px 15px; background:#e2e8f0; color:#1e293b; text-decoration:none; font-weight:600; cursor:pointer; font-size:14px; }
.btn.primary { background:#2563eb; color:white; }
.btn.secondary { background:#e5e7eb; }
.btn.danger { background:#dc2626; color:white; }
.search { display:flex; gap:10px; margin:18px 0; }
.search input { flex:1; min-width:0; }
input, select { width:100%; border:1px solid #cbd5e1; border-radius:6px; padding:11px; font-size:15px; background:white; }
.table-wrap { overflow-x:auto; background:white; border:1px solid #e2e8f0; border-radius:10px; }
table { width:100%; border-collapse:collapse; min-width:850px; }
th, td { padding:13px 12px; border-bottom:1px solid #e5e7eb; text-align:left; font-size:14px; }
th { background:#f8fafc; color:#475569; }
.actions { white-space:nowrap; }
.actions a { color:#2563eb; text-decoration:none; margin-right:10px; }
.actions .delete-link { color:#dc2626; }
.status { padding:5px 8px; border-radius:20px; font-size:12px; }
.available { color:#166534; background:#dcfce7; }
.sold { color:#991b1b; background:#fee2e2; }
.empty { text-align:center; padding:30px; color:#64748b; }
.count { margin-top:12px; color:#64748b; font-size:13px; }
.alert { background:#dcfce7; color:#166534; padding:12px; border-radius:7px; margin-bottom:15px; }
.form-card { max-width:650px; background:white; border:1px solid #e2e8f0; border-radius:10px; padding:25px; }
.field { margin:0 0 17px; }
.field label { display:block; font-weight:600; font-size:14px; margin-bottom:7px; }
.form-actions { display:flex; gap:10px; margin-top:20px; }
.validation { color:#b91c1c; font-size:13px; }
.muted { color:#64748b; }
.details { display:grid; grid-template-columns:150px 1fr; gap:10px; }
.details dt { font-weight:700; }
.details dd { margin:0; }
.clear { align-self:center; color:#2563eb; }
footer { text-align:center; padding:20px; color:#94a3b8; font-size:13px; }
@media (max-width:600px) { .heading { align-items:flex-start; flex-direction:column; } .topbar { padding:16px 20px; } .container { margin:22px auto; } }