.op-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:3px 0 14px}.op-intro h2{font-size:24px;letter-spacing:-.6px}.op-intro p{font-size:12px;color:#718796;margin-top:5px}.op-intro label{font-size:11px;display:flex;gap:10px;align-items:center;color:#637e8d}.op-note{font-size:11px;color:#607f90;line-height:1.8;background:#edf4f6;border:1px solid #dbe7ec;border-radius:6px;padding:12px 17px;margin-bottom:20px}.op-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.op-grid>.panel{min-width:0}.op-chart{display:block;width:100%;height:auto;min-height:175px;max-height:290px}.op-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:10px;color:#637e8e;margin-bottom:13px}.op-legend span{display:flex;align-items:center;gap:7px}.op-legend i{height:3px;width:18px;border-radius:2px}.op-controls{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:20px}.op-controls label{font-size:11px;color:#668392;display:flex;align-items:center;gap:10px}.op-controls select{font-size:12px}.op-controls>span{font-size:11px;color:#718b99}.op-histogram{display:flex;gap:10px;align-items:flex-end;padding:15px 25px 6px;height:220px;border-bottom:1px solid #dfe8ed}.op-bin{flex:1;display:flex;flex-direction:column;align-items:stretch;text-align:center;min-width:0}.op-bin b{font-size:11px;color:#557987;font-weight:500;margin-bottom:5px}.op-bin i{display:block;background:#48a79a;border-radius:4px 4px 0 0;min-height:1px}.op-bin small{font-size:10px;color:#718d9d;line-height:1.5;height:37px;margin-top:7px}.analysis-bar .tabs{gap:20px;overflow-x:auto}.heat-label small{font-size:8px;color:#8da0ac}
.spend-reading{background:#f0f6f7;border-left:3px solid #38968e;padding:14px 17px;margin-bottom:22px}.spend-reading h3{font-size:14px;font-weight:600;margin-bottom:7px}.spend-reading p{font-size:12px;line-height:1.8;color:#5e7a89}.spend-delta-chart{display:block;width:100%;min-width:700px;height:auto;max-height:425px}.delta-scroll{overflow-x:auto;margin-bottom:19px}.spend-comparison .data-table td{font-size:11px}.spend-comparison .data-table td small{font-size:10px}.spend-comparison .data-table th{font-size:10px}.spend-comparison .panel-head p{line-height:1.8}
@media(max-width:1180px){.analysis-bar{flex-wrap:wrap}.op-grid{grid-template-columns:1fr}.op-chart{max-height:270px}}
@media(max-width:600px){.op-intro{flex-direction:column;align-items:flex-start;gap:13px}.op-intro h2{font-size:22px}.op-grid{display:block}.op-legend{gap:10px;font-size:9px}.op-controls{gap:12px;align-items:flex-start}.op-controls label{font-size:10px;gap:7px}.op-histogram{padding:10px 0;gap:4px}.op-bin small{font-size:8px}.op-bin b{font-size:10px}.analysis-bar .tabs{gap:18px;justify-content:flex-start}.tabs button{font-size:10px}.op-chart{min-height:120px}.op-note{font-size:10px}.op-intro label{font-size:10px}.op-grid .panel-head p{line-height:1.6}}