.supplier-hub { min-width: 0; }
.supplier-hub .hub-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.supplier-hub .metric { min-width: 0; }
.supplier-hub .hub-metrics .metric,.supplier-hub .hub-card { color: #f3f4f6; }
.supplier-hub .hub-metrics .metric label,.supplier-hub .hub-metrics .metric small,.supplier-hub .hub-card .muted { color: #aeb8d5; }
.supplier-hub .hub-metrics .metric strong,.supplier-hub .hub-card h3 { color: #f8fafc; }
.supplier-hub .metric strong { font-size: clamp(17px,1.65vw,26px); overflow-wrap: anywhere; }
.supplier-hub .metric small { color: var(--muted); display: block; margin-top: 8px; }
.hub-card { margin: 16px 0; }
.hub-card .card-header { flex-wrap: wrap; gap: 10px; }
.hub-card td { vertical-align: top; }
.hub-card .actions { flex-wrap: wrap; }
.hub-card pre,.hub-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 700px; font-size: 12px; }
.hub-flow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 6px; }
.hub-flow div { display: grid; gap: 10px; }
.hub-flow small { color: var(--muted); }
.hub-flow strong { font-size: 18px; overflow-wrap: anywhere; }
.hub-flow > span { color: #a78bfa; }
.hub-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 14px 0; }
.hub-toolbar label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); min-width: 140px; }
.hub-toolbar select { max-width: 250px; }
.hub-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 16px 0 0; font-size: 12px; color: var(--muted); }
.hub-pagination span { margin-right: auto; }
.hub-dialog { width: min(760px,calc(100vw - 32px)); max-height: 88vh; border: 1px solid #3b3658; border-radius: 16px; background: #12121e; color: #f0eefb; padding: 24px; box-shadow: 0 30px 100px #0009; }
.hub-dialog::backdrop { background: #060610b8; backdrop-filter: blur(4px); }
.hub-dialog header,.hub-dialog footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.hub-dialog h2 { font-size: 21px; margin: 0; }
.hub-dialog header button { background: transparent; color: inherit; border: 0; font-size: 24px; cursor: pointer; }
.hub-dialog footer { justify-content: flex-end; padding-top: 16px; border-top: 1px solid #ffffff16; }
.hub-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; }
.hub-form-grid .field { min-width: 0; }
.hub-form-grid .field input,.hub-form-grid .field select,.hub-form-grid .field textarea { box-sizing: border-box; }
.hub-span { grid-column: 1 / -1; }
.hub-form-grid input[type=checkbox] { width: 18px; height: 18px; accent-color: #8b5cf6; }
.hub-order-events { margin: 12px 0; }
.hub-footer { margin: 24px 0; }
@media (max-width:1100px) { .supplier-hub .hub-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .hub-flow { flex-wrap: wrap; } }
@media (max-width:600px) { .hub-form-grid { grid-template-columns: 1fr; } .hub-flow { display: grid; grid-template-columns: 1fr; } .hub-flow > span { transform: rotate(90deg); width: 14px; } .hub-dialog { padding: 18px; } .hub-toolbar label { flex: 1; min-width: 125px; } .hub-toolbar select { max-width: 100%; } .supplier-hub .page-header { align-items: flex-start; } }