body { font-family: sans-serif; margin: 0; padding: 0; background: #f5f5f5; }
nav { background: #333; padding: 10px 20px; }
nav a { color: #fff; text-decoration: none; margin-right: 15px; }
main { max-width: 1000px; margin: 30px auto; padding: 0 20px; }
h1 { color: #333; }
h2 { color: #333; margin-top: 30px; }
form { max-width: 400px; }
label { display: block; margin-top: 10px; font-weight: bold; }
input[type="text"], input[type="password"], input[type="file"] { width: 100%; padding: 8px; margin-top: 4px; box-sizing: border-box; }
button { margin-top: 15px; padding: 10px 20px; background: #333; color: #fff; border: none; cursor: pointer; }
button:hover { background: #555; }
.flash { padding: 10px; margin-bottom: 15px; border-radius: 4px; }
.flash.error { background: #fdd; color: #900; }
.flash.success { background: #dfd; color: #060; }
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #ddd; }
th { background: #333; color: #fff; }

/* Dashboard metrics */
.metrics { display: flex; gap: 15px; flex-wrap: wrap; margin: 20px 0; }
.metric-card { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 15px 20px; min-width: 120px; text-align: center; }
.metric-value { font-size: 28px; font-weight: bold; color: #333; }
.metric-label { font-size: 13px; color: #888; margin-top: 4px; }
.cost-note { color: #888; font-size: 13px; margin: 5px 0 15px; }

/* Status badges */
.badge { padding: 3px 8px; border-radius: 3px; font-size: 12px; font-weight: bold; }
.badge-queued { background: #e8f0fe; color: #1a73e8; }
.badge-unlocked { background: #dfd; color: #060; }
.badge-error { background: #fdd; color: #900; }
.badge-delivered { background: #fef3cd; color: #856404; }

/* Row highlighting */
.status-error td { background: #fff5f5; }