/* Compact read-only panel; all selectors stay inside the injected component. */
.ppl {
  --ppl-bg: var(--bg, #14141e);
  --ppl-panel: var(--panel, #1b1d2a);
  --ppl-panel-2: var(--panel-2, #232537);
  --ppl-line: var(--line, rgba(255,255,255,.07));
  --ppl-teal: var(--teal, #35d0c5);
  --ppl-teal-deep: var(--teal-deep, #1fa89f);
  --ppl-mint: var(--mint, #a9f3e1);
  --ppl-brandteal: var(--brandteal, #87D9CF);
  --ppl-ink: var(--ink, #eef0f6);
  --ppl-muted: var(--muted, #8e92b2);
  --ppl-danger: var(--pco-red, #e87f9a);
  --ppl-font: var(--font, 'Outfit', system-ui, sans-serif);
  display: block;
  margin: 0 20px 20px;
  padding: 14px;
  background: var(--ppl-panel);
  border: 1px solid var(--ppl-line);
  border-radius: var(--radius-s, 12px);
  color: var(--ppl-ink);
  font: 400 13px/1.5 var(--ppl-font);
}

.ppl *, .ppl *::before, .ppl *::after { box-sizing: border-box; }
.ppl [hidden] { display: none !important; }
.ppl :is(input, select, button) { min-width: 0; min-height: 48px; font: inherit; }
.ppl :focus-visible { outline: 2px solid var(--ppl-teal); outline-offset: 2px; }

.ppl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ppl-heading { min-width: 0; }
.ppl-title { margin: 0; font: 600 15px/1.25 var(--ppl-font); letter-spacing: -.01em; }
.ppl-subtitle { margin: 3px 0 0; color: var(--ppl-muted); font-size: 11.5px; }
.ppl-count {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--ppl-panel-2);
  color: var(--ppl-brandteal);
  font: 600 11px/1.2 var(--ppl-font);
  white-space: nowrap;
}

.ppl-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) repeat(3, minmax(138px, .85fr));
  gap: 8px;
  margin: 12px 0;
}

.ppl-control { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ppl-label { color: var(--ppl-muted); font-size: 10px; line-height: 1.2; text-transform: uppercase; letter-spacing: .055em; }
.ppl-input, .ppl-select {
  width: 100%;
  height: 48px;
  padding: 0 11px;
  background: var(--ppl-panel-2);
  border: 1px solid var(--ppl-line);
  border-radius: 8px;
  color: var(--ppl-ink);
  font: 500 12px/1 var(--ppl-font);
  color-scheme: dark;
}
.ppl-input::placeholder { color: var(--ppl-muted); }
.ppl-input:focus, .ppl-select:focus { border-color: var(--ppl-teal); }

.ppl-state { margin-top: 12px; }
.ppl-loading, .ppl-access, .ppl-empty, .ppl-error {
  padding: 18px 14px;
  background: var(--ppl-bg);
  border: 1px solid var(--ppl-line);
  border-radius: 10px;
  color: var(--ppl-muted);
  text-align: center;
}
.ppl-loading { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ppl-loading::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ppl-teal);
}
.ppl-empty strong, .ppl-error strong { display: block; margin-bottom: 4px; color: var(--ppl-ink); font-weight: 600; }
.ppl-empty p, .ppl-error p { margin: 4px 0; overflow-wrap: anywhere; }
.ppl-error { border-color: color-mix(in srgb, var(--ppl-danger) 45%, transparent); }
.ppl-state-note { font-size: 11px; }
.ppl-button {
  margin-top: 8px;
  padding: 0 15px;
  background: var(--ppl-panel-2);
  border: 1px solid var(--ppl-teal-deep);
  border-radius: 8px;
  color: var(--ppl-mint);
  font: 600 12px/1 var(--ppl-font);
  cursor: pointer;
}
.ppl-button:hover { border-color: var(--ppl-teal); }

.ppl-groups { display: flex; flex-direction: column; gap: 10px; }
.ppl-group {
  overflow: hidden;
  background: var(--ppl-bg);
  border: 1px solid var(--ppl-line);
  border-radius: 10px;
}
.ppl-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  background: var(--ppl-panel-2);
}
.ppl-group-head h3 { margin: 0; color: var(--ppl-teal); font: 600 11px/1.2 var(--ppl-font); letter-spacing: .04em; }
.ppl-group-head span { color: var(--ppl-muted); font-size: 10.5px; }
.ppl-list { margin: 0; padding: 0; list-style: none; }
.ppl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(138px, auto);
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 10px;
  border-top: 1px solid var(--ppl-line);
}
.ppl-row-main { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ppl-name { min-width: 0; overflow: hidden; color: var(--ppl-ink); font: 500 12.5px/1.35 var(--ppl-font); text-overflow: ellipsis; white-space: nowrap; }
.ppl-badges { display: inline-flex; flex: 0 0 auto; gap: 5px; }
.ppl-type, .ppl-status {
  padding: 3px 6px;
  border: 1px solid var(--ppl-line);
  border-radius: 999px;
  color: var(--ppl-muted);
  font: 500 9.5px/1 var(--ppl-font);
  text-transform: capitalize;
  white-space: nowrap;
}
.ppl-status { color: var(--ppl-brandteal); }
.ppl-price { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; text-align: right; }
.ppl-price b { color: var(--ppl-ink); font: 600 13px/1.25 var(--ppl-font); white-space: nowrap; }
.ppl-price-note { color: var(--ppl-muted); font-size: 9.5px; line-height: 1.3; }
.ppl-row[data-ppl-price-state="zero"] .ppl-price b { color: var(--ppl-mint); }
.ppl-row[data-ppl-price-state="invalid"] .ppl-price b, .ppl-row[data-ppl-price-state="invalid"] .ppl-price-note { color: var(--ppl-danger); }

@media (max-width: 900px) {
  .ppl-controls { grid-template-columns: minmax(160px, 1.2fr) repeat(3, minmax(120px, .8fr)); }
  .ppl-row-main { align-items: flex-start; flex-direction: column; gap: 4px; }
}

@media (max-width: 700px) {
  .ppl { margin: 0 12px 14px; padding: 12px; }
  .ppl-head { align-items: flex-start; }
  .ppl-subtitle { max-width: 34ch; }
  .ppl-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ppl-control:first-child { grid-column: 1 / -1; }
  .ppl-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 9px 8px; }
  .ppl-badges { flex-wrap: wrap; }
  .ppl-price-note { max-width: 132px; }
}

@media (max-width: 390px) {
  .ppl-count { padding: 4px 6px; font-size: 10px; }
  .ppl-title { font-size: 14px; }
  .ppl-subtitle { font-size: 11px; }
  .ppl-name { white-space: normal; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .ppl *, .ppl *::before, .ppl *::after { transition: none !important; animation: none !important; }
}

/* Existing host composition, scoped to this list; base console CSS is byte-preserved. */
.ppl-host-layout > .pco-price-list-slot { grid-column:1; grid-row:6; min-width:0; }
.ppl-host-slot .ppl { margin:0; }
@media (min-width:1101px) {
  .ppl-host-layout:has(> .pco-price-list-slot) { grid-template-rows:auto auto auto auto 1fr; }
  .ppl-host-layout:has(> .pco-price-list-slot) .pco-panel { grid-row:1 / span 5; }
  .ppl-host-layout > .pco-price-list-slot { grid-row:5; }
}
/* Web's borderless surface vocabulary; focus retains a visible teal outline. */
.ppl, .ppl-input, .ppl-select, .ppl-group, .ppl-type, .ppl-status,
.ppl-loading, .ppl-access, .ppl-empty, .ppl-error, .ppl-button, .ppl-row { border:0; }