.picker-performance {
  --pp-ink: #343852; --pp-green: #128253; --pp-line: #dfe5ed;
  background: radial-gradient(ellipse at top right, #e8f4ef 0, transparent 45%), #f5f7fa;
  color: var(--pp-ink); padding: clamp(16px, 2.4vw, 38px); overflow-y: auto; flex: 1; min-height: 0;
}
.picker-performance *, .pp-note-dialog * { box-sizing: border-box; }
.pp-intro { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.pp-intro h2 { font: inherit; font-size: clamp(24px, 2.1vw, 34px); font-weight: 700; letter-spacing: -.03em; margin: 5px 0 10px; }
.pp-intro p, .pp-results > p, .pp-users > p, .pp-chart-subtitle, .pp-help { color: #64718a; font-size: 13px; line-height: 1.6; margin: 0; }
.pp-intro .pp-eyebrow { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--pp-green); }
.pp-timezone { font-size: 12px; border: 1px solid #c9ded5; border-radius: 24px; padding: 10px 16px; white-space: nowrap; background: #ffffffa6; }
/* Use a scoped grid so global form flex-direction rules cannot stack the toolbar. */
.picker-performance .pp-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 16px; width: 100%; margin: 0; background: #fff; border: 1px solid var(--pp-line); border-radius: 16px; padding: 20px; }
.picker-performance .pp-filters label { display: grid; gap: 8px; margin: 0; min-width: 0; font-size: 12px; font-weight: 600; color: #64718a; }
.picker-performance .pp-filters input, .picker-performance .pp-filters select { font: inherit; font-size: 14px; color: var(--pp-ink); width: 100%; min-width: 0; height: 46px; margin: 0; background: #f8fafc; border: 1px solid #d9e0eb; border-radius: 9px; padding: 10px 12px; }
.picker-performance .pp-filters .pp-primary { height: 46px; margin: 0; white-space: nowrap; font-size: 14px; font-weight: 600; }
.picker-performance .pp-filters .pp-primary:hover { background: #0d6c44; }
.picker-performance button { font: inherit; cursor: pointer; }
.picker-performance button:focus-visible, .picker-performance input:focus-visible, .picker-performance select:focus-visible { outline: 3px solid #809cce; outline-offset: 3px; }
.picker-performance .pp-primary { background: var(--pp-green); color: white; border: 0; border-radius: 9px; padding: 12px 20px; min-height: 44px; }
.pp-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 20px 0; }
.picker-performance .pp-metric { text-align: left; border: 1px solid var(--pp-line); background: white; color: var(--pp-ink); border-radius: 12px; padding: 16px; }
.pp-metric strong, .pp-metric span { display: block; }
.pp-metric strong { font-size: 14px; margin-bottom: 6px; }
.pp-metric span { font-size: 11px; color: #69758a; line-height: 1.5; }
.picker-performance .pp-metric[aria-pressed="true"] { background: #edf7f1; border-color: #58a180; box-shadow: inset 0 3px var(--pp-green); }
.pp-workspace { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; }
.pp-users, .pp-chart-card, .pp-results { background: #fff; border: 1px solid var(--pp-line); border-radius: 16px; padding: 22px; }
.picker-performance h3 { font-size: 16px; font-weight: 700; margin: 0 0 9px; }
.pp-user-list { display: grid; gap: 12px; max-height: 330px; overflow: auto; }
.pp-user-list label { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; overflow-wrap: anywhere; cursor: pointer; }
.pp-user-list input { accent-color: var(--pp-green); margin-top: 3px; }
.pp-user-actions { display: flex; gap: 8px; margin: 14px 0 20px; }
.pp-user-actions button, .pp-pager button, .pp-details { border: 1px solid var(--pp-line); border-radius: 8px; background: #f7f9fc; color: var(--pp-ink); padding: 7px 12px; }
.pp-chart-heading { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.pp-sample-count { font-size: 12px; color: var(--pp-green); white-space: nowrap; }
.pp-canvas { position: relative; height: 340px; }
.pp-status { color: #66768a; text-align: center; font-size: 14px; margin: 12px 0; }
.pp-status:empty { display: none; }
.picker-performance[aria-busy="true"] .pp-status::before { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid #d2ddd8; border-top-color: var(--pp-green); border-radius: 50%; margin-right: 8px; animation: pp-spin 1s linear infinite; }
@keyframes pp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .picker-performance[aria-busy="true"] .pp-status::before { animation: none; } }
.pp-results { margin-top: 20px; }
.pp-results > p { max-width: 1000px; margin-bottom: 20px; }
.pp-table-scroll { overflow-x: auto; }
.pp-results table { border-collapse: collapse; width: 100%; font-size: 12px; }
.pp-results th { text-align: left; font-weight: 600; background: #f0f4f8; color: #54647b; white-space: nowrap; }
.pp-results th, .pp-results td { padding: 12px 10px; border-bottom: 1px solid #e9eef4; }
.pp-results tbody tr:hover { background: #f8fbfa; }
.picker-performance .pp-details { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: #f7f9fc; color: #343852; border: 1px solid #dfe5ed; box-shadow: none; transition: background-color .15s, border-color .15s; }
.picker-performance .pp-details:hover { background: #eaf0f7; border-color: #bbc9dc; color: #27364b; box-shadow: none; transform: none; }
.picker-performance .pp-details:active { background: #dfe8f2; }
.pp-pager { display: flex; justify-content: end; gap: 14px; align-items: center; padding-top: 16px; font-size: 12px; }
.pp-pager button:disabled { opacity: .4; cursor: default; }
.pp-note-dialog { position: fixed; inset: 0; margin: auto; padding: 0; border: 0; border-radius: 18px; width: min(620px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 32px); overflow-y: auto; background: #fff; color: #343852; box-shadow: 0 24px 80px #17213844; }
.pp-note-dialog::backdrop { background: #22293b88; backdrop-filter: blur(3px); }
.pp-note-dialog header { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #343852; color: white; padding: 18px 24px; }
.pp-note-dialog h3 { font-size: 18px; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }
.pp-note-dialog .productClose { display: grid; place-items: center; flex: 0 0 36px; float: none; width: 36px; height: 36px; margin: 0; border: 0; background: transparent; color: #f8fafc; cursor: pointer; padding: 0; box-shadow: none; }
.pp-note-dialog .productClose:hover { background: transparent; color: #d4deef; transform: none; box-shadow: none; }
.pp-note-dialog .productClose i { margin: 0; font-size: 28px; line-height: 1; }
.pp-note-dialog button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.pp-note-body { display: grid; gap: 20px; padding: 24px; font-size: 14px; }
.pp-note-body h4 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
/* Shared site paragraphs are white and have forced margins. Keep details readable. */
.pp-note-body p { color: #59677e; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0 !important; padding: 0; overflow-wrap: anywhere; }
.pp-detail-section { min-width: 0; }
.pp-note-body .pp-detail-account { margin-bottom: 12px !important; }
.pp-detail-facts { display: grid; gap: 0; margin: 0; background: #f7f9fc; border: 1px solid #e5eaf1; border-radius: 12px; padding: 6px 14px; }
.pp-detail-facts + .pp-detail-facts { margin-top: 10px; }
.pp-detail-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; padding: 9px 0; }
.pp-detail-facts > div + div { border-top: 1px solid #e5eaf1; }
.pp-detail-facts dt, .pp-detail-facts dd { float: none; position: static; margin: 0; padding: 0; border: 0; width: auto; height: auto; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.pp-detail-facts dt { color: #64718a; font-weight: 500; }
.pp-detail-facts dd { color: #343852; font-weight: 600; }
.pp-note-body .pp-detail-help { margin-top: 10px !important; font-size: 12px; }
.pp-note-body .pp-detail-empty { padding: 12px 14px; background: #f5f8fb; border: 1px dashed #d5deea; border-radius: 10px; }
.pp-note { border-left: 3px solid #2d9b70; background: #f2f8f5; border-radius: 8px; padding: 14px 18px; margin-top: 12px; overflow-wrap: anywhere; }
.pp-note small { display: block; color: #657486; margin: 8px 0; }
.pp-note p { white-space: pre-wrap; }
@media (max-width: 1000px) {
  .picker-performance .pp-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picker-performance .pp-filters .pp-primary { grid-column: 1 / -1; justify-self: end; }
  .pp-metrics { grid-template-columns: repeat(3, 1fr); }
  .pp-workspace { grid-template-columns: 180px minmax(0, 1fr); }
  .pp-chart-heading { flex-wrap: wrap; }
}
@media (max-width: 650px) {
  .pp-intro { align-items: start; flex-direction: column; gap: 12px; }
  .pp-workspace { display: flex; flex-direction: column; }
  .pp-metrics { grid-template-columns: repeat(2, 1fr); }
  .pp-metric:last-child { grid-column: 1 / -1; }
  .pp-users, .pp-chart-card, .pp-results { padding: 16px; }
  .pp-user-list { max-height: 150px; }
  .pp-canvas { height: 300px; }
  .picker-performance .pp-filters { padding: 16px; gap: 14px 12px; }
  .picker-performance .pp-filters .pp-primary { width: 100%; }
}
@media (max-width: 380px) {
  .picker-performance .pp-filters { grid-template-columns: minmax(0, 1fr); }
}