:root{
  --bg:#FFFFFF;
  --card:#ffffff;

  /* Apple-ish neutrals */
  --text: rgba(0,0,0,0.92);
  --muted: rgba(0,0,0,0.52);
  --line: rgba(0,0,0,0.08);

  /* Glass tokens */
  --glass: rgba(248, 248, 248, 0.82);
  --glassDense: rgba(244, 244, 244, 0.84);
  --rim: rgba(255,255,255,0.78);
  --rimStrong: rgba(255,255,255,0.92);

  /* Shadows (kept subtle) */
  --shadow: 0 18px 55px rgba(12, 18, 30, .10);
  --shadow2: 0 10px 25px rgba(12, 18, 30, .08);

  /* Existing pills */
  --pill:#2b2d2f;
  --pill2:#2b2d2f;
  --pillText:#f4f6f9;
}

*{box-sizing:border-box}

html, body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);

  /* Clean, seamless “Apple air” (no patchy radials) */
  background: #ffffff;
}

.wrap{max-width:1100px;margin:0 auto;padding:20px}

.hero{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 18vh;
}

.heroInner{
  max-width: 980px;
  margin: 0 auto;
  text-align:center;
}

.logoRow{display:flex;justify-content:center;align-items:center;margin:26px 0 18px}
.logo{max-width: 250px; width: min(520px, 72vw); height:auto; display:block}

/* --- Search --- */
.searchShell{display:flex;justify-content:center}
.searchBar{
  width: 640px;
  max-width: 92vw;
  height: 44px;

  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(28px) saturate(1.08);
  -webkit-backdrop-filter: blur(28px) saturate(1.08);

  border: 1px solid rgba(255,255,255,0.60);
  border-radius: 22px;

  /* Apple glass: specular rim + contact shadow (very small) */
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.88),
    inset 0 -1px 1px rgba(0,0,0,0.055),
    0 0 0 1px rgba(255,255,255,0.25),
    0 1px 2px rgba(0,0,0,0.035);

  display:flex;
  align-items:center;
  padding: 0 16px;
  gap: 10px;
  position: relative;

  transition:
    background .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.searchBar::before{
  content:"";
  position:absolute;
  inset:-1px;              /* ring thickness (keep -1px for subtle) */
  border-radius: 24px;     /* 22px + 2px to match the inset ring */
  pointer-events:none;

  background: linear-gradient(90deg,
    rgba(104, 209,  93, 0.55),
    rgba(255, 195,  74, 0.55),
    rgba(255, 122,  74, 0.55),
    rgba(214,  84, 140, 0.55),
    rgba( 77, 124, 255, 0.55)
  );

  /* keep only the border, not a filled overlay */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  padding: 1px;            /* ring width */
  filter: blur(0.25px);    /* tiny soften so it feels “liquid” */
  opacity: 0.55;           /* overall strength */
}


.searchBar:focus-within{
  background: rgba(255,255,255,0.96);
  border-color: rgba(255,255,255,0.74);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.92),
    inset 0 -1px 1px rgba(0,0,0,0.065),
    0 0 0 1px rgba(255,255,255,0.96),
    0 1px 2px rgba(0,0,0,0.045);
}

.searchBar:focus-within::before{
  opacity: 0.8;
}

.searchIcon{
  color: rgba(0,0,0,0.55);
  opacity: 1;
  font-size:18px;
  padding-left:6px;
}

.heroInput{
  flex:1;
  border:0;
  outline:none;
  font-size:16px;
  padding: 10px 6px;
  background:transparent;
  color: rgba(0,0,0,0.86);
  position: relative;
  z-index: 1;
}

.heroInput::placeholder{
  color: rgba(0,0,0,0.36);
}

/* ── Criteria summary overlay inside the search bar ── */
.criteriaOverlay {
  display: none;
  position: absolute;
  left: 50px;               /* clear the search icon */
  right: 80px;              /* clear the Search button */
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: auto;
  cursor: text;

  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: left;
}

.heroBtn{
  border:0;
  background:transparent;
  font-size:18px;
  color: rgba(0,0,0,0.46);
  padding: 8px 12px;
  cursor:pointer;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}

.heroBtn:hover{
  background: rgba(0,0,0,0.045);
  color: rgba(0,0,0,0.58);
}

/* --- Criteria --- */
.criteriaWrap{
  margin-top: 20px;
}

.criteriaRow{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* The JS populates #inputs with .field boxes; we restyle them into pills. */
.criteriaGrid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* Make criteria pills glass too (same size/shape kept) */
.field{
  position:relative;
  display:flex;
  align-items:center;
  gap: 10px;

  height: 38px;
  padding: 0 14px;

  /* less blocky, more “pill” */
  border-radius: 999px;

  /* glass surface */
  background: rgba(248,248,248,0.78);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);

  /* clean rim */
  border: 1px solid rgba(255,255,255,0.72);

  /* Apple-style: specular + contact shadow, no harsh outline */
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.90),
    inset 0 -1px 1px rgba(0,0,0,0.06),
    0 0 0 1px rgba(255,255,255,0.86),
    0 1px 2px rgba(0,0,0,0.035);

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.field.active{
  border-color: rgba(255,255,255,0.88);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.94),
    inset 0 -1px 1px rgba(0,0,0,0.07),
    0 0 0 1px rgba(255,255,255,0.98),
    0 2px 6px rgba(0,0,0,0.06);
}

.field:focus-within{
  background: rgba(244,244,244,0.86);
  border-color: rgba(255,255,255,0.90);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.96),
    inset 0 -1px 1px rgba(0,0,0,0.075),
    0 0 0 1px rgba(255,255,255,0.98),
    0 2px 8px rgba(0,0,0,0.07);
}

.field.hidden{display:none}

.label{
  font-size: 12px;
  color: rgba(0,0,0,0.62);
  font-weight: 700;
  letter-spacing: .15px;
  white-space: nowrap;
}

.input{
  width: 120px;
  max-width: 140px;
  min-width: 70px;
  border:0;
  outline:none;
  background: transparent;
  color: rgba(0,0,0,0.86);
  padding: 2px 0;
  font-size: 13px;
}

.input::placeholder{color: rgba(0,0,0,0.32)}

.pillClose{
  border:0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  cursor:pointer;

  background: rgba(0,0,0,0.045);
  color: rgba(0,0,0,0.62);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 1px 2px rgba(0,0,0,0.035);

  font-size: 18px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;

  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}


.pillClose:hover{
  background: rgba(0,0,0,0.065);
  color: rgba(0,0,0,0.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 2px 4px rgba(0,0,0,0.05);
}


.addWrap{position:relative;}
.pill.add{
  all: unset;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  color: rgba(0,0,0,0.40);
  padding: 6px 10px;
  border-radius: 999px;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}

.pill.add:hover{
  color: rgba(0,0,0,0.62);
  background: rgba(0,0,0,0.04);
  transform: scale(1.05);
}

/* Criteria menu: convert to glass */
.critMenu{
  position:absolute;
  top: 48px;
  right: 0;
  min-width: 220px;

  background: rgba(250,250,250,0.78);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);

  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 14px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 10px 30px rgba(0,0,0,0.10);

  padding: 8px;
  display:none;
  z-index: 50;
}

.critMenu.open{display:block}

.critItem{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding: 10px 10px;
  border-radius: 10px;
  cursor:pointer;
  font-size: 13px;
  color: rgba(0,0,0,0.82);
}

.critItem:hover{background: rgba(0,0,0,0.045)}
.critEmpty{padding: 10px 10px; font-size: 13px; color: rgba(0,0,0,0.50)}

.socLine{
  margin: 14px auto 0;
  width: min(980px, 92vw);
  color: rgba(0,0,0,0.52);
  font-size: 14px;
}

.metaRow{
  margin: 10px auto 0;
  width: min(980px, 92vw);
  display:flex;
  gap: 12px;
  justify-content:center;
  align-items:center;
}

.linkBtn{
  border:0;
  background: transparent;
  color: rgba(0,0,0,0.50);
  cursor:pointer;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}

.linkBtn:hover{
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.62);
}

.meta{font-size: 13px; color: rgba(0,0,0,0.52)}

.hint{
  margin: 8px auto 0;
  width: min(980px, 92vw);
  font-size: 12px;
  color: rgba(0,0,0,0.46);
}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

/* Suggestions dropdown: make it glass (no dark block) */
.sug{
  position:absolute;
  left: 10px;
  right: 10px;
  top: calc(100% + 8px);

  background: rgba(250,250,250,0.78);
  backdrop-filter: blur(24px) saturate(1.10);
  -webkit-backdrop-filter: blur(24px) saturate(1.10);

  border: 1px solid rgba(255,255,255,0.70);
  border-radius: 14px;
  overflow:hidden;
  display:none;
  z-index: 40;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 14px 34px rgba(0,0,0,0.12);
}

.sug button{
  display:block;
  width:100%;
  text-align:left;
  padding: 10px 12px;
  border:0;
  background:transparent;
  color: rgba(0,0,0,0.82);
  cursor:pointer;
  font-size: 13px;
}

.sug button:hover{background: rgba(0,0,0,0.04)}
.sug .empty{padding: 10px 12px; color: rgba(0,0,0,0.50); font-size: 13px}

/* Results / browse panels */
.panel{
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(18px) saturate(1.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);

  border:1px solid rgba(255,255,255,0.70);
  border-radius: 16px;
  padding: 14px;
  margin: 14px auto;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 12px 28px rgba(0,0,0,0.08);

  max-width: 980px;
}

.row{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.between{justify-content:space-between}
.sectionTitle{font-size:13px;font-weight:750;color: rgba(0,0,0,0.86)}
.small{font-size:12px;color: rgba(0,0,0,0.52)}

.btn{
  padding:10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
  color: rgba(0,0,0,0.86);
  cursor:pointer;
  transition: background .15s ease, box-shadow .15s ease;
}

.btn:hover{
  background: rgba(255,255,255,0.90);
  box-shadow: 0 8px 16px rgba(12,18,30,.06);
}

.btn.tiny{padding:7px 10px;border-radius:10px;font-size:12px}

.mini{
  width:70px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.82);
  color: rgba(0,0,0,0.86);
  outline:none;
}

.results, .artists{
  border-top:1px solid rgba(0,0,0,0.08);
  margin-top:10px;
  padding-top:10px;
}

.card{
  border:1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 0;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
}

.card .name{font-size:14px;font-weight:800;color: rgba(0,0,0,0.88)}
.card .code{font-size:12px;color: rgba(0,0,0,0.52);margin-top:2px}
.card .decoded{margin-top:8px;font-size:12px;color: rgba(0,0,0,0.86)}
.kv{margin-top:6px}
.k{color: rgba(0,0,0,0.52);text-transform:lowercase}
.v{color: rgba(0,0,0,0.86)}

.foot{max-width: 980px; margin: 10px auto 0; padding: 0 6px}

/* Results page layout helpers */
.topBar{
  max-width: 980px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  gap: 16px;
  padding-top: 10px;
}

.logoSm{width:160px;height:auto;display:block}
.logoLink{display:inline-flex;align-items:center}
.resultsSearch{flex:1}
.resultsBar{width: 100%}
.pager{max-width:980px;margin: 18px auto 0; display:flex; justify-content:center}
.pagerInner{display:flex; gap: 10px; align-items:center}

/* ── Quick links (Top by Sales / Top by Avg Price) ── */
.quickLinks {
  margin-top: 14px;
  display: flex;
  gap: 6px;
  justify-content: center;
}

.quickLink {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0,0,0,0.52);
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.09);
  background: rgba(255,255,255,0.70);
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.quickLink:hover {
  color: rgba(0,0,0,0.80);
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Fallback if blur isn't supported */
@supports not ((backdrop-filter: blur(1px))) {
  .searchBar,
  .field,
  .critMenu,
  .sug,
  .panel,
  .btn,
  .card{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(245,245,245,1);
  }
}
/* ── SOC Mode: animated spinning gradient border ─────────────────────────── */

@property --soc-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes soc-spin {
  to { --soc-angle: 360deg; }
}

.searchBar.socMode {
  /* slightly warmer background to hint at a different mode */
  background: rgba(252, 251, 255, 0.88);
}

.searchBar.socMode::before {
  background: conic-gradient(
    from var(--soc-angle),
    rgba(104, 209,  93, 0.85),
    rgba(255, 195,  74, 0.85),
    rgba(255, 122,  74, 0.85),
    rgba(214,  84, 140, 0.85),
    rgba( 77, 124, 255, 0.85),
    rgba(104, 209,  93, 0.85)
  );
  animation: soc-spin 2.4s linear infinite;
  opacity: 1;
  padding: 1.5px;   /* slightly thicker ring in SOC mode */
}

/* Fallback for browsers without @property (Firefox < 128, Safari < 16.4) */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .searchBar.socMode::before {
    background: linear-gradient(90deg,
      rgba(104, 209,  93, 0.85),
      rgba(255, 195,  74, 0.85),
      rgba(255, 122,  74, 0.85),
      rgba(214,  84, 140, 0.85),
      rgba( 77, 124, 255, 0.85)
    );
    opacity: 1;
  }
}

/* ── Criteria overlay: selected state (after Ctrl+A) ────────────────────── */

.criteriaOverlay.socSelected {
  background: rgba(77, 124, 255, 0.14);
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.78);
  outline: none;
}

/* ── Clickable criteria segments in the overlay ─────────────────────────── */
.criteriaSegment {
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 3px;
  transition: background 0.12s ease, color 0.12s ease;
}

.criteriaSegment:hover {
  background: rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.82);
}

.criteriaSep {
  pointer-events: none;
  color: rgba(0, 0, 0, 0.35);
}

/* Ctrl+A selected — whole summary highlighted */
.socSelectedSpan {
  background: rgba(77, 124, 255, 0.14);
  border-radius: 4px;
  padding: 1px 4px;
  color: rgba(0, 0, 0, 0.78);
}

/* ── SOC edit input (appears when clicking search bar in SOC mode) ────────── */
.socEditInput {
  position: absolute;
  left: 50px;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.78);
  padding: 0;
  width: calc(100% - 130px);
  text-align: left;
}

/* ── Copyright footer ─────────────────────────────────────── */
.beetle-footer {
  text-align: center;
  width: 100%;
  padding: 12px 16px 20px;
  font-size: 12px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  color: rgba(0, 0, 0, 0.35);
  letter-spacing: 0.02em;
}