/* ============================================================
   SISTEM SUNYI - SEARCH UI
   GODMODE EDITORIAL PREMIUM SKIN v1.0 FINAL
   Consolidated CSS.
   Replace old Search CSS with this block.
============================================================ */


/* ============================================================
   01. DESIGN SYSTEM
============================================================ */

:root {
  --ss-font-main: "Lato", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ss-font-title: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --ss-radius-sm: 999px;
  --ss-radius-md: 16px;
  --ss-radius-lg: 28px;
}

.sunyi-search-overlay {
  --ss-search-bg: rgba(255,255,255,.82);
  --ss-search-card: rgba(255,250,241,.96);
  --ss-search-card-2: rgba(255,255,255,.74);

  --ss-search-surface: rgba(255,255,255,.58);
  --ss-search-surface-2: rgba(255,255,255,.78);
  --ss-search-surface-3: rgba(255,255,255,.46);

  --ss-search-text: #263244;
  --ss-search-strong: #101827;
  --ss-search-muted: rgba(38,50,68,.72);
  --ss-search-soft: rgba(38,50,68,.52);
  --ss-search-faint: rgba(38,50,68,.36);

  --ss-search-line: rgba(38,50,68,.115);
  --ss-search-line-soft: rgba(38,50,68,.072);
  --ss-search-line-gold: rgba(154,111,53,.30);

  --ss-search-gold: #9a6f35;
  --ss-search-gold-2: #765322;
  --ss-search-blue: #416f98;

  --ss-search-gold-soft: rgba(154,111,53,.100);
  --ss-search-blue-soft: rgba(65,111,152,.068);

  --ss-search-shadow: 0 34px 100px rgba(25,34,48,.16);
  --ss-search-shadow-soft: 0 16px 42px rgba(25,34,48,.09);

  --ss-highlight: rgba(245,214,111,.46);

  font-family: var(--ss-font-main);
  color: var(--ss-search-text);
}

.sunyi-search-overlay[data-theme="dark"] {
  --ss-search-bg: rgba(3,7,12,.91);
  --ss-search-card: rgba(7,15,24,.96);
  --ss-search-card-2: rgba(13,26,40,.78);

  --ss-search-surface: rgba(255,255,255,.058);
  --ss-search-surface-2: rgba(255,255,255,.086);
  --ss-search-surface-3: rgba(255,255,255,.040);

  --ss-search-text: rgba(244,239,230,.90);
  --ss-search-strong: #fff3dc;
  --ss-search-muted: rgba(244,239,230,.72);
  --ss-search-soft: rgba(244,239,230,.52);
  --ss-search-faint: rgba(244,239,230,.36);

  --ss-search-line: rgba(255,255,255,.112);
  --ss-search-line-soft: rgba(255,255,255,.074);
  --ss-search-line-gold: rgba(202,167,102,.34);

  --ss-search-gold: #caa766;
  --ss-search-gold-2: #e8cc83;
  --ss-search-blue: #8fb3cf;

  --ss-search-gold-soft: rgba(202,167,102,.125);
  --ss-search-blue-soft: rgba(143,179,207,.095);

  --ss-search-shadow: 0 38px 120px rgba(0,0,0,.58);
  --ss-search-shadow-soft: 0 18px 52px rgba(0,0,0,.32);

  --ss-highlight: rgba(232,204,131,.30);

  color: var(--ss-search-text);
}


/* ============================================================
   02. ROOT AND OVERLAY
============================================================ */

.sunyi-search-overlay,
.sunyi-search-overlay * {
  box-sizing: border-box;
  text-shadow: none !important;
}

.sunyi-search-overlay a,
.sunyi-search-overlay a:link,
.sunyi-search-overlay a:visited,
.sunyi-search-overlay a:hover,
.sunyi-search-overlay a:active {
  text-decoration: none !important;
  box-shadow: none !important;
}

.sunyi-search-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at 50% 0%, rgba(154,111,53,.10), transparent 35%),
    radial-gradient(circle at 13% 12%, rgba(65,111,152,.080), transparent 36%),
    radial-gradient(circle at 88% 92%, rgba(154,111,53,.060), transparent 40%),
    var(--ss-search-bg);

  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);

  z-index: 999999;
  opacity: 0;
  transition: opacity .24s ease;
}

.sunyi-search-overlay[data-theme="dark"] {
  background:
    radial-gradient(circle at 50% 0%, rgba(202,167,102,.17), transparent 35%),
    radial-gradient(circle at 13% 12%, rgba(143,179,207,.12), transparent 36%),
    radial-gradient(circle at 88% 92%, rgba(202,167,102,.10), transparent 40%),
    var(--ss-search-bg);

  backdrop-filter: blur(20px) saturate(1.10);
  -webkit-backdrop-filter: blur(20px) saturate(1.10);
}

.sunyi-search-overlay.show {
  display: flex;
  opacity: 1;
}

html.sunyi-search-open,
body.sunyi-search-open {
  overflow: hidden;
}


/* ============================================================
   03. DIALOG PANEL
============================================================ */

.sunyi-search-dialog {
  position: relative;

  width: min(980px, 96vw);
  max-height: 90vh;

  display: flex;
  flex-direction: column;

  padding: 22px 24px 20px;

  border: 1px solid var(--ss-search-line-gold);
  border-radius: 30px;

  background:
    radial-gradient(circle at 92% 0%, var(--ss-search-gold-soft), transparent 34%),
    radial-gradient(circle at 0% 100%, var(--ss-search-blue-soft), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.50)),
    var(--ss-search-card);

  box-shadow: var(--ss-search-shadow);

  overflow: hidden;
  z-index: 9999999;

  font-family: var(--ss-font-main);
  color: var(--ss-search-text);
}

.sunyi-search-overlay[data-theme="dark"] .sunyi-search-dialog {
  background:
    radial-gradient(circle at 92% 0%, var(--ss-search-gold-soft), transparent 34%),
    radial-gradient(circle at 0% 100%, var(--ss-search-blue-soft), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.070), rgba(255,255,255,.024)),
    var(--ss-search-card);

  box-shadow:
    var(--ss-search-shadow),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.sunyi-search-dialog::before {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ss-search-gold), transparent);
  opacity: .56;
  pointer-events: none;
  z-index: 2;
}

.sunyi-search-dialog::after {
  content: "";
  position: absolute;
  left: 0;
  top: 32px;
  bottom: 32px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, var(--ss-search-gold), transparent);
  opacity: .58;
  pointer-events: none;
  z-index: 2;
}


/* ============================================================
   04. HEADER
============================================================ */

.sunyi-search-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: 20px;
  margin-bottom: 13px;
}

.sunyi-search-title {
  font-family: var(--ss-font-title);
  font-size: clamp(22px, 2.3vw, 29px);
  line-height: 1.10;
  font-weight: 560;
  letter-spacing: -.045em;
  color: var(--ss-search-strong);
  margin: 0 0 4px;
}

.sunyi-search-help {
  color: var(--ss-search-soft);
  font-size: 11.5px;
  line-height: 1.42;
}

.sunyi-search-mode-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

.sunyi-search-modes {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 4px;

  border: 1px solid var(--ss-search-line-soft);
  border-radius: 999px;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.060), transparent 64%),
    var(--ss-search-surface);

  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.sunyi-search-modes::-webkit-scrollbar {
  display: none;
}

.sunyi-search-mode-btn,
.sunyi-search-theme-btn,
.sunyi-search-close-btn {
  border: 1px solid transparent;
  background: transparent;

  color: var(--ss-search-muted);

  border-radius: 999px;
  cursor: pointer;

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

.sunyi-search-mode-btn {
  flex: 0 0 auto;

  padding: 6px 10px;

  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: .020em;
  line-height: 1;
}

.sunyi-search-mode-btn:hover {
  color: var(--ss-search-strong);
  background: var(--ss-search-gold-soft);
}

.sunyi-search-mode-btn.active {
  color: #17110a;
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(135deg, #d4b36c, #f0d998);
  box-shadow: 0 12px 28px rgba(154,111,53,.14);
}

.sunyi-search-overlay[data-theme="dark"] .sunyi-search-mode-btn.active {
  color: #17110a;
  background: linear-gradient(135deg, #d4b36c, #f0d998);
}

.sunyi-search-theme-btn,
.sunyi-search-close-btn {
  flex: 0 0 auto;

  width: 31px;
  height: 31px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-color: var(--ss-search-line);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.060), transparent 64%),
    var(--ss-search-surface);

  font-size: 15px;
  line-height: 1;
}

.sunyi-search-close-btn {
  font-size: 20px;
}

.sunyi-search-theme-btn:hover,
.sunyi-search-close-btn:hover {
  border-color: var(--ss-search-line-gold);
  background:
    radial-gradient(circle at 50% 0%, var(--ss-search-gold-soft), transparent 64%),
    var(--ss-search-surface-2);

  color: var(--ss-search-strong);
  transform: translateY(-1px);
}


/* ============================================================
   05. INPUT
============================================================ */

.sunyi-search-input-wrap {
  margin-bottom: 10px;
}

.sunyi-search-input {
  width: 100%;

  padding: 12px 16px;

  border: 1px solid var(--ss-search-line);
  border-radius: 999px;

  background:
    radial-gradient(circle at 94% 0%, rgba(255,255,255,.055), transparent 34%),
    var(--ss-search-surface-2);

  color: var(--ss-search-strong);

  font-family: var(--ss-font-main);
  font-size: 14px;
  line-height: 1.3;

  outline: none;
  box-shadow: none;

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

.sunyi-search-input::placeholder {
  color: var(--ss-search-soft);
}

.sunyi-search-input:focus {
  border-color: var(--ss-search-line-gold);
  box-shadow: 0 0 0 3px rgba(202,167,102,.12);
  background:
    radial-gradient(circle at 94% 0%, var(--ss-search-gold-soft), transparent 34%),
    var(--ss-search-surface-2);
}


/* ============================================================
   06. CHIPS AND ORBIT
============================================================ */

.sunyi-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
}

.sunyi-search-chip,
.sunyi-search-orbit-btn,
.sunyi-search-orbit-buttons .sunyi-orbit-mini-popup {
  border: 1px solid var(--ss-search-line-soft);
  border-radius: 999px;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.050), transparent 64%),
    var(--ss-search-surface);

  color: var(--ss-search-muted);

  padding: 5px 10px;

  font-family: var(--ss-font-main);
  font-size: 11.5px;
  font-weight: 760;
  line-height: 1.2;

  cursor: pointer;

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

.sunyi-search-chip:hover,
.sunyi-search-chip.active,
.sunyi-search-orbit-btn:hover,
.sunyi-search-orbit-btn.active,
.sunyi-search-orbit-buttons .sunyi-orbit-mini-popup:hover,
.sunyi-search-orbit-buttons .sunyi-orbit-mini-popup.active {
  border-color: var(--ss-search-line-gold);
  background:
    radial-gradient(circle at 50% 0%, var(--ss-search-gold-soft), transparent 64%),
    var(--ss-search-surface-2);

  color: var(--ss-search-strong);
  transform: translateY(-1px);
}

.sunyi-search-orbit-filter {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 8px;
  min-width: 0;
}

.sunyi-search-orbit-label {
  flex: 0 0 auto;
  color: var(--ss-search-soft);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .05em;
}

.sunyi-search-orbit-buttons {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  min-width: 0;

  padding: 4px;

  border: 1px solid var(--ss-search-line-soft);
  border-radius: 999px;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.050), transparent 64%),
    var(--ss-search-surface);

  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.sunyi-search-orbit-buttons::-webkit-scrollbar {
  display: none;
}

.sunyi-search-orbit-buttons .sunyi-orbit-mini-popup {
  flex: 0 0 auto;
  margin: 0;
  opacity: 1;
  vertical-align: middle;
}


/* ============================================================
   07. GEMA AND RITME PANELS
============================================================ */

.sunyi-search-gema-panel,
.sunyi-search-ritme-panel {
  margin-top: 2px;
}

.sunyi-gema-box,
.sunyi-ritme-box {
  position: relative;

  border: 1px solid var(--ss-search-line-soft);
  border-radius: 18px;

  background:
    radial-gradient(circle at 94% 0%, var(--ss-search-gold-soft), transparent 34%),
    radial-gradient(circle at 0% 100%, var(--ss-search-blue-soft), transparent 38%),
    var(--ss-search-surface);

  color: var(--ss-search-muted);

  padding: 10px 12px 10px 14px;

  overflow: hidden;
}

.sunyi-gema-box::before,
.sunyi-ritme-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, var(--ss-search-gold), transparent);
  opacity: .55;
}

.sunyi-gema-title,
.sunyi-ritme-title {
  color: var(--ss-search-gold);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.sunyi-gema-body,
.sunyi-ritme-body {
  color: var(--ss-search-muted);
  font-size: 12.4px;
  line-height: 1.55;
}

.sunyi-ritme-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  align-items: center;
  margin-top: 7px;
}

.sunyi-ritme-title,
.sunyi-ritme-body {
  grid-column: 1;
}

.sunyi-ritme-start-btn {
  grid-column: 2;
  grid-row: 1 / span 2;

  border: 1px solid var(--ss-search-line-gold);
  border-radius: 999px;

  background:
    radial-gradient(circle at 50% 0%, var(--ss-search-gold-soft), transparent 64%),
    var(--ss-search-surface-2);

  color: var(--ss-search-strong);

  padding: 6px 10px;

  font-family: var(--ss-font-main);
  font-size: 11px;
  font-weight: 850;

  cursor: pointer;

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

.sunyi-ritme-start-btn:hover {
  color: #17110a;
  background: linear-gradient(135deg, #d4b36c, #f0d998);
  transform: translateY(-1px);
}


/* ============================================================
   08. STATUS AND BODY
============================================================ */

.sunyi-search-status-row {
  min-height: 18px;
  margin-top: 6px;

  color: var(--ss-search-soft);
  font-size: 11.5px;
  line-height: 1.4;
}

.sunyi-search-loading,
.sunyi-search-empty {
  color: var(--ss-search-soft);
}

.sunyi-search-empty {
  font-style: italic;
}

.sunyi-search-body {
  flex: 1;
  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  margin-top: 4px;
  padding-right: 4px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  scrollbar-width: thin;
  scrollbar-color: rgba(154,111,53,.32) transparent;
}

.sunyi-search-overlay[data-theme="dark"] .sunyi-search-body {
  scrollbar-color: rgba(202,167,102,.36) transparent;
}

.sunyi-search-body::-webkit-scrollbar {
  width: 7px;
}

.sunyi-search-body::-webkit-scrollbar-track {
  background: transparent;
}

.sunyi-search-body::-webkit-scrollbar-thumb {
  background: rgba(154,111,53,.30);
  border-radius: 999px;
}

.sunyi-search-overlay[data-theme="dark"] .sunyi-search-body::-webkit-scrollbar-thumb {
  background: rgba(202,167,102,.36);
}

.sunyi-search-hybrid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sunyi-search-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* ============================================================
   09. HYBRID BLOCKS
============================================================ */

.sunyi-search-overlay .ss-ambience-line {
  display: none !important;
}

.sunyi-search-overlay .ss-block {
  position: relative;

  margin: 0 !important;
  padding: 0 0 6px;

  overflow-x: auto;
  overflow-y: hidden;

  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: rgba(154,111,53,.28) transparent;
}

.sunyi-search-overlay[data-theme="dark"] .ss-block {
  scrollbar-color: rgba(202,167,102,.34) transparent;
}

.sunyi-search-overlay .ss-block::-webkit-scrollbar {
  height: 5px;
}

.sunyi-search-overlay .ss-block::-webkit-scrollbar-track {
  background: transparent;
}

.sunyi-search-overlay .ss-block::-webkit-scrollbar-thumb {
  background: rgba(154,111,53,.28);
  border-radius: 999px;
}

.sunyi-search-overlay[data-theme="dark"] .ss-block::-webkit-scrollbar-thumb {
  background: rgba(202,167,102,.34);
}

.sunyi-search-overlay .ss-block-title {
  display: block;

  margin: 2px 0 7px;

  color: var(--ss-search-gold);

  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;

  white-space: normal;
}

.sunyi-search-overlay .ss-list,
.sunyi-search-overlay .ss-article-grid {
  display: flex;
  gap: 9px;

  min-width: 0;
  white-space: nowrap;
}

.sunyi-search-overlay .ss-line,
.sunyi-search-overlay .ss-term-btn,
.sunyi-search-overlay .ss-art-card {
  flex: 0 0 auto;
  display: inline-flex;
  vertical-align: top;
  white-space: normal;

  border: 1px solid var(--ss-search-line-soft);
  border-radius: 16px;

  background:
    radial-gradient(circle at 94% 0%, rgba(255,255,255,.050), transparent 35%),
    var(--ss-search-surface);

  color: var(--ss-search-muted);

  box-shadow: none;

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

.sunyi-search-overlay .ss-line:hover,
.sunyi-search-overlay .ss-term-btn:hover,
.sunyi-search-overlay .ss-art-card:hover {
  border-color: var(--ss-search-line-gold);
  background:
    radial-gradient(circle at 94% 0%, var(--ss-search-gold-soft), transparent 36%),
    var(--ss-search-surface-2);

  color: var(--ss-search-strong);

  box-shadow: var(--ss-search-shadow-soft);
  transform: translateY(-1px);
}


/* ============================================================
   10. HYBRID INTI AND KBDS LINES
============================================================ */

.sunyi-search-overlay .ss-inti-block .ss-line,
.sunyi-search-overlay .ss-istilah-block .ss-line {
  width: 218px;
  min-height: 66px;

  flex-direction: column;
  justify-content: center;

  padding: 10px 11px;
}

.sunyi-search-overlay .ss-kbds-line {
  width: 190px;
  min-height: 52px;
}

.sunyi-search-overlay .ss-line-title {
  display: block;

  color: var(--ss-search-strong);

  font-size: 12.8px;
  font-weight: 800;
  line-height: 1.35;

  margin: 0 0 4px;
}

.sunyi-search-overlay .ss-line-group {
  display: block;

  color: var(--ss-search-gold);

  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}


/* ============================================================
   11. HYBRID TERMS
============================================================ */

.sunyi-search-overlay .ss-istilah-block .ss-term-btn {
  max-width: 240px;
  min-height: 54px;

  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  padding: 10px 12px;

  font-family: var(--ss-font-main);
  cursor: pointer;
}

.sunyi-search-overlay .ss-term-name {
  display: block;

  color: var(--ss-search-strong);

  font-size: 12.6px;
  font-weight: 800;
  line-height: 1.35;
}

.sunyi-search-overlay .ss-term-sec {
  display: block;

  color: var(--ss-search-gold);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.3;
  margin-top: 3px;
}


/* ============================================================
   12. HYBRID ARTICLE CARDS
============================================================ */

.sunyi-search-overlay .ss-artikel-block .ss-art-card {
  width: 255px;
  min-height: 88px;

  align-items: flex-start;
  gap: 9px;

  padding: 9px;

  overflow: hidden;
}

.sunyi-search-overlay .ss-art-thumb {
  flex: 0 0 62px;

  width: 62px;
  height: 62px;

  margin: 0;

  border-radius: 13px;
  overflow: hidden;

  background: rgba(38,50,68,.10);
  box-shadow: 0 12px 28px rgba(25,34,48,.13);
}

.sunyi-search-overlay[data-theme="dark"] .ss-art-thumb {
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
}

.sunyi-search-overlay .ss-art-thumb img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;

  border-radius: inherit;
}

.sunyi-search-overlay .ss-art-meta {
  flex: 1;
  min-width: 0;
}

.sunyi-search-overlay .ss-art-title {
  display: block;

  color: var(--ss-search-strong);

  font-size: 12.5px;
  font-weight: 820;
  line-height: 1.33;

  margin: 1px 0 0;
}

.sunyi-search-overlay .ss-art-excerpt {
  display: none !important;
}


/* ============================================================
   13. STANDARD SEARCH RESULTS
============================================================ */

.sunyi-search-item {
  position: relative;

  padding: 0;
  border-bottom: 0;
}

.sunyi-search-item-link {
  display: block;

  border: 1px solid var(--ss-search-line-soft);
  border-radius: 18px;

  background:
    radial-gradient(circle at 94% 0%, rgba(255,255,255,.050), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.66), rgba(255,255,255,.42)),
    var(--ss-search-surface);

  color: var(--ss-search-muted);

  padding: 12px 13px 11px;

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

.sunyi-search-overlay[data-theme="dark"] .sunyi-search-item-link {
  background:
    radial-gradient(circle at 94% 0%, rgba(255,255,255,.050), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.020)),
    var(--ss-search-surface);
}

.sunyi-search-item-link:hover {
  border-color: var(--ss-search-line-gold);
  background:
    radial-gradient(circle at 94% 0%, var(--ss-search-gold-soft), transparent 36%),
    var(--ss-search-surface-2);

  color: var(--ss-search-strong);

  box-shadow: var(--ss-search-shadow-soft);
  transform: translateY(-1px);
}

.sunyi-search-item-title {
  color: var(--ss-search-strong);

  font-size: 14.2px;
  font-weight: 850;
  line-height: 1.38;

  margin: 0 0 4px !important;
}

.sunyi-search-item-subtitle {
  color: var(--ss-search-muted);

  font-size: 12.4px;
  line-height: 1.45;

  margin: 0 0 4px;
}

.sunyi-search-item-excerpt {
  color: var(--ss-search-muted);

  font-size: 12.2px;
  line-height: 1.55;

  margin: 0 0 5px !important;
}

.sunyi-search-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;

  margin-top: 6px;
}

.sunyi-search-item-type,
.sunyi-search-item-orbit {
  display: inline-flex;
  align-items: center;

  border: 1px solid var(--ss-search-line-soft);
  border-radius: 999px;

  background: var(--ss-search-surface);

  color: var(--ss-search-gold);

  padding: 3px 8px;

  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.sunyi-search-hl {
  background: var(--ss-highlight);
  color: inherit;
  border-radius: 4px;
  padding: 0 2px;
}


/* ============================================================
   14. POPUP ORBIT Z-INDEX SUPPORT
============================================================ */

#sunyi-popup.sunyi-popup-overlay {
  z-index: 9999999 !important;
}


/* ============================================================
   15. MOBILE FULLSCREEN
============================================================ */

@media (max-width: 720px) {
  .sunyi-search-overlay {
    align-items: stretch;
    justify-content: stretch;
  }

  .sunyi-search-dialog {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;

    border-radius: 0;
    border-left: 0;
    border-right: 0;

    padding: 14px 13px 12px;

    box-shadow: none;
  }

  .sunyi-search-dialog::before {
    left: 24px;
    right: 24px;
  }

  .sunyi-search-dialog::after {
    top: 26px;
    bottom: 26px;
    opacity: .42;
  }

  .sunyi-search-header {
    flex-direction: column;
    align-items: stretch;
    row-gap: 8px;
    margin-bottom: 9px;
  }

  .sunyi-search-title {
    font-size: 21px;
    margin-bottom: 1px;
  }

  .sunyi-search-help {
    font-size: 10.5px;
  }

  .sunyi-search-mode-group {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    gap: 6px;
  }

  .sunyi-search-modes {
    flex: 1 1 auto;
    min-width: 0;
    gap: 3px;
    padding: 3px;
  }

  .sunyi-search-mode-btn {
    padding: 5px 8px;
    font-size: 10.5px;
  }

  .sunyi-search-theme-btn,
  .sunyi-search-close-btn {
    width: 29px;
    height: 29px;
  }

  .sunyi-search-input-wrap {
    margin-bottom: 8px;
  }

  .sunyi-search-input {
    padding: 10px 13px;
    font-size: 13.2px;
  }

  .sunyi-search-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    margin-bottom: 7px;
    scrollbar-width: none;
  }

  .sunyi-search-chips::-webkit-scrollbar {
    display: none;
  }

  .sunyi-search-chip {
    flex: 0 0 auto;
    padding: 5px 9px;
    font-size: 10.5px;
  }

  .sunyi-search-orbit-filter {
    margin-bottom: 7px;
  }

  .sunyi-search-orbit-label {
    display: none;
  }

  .sunyi-search-orbit-buttons {
    width: 100%;
    padding: 3px;
    gap: 4px;
  }

  .sunyi-search-orbit-buttons .sunyi-orbit-mini-popup {
    padding: 5px 9px;
    font-size: 10.5px;
  }

  .sunyi-gema-box,
  .sunyi-ritme-box {
    border-radius: 16px;
    padding: 8px 10px 8px 12px;
  }

  .sunyi-gema-title,
  .sunyi-ritme-title {
    font-size: 9.7px;
    margin-bottom: 3px;
  }

  .sunyi-gema-body,
  .sunyi-ritme-body {
    font-size: 11.5px;
    line-height: 1.45;
  }

  .sunyi-ritme-box {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .sunyi-ritme-title,
  .sunyi-ritme-body,
  .sunyi-ritme-start-btn {
    grid-column: auto;
    grid-row: auto;
  }

  .sunyi-ritme-start-btn {
    justify-self: start;
    padding: 5px 9px;
    font-size: 10.5px;
    margin-top: 2px;
  }

  .sunyi-search-status-row {
    min-height: 15px;
    margin-top: 4px;
    font-size: 10.8px;
  }

  .sunyi-search-body {
    gap: 9px;
    margin-top: 3px;
    padding-right: 2px;
  }

  .sunyi-search-hybrid {
    gap: 8px;
  }

  .sunyi-search-overlay .ss-block-title {
    font-size: 9.8px;
    margin-bottom: 6px;
  }

  .sunyi-search-overlay .ss-list,
  .sunyi-search-overlay .ss-article-grid {
    gap: 7px;
  }

  .sunyi-search-overlay .ss-inti-block .ss-line,
  .sunyi-search-overlay .ss-istilah-block .ss-line {
    width: 190px;
    min-height: 58px;
    border-radius: 14px;
    padding: 9px 10px;
  }

  .sunyi-search-overlay .ss-kbds-line {
    width: 172px;
    min-height: 50px;
  }

  .sunyi-search-overlay .ss-line-title {
    font-size: 11.6px;
    line-height: 1.32;
  }

  .sunyi-search-overlay .ss-line-group {
    font-size: 9.5px;
  }

  .sunyi-search-overlay .ss-istilah-block .ss-term-btn {
    max-width: 210px;
    min-height: 50px;
    border-radius: 14px;
    padding: 9px 10px;
  }

  .sunyi-search-overlay .ss-term-name {
    font-size: 11.5px;
  }

  .sunyi-search-overlay .ss-term-sec {
    font-size: 9.5px;
  }

  .sunyi-search-overlay .ss-artikel-block .ss-art-card {
    width: 222px;
    min-height: 76px;
    border-radius: 15px;
    padding: 8px;
    gap: 8px;
  }

  .sunyi-search-overlay .ss-art-thumb {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    border-radius: 12px;
  }

  .sunyi-search-overlay .ss-art-title {
    font-size: 11.3px;
    line-height: 1.30;
  }

  .sunyi-search-item-link {
    border-radius: 16px;
    padding: 10px 11px 9px;
  }

  .sunyi-search-item-title {
    font-size: 12.7px;
  }

  .sunyi-search-item-subtitle,
  .sunyi-search-item-excerpt {
    font-size: 11.3px;
  }
}


/* ============================================================
   16. EXTRA SMALL MOBILE
============================================================ */

@media (max-width: 390px) {
  .sunyi-search-dialog {
    padding: 12px 11px 10px;
  }

  .sunyi-search-title {
    font-size: 19.5px;
  }

  .sunyi-search-mode-btn {
    padding: 5px 7px;
    font-size: 10px;
  }

  .sunyi-search-theme-btn,
  .sunyi-search-close-btn {
    width: 28px;
    height: 28px;
  }

  .sunyi-search-overlay .ss-inti-block .ss-line,
  .sunyi-search-overlay .ss-istilah-block .ss-line {
    width: 176px;
  }

  .sunyi-search-overlay .ss-artikel-block .ss-art-card {
    width: 206px;
  }
}


/* ============================================================
   17. FOCUS
============================================================ */

.sunyi-search-overlay button:focus-visible,
.sunyi-search-overlay a:focus-visible,
.sunyi-search-overlay input:focus-visible {
  outline: 2px solid var(--ss-search-gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(202,167,102,.16) !important;
}

/* ============================================================
   SISTEM SUNYI - SEARCH UI
   TRUE SKIN-ONLY GODMODE ENHANCEMENT v1.1
   Tempel paling bawah CSS stabil.
   Tidak mengubah layout, spacing, width, height, padding, margin.
============================================================ */


/* ============================================================
   01. TOKEN SKIN BOOST ONLY
============================================================ */

.sunyi-search-overlay {
  --ss-search-bg: rgba(255,255,255,.86);
  --ss-search-card: rgba(255,250,241,.975);
  --ss-search-card-2: rgba(255,255,255,.82);

  --ss-search-surface: rgba(255,255,255,.64);
  --ss-search-surface-2: rgba(255,255,255,.84);
  --ss-search-surface-3: rgba(255,255,255,.54);

  --ss-search-text: #263244;
  --ss-search-strong: #101827;
  --ss-search-muted: rgba(38,50,68,.74);
  --ss-search-soft: rgba(38,50,68,.54);
  --ss-search-faint: rgba(38,50,68,.38);

  --ss-search-line: rgba(38,50,68,.105);
  --ss-search-line-soft: rgba(38,50,68,.070);
  --ss-search-line-gold: rgba(154,111,53,.36);

  --ss-search-gold: #9a6f35;
  --ss-search-gold-2: #73501f;
  --ss-search-blue: #385f84;

  --ss-search-gold-soft: rgba(154,111,53,.118);
  --ss-search-blue-soft: rgba(56,95,132,.078);

  --ss-search-shadow: 0 36px 112px rgba(25,34,48,.18);
  --ss-search-shadow-soft: 0 18px 48px rgba(25,34,48,.11);

  --ss-highlight: rgba(217,177,82,.36);
}

.sunyi-search-overlay[data-theme="dark"] {
  --ss-search-bg: rgba(2,6,11,.94);
  --ss-search-card: rgba(6,14,24,.975);
  --ss-search-card-2: rgba(12,24,38,.88);

  --ss-search-surface: rgba(255,255,255,.062);
  --ss-search-surface-2: rgba(255,255,255,.094);
  --ss-search-surface-3: rgba(255,255,255,.046);

  --ss-search-text: rgba(244,239,230,.90);
  --ss-search-strong: #fff2da;
  --ss-search-muted: rgba(244,239,230,.74);
  --ss-search-soft: rgba(244,239,230,.54);
  --ss-search-faint: rgba(244,239,230,.38);

  --ss-search-line: rgba(255,255,255,.118);
  --ss-search-line-soft: rgba(255,255,255,.076);
  --ss-search-line-gold: rgba(202,167,102,.42);

  --ss-search-gold: #caa766;
  --ss-search-gold-2: #e8cc83;
  --ss-search-blue: #8fb3cf;

  --ss-search-gold-soft: rgba(202,167,102,.145);
  --ss-search-blue-soft: rgba(143,179,207,.105);

  --ss-search-shadow: 0 42px 128px rgba(0,0,0,.64);
  --ss-search-shadow-soft: 0 22px 62px rgba(0,0,0,.38);

  --ss-highlight: rgba(232,204,131,.32);
}


/* ============================================================
   02. OVERLAY ATMOSPHERE ONLY
============================================================ */

.sunyi-search-overlay {
  background:
    radial-gradient(circle at 50% 0%, rgba(154,111,53,.13), transparent 35%),
    radial-gradient(circle at 12% 14%, rgba(56,95,132,.09), transparent 36%),
    radial-gradient(circle at 88% 90%, rgba(154,111,53,.075), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(247,243,235,.84)) !important;

  backdrop-filter: blur(19px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(19px) saturate(1.10) !important;
}

.sunyi-search-overlay[data-theme="dark"] {
  background:
    radial-gradient(circle at 50% 0%, rgba(202,167,102,.22), transparent 35%),
    radial-gradient(circle at 12% 14%, rgba(143,179,207,.14), transparent 36%),
    radial-gradient(circle at 88% 90%, rgba(202,167,102,.12), transparent 40%),
    linear-gradient(180deg, rgba(5,11,18,.97), rgba(1,4,8,.96)) !important;

  backdrop-filter: blur(22px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
}


/* ============================================================
   03. DIALOG SURFACE ONLY
============================================================ */

.sunyi-search-dialog {
  border-color: var(--ss-search-line-gold) !important;

  background:
    radial-gradient(circle at 92% 0%, var(--ss-search-gold-soft), transparent 34%),
    radial-gradient(circle at 0% 100%, var(--ss-search-blue-soft), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.54)),
    var(--ss-search-card) !important;

  box-shadow:
    var(--ss-search-shadow),
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 0 0 1px rgba(255,255,255,.28) !important;
}

.sunyi-search-overlay[data-theme="dark"] .sunyi-search-dialog {
  background:
    radial-gradient(circle at 92% 0%, var(--ss-search-gold-soft), transparent 34%),
    radial-gradient(circle at 0% 100%, var(--ss-search-blue-soft), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    var(--ss-search-card) !important;

  box-shadow:
    var(--ss-search-shadow),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 0 0 1px rgba(255,255,255,.045) !important;
}

.sunyi-search-dialog::before {
  opacity: .72 !important;
}

.sunyi-search-dialog::after {
  opacity: .64 !important;
}


/* ============================================================
   04. HEADER AND CONTROLS SKIN ONLY
============================================================ */

.sunyi-search-title {
  color: var(--ss-search-strong) !important;
}

.sunyi-search-help {
  color: var(--ss-search-soft) !important;
}

.sunyi-search-modes,
.sunyi-search-theme-btn,
.sunyi-search-close-btn {
  border-color: var(--ss-search-line) !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.075), transparent 64%),
    var(--ss-search-surface) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 8px 20px rgba(25,34,48,.040) !important;
}

.sunyi-search-overlay[data-theme="dark"] .sunyi-search-modes,
.sunyi-search-overlay[data-theme="dark"] .sunyi-search-theme-btn,
.sunyi-search-overlay[data-theme="dark"] .sunyi-search-close-btn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 10px 24px rgba(0,0,0,.16) !important;
}

.sunyi-search-mode-btn.active {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.34), transparent 62%),
    linear-gradient(135deg, #caa766, #f1d99a) !important;

  color: #17110a !important;

  box-shadow:
    0 10px 24px rgba(154,111,53,.18),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.sunyi-search-mode-btn:hover,
.sunyi-search-theme-btn:hover,
.sunyi-search-close-btn:hover {
  border-color: var(--ss-search-line-gold) !important;
}


/* ============================================================
   05. INPUT SKIN ONLY
============================================================ */

.sunyi-search-input {
  border-color: var(--ss-search-line) !important;

  background:
    radial-gradient(circle at 94% 0%, rgba(255,255,255,.075), transparent 34%),
    linear-gradient(180deg, var(--ss-search-surface-2), var(--ss-search-surface)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 10px 24px rgba(25,34,48,.055) !important;
}

.sunyi-search-overlay[data-theme="dark"] .sunyi-search-input {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 12px 30px rgba(0,0,0,.20) !important;
}

.sunyi-search-input:focus {
  border-color: var(--ss-search-line-gold) !important;

  box-shadow:
    0 0 0 3px rgba(202,167,102,.14),
    inset 0 1px 0 rgba(255,255,255,.34),
    0 12px 32px rgba(154,111,53,.09) !important;
}


/* ============================================================
   06. CHIP AND ORBIT SKIN ONLY
============================================================ */

.sunyi-search-chip,
.sunyi-search-orbit-btn,
.sunyi-search-orbit-buttons .sunyi-orbit-mini-popup {
  border-color: var(--ss-search-line-soft) !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.060), transparent 64%),
    var(--ss-search-surface) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 16px rgba(25,34,48,.035) !important;
}

.sunyi-search-overlay[data-theme="dark"] .sunyi-search-chip,
.sunyi-search-overlay[data-theme="dark"] .sunyi-search-orbit-btn,
.sunyi-search-overlay[data-theme="dark"] .sunyi-search-orbit-buttons .sunyi-orbit-mini-popup {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.070),
    0 8px 18px rgba(0,0,0,.14) !important;
}

.sunyi-search-chip:hover,
.sunyi-search-chip.active,
.sunyi-search-orbit-btn:hover,
.sunyi-search-orbit-btn.active,
.sunyi-search-orbit-buttons .sunyi-orbit-mini-popup:hover,
.sunyi-search-orbit-buttons .sunyi-orbit-mini-popup.active {
  border-color: var(--ss-search-line-gold) !important;

  background:
    radial-gradient(circle at 50% 0%, var(--ss-search-gold-soft), transparent 64%),
    var(--ss-search-surface-2) !important;
}


/* ============================================================
   07. GEMA AND RITME SKIN ONLY
============================================================ */

.sunyi-gema-box,
.sunyi-ritme-box {
  border-color: var(--ss-search-line-gold) !important;

  background:
    radial-gradient(circle at 96% 0%, var(--ss-search-gold-soft), transparent 34%),
    radial-gradient(circle at 0% 100%, var(--ss-search-blue-soft), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.080), rgba(255,255,255,.030)),
    var(--ss-search-surface) !important;

  box-shadow:
    0 12px 30px rgba(25,34,48,.060),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.sunyi-search-overlay[data-theme="dark"] .sunyi-gema-box,
.sunyi-search-overlay[data-theme="dark"] .sunyi-ritme-box {
  background:
    radial-gradient(circle at 96% 0%, var(--ss-search-gold-soft), transparent 34%),
    radial-gradient(circle at 0% 100%, var(--ss-search-blue-soft), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.064), rgba(255,255,255,.020)),
    var(--ss-search-surface) !important;

  box-shadow:
    0 14px 36px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.075) !important;
}

.sunyi-gema-title,
.sunyi-ritme-title {
  color: var(--ss-search-gold) !important;
}

.sunyi-gema-body,
.sunyi-ritme-body {
  color: var(--ss-search-muted) !important;
}

.sunyi-ritme-start-btn {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.24), transparent 62%),
    linear-gradient(135deg, #caa766, #f0d998) !important;

  color: #17110a !important;

  box-shadow:
    0 10px 24px rgba(154,111,53,.18),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
}


/* ============================================================
   08. HYBRID CARD SURFACE ONLY
============================================================ */

.sunyi-search-overlay .ss-line,
.sunyi-search-overlay .ss-term-btn,
.sunyi-search-overlay .ss-art-card,
.sunyi-search-item-link {
  border-color: var(--ss-search-line-soft) !important;

  background:
    radial-gradient(circle at 94% 0%, rgba(255,255,255,.060), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.44)),
    var(--ss-search-surface) !important;

  box-shadow: 0 12px 30px rgba(25,34,48,.070) !important;
}

.sunyi-search-overlay[data-theme="dark"] .ss-line,
.sunyi-search-overlay[data-theme="dark"] .ss-term-btn,
.sunyi-search-overlay[data-theme="dark"] .ss-art-card,
.sunyi-search-overlay[data-theme="dark"] .sunyi-search-item-link {
  background:
    radial-gradient(circle at 94% 0%, rgba(255,255,255,.060), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.070), rgba(255,255,255,.022)),
    var(--ss-search-surface) !important;

  box-shadow: 0 15px 38px rgba(0,0,0,.24) !important;
}

.sunyi-search-overlay .ss-line:hover,
.sunyi-search-overlay .ss-term-btn:hover,
.sunyi-search-overlay .ss-art-card:hover,
.sunyi-search-item-link:hover {
  border-color: var(--ss-search-line-gold) !important;

  background:
    radial-gradient(circle at 94% 0%, var(--ss-search-gold-soft), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.54)),
    var(--ss-search-surface-2) !important;

  box-shadow: 0 18px 44px rgba(25,34,48,.120) !important;
}

.sunyi-search-overlay[data-theme="dark"] .ss-line:hover,
.sunyi-search-overlay[data-theme="dark"] .ss-term-btn:hover,
.sunyi-search-overlay[data-theme="dark"] .ss-art-card:hover,
.sunyi-search-overlay[data-theme="dark"] .sunyi-search-item-link:hover {
  background:
    radial-gradient(circle at 94% 0%, var(--ss-search-gold-soft), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.032)),
    var(--ss-search-surface-2) !important;

  box-shadow: 0 22px 58px rgba(0,0,0,.36) !important;
}


/* ============================================================
   09. TEXT COLOR FINISH ONLY
============================================================ */

.sunyi-search-overlay .ss-block-title {
  color: var(--ss-search-gold) !important;
}

.sunyi-search-overlay .ss-line-title,
.sunyi-search-overlay .ss-term-name,
.sunyi-search-overlay .ss-art-title,
.sunyi-search-item-title {
  color: var(--ss-search-strong) !important;
}

.sunyi-search-overlay .ss-line-group,
.sunyi-search-overlay .ss-term-sec,
.sunyi-search-item-type,
.sunyi-search-item-orbit {
  color: var(--ss-search-gold) !important;
}

.sunyi-search-item-subtitle,
.sunyi-search-item-excerpt {
  color: var(--ss-search-muted) !important;
}

.sunyi-search-hl {
  background:
    linear-gradient(
      180deg,
      transparent 18%,
      var(--ss-highlight) 18%,
      var(--ss-highlight) 86%,
      transparent 86%
    ) !important;

  color: inherit !important;
}


/* ============================================================
   10. ARTICLE THUMB SKIN ONLY
============================================================ */

.sunyi-search-overlay .ss-art-thumb {
  border: 1px solid var(--ss-search-line-soft) !important;

  background:
    radial-gradient(circle at 50% 0%, var(--ss-search-gold-soft), transparent 60%),
    rgba(38,50,68,.08) !important;
}

.sunyi-search-overlay .ss-art-thumb img {
  filter: saturate(.96) contrast(1.03) !important;
}

.sunyi-search-overlay .ss-art-card:hover .ss-art-thumb img {
  filter: saturate(1.05) contrast(1.06) !important;
}


/* ============================================================
   11. SCROLLBAR SKIN ONLY
============================================================ */

.sunyi-search-body::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      transparent,
      var(--ss-search-gold),
      transparent
    ) !important;
}

.sunyi-search-overlay .ss-block::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ss-search-gold),
      transparent
    ) !important;
}