/* Only adaptations required by real API data; original styles.css is unchanged. */
.market-prices { gap: 8px; align-items: flex-start; }
.market-prices .quote-side { flex: 1; min-width: 0; }
.quote-side > small { display: block; font-size: 9px; line-height: 1.6; }
.quote-book { margin: 6px 0 0; direction: ltr; font-family: 'SFMono-Regular', Consolas, monospace; font-variant-numeric: tabular-nums; }
.quote-book > div { display: flex; justify-content: space-between; gap: 3px; line-height: 1.9; }
.quote-book dt { font-size: 9px; font-weight: normal; }
.quote-book dd { margin: 0; font-size: 11px; white-space: nowrap; }
.rule-cell .trade-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; direction: ltr; }
@media (max-width: 1250px) and (min-width: 901px) {
  .quote-book > div { flex-direction: column; gap: 0; }
}

.market-instance { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; margin-top: 6px; font-size: 9px; }

/* Health telemetry follows the existing warm panel/teal accent design. */
.drawer.health-drawer { width: min(740px, 100vw); }
.resource-panel { margin: 24px 0; padding: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.resource-heading, .resource-label, .resource-caption { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.resource-heading { margin-bottom: 15px; }
.resource-heading h3 { font-size: 15px; }
.resource-heading p, .resource-card p, .resource-note, .resource-total { font-size: 11px; color: var(--muted); }
.resource-status { color: var(--info); font-size: 11px; text-align: end; }
.resource-status small { display: block; margin-top: 3px; font-variant-numeric: tabular-nums; }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.resource-card { border: 1px solid var(--border); border-radius: 8px; padding: 15px; min-width: 0; background: var(--bg); }
.resource-label { font-weight: 600; font-size: 12px; }
.resource-label small { font-weight: 400; font-size: 10px; }
.resource-value { display: block; margin: 12px 0 4px; direction: ltr; text-align: start; font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resource-meter { height: 4px; margin: 14px 0 9px; background: var(--border); border-radius: 3px; overflow: hidden; direction: ltr; }
.resource-meter span { display: block; height: 100%; background: var(--info); border-radius: inherit; transition: width .4s; }
.resource-caption { font-size: 10px; color: var(--muted); flex-wrap: wrap; }
.resource-caption b { font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.resource-network { display: flex; gap: 15px; justify-content: space-between; margin: 14px 0 18px; flex-wrap: wrap; }
.resource-network .resource-value { font-size: 18px; margin-top: 4px; }
.resource-network small { font-size: 10px; }
.resource-note { line-height: 1.8; margin-top: 14px; }
.resource-total { display: block; margin-top: 6px; }
.health-components-heading { margin: 24px 0 8px; }
.resource-panel[data-resource-state="STALE"] .resource-value,
.resource-panel[data-resource-state="UNAVAILABLE"] .resource-value { color: var(--muted); }
@media (max-width: 480px) { .resource-grid { grid-template-columns: 1fr; } .resource-panel { padding: 13px; } }

demo-notifications { display: block; margin-bottom: 20px; }
.notification-panel { padding: 22px; }
.notification-panel h2, .notification-panel h3 { margin-bottom: 10px; }
.notification-panel p { line-height: 1.8; margin-bottom: 14px; }
.notification-panel .field { margin: 16px 0; }
.notification-panel textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 7px; font: inherit; background: var(--field); color: var(--fg); resize: vertical; }
.notification-panel fieldset { margin: 18px 0; border: 1px solid var(--border); border-radius: 7px; padding: 14px; }
.notification-events, .notification-schedule { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.notification-check { display: flex; gap: 8px; align-items: center; }
.notification-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.notification-panel .helper { margin: 20px 0; }
@media (max-width: 600px) { .notification-events, .notification-schedule { grid-template-columns: 1fr; } .notification-panel { padding: 15px; } }

.table-heading .table-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.page-size-control{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--muted);font-size:12px}
.page-size-control select{width:auto;min-width:68px}