.p-usage-host { display:grid; gap:18px; min-width:0; }
.p-usage-method { max-width:1000px; }
.p-usage-grid { display:grid; grid-template-columns:minmax(260px,1fr) minmax(260px,1fr); gap:40px; padding-top:12px; border-top:1px solid var(--p-border); }
.p-usage-grid section { min-width:0; }
.p-usage-subhead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; }
.p-usage-subhead h3 { font-size:14px; margin:0; }
.p-usage-subhead .p-badge { font-size:10px; white-space:nowrap; }
.p-heat-canvas { position:relative; width:100%; max-width:340px; margin:12px auto; }
.p-heat-canvas svg { display:block; width:100%; max-height:410px; }
.p-heat-canvas text { font:9px var(--p-font-body); fill:var(--p-text-muted); }
.p-heat-canvas [data-heat-cell]:hover,.p-heat-canvas [data-heat-cell]:focus { stroke:var(--p-text); stroke-width:1.5; outline:none; }
.p-heat-tooltip { position:absolute; z-index:3; pointer-events:none; max-width:235px; padding:10px 12px; background:var(--p-surface-raised); color:var(--p-text); border:1px solid var(--p-border); border-radius:8px; font-size:11px; line-height:1.6; box-shadow:0 8px 24px #0005; }
.p-heat-scale { display:flex; align-items:center; justify-content:center; gap:10px; font-size:10px; color:var(--p-text-muted); margin:8px 0 18px; }
.p-heat-scale i { width:130px; height:7px; border-radius:5px; background:linear-gradient(90deg,#edd15860,#fac230,#fa4040); }
.p-scroll-bars { display:grid; gap:28px; margin:32px 0; }
.p-scroll-label { display:flex; justify-content:space-between; gap:12px; font-size:12px; margin-bottom:9px; }
.p-scroll-label span,.p-scroll-bars small { color:var(--p-text-muted); }
.p-scroll-bars small { font-size:10px; display:block; margin-top:6px; }
.p-scroll-track { height:10px; border-radius:5px; background:var(--p-surface-raised); overflow:hidden; }
.p-scroll-track i { display:block; height:100%; border-radius:5px; background:var(--p-chart-home); }
.p-usage-help { padding:18px; border:1px solid var(--p-border); border-radius:12px; font-size:11px; color:var(--p-text-muted); line-height:1.7; }
.p-usage-help strong { color:var(--p-text); }
.p-usage-help p { margin:10px 0 0; }
.p-console .p-usage-filters { display:grid; grid-template-columns:minmax(0,1fr) 155px auto; align-items:start; }
.p-console .p-usage-filters label { min-width:0; font-size:11px; line-height:16px; }
.p-usage-field { display:grid; gap:6px; min-width:0; }
.p-usage-filters input { width:100%; min-width:0; }
.p-usage-filters [data-usage-submit] { margin-top:22px; min-width:94px; }
.p-console .p-usage-filters [aria-invalid="true"] { border-color:var(--p-danger); outline-color:var(--p-danger); box-shadow:0 0 0 1px var(--p-danger); }
.p-usage-hint,.p-usage-field-error { margin:0; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.p-usage-hint { color:var(--p-text-muted); }
.p-usage-hint code { color:var(--p-text); font:inherit; }
.p-usage-field-error { color:var(--p-danger); font-weight:600; }
.p-usage-examples { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:11px; color:var(--p-text-muted); margin-top:2px; }
.p-console .p-usage-examples button { min-height:32px; padding:4px 10px; border-radius:8px; font:inherit; border:1px solid var(--p-border); background:var(--p-surface-raised); color:var(--p-text); cursor:pointer; }
.p-console .p-usage-examples button:hover { border-color:var(--p-chart-home); }
.p-usage-applied { padding-bottom:12px; overflow-wrap:anywhere; }
.p-usage-applied:empty { display:none; }
.p-usage-message { margin-top:16px; min-height:150px; justify-content:center; }
.p-usage-message p { font-size:12px; line-height:1.65; margin:8px 0 0; }
.p-usage-message .p-button { margin:14px auto 0; width:fit-content; }
.p-usage-message-error { border-color:var(--p-danger); }
.p-usage-message-error strong { color:var(--p-danger); }
.p-usage-pending { padding:20px 0; }
[data-usage-stats]:empty { display:none; }
.p-usage-stats strong { font-size:clamp(20px,2vw,28px); }
.p-usage-zones { margin-top:20px; font-size:11px; }
.p-usage-zones:has(h4:only-child) { display:none; }
.p-usage-zones h4 { margin:0 0 12px; font-size:12px; }
.p-usage-zones > div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--p-border); }
.p-usage-zones span { color:var(--p-text-muted); }
@media(max-width:1000px) { .p-usage-grid { gap:24px; grid-template-columns:1fr; } .p-heat-panel { padding-bottom:24px; border-bottom:1px solid var(--p-border); } }
@media(max-width:600px) { .p-usage-subhead { flex-wrap:wrap; } .p-console .p-usage-filters { grid-template-columns:minmax(0,1fr) auto; } .p-usage-field { grid-column:1 / -1; } .p-console .p-usage-filters .p-select { width:100%; } .p-usage-filters input { font-size:16px!important; } }