.hph-panel { color:#e4eaf2; min-width:0; padding:2px 0; }
.hph-controls { padding:4px 0 0; margin-bottom:8px; }
.hph-toolbar { display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; padding-bottom:14px; }
.hph-control { flex:0 1 146px; min-width:112px; }
.hph-control label { display:block; margin:0 0 6px; color:#8e9aab; font-size:11px; font-weight:500; letter-spacing:.02em; }
.hph-control .form-select { background-color:#111720; color:#e1e8f1; border:1px solid #293441; border-radius:7px; font-size:12px; min-height:36px; box-shadow:none; cursor:pointer; }
.hph-control .form-select:hover { border-color:#475666; }
.hph-control .form-select:focus { border-color:#57b898; box-shadow:0 0 0 2px rgba(87,184,152,.13); }
.hph-control option { background:#111720; color:#e1e8f1; }
.hph-refresh { margin-left:auto; min-height:36px; padding:7px 15px!important; background:#162b25!important; border:1px solid #315a49!important; color:#a8dfc5!important; border-radius:7px!important; font-size:12px!important; font-weight:500; }
.hph-refresh:hover { background:#1c3a2f!important; border-color:#49866b!important; color:#d5f5e5!important; }
.hph-actions { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hph-actions .hph-refresh { margin-left:0; }
.hph-live-status { color:#9fb5c4; font-size:11px; min-height:0; margin:0 0 6px; }
.hph-live-status:empty { display:none; }
.hph-layerbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; padding:12px 0; border-top:1px solid rgba(143,162,184,.13); }
.hph-placement { display:flex; align-items:center; flex-wrap:nowrap; gap:10px; min-width:0; }
.hph-placement-label { color:#8e9aab; font-size:11px; font-weight:500; white-space:nowrap; }
.hph-placement-toggle { display:flex; flex-wrap:nowrap; padding:3px; gap:2px; background:#0f141c; border:1px solid #293441; border-radius:7px; }
.hph-placement-toggle label { position:relative; display:flex!important; align-items:center; justify-content:center; min-height:28px; margin:0!important; padding:5px 10px; border-radius:4px; color:#9faaba; font-size:11px; font-weight:500; white-space:nowrap; cursor:pointer; transition:background .12s,color .12s; }
.hph-placement-toggle label:hover { background:#1b2531; color:#dce5ef; }
.hph-placement-toggle input { position:absolute; opacity:0; width:1px; height:1px; }
.hph-placement-toggle label:has(input:checked) { background:#214c3c; color:#d9f6e7!important; }
.hph-placement-toggle label span { color:inherit!important; }
.hph-placement-toggle label:has(input:focus-visible) { outline:2px solid #74dcb0; outline-offset:1px; }
.hph-flow,.hph-cumulative,.hph-vwap { margin:0!important; min-height:0; font-size:11px; color:#c1cbd8; white-space:nowrap; }
.hph-layerbar .form-switch { display:flex; align-items:center; gap:7px; padding-left:0; }
.hph-layerbar .form-check-input { float:none; flex-shrink:0; width:27px; height:15px; margin:0!important; border-color:#5a6573; background-color:#35404d; cursor:pointer; }
.hph-layerbar .form-check-input:not(:checked) { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c1cbd8'/%3e%3c/svg%3e"); }
.hph-layerbar .form-check-label { cursor:pointer; line-height:20px; }
.hph-flow .form-check-input:checked,.hph-cumulative .form-check-input:checked { background-color:#36a57c; border-color:#4fb88e; }
.hph-vwap-daily { color:#e7adcc; }
.hph-vwap-weekly { color:#69c3d5; }
.hph-vwap-daily .form-check-input:checked { background-color:#aa5983; border-color:#d486b3; }
.hph-vwap-weekly .form-check-input:checked { background-color:#277e94; border-color:#53b0c5; }
.hph-layerbar .form-check-input:focus-visible,.hph-refresh:focus-visible { outline:2px solid #74dcb0; outline-offset:3px; box-shadow:none!important; }
#hph-custom-wrap { max-width:100%; }
#hph-custom-wrap .dash-datepicker { width:350px; max-width:100%; background:transparent; border:0; border-radius:7px; }
#hph-custom-wrap .dash-datepicker-input-wrapper,#hph-custom-wrap .DateRangePickerInput { min-height:36px; background:#111720; border:1px solid #293441; border-radius:7px; color:#a7b5c7; }
#hph-custom-wrap .dash-datepicker-input-wrapper { padding:6px 10px; height:36px; box-sizing:border-box; }
#hph-custom-wrap .dash-datepicker-input,#hph-custom-wrap .DateInput_input { background:transparent; color:#e1e8f1; font-size:12px; line-height:22px; }
#hph-custom-wrap .dash-datepicker-input { padding:0; border:0; height:22px; }
#hph-custom-wrap .dash-datepicker svg { color:#8e9aab; }
#hph-custom-wrap .dash-datepicker-input::placeholder,#hph-custom-wrap .DateInput_input::placeholder { color:#8e9aab; }
#hph-custom-wrap .DateInput { width:120px; background:transparent; }
#hph-custom-wrap .DateInput_input { padding:6px 10px; border-radius:6px; }
#hph-custom-wrap .DateRangePickerInput_arrow,#hph-custom-wrap .DateRangePickerInput_clearDates { color:#8e9aab; }
.hph-chart { min-width:0; width:100%; height:1220px; background:#0b0e14; }
.hph-chart .draglayer .nsdrag,.hph-chart .draglayer .ndrag,.hph-chart .draglayer .sdrag { cursor:ns-resize!important; touch-action:none; }
.hph-chart .draglayer .ewdrag,.hph-chart .draglayer .edrag,.hph-chart .draglayer .wdrag { cursor:ew-resize!important; touch-action:none; }
.hph-chart.hph-axis-scaling { user-select:none; }
.hph-detail { padding:10px 12px; min-height:40px; background:rgba(143,162,184,.035); border-top:1px solid #26313d; color:#9eabbc; font-size:11px; line-height:1.6; }
.hph-detail strong { color:#e3edf7; }
.hph-info { margin-top:12px; border-top:1px solid #26313d; color:#99a6b7; font-size:11px; }
.hph-info summary { width:fit-content; padding:12px 2px; cursor:pointer; color:#a7b5c7; }
.hph-info summary:hover { color:#e0e9f4; }
.hph-info summary:focus-visible { outline:2px solid #74dcb0; outline-offset:2px; }
.hph-status { font-size:11px; color:#b0bece; line-height:1.7; padding:10px 12px; background:#111720; border-left:2px solid #426653; overflow-wrap:anywhere; }
.hph-method { font-size:11px; color:#8e9cad; padding:12px 3px; line-height:1.7; }
.hph-trades { margin-top:10px; }
.hph-trades .accordion-item,.hph-trades .accordion-button { background:#111820!important; color:#cbd8e6!important; border-color:#293744!important; font-size:12px; }
.hph-trades .accordion-body { padding:12px; }
.hph-trades .table { color:#d3e6dc; font-size:12px; --bs-table-bg:transparent; --bs-table-color:#d3e6dc; }
.hph-trades th { color:#a6c3b2; font-size:11px; }
.hph-trades td { white-space:nowrap; }
.hph-empty { color:#a9bacd; font-size:12px; }
@media(max-width:1100px) {
    .hph-control { flex:1 1 110px; }
    .hph-layerbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; }
    .hph-placement { min-height:36px; }
}
@media(max-width:720px) {
    .hph-control { flex:1 1 calc(33.333% - 10px); min-width:90px; }
    .hph-toolbar { gap:10px; }
    .hph-refresh { min-height:32px; }
    .hph-layerbar { grid-template-columns:1fr; gap:10px; padding:10px 0; }
    .hph-chart .scatterlayer .textpoint { display:none; }
}
@media(max-width:480px) {
    .hph-control { flex-basis:calc(50% - 10px); }
    .hph-chart .annotation { display:none; }
}

/* The app-wide callback indicator is outside dcc.Loading. Keep live chart
   polling silent, including progress/status callbacks; other pages retain it. */
body:has(#hph-chart) ._dash-loading-callback,
body:has(#hph-chart) ._dash-loading-callback::before,
body:has(#hph-chart) ._dash-loading-callback::after {
    display:none !important;
    visibility:hidden !important;
    content:none !important;
    animation:none !important;
    pointer-events:none !important;
}