body { font-family: Arial, sans-serif; margin: 12px; background: #fdfdfd; color: #1a1a1a; }
button { padding: 10px 14px; cursor: pointer; border-radius: 8px; border: 1px solid #cfcfcf; background: #fff; }
button:hover { background: #f4f4f4; }
input, textarea, select { box-sizing: border-box; padding: 10px; border-radius: 8px; border: 1px solid #cfcfcf; }
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; padding: 6px 0 2px; }
.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:6px 10px; position: fixed; top: 12px; right: 12px; background: #fff; border: 1px solid #ddd; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); z-index: 5; }
.hidden { display:none !important; }

.summary { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-top: 12px; }
.summaryCard { border:1px solid #e1e1e1; background:#fff; border-radius: 12px; padding: 10px 14px; min-width: 140px; }
.summaryTitle { font-size: 12px; color:#555; text-transform: uppercase; letter-spacing: 0.04em; }
.summaryValue { font-size: 22px; font-weight: 700; margin-top: 4px; }
.summaryMeta { font-size: 12px; color:#666; margin-top: 2px; }
.summaryLegend { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-left: auto; }
.legendItem { border-radius: 999px; padding: 6px 10px; font-size: 12px; background: #f4f4f4; color:#333; border: 1px solid #ddd; }
.legendItem.gate { background: #fff2cc; border-color:#e4d39b; }
.legendItem.time { background: #d9e1f2; border-color:#b9c6e0; }
.legendItem.arr { background: #e9f7ef; border-color:#b9e2cc; }
.legendItem.dep { background: #fdecea; border-color:#f4c7c3; }

.tableWrap { margin-top: 12px; border: 1px solid #e1e1e1; border-radius: 12px; overflow: auto; background: #fff; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid #eee; border-right: 1px solid #eee; padding: 10px 8px; vertical-align: top; }
th:last-child, td:last-child { border-right: none; }
th { position: sticky; top: 0; background: #f7f7f7; z-index: 2; text-transform: uppercase; font-size: 12px; letter-spacing: 0.03em; }
tbody tr:nth-child(even) { background: #fcfcfc; }

.small { font-size: 12px; color:#333; }
.alert { font-weight: 700; }
.num { text-align: center; }
.cell-input { width: 100%; }
.watchCell { text-align: center; }
.watch-toggle { transform: scale(1.1); }
.empty { text-align: center; padding: 24px 12px; color: #666; font-size: 13px; }
.quiet { font-weight: 600; }

.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; } }