/* IPG Bridge dashboard — reuses the Dow Jones Latency Monitor visual system (scoped to .ipgb). */

/* Fonts imported inside the CSS itself so aggressive page-cache / font-optimisation
   plugins that strip a separate <link> can't drop the display font (Anton). */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Chakra+Petch:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

.ipgb {
	--ipgb-black: #08090a;
	--ipgb-near: #0b0c0e;
	--ipgb-char: #101215;
	--ipgb-line: rgba(199, 203, 207, 0.14);
	--ipgb-line-strong: rgba(199, 203, 207, 0.30);
	--ipgb-text: #f2f3f4;
	--ipgb-dim: #8d9399;
	--ipgb-mute: #5e656b;
	--ipgb-silver: #c9cdd1;
	--ipgb-silver-hi: #d7dadd;
	--ipgb-silver-lo: #a7adb3;
	--ipgb-ok: #7fd1a3;
	--ipgb-warn: #e8c547;
	--ipgb-bad: #e0736b;
	--ipgb-display: "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
	--ipgb-ui: "Chakra Petch", "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ipgb-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	position: relative;
	background: var(--ipgb-black);
	color: var(--ipgb-text);
	font-family: var(--ipgb-ui);
	font-weight: 400;
	line-height: 1.5;
	isolation: isolate;
	-webkit-font-smoothing: antialiased;
	padding: 0 0 clamp(40px, 6vw, 80px);
	margin: 0;
}
.ipgb *, .ipgb *::before, .ipgb *::after { box-sizing: border-box; }

.ipgb-wrap {
	position: relative;
	z-index: 1;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 84px);
}

/* ---------------- crawler refresh countdown bar ---------------- */
.ipgb-refreshbar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0 0;
}
.ipgb-refreshbar-track {
	position: relative;
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--ipgb-line);
	overflow: hidden;
}
.ipgb-refreshbar-fill {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 0%;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--ipgb-silver-lo), var(--ipgb-silver-hi));
	box-shadow: 0 0 8px rgba(215, 218, 221, 0.4);
	transition: width 0.25s linear;
}
.ipgb-refreshbar.ipgb-pending .ipgb-refreshbar-fill {
	background: linear-gradient(90deg, var(--ipgb-warn), #f0d678);
	box-shadow: 0 0 8px rgba(232, 197, 71, 0.45);
}
.ipgb-refreshbar-label {
	font-family: var(--ipgb-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ipgb-dim);
	white-space: nowrap;
	min-width: 170px;
	text-align: right;
}

/* ---------------- labels ---------------- */
.ipgb-label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ipgb-ui);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ipgb-dim);
}
.ipgb-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ipgb-silver);
	margin-bottom: clamp(18px, 3vw, 30px);
}
.ipgb-eyebrow-line { display: inline-block; width: 46px; height: 1px; background: var(--ipgb-silver-lo); }

/* ---------------- hero / header ---------------- */
.ipgb-hero {
	position: relative;
	padding: clamp(48px, 8vw, 104px) 0 clamp(26px, 3.4vw, 44px);
	background: radial-gradient(ellipse 120% 90% at 15% 0%, #141619 0%, var(--ipgb-black) 62%);
	border-bottom: 1px solid var(--ipgb-line);
}
.ipgb-hero-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.ipgb-hero-title {
	font-family: var(--ipgb-display);
	font-weight: 400;
	font-size: clamp(44px, 8vw, 116px);
	line-height: 0.92;
	letter-spacing: 0.01em;
	margin: 0;
	color: #fff;
	background: linear-gradient(180deg, #ffffff 0%, var(--ipgb-silver) 55%, var(--ipgb-silver-lo) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* connection status pill (top-right) */
.ipgb-conn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 9px 14px;
	border: 1px solid var(--ipgb-line);
	color: var(--ipgb-mute);
	white-space: nowrap;
	margin-top: 8px;
}
.ipgb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ipgb-mute); flex: 0 0 auto; }
.ipgb-conn[data-status="connected"] { color: #fff; border-color: var(--ipgb-silver-lo); }
.ipgb-conn[data-status="connected"] .ipgb-dot { background: var(--ipgb-ok); animation: ipgb-pulse 2.4s ease-out infinite; }
.ipgb-conn[data-status="delayed"] { color: var(--ipgb-warn); border-color: rgba(232,197,71,0.4); }
.ipgb-conn[data-status="delayed"] .ipgb-dot { background: var(--ipgb-warn); }
.ipgb-conn[data-status="offline"] { color: var(--ipgb-bad); border-color: rgba(224,115,107,0.4); }
.ipgb-conn[data-status="offline"] .ipgb-dot { background: var(--ipgb-bad); }
.ipgb-conn[data-status="login_required"] { color: var(--ipgb-warn); border-color: rgba(232,197,71,0.55); }
.ipgb-conn[data-status="login_required"] .ipgb-dot { background: var(--ipgb-warn); animation: ipgb-blink 1.1s steps(2,start) infinite; }
.ipgb-conn[data-status="error"] { color: var(--ipgb-bad); border-color: rgba(224,115,107,0.55); }
.ipgb-conn[data-status="error"] .ipgb-dot { background: var(--ipgb-bad); animation: ipgb-blink 0.7s steps(2,start) infinite; }
.ipgb-conn[data-status="loading"] .ipgb-dot { animation: ipgb-blink 1s steps(2,start) infinite; }

@keyframes ipgb-pulse {
	0% { box-shadow: 0 0 0 0 rgba(127,209,163,0.5); }
	70% { box-shadow: 0 0 0 10px rgba(127,209,163,0); }
	100% { box-shadow: 0 0 0 0 rgba(127,209,163,0); }
}
@keyframes ipgb-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---------------- tabs ---------------- */
.ipgb-tabs {
	display: flex;
	gap: 0;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--ipgb-line);
	margin-top: clamp(20px, 3vw, 34px);
}
.ipgb-tab {
	appearance: none; -webkit-appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--ipgb-mute);
	font-family: var(--ipgb-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 16px 20px;
	margin-bottom: -1px;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.ipgb .ipgb-tab { background: transparent !important; box-shadow: none !important; }
.ipgb-tab:hover { color: var(--ipgb-silver-hi); }
.ipgb .ipgb-tab.ipgb-on { color: #fff !important; background: transparent !important; border-bottom-color: var(--ipgb-silver) !important; }

.ipgb-panel { display: none; padding-top: clamp(24px, 3vw, 38px); }
.ipgb-panel.ipgb-on { display: block; }

/* ---------------- error banner ---------------- */
.ipgb-error {
	margin-top: 20px;
	padding: 12px 16px;
	border: 1px solid rgba(224,115,107,0.4);
	color: var(--ipgb-bad);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: rgba(224,115,107,0.06);
}

/* ---------------- primary balance card ---------------- */
.ipgb-balance-card {
	border: 1px solid var(--ipgb-line-strong);
	background: linear-gradient(180deg, var(--ipgb-char) 0%, var(--ipgb-near) 100%);
	padding: clamp(24px, 3vw, 40px);
	margin-bottom: 1px;
}
.ipgb-balance-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ipgb-balance-value {
	font-family: var(--ipgb-display);
	font-weight: 400;
	font-size: clamp(38px, 6vw, 76px);
	line-height: 1;
	color: #fff;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	margin-bottom: clamp(22px, 3vw, 34px);
	word-break: break-word;
}
.ipgb-balance-value .ipgb-cur { font-size: 0.42em; color: var(--ipgb-dim); margin-left: 0.4em; letter-spacing: 0.1em; }
.ipgb-skeleton { color: var(--ipgb-mute); }
.ipgb-balance-sub { font-family: var(--ipgb-ui); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ipgb-dim); margin: -6px 0 clamp(20px,3vw,30px); }
.ipgb-balance-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: var(--ipgb-line);
	border-top: 1px solid var(--ipgb-line);
}
.ipgb-meta { display: flex; flex-direction: column; gap: 8px; background: var(--ipgb-near); padding: 18px 20px; min-width: 0; }
.ipgb-meta-k { font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ipgb-mute); }
.ipgb-meta-v { font-size: 13px; color: var(--ipgb-silver-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- KPI grid ---------------- */
.ipgb-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: var(--ipgb-line);
	border: 1px solid var(--ipgb-line);
	margin-bottom: clamp(28px, 4vw, 44px);
}
.ipgb-kpi-2 { margin-bottom: clamp(28px, 4vw, 44px); }
.ipgb-kpi { display: flex; flex-direction: column; gap: 12px; background: var(--ipgb-black); padding: 22px 22px 24px; min-width: 0; }
.ipgb-kpi-k { font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ipgb-mute); }
.ipgb-kpi-v {
	font-family: var(--ipgb-display);
	font-weight: 400;
	font-size: clamp(18px, 1.8vw, 26px);
	line-height: 1;
	color: #fff;
	letter-spacing: 0.01em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ipgb-mono { font-family: var(--ipgb-mono) !important; font-size: clamp(12px, 1.2vw, 16px) !important; font-variant-numeric: tabular-nums; }

/* status tint on values */
.ipgb-v-ok { color: var(--ipgb-ok) !important; }
.ipgb-v-warn { color: var(--ipgb-warn) !important; }
.ipgb-v-bad { color: var(--ipgb-bad) !important; }

/* ---------------- badges ---------------- */
.ipgb-badge {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--ipgb-ui);
	font-size: 9.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
	padding: 6px 11px; border: 1px solid var(--ipgb-line); color: var(--ipgb-mute);
}
.ipgb .ipgb-badge.ipgb-connected { color: var(--ipgb-ok) !important; border-color: rgba(127,209,163,0.4) !important; background: transparent !important; }
.ipgb .ipgb-badge.ipgb-delayed { color: var(--ipgb-warn) !important; border-color: rgba(232,197,71,0.4) !important; background: transparent !important; }
.ipgb .ipgb-badge.ipgb-offline { color: var(--ipgb-bad) !important; border-color: rgba(224,115,107,0.4) !important; background: transparent !important; }
.ipgb .ipgb-badge.ipgb-login { color: var(--ipgb-warn) !important; border-color: rgba(232,197,71,0.5) !important; background: transparent !important; }
.ipgb .ipgb-badge.ipgb-error { color: var(--ipgb-bad) !important; border-color: rgba(224,115,107,0.5) !important; background: transparent !important; }

/* ---------------- sections ---------------- */
.ipgb-section { margin-bottom: clamp(26px, 3.4vw, 40px); }
.ipgb-section-head { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--ipgb-line); }
.ipgb-hint { font-size: 11px; letter-spacing: 0.04em; color: var(--ipgb-mute); margin: 12px 0 0; line-height: 1.7; }
.ipgb-hint code { font-family: var(--ipgb-mono); color: var(--ipgb-silver); font-size: 11px; }

/* ---------------- interval / inputs / buttons ---------------- */
.ipgb-interval { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ipgb-interval-unit { font-size: 10px; letter-spacing: 0.2em; color: var(--ipgb-mute); text-transform: uppercase; }
.ipgb-input {
	appearance: none; -webkit-appearance: none;
	background: var(--ipgb-char);
	border: 1px solid var(--ipgb-line-strong);
	border-radius: 0;
	color: var(--ipgb-text);
	font-family: var(--ipgb-mono);
	font-size: 13px;
	padding: 11px 14px;
	min-width: 90px;
	outline: none;
	transition: border-color 0.2s ease;
}
.ipgb-input-wide { min-width: 280px; flex: 1 1 280px; }
.ipgb-input:focus { border-color: var(--ipgb-silver-lo); }
.ipgb-input option { background: var(--ipgb-char); color: var(--ipgb-text); }
.ipgb-btn {
	display: inline-flex; align-items: center; justify-content: center;
	appearance: none; -webkit-appearance: none;
	background: transparent;
	border: 1px solid var(--ipgb-line-strong);
	border-radius: 0;
	color: var(--ipgb-silver-hi);
	font-family: var(--ipgb-ui);
	font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
	padding: 11px 22px;
	cursor: pointer;
	line-height: 1;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
	text-decoration: none;
}
.ipgb-btn:hover { color: #fff; border-color: var(--ipgb-silver); background: rgba(199,203,207,0.05); }
.ipgb-btn:disabled { opacity: 0.4; cursor: default; }
.ipgb-interval-feedback { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.ipgb-interval-feedback.ipgb-ok { color: var(--ipgb-ok); }
.ipgb-interval-feedback.ipgb-bad { color: var(--ipgb-bad); }

/* ---------------- tables ---------------- */
.ipgb-table-scroll { overflow-x: auto; border-top: 1px solid var(--ipgb-line-strong); -webkit-overflow-scrolling: touch; }
.ipgb-table { width: 100%; border-collapse: collapse; margin: 0; }
.ipgb-table th {
	font-family: var(--ipgb-ui);
	font-size: 9.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ipgb-dim); text-align: left; padding: 15px 18px;
	border-bottom: 1px solid var(--ipgb-line-strong); background: transparent; white-space: nowrap;
}
.ipgb-table td {
	font-family: var(--ipgb-mono);
	font-size: 12px; color: #dfe2e4; padding: 12px 18px;
	border-bottom: 1px solid var(--ipgb-line); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ipgb-table tbody tr { transition: background 0.2s ease; }
.ipgb-table tbody tr:hover { background: rgba(199,203,207,0.045); }
.ipgb-table td.ipgb-pos { color: var(--ipgb-ok); }
.ipgb-table td.ipgb-neg { color: var(--ipgb-bad); }
.ipgb-empty { color: var(--ipgb-mute); font-family: var(--ipgb-ui) !important; letter-spacing: 0.16em; text-transform: uppercase; font-size: 10px; text-align: center; padding: 26px 18px; }

/* ---------------- code blocks ---------------- */
.ipgb-code {
	display: block;
	font-family: var(--ipgb-mono);
	font-size: 12px;
	color: var(--ipgb-silver-hi);
	background: var(--ipgb-char);
	border: 1px solid var(--ipgb-line);
	padding: 12px 16px;
	margin: 0 0 14px;
	overflow-x: auto;
	white-space: pre;
	word-break: break-all;
}
.ipgb-pre { line-height: 1.6; white-space: pre; }

/* ---------------- locked ---------------- */
.ipgb-locked { padding: clamp(60px,10vw,140px) 0; max-width: 560px; }
.ipgb-locked-title { font-family: var(--ipgb-display); font-size: clamp(30px,5vw,60px); color: #fff; margin: 8px 0 16px; }
.ipgb-locked-note { color: var(--ipgb-dim); font-size: 13px; line-height: 1.7; margin-bottom: 24px; }

/* ---------------- footer ---------------- */
.ipgb-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	margin-top: clamp(30px,4vw,50px); padding-top: 18px; border-top: 1px solid var(--ipgb-line);
	font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ipgb-mute);
}
.ipgb-foot-k { display: inline-flex; gap: 8px; }

/* ---------------- transactions / ledger ---------------- */
.ipgb-tx-row { cursor: pointer; }
.ipgb-table td.ipgb-amt { color: #fff; font-weight: 500; font-size: 13px; }
.ipgb-tx-table th:nth-child(2), .ipgb-tx-table td:nth-child(2) { text-align: left; }
.ipgb-pos { color: var(--ipgb-ok) !important; }
.ipgb-neg { color: var(--ipgb-bad) !important; }
.ipgb-table td.ipgb-pos { color: var(--ipgb-ok) !important; }
.ipgb-table td.ipgb-neg { color: var(--ipgb-bad) !important; }

.ipgb-ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--ipgb-line); }
.ipgb-filter { display: inline-flex; border: 1px solid var(--ipgb-line-strong); }
.ipgb-filter-btn { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-right: 1px solid var(--ipgb-line); color: var(--ipgb-mute); font-family: var(--ipgb-ui); font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; transition: color .2s, background .2s; }
.ipgb-filter-btn:last-child { border-right: 0; }
.ipgb-filter-btn:hover { color: var(--ipgb-silver-hi); }
.ipgb-filter-btn.ipgb-on { color: #fff; background: rgba(199,203,207,0.06); }

/* ---------------- modal ---------------- */
.ipgb-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ipgb-modal[hidden] { display: none; }
.ipgb-modal-backdrop { position: absolute; inset: 0; background: rgba(4,5,6,0.82); backdrop-filter: blur(2px); }
.ipgb-modal-card {
	position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
	background: linear-gradient(180deg, var(--ipgb-char) 0%, var(--ipgb-near) 100%);
	border: 1px solid var(--ipgb-line-strong); padding: clamp(22px, 3vw, 34px);
	font-family: var(--ipgb-ui); color: var(--ipgb-text);
}
.ipgb-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ipgb-modal-close { appearance: none; background: transparent; border: 1px solid var(--ipgb-line); color: var(--ipgb-dim); width: 30px; height: 30px; cursor: pointer; font-size: 13px; line-height: 1; border-radius: 0; }
.ipgb-modal-close:hover { color: #fff; border-color: var(--ipgb-silver); }
.ipgb-modal-amount { font-family: var(--ipgb-display); font-size: clamp(30px, 5vw, 48px); color: #fff; line-height: 1; margin-bottom: clamp(20px, 3vw, 28px); font-variant-numeric: tabular-nums; word-break: break-word; }
.ipgb-modal-grid { display: grid; grid-template-columns: minmax(140px, 40%) 1fr; gap: 1px; background: var(--ipgb-line); border: 1px solid var(--ipgb-line); }
.ipgb-modal-k { background: var(--ipgb-black); padding: 12px 14px; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ipgb-mute); display: flex; align-items: center; }
.ipgb-modal-v { background: var(--ipgb-near); padding: 12px 14px; font-family: var(--ipgb-mono); font-size: 12px; color: #dfe2e4; word-break: break-word; }
.ipgb-modal-v .ipgb-na { color: var(--ipgb-mute); font-family: var(--ipgb-ui); }
.ipgb-modal-foot { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.ipgb-btn-danger { border-color: rgba(224,115,107,0.5); color: var(--ipgb-bad); }
.ipgb-btn-danger:hover { color: #fff; border-color: var(--ipgb-bad); background: rgba(224,115,107,0.08); }

/* ---------------- responsive ---------------- */
@media (max-width: 640px) {
	.ipgb-hero-row { flex-direction: column; }
	.ipgb-conn { margin-top: 0; }
	.ipgb-tab { padding: 14px 14px; font-size: 10px; }
}