:root { --op-line:#d9e1eb; --op-muted:#60718b; --op-ink:#14233a; --op-blue:#1d4ed8; --op-green:#087d5a; --op-amber:#ad7100; }
.order-performance-body { background:#f3f6fa; color:var(--op-ink); min-width:320px; letter-spacing:0; }
.op-header { padding:12px 24px; background:#fff; border-bottom:1px solid var(--op-line); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.op-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.op-brand img { width:80px; height:48px; object-fit:contain; border:1px solid #edf0f4; border-radius:6px; }
.op-brand h1 { margin:0; font-size:24px; }
.op-brand p { margin:3px 0 0; font-size:12px; color:var(--op-muted); }
.op-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--op-muted); }
.op-header-actions a { text-decoration:none; display:inline-flex; align-items:center; }
.op-icon { width:36px; height:36px; padding:0; font-size:20px; flex:none; }
.op-page { max-width:1760px; padding:18px 24px 40px; margin:auto; }
.op-overview { min-height:126px; padding:20px 24px; background:linear-gradient(90deg,rgba(10,46,29,.88),rgba(10,30,23,.12)),url('/performance-bg.jpg') center 46% / cover; color:#fff; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.op-overview p { font-size:11px; font-weight:700; margin:0 0 4px; }
.op-overview h2 { font-size:21px; margin:0 0 5px; }
.op-overview strong { display:block; font-size:28px; overflow-wrap:anywhere; }
.op-overview span { display:block; font-size:12px; margin-top:5px; }
.op-overview-meta { text-align:right; flex:none; }
.op-controls { margin:14px 0; padding:14px 12px; background:#fff; border-block:1px solid var(--op-line); display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.op-controls label { display:grid; gap:5px; color:var(--op-muted); font-size:11px; min-width:0; }
.op-controls input,.op-controls select { height:36px; width:100%; color:var(--op-ink); font-size:13px; }
.op-controls > label { width:126px; }
.op-controls > label:has(#opQuarter) { width:190px; }
.op-segments { display:flex; overflow-x:auto; max-width:100%; align-self:flex-end; flex:none; border:1px solid #cad6e7; border-radius:5px; }
.op-segments button { height:36px; min-width:62px; padding:0 12px; border:0; border-right:1px solid #cad6e7; border-radius:0; background:#fff; color:#274567; font-size:13px; white-space:nowrap; }
.op-segments button:last-child { border-right:0; }
.op-segments button.active { background:var(--op-blue); color:#fff; }
.op-filter-line { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; width:100%; padding-top:10px; border-top:1px solid #e7ecf3; }
.op-filter-line > label { flex:1 1 125px; }
.op-filter-line > .op-search { flex:2 1 210px; }
.op-custom { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.op-message { padding:12px 14px; margin:0 0 14px; font-size:13px; overflow-wrap:anywhere; }
.op-warning { background:#fff6de; color:#785508; border-left:3px solid #cc8c05; }
.op-error { background:#fff0f1; color:#a32636; border-left:3px solid #c33d50; }
.op-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.op-metrics article { background:#fff; border:1px solid var(--op-line); border-top:3px solid var(--op-blue); border-radius:6px; padding:14px; min-width:0; }
.op-metrics article.op-green { border-top-color:var(--op-green); }
.op-metrics article.op-amber { border-top-color:var(--op-amber); }
.op-metrics article.op-neutral { border-top-color:#69768c; }
.op-metrics span,.op-metrics small { display:block; color:var(--op-muted); font-size:11px; line-height:1.6; }
.op-metrics strong { display:block; margin:4px 0; font-size:24px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.op-currency-line { display:flex; flex-wrap:wrap; gap:14px; padding:13px 3px; font-size:12px; }
.op-currency-line > div { display:flex; gap:16px; flex-wrap:wrap; font-weight:600; flex:1; }
.op-muted { color:var(--op-muted); }
.op-section { margin-bottom:14px; background:#fff; border-block:1px solid var(--op-line); }
.op-section-heading { padding:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.op-section-heading h2 { margin:0; font-size:16px; }
.op-section-heading > span { font-size:12px; color:var(--op-muted); }
.op-table-scroll { overflow-x:auto; }
.op-section table { width:100%; border-collapse:collapse; font-size:13px; white-space:nowrap; }
.op-section th { background:#f5f8fc; color:#536784; padding:11px 14px; font-size:12px; font-weight:500; text-align:left; border-block:1px solid #e0e7f1; }
.op-section td { padding:12px 14px; border-bottom:1px solid #e7edf5; vertical-align:middle; }
.op-section tr:last-child td { border-bottom:0; }
.op-section tr:hover td { background:#fafcff; }
.op-section .op-number { text-align:right; font-variant-numeric:tabular-nums; }
.op-rank { display:grid; place-items:center; width:28px; height:28px; background:#edf1f7; border-radius:50%; font-weight:600; }
.op-rank.top { background:#fff0b6; color:#745000; }
.op-member { border:0; background:none; color:var(--op-blue); padding:0; font-weight:600; font-size:13px; border-radius:0; }
.op-share { display:flex; align-items:center; gap:10px; }
.op-share-track { width:110px; height:6px; background:#e8edf5; flex:none; overflow:hidden; border-radius:2px; }
.op-share-fill { height:100%; background:var(--op-blue); }
.op-status { color:var(--op-green); }
.op-status.pending { color:var(--op-amber); }
.op-detail-table td { max-width:240px; white-space:normal; overflow-wrap:anywhere; }
.op-detail-table .op-number { white-space:nowrap; }
.op-detail-table small { display:block; color:var(--op-muted); margin-top:4px; }
.op-detail-table .op-problem { color:#a32636; font-size:12px; }
.op-empty { color:var(--op-muted); text-align:center; padding:32px !important; }
.op-pagination { display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--op-line); }
.op-pagination > span { margin-right:auto; color:var(--op-muted); font-size:12px; }
.op-chart-scroll { overflow-x:auto; margin:0 14px 12px; }
.op-chart { display:flex; align-items:stretch; gap:6px; height:190px; border-bottom:1px solid #dce4ee; min-width:100%; }
.op-chart-column { flex:1 0 36px; display:flex; flex-direction:column; align-items:center; min-width:36px; position:relative; }
.op-chart-bar-space { display:flex; flex:1; width:100%; align-items:flex-end; justify-content:center; padding-top:20px; }
.op-chart-bar { width:65%; max-width:44px; background:#079071; border-radius:3px 3px 0 0; min-height:2px; }
.op-chart-column.future .op-chart-bar { background:#cbd5e1; }
.op-chart-column > span { color:var(--op-muted); font-size:10px; height:27px; display:flex; align-items:center; white-space:nowrap; }
.op-chart-column:focus-visible { outline:2px solid #2459da; }
.op-trend-section .op-section-heading { padding-bottom:4px; }
[hidden] { display:none !important; }
button:disabled { cursor:default; opacity:.45; }
@media (max-width:1280px) { .op-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } .op-header { align-items:flex-start; } }
@media (max-width:700px) { .op-header { padding:12px; flex-direction:column; gap:12px; } .op-header-actions { justify-content:flex-start; } .op-brand h1 { font-size:21px; } .op-page { padding:12px 12px 30px; } .op-overview { padding:16px; gap:10px; } .op-overview strong { font-size:25px; } .op-overview h2 { font-size:18px; } .op-overview-meta { max-width:90px; } .op-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .op-metrics article { padding:12px; } .op-metrics strong { font-size:21px; } .op-metrics small { font-size:10px; } .op-segments { flex-shrink:1; } .op-controls > label { flex:1 1 110px; } .op-controls > label:has(#opQuarter) { flex:1 1 170px; } .op-controls .op-filter-line > label { flex:1 1 120px; } .op-custom label { flex:1 1 125px; } .op-section table { min-width:800px; } .op-detail-table { min-width:1250px !important; } }