.dph-toolbar, .dph-heading, .dph-chart-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.dph-toolbar { margin: 18px 0; }
.dph-toolbar h3, .dph-heading h3, .dph-chart-head h4 { margin: 0; color: #0f172a; }
.dph-toolbar p { margin: 5px 0 0; color: #64748b; }
.dph-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dph-actions label { display: flex; align-items: center; gap: 6px; color: #64748b; }
.dph-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.dph-picker { padding: 14px; display: grid; gap: 10px; position: sticky; top: 12px; }
.dph-picker-title { display: grid; gap: 3px; color: #0f172a; }
.dph-picker-title small { color: #64748b; font-size: 11px; font-weight: 400; }
.dph-filter-grid { display: grid; gap: 8px; }
.dph-filter-grid label { display: grid; gap: 5px; color: #64748b; font-size: 11px; }
.dph-picker small { color: #64748b; }
#dphDevices { display: grid; gap: 6px; max-height: 68vh; overflow: auto; }
.dph-device-group { display: grid; gap: 5px; }
.dph-device-group + .dph-device-group { margin-top: 8px; }
.dph-device-group-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 4px 4px 2px; color: #334155; font-size: 11px; }
.dph-device-group-head strong { color: #0f172a; }
.dph-device-group-head span { color: #64748b; text-align: right; overflow-wrap: anywhere; }
.dph-device { display: grid; text-align: left; gap: 6px; padding: 12px; border: 1px solid transparent; border-radius: 9px; background: #f8fafc; cursor: pointer; color: #334155; overflow-wrap: anywhere; }
.dph-device.active { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.dph-device:hover { border-color: #93c5fd; }
.dph-detail { min-width: 0; display: grid; gap: 16px; }
.dph-main { padding: 20px; min-width: 0; }
.dph-kicker { color: #64748b; font-size: 11px; }
.dph-heading h3 { margin-top: 4px; font-size: 17px; }
.dph-verdict { display: grid; gap: 6px; border-radius: 12px; padding: 20px; margin: 18px 0; background: #f1f5f9; color: #334155; }
.dph-verdict.positive { background: #ecfdf5; color: #047857; }
.dph-verdict.negative { background: #fff7ed; color: #c2410c; }
.dph-verdict > span { font-size: 12px; font-weight: 700; }
.dph-verdict strong { font-size: clamp(19px, 2vw, 27px); }
.dph-verdict p { margin: 0; font-size: 12px; }
.dph-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dph-metric { display: grid; align-content: start; gap: 8px; border-right: 1px solid #e2e8f0; padding-right: 10px; }
.dph-metric:last-child { border: 0; }
.dph-metric span, .dph-metric small { color: #64748b; font-size: 11px; }
.dph-metric strong { color: #0f172a; font-size: 22px; overflow-wrap: anywhere; }
.dph-note { color: #64748b; font-size: 11px; line-height: 1.8; margin: 18px 0; }
.dph-chart-head span { color: #64748b; font-size: 11px; display: flex; align-items: center; gap: 7px; }
.dph-chart-head i, .dph-chart-head b { width: 18px; border-top: 3px solid #2563eb; }
.dph-chart-head b { border-top: 2px dashed #94a3b8; margin-left: 10px; }
.dph-chart-scroll { overflow-x: auto; margin-top: 14px; }
.dph-chart-scroll svg { display: block; width: 100%; min-width: 560px; }
.dph-chart-scroll text { fill: #64748b; font-size: 12px; }
.dph-chart-scroll circle { cursor: pointer; }
.dph-chart-scroll circle:focus { stroke: #0f172a; outline: none; }
.dph-point-detail { background: #f8fafc; padding: 10px; border-radius: 8px; color: #64748b; font-size: 11px; line-height: 1.6; }
.dph-table-wrap { width: 100%; overflow-x: auto; margin-top: 14px; }
.dph-table-wrap table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 12px; }
.dph-table-wrap th, .dph-table-wrap td { padding: 12px 9px; text-align: left; border-bottom: 1px solid #e2e8f0; white-space: normal; }
.dph-table-wrap th { color: #64748b; background: #f8fafc; }
.dph-table-wrap td small { display: block; margin-top: 5px; color: #64748b; }
.dph-positive { color: #047857; }.dph-negative { color: #b91c1c; }
.dph-empty { padding: 45px 20px; text-align: center; color: #64748b; }
#dphError { white-space: pre-line; }
@media (max-width: 1100px) { .dph-layout { grid-template-columns: 205px minmax(0, 1fr); }.dph-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dph-layout { grid-template-columns: 1fr; }.dph-picker { position: static; }#dphDevices { max-height: 190px; }.dph-main { padding: 14px; }.dph-toolbar .dph-actions { width: 100%; }.dph-actions .input.compact { width: 132px; }.dph-metric strong { font-size: 20px; } }