/* PromptBx category page: keep rating information below the sticky toolbar */
:root {
  --bg:#0B1012;
  --panel:#121A1C;
  --panel2:#182224;
  --line:#273638;
  --line2:#3A4B4C;
  --text:#DCE5E3;
  --muted:#A8B3B1;
  --dim:#75817F;
  --accent:#35C6C3;
  --accent2:#70DCD5;
  --success:#83d6a2;
  --danger:#ff9696;
  --radius:18px;
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html {
  scroll-behavior:smooth;
}

body {
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}

a {
  color:inherit;
  text-decoration:none;
}

button,input {
  font:inherit;
}

.bg-light {
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% -10%,rgba(97,218,213,.14),transparent 34%),
    radial-gradient(circle at 0% 60%,rgba(76,103,102,.11),transparent 30%),
    radial-gradient(circle at 100% 70%,rgba(65,130,127,.10),transparent 28%);
}

.header {
  position:sticky;
  top:0;
  z-index:20;
  min-height:68px;
  padding:13px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:rgba(9,10,10,.82);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}

.logo {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:19px;
  font-weight:800;
}

.brand-logo {
  height: 34px;
  width: auto;
  display: block;
}

.header-actions {
  display:flex;
  gap:9px;
  align-items:center;
}

.primary-btn,
.ghost-btn {
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  padding:9px 14px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.primary-btn {
  color:#0D0F0F;
  background:#F5F7F6;
  border:1px solid #fff;
}

.primary-btn:hover {
  transform:translateY(-1px);
  filter:brightness(.95);
}

.ghost-btn {
  color:#D5DBDB;
  background:#171A1A;
  border:1px solid #2F3635;
}

.ghost-btn:hover {
  border-color:#505C5C;
  color:#fff;
  background:#1C2121;
}

.button-reset {
  appearance:none;
}

.page-shell {
  position:relative;
  z-index:1;
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  min-height:calc(100vh - 180px);
  padding:42px 0 76px;
}

.breadcrumbs {
  display:flex;
  align-items:center;
  gap:9px;
  color:#768C8B;
  font-size:12px;
  margin-bottom:28px;
}

.breadcrumbs a:hover {
  color:#DCE5E3;
}

.category-hero {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:22px;
  align-items:center;
  padding:32px;
  border:1px solid #303A39;
  border-radius:22px;
  background:linear-gradient(120deg,rgba(37,48,47,.92),rgba(17,20,20,.96));
  box-shadow:0 24px 70px rgba(0,0,0,.22);
}

.category-icon {
  width:72px;
  height:72px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1D2525;
  border:1px solid #405251;
  font-size:32px;
}

.section-kicker {
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  font-weight:800;
  color:#73B4B1;
}

.category-hero h1 {
  margin:7px 0 9px;
  font-size:clamp(30px,4.3vw,52px);
  line-height:1.05;
  letter-spacing:-.04em;
}

.category-hero p {
  max-width:760px;
  color:#A8B3B1;
  line-height:1.7;
  font-size:15px;
}

.category-meta {
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#798E8D;
  font-size:12px;
}

.meta-dot {
  width:4px;
  height:4px;
  background:#5B6C6C;
  border-radius:50%;
}

.toolbar {
  margin:20px 0 44px;
  display:flex;
  align-items:center;
  gap:12px;
}

.search-box {
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  background:#121A1C;
  border:1px solid #2D3434;
  border-radius:12px;
  transition:.2s;
}

.search-box:focus-within {
  border-color:#569F9C;
  box-shadow:0 0 0 3px rgba(106,220,215,.1);
}

.search-box svg {
  width:18px;
  height:18px;
  margin-left:14px;
  color:#738988;
  flex:0 0 auto;
}

.search-box input {
  width:100%;
  min-width:0;
  padding:12px 14px;
  border:0;
  outline:0;
  background:transparent;
  color:#DCE5E3;
}

.search-box input::placeholder {
  color:#697C7B;
}

.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.section-heading h2 {
  margin-top:5px;
  font-size:25px;
  letter-spacing:-.02em;
}

.section-note {
  color:#6A7E7D;
  font-size:12px;
}

.prompt-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.prompt-card {
  min-height:230px;
  padding:20px;
  border-radius:17px;
  border:1px solid #282E2E;
  background:#121A1C;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:.22s;
}

.prompt-card::before {
  content:"";
  position:absolute;
  width:145px;
  height:145px;
  border-radius:50%;
  right:-75px;
  top:-75px;
  background:rgba(106,220,215,.075);
  filter:blur(10px);
  pointer-events:none;
}

.prompt-card:hover {
  transform:translateY(-3px);
  border-color:#4A5555;
}

.prompt-card-top {
  position:relative;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.prompt-number {
  color:#889A99;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.rating {
  position:relative;
  z-index:20;
  display:inline-flex;
  align-items:center;
  font-size:10px;
  border:1px solid #353C3C;
  background:#1B1E1E;
  color:#C6CFCE;
  padding:4px 8px;
  border-radius:999px;
  cursor:help;
}

.rating::before {
  content:"";
  position:absolute;
  top:calc(100% + 6px);
  right:14px;
  width:9px;
  height:9px;
  z-index:101;
  border-top:1px solid #647776;
  border-left:1px solid #647776;
  background:#0D1111;
  opacity:0;
  pointer-events:none;
  transform:rotate(45deg);
  transition:opacity .16s ease;
}

.rating::after {
  content:attr(data-rating-info);
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:max-content;
  max-width:min(230px,72vw);
  padding:9px 11px;
  z-index:100;
  border:1px solid #647776;
  border-radius:10px;
  background:#0D1111;
  color:#DCE5E3;
  box-shadow:0 18px 45px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.025),0 0 26px rgba(85,215,210,.16);
  font-size:11px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:0;
  text-align:left;
  white-space:normal;
  opacity:0;
  pointer-events:none;
  transform:translateY(-5px) scale(.97);
  transform-origin:top right;
  transition:opacity .16s ease,transform .16s ease;
}

.prompt-card:hover,
.prompt-card:focus-visible {
  z-index:10;
}

.rating:hover::before,
.rating:hover::after,
.prompt-card:focus-visible .rating::before,
.prompt-card:focus-visible .rating::after {
  opacity:1;
}

.rating:hover::after,
.prompt-card:focus-visible .rating::after {
  transform:translateY(0) scale(1);
}

.rating.hot {
  color:#ffd698;
  border-color:#59462d;
  background:#211b13;
}

.rating.needs-fix {
  color:#ffb2b8;
  border-color:rgba(255,91,105,.48);
  background:rgba(104,24,34,.28);
}

.suggest-cta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-top:58px;
  padding:28px 30px;
  border:1px solid rgba(119,193,190,.2);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(75,173,169,.13),rgba(19,22,22,.82) 56%);
}

.suggest-cta[hidden] { display:none; }

.suggest-cta h2 {
  margin:6px 0 7px;
  font-size:23px;
}

.suggest-cta p {
  color:#91A2A2;
  font-size:13px;
  line-height:1.55;
}

.suggest-cta .primary-btn {
  flex:0 0 auto;
  white-space:nowrap;
}

.rating.untested {
  color:#7C9190;
}

.prompt-card h3 {
  position:relative;
  z-index:1;
  font-size:18px;
  line-height:1.25;
  margin-bottom:9px;
}

.prompt-card p {
  position:relative;
  z-index:1;
  color:#8C9E9E;
  font-size:13px;
  line-height:1.55;
  flex:1;
}

.tags {
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:16px;
}

.tag {
  font-size:10px;
  color:#A6B4B3;
  background:#1B1E1E;
  border:1px solid #2D3333;
  padding:4px 8px;
  border-radius:999px;
}

.prompt-card-link {
  position:relative;
  z-index:1;
  margin-top:18px;
  color:#7AB9B6;
  font-size:12px;
  font-weight:700;
}

.loading-card,
.no-results {
  grid-column:1/-1;
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  color:#839695;
  border:1px dashed #2E3535;
  border-radius:17px;
  background:rgba(19,22,22,.55);
}

.loader {
  width:26px;
  height:26px;
  border-radius:50%;
  border:2px solid #353D3D;
  border-top-color:#73DEDA;
  animation:spin .8s linear infinite;
}

@keyframes spin {
  to { transform:rotate(360deg); }
}

.empty-state {
  text-align:center;
  max-width:620px;
  margin:80px auto;
  padding:40px 28px;
  border:1px solid #2B3231;
  border-radius:20px;
  background:#121A1C;
}

.empty-icon {
  width:50px;
  height:50px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  background:#21191c;
  border:1px solid #4a343b;
  color:var(--danger);
  font-size:23px;
  font-weight:800;
}

.empty-state h2 {
  font-size:26px;
  margin-bottom:10px;
}

.empty-state p {
  color:#8C9E9E;
  line-height:1.6;
  margin-bottom:22px;
}

.footer {
  position:relative;
  z-index:1;
  border-top:1px solid #202525;
  background:#060606;
  padding:34px max(24px,calc((100vw - 1180px)/2));
}

.footer-brand {
  display:flex;
  align-items:center;
  gap:12px;
}

.footer-brand strong {
  display:block;
}

.footer-brand p,
.footer-text {
  color:#6D8180;
  font-size:12px;
}

.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:22px 0;
  color:#8C9E9E;
  font-size:12px;
}

.footer-links a:hover {
  color:#fff;
}

@media (max-width:900px) {
  .prompt-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:680px) {
  .header {
    padding:12px 16px;
  }

  .header-actions .ghost-btn {
    display:none;
  }

  .page-shell {
    width:min(100% - 28px,1180px);
    padding-top:28px;
  }

  .category-hero {
    grid-template-columns:1fr;
    padding:24px;
  }

  .category-icon {
    width:58px;
    height:58px;
    border-radius:16px;
    font-size:27px;
  }

  .toolbar {
    align-items:stretch;
    flex-direction:column;
  }

  .prompt-grid {
    grid-template-columns:1fr;
  }

  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .footer {
    padding:30px 18px;
  }
}

.empty-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
}

.empty-actions [hidden] {
  display:none;
}

/* ===== V1.1 CALM RESPONSIVE REFINEMENT ===== */
:root {
  --bg:#0B1012;
  --panel:#121A1C;
  --panel-soft:#182224;
  --line:#273638;
  --line-strong:#3A4B4C;
  --text:#DCE5E3;
  --muted:#A8B3B1;
  --accent:#35C6C3;
}

body {
  background:
    radial-gradient(circle at 50% -12%,rgba(92,177,174,.11),transparent 34rem),
    #0A0C0C;
  -webkit-font-smoothing:antialiased;
}

.bg-light {
  opacity:.72;
  background:
    radial-gradient(circle at 18% 24%,rgba(83,154,151,.07),transparent 28rem),
    radial-gradient(circle at 82% 62%,rgba(76,142,139,.065),transparent 30rem);
}

.header {
  min-height:72px;
  background:rgba(10,12,12,.78);
  border-color:rgba(255,255,255,.055);
  box-shadow:0 8px 32px rgba(0,0,0,.12);
}

.logo { letter-spacing:-.025em; }
.brand-logo { width:36px; height:36px; object-fit:contain; }
.short-label { display:none; }

.page-shell {
  width:min(1160px,calc(100% - 48px));
  padding-top:34px;
}

.breadcrumbs {
  min-width:0;
  margin-bottom:22px;
  white-space:nowrap;
  overflow:hidden;
}

.breadcrumbs > * { flex:0 0 auto; }
.breadcrumbs span:last-child {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.category-hero {
  gap:26px;
  padding:34px;
  border-color:var(--line-strong);
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(31,39,38,.96),rgba(17,20,20,.98));
  box-shadow:0 22px 64px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.025);
}

.category-icon {
  width:76px;
  height:76px;
  border-radius:22px;
  background:linear-gradient(145deg,#202A29,#18201F);
  border-color:rgba(115,211,207,.25);
  box-shadow:0 12px 36px rgba(0,0,0,.2);
}

.category-hero h1 {
  max-width:100%;
  overflow-wrap:anywhere;
  text-wrap:balance;
}

.category-hero p {
  max-width:72ch;
  text-wrap:pretty;
}

.toolbar {
  position:sticky;
  top:84px;
  z-index:80;
  isolation:isolate;
  padding:8px;
  margin:18px 0 38px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:16px;
  background:rgba(14,16,16,.82);
  backdrop-filter:blur(16px);
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}

.search-box {
  border:0;
  background:transparent;
}

.search-box:focus-within {
  box-shadow:none;
}

.prompt-grid {
  position:relative;
  z-index:1;
  gap:16px;
}

.prompt-card {
  min-width:0;
  min-height:224px;
  padding:21px;
  border-color:var(--line);
  background:linear-gradient(155deg,rgba(22,26,26,.98),rgba(17,20,20,.98));
  box-shadow:0 10px 30px rgba(0,0,0,.11);
}

.prompt-card::before {
  background:rgba(104,192,189,.055);
}

.prompt-card:hover,
.prompt-card:focus-visible {
  transform:translateY(-3px);
  border-color:rgba(120,206,202,.3);
  box-shadow:0 18px 42px rgba(0,0,0,.2);
  outline:none;
}

.prompt-card h3 {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  text-wrap:balance;
}

.prompt-card p {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow-wrap:anywhere;
}

.tags {
  max-height:31px;
  overflow:hidden;
}

.tag {
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.prompt-card-link { margin-top:16px; }

.loading-grid {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.loading-grid span {
  min-height:224px;
  border:1px solid var(--line);
  border-radius:17px;
  background:linear-gradient(100deg,#121A1C 20%,#1B2020 42%,#121A1C 64%);
  background-size:240% 100%;
  animation:softShimmer 1.35s ease-in-out infinite;
}

@keyframes softShimmer {
  to { background-position:-240% 0; }
}

@media (max-width:900px) {
  .loading-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .loading-grid span:last-child { display:none; }
}

@media (max-width:680px) {
  .header {
    min-height:62px;
    padding:10px 14px;
  }

  .logo { font-size:17px; }
  .brand-logo { width:32px; height:32px; }
  .header-actions { gap:7px; }
  .header-actions .primary-btn { min-height:38px; padding:8px 11px; font-size:12px; }
  .wide-label { display:none; }
  .short-label { display:inline; }

  .page-shell {
    width:min(100% - 24px,1160px);
    padding:22px 0 54px;
  }

  .breadcrumbs { margin-bottom:16px; }

  .category-hero {
    gap:17px;
    padding:20px;
    border-radius:20px;
  }

  .category-icon {
    width:52px;
    height:52px;
    border-radius:15px;
    font-size:24px;
  }

  .category-hero h1 {
    margin:6px 0 8px;
    font-size:clamp(28px,9vw,40px);
    line-height:1.08;
    letter-spacing:-.035em;
  }

  .category-hero p {
    font-size:13px;
    line-height:1.6;
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }

  .category-meta { margin-top:14px; }

  .toolbar {
    top:72px;
    padding:7px;
    margin:14px 0 30px;
    flex-direction:row;
    border-radius:14px;
  }

  .toolbar .ghost-btn {
    flex:0 0 auto;
    min-height:42px;
    padding:8px 11px;
    font-size:0;
  }

  .toolbar .ghost-btn::after {
    content:'Surprise';
    font-size:12px;
  }

  .search-box input { padding:11px 10px; font-size:14px; }
  .search-box svg { margin-left:10px; }

  .section-heading { margin-bottom:15px; }
  .section-heading h2 { font-size:21px; }
  .prompt-grid { gap:11px; }

  .prompt-card {
    min-height:190px;
    padding:17px;
    border-radius:15px;
  }

  .prompt-card h3 { font-size:16px; }
  .prompt-card p { font-size:12px; -webkit-line-clamp:2; }
  .tags .tag:nth-child(n+4) { display:none; }
  .prompt-card-link { margin-top:14px; }

  .loading-grid { grid-template-columns:1fr; gap:11px; }
  .loading-grid span { min-height:190px; }
  .loading-grid span:not(:first-child) { display:none; }

  .suggest-cta {
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
    margin-top:38px;
    padding:22px;
  }

  .suggest-cta h2 { font-size:20px; }
  .suggest-cta .primary-btn { width:100%; }
}

@media (max-width:380px) {
  .logo span { display:none; }
  .category-hero h1 { font-size:27px; }
  .section-note { max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

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


/* =========================================================
   V1.0.4 — INDEXED PAGE LOADING / RECOVERY STATE
   ========================================================= */
body:not([data-page-state="ready"]) #categoryHero,
body:not([data-page-state="ready"]) .toolbar,
body:not([data-page-state="ready"]) .content-section,
body:not([data-page-state="ready"]) #suggestPromptCta {
  display:none!important;
}

body[data-page-state="ready"] .page-status {
  display:none;
}

.page-status {
  min-height:430px;
  display:grid;
  place-items:center;
  padding:36px 0 72px;
}

.page-status-card {
  position:relative;
  width:min(100%,590px);
  overflow:hidden;
  padding:42px 34px;
  border:1px solid rgba(125,225,220,.16);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(25,30,30,.8),rgba(14,17,17,.72));
  box-shadow:0 24px 80px rgba(0,0,0,.24);
  text-align:center;
  backdrop-filter:blur(14px);
}

.page-status-card::after {
  position:absolute;
  width:190px;
  height:190px;
  right:-105px;
  bottom:-125px;
  border:1px solid rgba(125,225,220,.1);
  border-radius:50%;
  box-shadow:0 0 0 28px rgba(125,225,220,.018),0 0 0 58px rgba(125,225,220,.01);
  content:"";
  pointer-events:none;
}

.page-status-icon {
  width:56px;
  height:56px;
  margin:0 auto 21px;
  display:grid;
  place-items:center;
  border:1px solid rgba(125,225,220,.18);
  border-radius:17px;
  background:rgba(100,219,214,.08);
  color:#A8E8E3;
}

.page-status-icon span {
  width:22px;
  height:22px;
  border:2px solid rgba(220,229,227,.2);
  border-top-color:#DCE5E3;
  border-radius:50%;
  animation:pageStatusSpin .8s linear infinite;
}

.page-status[data-state="error"] .page-status-icon,
.page-status[data-state="not-found"] .page-status-icon {
  border-color:rgba(255,129,139,.22);
  background:rgba(151,50,61,.11);
  color:#ff9ba4;
  font-size:22px;
  font-weight:900;
}

.page-status[data-state="not-found"] .page-status-icon {
  border-color:rgba(125,225,220,.18);
  background:rgba(100,219,214,.08);
  color:#A8E8E3;
}

.page-status[data-state="error"] .page-status-icon span,
.page-status[data-state="not-found"] .page-status-icon span {
  display:none;
}

.page-status[data-state="error"] .page-status-icon::before { content:"!"; }
.page-status[data-state="not-found"] .page-status-icon::before { content:"?"; }

.page-status h1 {
  margin:9px 0 12px;
  color:var(--text);
  font-size:clamp(28px,5vw,40px);
  line-height:1.08;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.page-status p {
  max-width:450px;
  margin:0 auto;
  color:var(--muted);
  font-size:16px;
  line-height:1.65;
}

.page-status .empty-actions {
  position:relative;
  z-index:1;
  justify-content:center;
  margin-top:24px;
}

.page-status .empty-actions[hidden] {
  display:none;
}

.page-status .primary-btn {
  gap:8px;
}

.page-status .primary-btn > span:last-child {
  display:inline-block;
  transition:transform .2s ease;
}

.page-status .primary-btn:hover > span:last-child {
  transform:rotate(45deg);
}

@keyframes pageStatusSpin {
  to { transform:rotate(360deg); }
}

@media (max-width:600px) {
  .page-status {
    min-height:350px;
    padding:20px 0 52px;
  }

  .page-status-card {
    padding:32px 20px;
    border-radius:18px;
  }

  .page-status h1 { font-size:29px; }
  .page-status p { font-size:15px; }
  .page-status .empty-actions { display:grid; }
  .page-status .empty-actions > * { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  .page-status-icon span { animation:none; }
}
.subcategory-bar {
  margin: -22px 0 34px;
  overflow: hidden;
}

.subcategory-bar[hidden] {
  display: none;
}

.subcategory-list {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(101,219,214,.45) transparent;
  scroll-behavior: smooth;
}

.subcategory-list::-webkit-scrollbar {
  height: 5px;
}

.subcategory-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(101,219,214,.42);
}

.subcategory-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(129,200,197,.14);
  border-radius: 13px;
  color: #ACB9B9;
  background: linear-gradient(145deg, rgba(23,28,28,.96), rgba(16,19,19,.96));
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s, transform .18s;
}

.subcategory-chip:hover {
  color: #DCE5E3;
  border-color: rgba(125,225,220,.34);
  transform: translateY(-1px);
}

.subcategory-chip small {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 23px;
  padding: 0 6px;
  border-radius: 8px;
  color: #9CACAB;
  background: rgba(255,255,255,.045);
  font-size: 10px;
}

.subcategory-chip.is-active {
  color: #fff;
  border-color: rgba(101,219,214,.58);
  background: linear-gradient(145deg, rgba(70,169,165,.42), rgba(60,87,86,.38));
  box-shadow: 0 9px 28px rgba(61,132,129,.16), inset 0 1px rgba(255,255,255,.08);
}

.subcategory-chip.is-active small {
  color: #DCE5E3;
  background: rgba(255,255,255,.1);
}

@media (max-width: 720px) {
  .subcategory-bar {
    margin: -22px 0 28px;
  }

  .subcategory-list {
    margin-right: -18px;
    padding-right: 18px;
  }

  .subcategory-chip {
    min-height: 39px;
    padding: 0 12px;
    border-radius: 12px;
  }
}

/* ===== PROMPTBX VECTOR ICONS ===== */
.promptbx-svg-icon {
  display:block;
  width:1em;
  height:1em;
  flex:0 0 auto;
  overflow:visible;
}

.category-icon .promptbx-svg-icon {
  width:36px;
  height:36px;
  color:#7DE0DC;
  filter:drop-shadow(0 6px 14px rgba(65,198,193,.34));
}

.rating {
  gap:5px;
}

.rating .rating-icon {
  width:13px;
  height:13px;
}

.rating.hot .rating-icon {
  color:#ffad52;
  filter:drop-shadow(0 0 5px rgba(255,143,45,.38));
}

.rating.needs-fix .rating-icon {
  color:#ff939d;
}