:root{
  --bg:#0a0d12; --panel:#0f141c; --border:#1f2a3a;
  --text:#eaf2ff; --muted:#a8b3c7;
}
*{box-sizing:border-box}
body{background:#0a0d12}
.ppc-wrap{max-width:1200px;margin:auto;padding:18px 12px 60px;color:var(--text);font:14px/1.45 system-ui,Segoe UI,Roboto,Arial,sans-serif}

/* Toolbar */
.toolbar{display:grid;gap:10px;margin-bottom:10px}
@media (min-width:720px){ .toolbar{grid-template-columns: 1fr 280px 280px} }
.help{color:var(--muted);font-size:15px}
.ppc-select{
  width:100%; appearance:none; background:#0f141c; color:var(--text);
  border:1px solid var(--border); padding:10px 12px; border-radius:10px
}
.ppc-select:disabled{opacity:.6; cursor:not-allowed}

/* Filters */
.ppc-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ppc-search{flex:1;display:flex;align-items:center;gap:8px;background:#0f141c;border:1px solid var(--border);border-radius:999px;padding:10px 12px}
.ppc-search input{flex:1;background:transparent;border:0;outline:none;   color: #ffffff;font-size:15px}
.ppc-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#121a27;border:1px solid var(--border);cursor:pointer;color:var(--muted)}
.ppc-chip.on{background:#152338;color:var(--text)}

/* ===== ONE global scrollbar for all categories ===== */
#ppc-results{
  max-height: 72vh;                 /* tall but leaves filters visible */
  overflow: auto;
  padding-right: 8px;               /* room for thick thumb */
  border-radius: 14px;
  scrollbar-gutter: stable both-edges; /* reserve gutter, no layout jump */
  scroll-behavior: smooth;             /* smooth programmatic scroll */
  overscroll-behavior: contain;        /* keep scroll inside the box */
  -webkit-overflow-scrolling: touch;   /* iOS momentum */
  background:
    linear-gradient(#0f141c, transparent 16px) top,
    linear-gradient(transparent, #0f141c 16px) bottom;
  background-repeat: no-repeat;
  background-size: 100% 28px, 100% 28px; /* gentle fade at top/bottom */
}

/* Firefox scrollbar */
#ppc-results{
  scrollbar-width: auto;
  scrollbar-color: #3b516e #0f141c; /* thumb, track */
}

/* WebKit scrollbar (Chrome/Edge/Safari) */
#ppc-results::-webkit-scrollbar{ width:16px; height:16px }
#ppc-results::-webkit-scrollbar-track{
  background:#0f141c;
  border-left:1px solid var(--border);
  border-radius:12px;
}
#ppc-results::-webkit-scrollbar-thumb{
  background:#32465f;
  border:4px solid #0f141c;   /* chunky but airy */
  border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  min-height:48px;            /* easy to grab */
}
#ppc-results::-webkit-scrollbar-thumb:hover{ background:#3d5a7a }
#ppc-results::-webkit-scrollbar-thumb:active{ background:#4b6b8d }

/* Sections & names (no inner scrolls) */
.ppc-section{background:#0f141c;border:1px solid var(--border);border-radius:14px;margin:14px 0;padding:14px}
.ppc-section h3{
  margin:0 0 10px;font-size:16px;letter-spacing:.2px;
  position:sticky; top:0; z-index:1;
  background:#0f141c; padding-top:6px;
  border-top-left-radius:10px; border-top-right-radius:10px;
   color: cornflowerblue;
}
.ppc-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.ppc-tag{padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#0f1826;color:#dbe7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppc-meta{color:var(--muted);font-size:12px;margin-top:8px}

.ppc-empty{color:var(--muted);padding:28px;text-align:center;border:1px dashed var(--border);border-radius:12px;margin-top:18px}

/* Floating scroll controls (Up/Down) */
.ppc-scroll-ctl{
  position: sticky;
  bottom: 10px;
  display: flex;
  justify-content: flex-end;
  pointer-events: none; /* pass-through except on buttons */
}
.ppc-scroll-ctl .btn{
  pointer-events: auto;
  margin-left: 8px;
  background:#111a28;
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.ppc-scroll-ctl .btn:hover{ filter:brightness(1.06) }
.ppc-scroll-ctl .btn:active{ transform:translateY(1px) }

/* Hard kill any legacy inner scrollers/buttons */
.ppc-scroll{max-height:none !important;overflow:visible !important}
.ppc-actions,.ppc-btn{display:none !important}
.ppc-section{max-height:none !important;overflow:visible !important}
.ppc-section .ppc-names{overflow:visible !important}
