body { font-family: Arial, sans-serif; margin: 12px; }
button { padding: 10px 14px; cursor: pointer; }
input, textarea, select { box-sizing: border-box; padding: 10px; }
textarea { resize: vertical; min-height: 36px; }
.hint { color:#666; font-size: 12px; margin-top: 4px; }
.err { color:#b00020; font-size: 13px; margin-top: 8px; }
.ok { color:#0a7a2f; font-size: 13px; margin-top: 8px; }
.topbar { display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.searchWrap { display:flex; flex-direction:column; gap:4px; min-width: 320px; flex: 1; }
.filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pill { border:1px solid #bbb; background:#fff; border-radius: 999px; padding:10px 14px; font-weight:700; }
.pill.active { background:#111; color:#fff; border-color:#111; }
.loading { font-size:12px; color:#444; padding:10px 0; }
.hidden { display:none !important; }

table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { border: 1px solid #ddd; padding: 8px; vertical-align: top; }
th { position: sticky; top: 0; background: #f7f7f7; z-index: 2; }

.small { font-size: 12px; color:#333; }
.alert { font-weight: 700; }

.cell-gate-changed, .cell-gatechg { background: #fff2cc; font-weight: 700; }
.cell-time-changed, .cell-timechg { background: #d9e1f2; font-weight: 700; }

.type-arr { background: #e9f7ef; font-weight: 700; text-align:center; }
.type-dep { background: #fdecea; font-weight: 700; text-align:center; }

.card { max-width: 420px; border:1px solid #ddd; padding:16px; border-radius: 10px; }
.row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

@media (max-width: 900px) { th, td { padding: 6px; } }