.htks-flight-board {
	--flight-red: #c72b2f;
	--flight-ink: #152029;
	--flight-muted: #6c7882;
	--flight-line: #e5e9eb;
	overflow: hidden;
	background: rgba(255,255,255,.98);
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 26px;
	box-shadow: 0 30px 80px rgba(16,29,38,.18);
	color: var(--flight-ink);
}
.htks-flight-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 34px 38px 24px;
}
.htks-flight-kicker { margin: 0 0 7px; color: var(--flight-red); font-size: .69rem; font-weight: 900; letter-spacing: .16em; }
.htks-flight-header h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.45rem); line-height: 1; letter-spacing: -.045em; }
.htks-flight-updated { display: inline-flex; align-items: center; gap: 11px; color: var(--flight-muted); font-size: .78rem; }
.htks-flight-updated strong { color: var(--flight-ink); }
.htks-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #2eaa68; box-shadow: 0 0 0 6px rgba(46,170,104,.12); }
.htks-flight-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0 38px 22px;
	overflow: hidden;
	border: 1px solid var(--flight-line);
	border-radius: 16px;
	background: #f7f9fa;
}
.htks-flight-summary div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-right: 1px solid var(--flight-line); }
.htks-flight-summary div:last-child { border-right: 0; }
.htks-flight-summary span { color: var(--flight-muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.htks-flight-summary strong { font-size: 1.15rem; }
.htks-flight-tabs { display: flex; justify-content: center; gap: 10px; padding: 0 38px 24px; }
.htks-flight-tabs button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-width: 130px;
	padding: 11px 20px;
	border: 1px solid var(--flight-line);
	border-radius: 999px;
	background: #fff;
	color: var(--flight-muted);
	font-weight: 850;
	cursor: pointer;
	transition: .18s ease;
}
.htks-tab-icon { width: 22px; height: 22px; flex: 0 0 22px; fill: currentColor; }
.htks-tab-icon-departure { transform: translateY(-1px); }
.htks-tab-icon-arrival { transform: translateY(1px); }
.htks-flight-tabs button:hover { border-color: #dca6a8; color: var(--flight-red); }
.htks-flight-tabs button[aria-selected="true"] { border-color: var(--flight-red); background: var(--flight-red); color: #fff; box-shadow: 0 9px 20px rgba(199,43,47,.2); }
.htks-flight-list { padding: 0 22px 10px; }
.htks-flight-list-head, .htks-flight-row {
	display: grid;
	grid-template-columns: 1fr 1.25fr 1fr .7fr 1.4fr;
	align-items: center;
	gap: 18px;
}
.htks-flight-list-head { padding: 10px 20px; color: #8a949c; font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.htks-flight-row {
	margin-bottom: 9px;
	padding: 18px 20px;
	border: 1px solid var(--flight-line);
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(18,35,45,.035);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.htks-flight-row:hover { transform: translateY(-2px); border-color: #d8dee1; box-shadow: 0 12px 28px rgba(18,35,45,.08); }
.htks-flight-row > div { min-width: 0; }
.htks-flight-row [data-label]::before { display: none; }
.htks-flight-time strong { display: block; font-size: 1.3rem; letter-spacing: -.025em; }
.htks-flight-time del { display: block; margin-top: -3px; color: #a0a8ae; font-size: .7rem; }
.htks-flight-number { display: flex; align-items: center; gap: 10px; }
.htks-flight-number strong { white-space: nowrap; }
.htks-flight-direction { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; background: #fae9e9; color: var(--flight-red); font-size: 1.05rem; font-weight: 900; }
.htks-airport-code { display: inline-flex; align-items: center; font-size: 1.03rem; font-weight: 900; letter-spacing: .1em; }
.htks-gate { display: inline-grid; place-items: center; min-width: 36px; height: 32px; padding: 0 8px; border-radius: 9px; background: #eff3f5; font-weight: 850; }
.htks-status { display: inline-flex; padding: 6px 11px; border-radius: 999px; background: #eff3f5; font-size: .72rem; font-weight: 850; white-space: nowrap; }
.htks-status-active, .htks-status-en-route, .htks-status-landed { background: #e4f5eb; color: #237548; }
.htks-status-cancelled, .htks-status-canceled { background: #fae9e9; color: #a32125; }
.htks-flight-empty, .htks-flight-message { margin: 0; padding: 55px 38px; color: var(--flight-muted); text-align: center; }
.htks-flight-message { display: grid; gap: 10px; }
.htks-flight-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 38px 24px; color: var(--flight-muted); font-size: .72rem; }
.htks-flight-refresh { padding: 8px 14px; border: 1px solid var(--flight-line); border-radius: 9px; background: #fff; color: var(--flight-ink); font-weight: 850; cursor: pointer; }
.htks-flight-refresh:hover { border-color: var(--flight-red); color: var(--flight-red); }
.htks-flight-board.is-loading { opacity: .7; pointer-events: none; }

@media (max-width: 700px) {
	.htks-flight-board { border-radius: 19px; }
	.htks-flight-header { align-items: flex-start; flex-direction: column; padding: 26px 22px 20px; }
	.htks-flight-updated { align-self: flex-start; }
	.htks-flight-summary { margin: 0 22px 18px; }
	.htks-flight-summary div { align-items: flex-start; flex-direction: column; padding: 12px; }
	.htks-flight-tabs { padding: 0 22px 20px; }
	.htks-flight-tabs button { flex: 1; min-width: 0; }
	.htks-flight-list { padding: 0 12px 6px; }
	.htks-flight-list-head { display: none; }
	.htks-flight-row { grid-template-columns: 1fr 1fr; gap: 16px 20px; padding: 17px; }
	.htks-flight-row > div { display: block; }
	.htks-flight-row [data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; color: #929ca4; font-size: .61rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
	.htks-flight-number { display: flex !important; align-items: flex-end !important; }
	.htks-flight-number::before { position: absolute; }
	.htks-flight-row > div:last-child { grid-column: 1 / -1; }
	.htks-flight-footer { align-items: flex-start; padding: 17px 22px 22px; }
}