/* ===================================================================
   Sistem Sunyi — KBDS Family Map Global Popup v1.0.6
   Semantic Home Explorer
   File: ss-kbds-family-map-global-v1.0.6.css
   Scope: .sskfm-modal and descendants only.
   Safe against Newspaper/tagDiv global styles.
=================================================================== */
body.sskfm-open {
  overflow: hidden!important
}

.sskfm-modal, .sskfm-modal * {
  box-sizing: border-box!important
}

.sskfm-modal {
  --sskfm-bg: #f5efe4;
  --sskfm-bg-2: #fffbf2;
  --sskfm-panel: rgba(255, 255, 255, .88);
  --sskfm-panel-2: rgba(246, 239, 229, .86);
  --sskfm-card: rgba(255, 255, 255, .72);
  --sskfm-card-2: rgba(255, 255, 255, .94);
  --sskfm-card-soft: rgba(255, 255, 255, .58);
  --sskfm-text: #172235;
  --sskfm-muted: rgba(23, 34, 53, .72);
  --sskfm-soft: rgba(23, 34, 53, .52);
  --sskfm-line: rgba(22, 34, 53, .12);
  --sskfm-line-strong: rgba(126, 88, 35, .28);
  --sskfm-gold: #8e642a;
  --sskfm-gold-2: rgba(142, 100, 42, .12);
  --sskfm-gold-3: rgba(142, 100, 42, .22);
  --sskfm-red: #a9463f;
  --sskfm-blue: #31577c;
  --sskfm-green: #4c7d61;
  --sskfm-shadow: 0 30px 90px rgba(24, 34, 52, .20);
  --sskfm-shadow-soft: 0 18px 52px rgba(24, 34, 52, .10);
  --sskfm-radius-xl: 30px;
  --sskfm-radius-lg: 23px;
  --sskfm-radius-md: 17px;
  --sskfm-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
  "Segoe UI",
  Arial,
  sans-serif;
  --sskfm-serif: Georgia, "Times New Roman", serif;
  position: fixed!important;
  inset: 0!important;
  z-index: 100000;
  display: none;
  font-family: var(--sskfm-sans)!important;
  color: var(--sskfm-text)!important;
  text-rendering: optimizeLegibility
}

.sskfm-modal[data-sskfm-theme="dark"], body.ss-dark-mode .sskfm-modal:not([data-sskfm-theme="light"]),
  body[data-theme="dark"] .sskfm-modal:not([data-sskfm-theme="light"]),
  html[data-theme="dark"] .sskfm-modal:not([data-sskfm-theme="light"]) {
  --sskfm-bg: #07111d;
  --sskfm-bg-2: #101d2c;
  --sskfm-panel: rgba(255, 255, 255, .070);
  --sskfm-panel-2: rgba(255, 255, 255, .050);
  --sskfm-card: rgba(255, 255, 255, .064);
  --sskfm-card-2: rgba(255, 255, 255, .090);
  --sskfm-card-soft: rgba(255, 255, 255, .046);
  --sskfm-text: #f4efe6;
  --sskfm-muted: rgba(244, 239, 230, .72);
  --sskfm-soft: rgba(244, 239, 230, .54);
  --sskfm-line: rgba(255, 255, 255, .11);
  --sskfm-line-strong: rgba(204, 169, 100, .34);
  --sskfm-gold: #caa766;
  --sskfm-gold-2: rgba(202, 167, 102, .125);
  --sskfm-gold-3: rgba(202, 167, 102, .22);
  --sskfm-red: #d16a62;
  --sskfm-blue: #76a5cc;
  --sskfm-green: #9ac8aa;
  --sskfm-shadow: 0 34px 110px rgba(0, 0, 0, .66);
  --sskfm-shadow-soft: 0 18px 52px rgba(0, 0, 0, .24)
}

.sskfm-modal.is-open {
  display: block!important
}

.sskfm-modal button, .sskfm-modal input, .sskfm-modal textarea,
.sskfm-modal select {
  font-family: var(--sskfm-sans)!important;
  color: inherit!important;
  box-shadow: none!important;
  text-shadow: none!important;
  text-transform: none!important
}

.sskfm-modal a {
  color: inherit!important;
  text-decoration: none!important
}

.sskfm-modal button::before, .sskfm-modal button::after {
  box-sizing: border-box!important
}

.sskfm-backdrop {
  position: absolute!important;
  inset: 0!important;
  border: 0!important;
  padding: 0!important;
  margin: 0!important;
  background: radial-gradient(circle at 12% 8%, rgba(202, 167, 102, .18), transparent 31%), radial-gradient(circle at 86% 10%, rgba(76, 121,
    160, .22), transparent 38%), radial-gradient(circle at 50% 88%, rgba(202, 167, 102, .10), transparent 34%), rgba(2, 7, 13,
    .80)!important;
  backdrop-filter: blur(14px) saturate(118%)!important;
  -webkit-backdrop-filter: blur(14px) saturate(118%)!important;
  cursor: pointer!important
}

.sskfm-shell {
  position: absolute!important;
  inset: 18px 12px!important;
  z-index: 1!important;
  width: min(1120px, calc(100vw - 24px))!important;
  height: calc(100dvh - 36px)!important;
  max-height: calc(100dvh - 36px)!important;
  margin: auto!important;
  display: flex!important;
  flex-direction: column!important;
  overflow: hidden!important;
  border: 1px solid var(--sskfm-line-strong)!important;
  border-radius: var(--sskfm-radius-xl)!important;
  background: radial-gradient(circle at 14% 0%, rgba(202, 167, 102, .135), transparent 32%), radial-gradient(circle at 92% 12%, rgba(49, 87,
    124, .12), transparent 38%), radial-gradient(circle at 50% 88%, rgba(142, 100, 42, .055), transparent 36%), linear-gradient(90deg,
    rgba(126, 88, 35, .018) 0 1px, transparent 1px 100%), linear-gradient(145deg, var(--sskfm-bg-2) 0%, var(--sskfm-bg) 52%, rgba(234, 242,
    247, .88) 100%)!important;
  background-size: auto, auto, auto, 56px 56px, auto!important;
  box-shadow: var(--sskfm-shadow)!important;
  color: var(--sskfm-text)!important
}

.sskfm-modal[data-sskfm-theme="dark"] .sskfm-shell,
body.ss-dark-mode .sskfm-modal:not([data-sskfm-theme="light"]) .sskfm-shell,
  body[data-theme="dark"] .sskfm-modal:not([data-sskfm-theme="light"]) .sskfm-shell,
  html[data-theme="dark"] .sskfm-modal:not([data-sskfm-theme="light"]) .sskfm-shell {
  background: radial-gradient(circle at 14% 0%, rgba(202, 167, 102, .13), transparent 34%), radial-gradient(circle at 92% 0%, rgba(76, 121,
    160, .14), transparent 38%), radial-gradient(circle at 50% 88%, rgba(202, 167, 102, .08), transparent 36%), linear-gradient(90deg,
    rgba(202, 167, 102, .018) 0 1px, transparent 1px 100%), linear-gradient(145deg, #101d2c 0%, #07111d 52%, #0a1421 100%)!important
}

.sskfm-header {
  position: relative!important;
  z-index: 5!important;
  flex: 0 0 auto!important;
  display: flex!important;
  align-items: flex-start!important;
  justify-content: space-between!important;
  gap: 18px!important;
  padding: 16px 22px 12px!important;
  border-bottom: 1px solid var(--sskfm-line)!important;
  background: radial-gradient(circle at 14% 0%, rgba(202, 167, 102, .135), transparent 34%), radial-gradient(circle at 92% 0%, rgba(76, 121,
    160, .115), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, .70), rgba(255, 255, 255, .30)), transparent!important;
  backdrop-filter: blur(16px) saturate(120%)!important;
  -webkit-backdrop-filter: blur(16px) saturate(120%)!important
}

.sskfm-modal[data-sskfm-theme="dark"] .sskfm-header {
  background: radial-gradient(circle at 14% 0%, rgba(202, 167, 102, .12), transparent 34%), linear-gradient(180deg, rgba(11, 19, 29, .96),
    rgba(11, 19, 29, .88)), transparent!important
}

.sskfm-heading {
  min-width: 0!important;
  flex: 1 1 auto!important
}

.sskfm-kicker, .sskfm-eyebrow {
  display: block!important;
  color: var(--sskfm-gold)!important;
  font-size: 10.5px!important;
  line-height: 1.2!important;
  letter-spacing: .16em!important;
  text-transform: uppercase!important;
  font-weight: 800!important
}

.sskfm-title-row {
  display: flex!important;
  align-items: center!important;
  gap: 10px!important;
  min-width: 0!important
}

.sskfm-title {
  margin: 6px 0 5px!important;
  font-family: var(--sskfm-serif)!important;
  font-size: clamp(28px, 3.2vw, 42px)!important;
  line-height: 1!important;
  letter-spacing: -.045em!important;
  font-weight: 700!important;
  color: var(--sskfm-text)!important;
  overflow-wrap: anywhere!important
}

.sskfm-subtitle {
  max-width: 790px!important;
  margin: 0!important;
  color: var(--sskfm-muted)!important;
  font-size: 14px!important;
  line-height: 1.55!important
}

.sskfm-header-actions {
  flex: 0 0 auto!important;
  display: flex!important;
  align-items: flex-start!important;
  gap: 8px!important;
  overflow: visible!important
}

.sskfm-heart, .sskfm-theme, .sskfm-close {
  appearance: none!important;
  -webkit-appearance: none!important;
  width: 36px!important;
  min-width: 36px!important;
  height: 36px!important;
  min-height: 36px!important;
  display: inline-grid!important;
  place-items: center!important;
  padding: 0!important;
  margin: 0!important;
  border: 1px solid var(--sskfm-line)!important;
  border-radius: 999px!important;
  background: var(--sskfm-card)!important;
  color: var(--sskfm-text)!important;
  cursor: pointer!important;
  line-height: 1!important;
  font-size: 16px!important
}

.sskfm-close {
  font-size: 21px!important
}

.sskfm-heart.is-active {
  color: var(--sskfm-gold)!important;
  background: var(--sskfm-gold-3)!important;
  border-color: var(--sskfm-line-strong)!important
}

.sskfm-heart:hover,
  .sskfm-theme:hover,
.sskfm-close:hover,
.sskfm-action:hover,
.sskfm-btn:hover,
.sskfm-term-chip:hover,
.sskfm-mini-compare:hover,
.sskfm-icon:hover,
.sskfm-card-fav:hover {
  border-color: var(--sskfm-line-strong)!important;
  background: radial-gradient(circle at 50% 0%, rgba(202, 167, 102, .22), transparent 64%), linear-gradient(145deg, rgba(202, 167, 102, .18),
    rgba(255, 255, 255, .045))!important;
  color: var(--sskfm-text)!important;
  text-decoration: none!important
}

.sskfm-actions {
  display: flex!important;
  align-items: center!important;
  gap: 7px!important;
  margin-top: 12px!important;
  overflow-x: auto!important;
  overflow-y: hidden!important;
  scrollbar-width: thin!important;
  scrollbar-color: var(--sskfm-gold) transparent!important;
  padding-bottom: 4px!important
}

.sskfm-action, .sskfm-btn {
  appearance: none!important;
  -webkit-appearance: none!important;
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  width: auto!important;
  min-width: max-content!important;
  min-height: 30px!important;
  padding: 7px 12px!important;
  border: 1px solid var(--sskfm-line)!important;
  border-radius: 999px!important;
  background: var(--sskfm-gold-2)!important;
  color: var(--sskfm-text)!important;
  font-size: 12px!important;
  line-height: 1!important;
  font-weight: 760!important;
  letter-spacing: .01em!important;
  cursor: pointer!important;
  white-space: nowrap!important
}

.sskfm-action.is-family, .sskfm-action.is-map, .sskfm-action.is-kompas,
.sskfm-action.is-compare,
.sskfm-btn {
  background: var(--sskfm-gold-2)!important;
  border-color: var(--sskfm-line-strong)!important
}

.sskfm-tabs {
  flex: 0 0 auto!important;
  display: flex!important;
  gap: 8px!important;
  padding: 11px 18px!important;
  border-bottom: 1px solid var(--sskfm-line)!important;
  background: linear-gradient(180deg, var(--sskfm-panel), var(--sskfm-panel-2))!important;
  overflow-x: auto!important;
  scrollbar-width: thin!important
}

.sskfm-tabs button {
  appearance: none!important;
  flex: 1 0 auto!important;
  min-width: 120px!important;
  min-height: 36px!important;
  border: 1px solid var(--sskfm-line)!important;
  border-radius: 999px!important;
  background: var(--sskfm-card)!important;
  color: var(--sskfm-muted)!important;
  cursor: pointer!important;
  font-size: 11.5px!important;
  font-weight: 820!important;
  text-transform: uppercase!important;
  letter-spacing: .11em!important
}

.sskfm-tabs button.is-active {
  color: var(--sskfm-text)!important;
  border-color: var(--sskfm-line-strong)!important;
  background: linear-gradient(145deg, var(--sskfm-gold-2), var(--sskfm-card))!important;
  box-shadow: var(--sskfm-shadow-soft)!important
}

.sskfm-body {
  flex: 1 1 auto!important;
  min-height: 0!important;
  overflow-y: auto!important;
  overflow-x: hidden!important;
  -webkit-overflow-scrolling: touch!important;
  overscroll-behavior: contain!important;
  padding: 18px clamp(16px, 2.2vw, 26px) 28px!important;
  color: var(--sskfm-text)!important;
  background: radial-gradient(circle at 12% 0%, var(--sskfm-gold-2), transparent 30%), linear-gradient(180deg, rgba(255, 255, 255, .12),
    transparent 160px), var(--sskfm-bg)!important
}

.sskfm-loading,
.sskfm-empty {
  padding: 28px!important;
  border: 1px dashed var(--sskfm-line-strong)!important;
  border-radius: var(--sskfm-radius-lg)!important;
  background: var(--sskfm-card)!important;
  color: var(--sskfm-muted)!important;
  text-align: center!important
}

.sskfm-empty strong {
  display: block!important;
  color: var(--sskfm-text)!important;
  font-size: 16px!important;
  margin-bottom: 5px!important
}

.sskfm-empty p {
  margin: 0 0 12px!important;
  color: var(--sskfm-muted)!important
}

.sskfm-hero-card,
.sskfm-panel,
.sskfm-search-card,
.sskfm-search-hub-card,
.sskfm-results-card {
  border: 1px solid var(--sskfm-line)!important;
  border-radius: var(--sskfm-radius-lg)!important;
  background: linear-gradient(145deg, var(--sskfm-card-2), var(--sskfm-card))!important;
  box-shadow: var(--sskfm-shadow-soft)!important;
  color: var(--sskfm-text)!important
}

.sskfm-hero-card {
  display: grid!important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px)!important;
  gap: 18px!important;
  align-items: center!important;
  padding: 22px!important;
  margin: 0 0 16px!important
}

.sskfm-hero-card h3 {
  margin: 6px 0 8px!important;
  font-family: var(--sskfm-serif)!important;
  font-size: clamp(24px, 3vw, 36px)!important;
  line-height: 1.02!important;
  letter-spacing: -.035em!important;
  color: var(--sskfm-text)!important
}

.sskfm-hero-card p, .sskfm-panel p, .sskfm-search-copy p,
.sskfm-results-head p {
  margin: 0!important;
  color: var(--sskfm-muted)!important;
  font-size: 13.5px!important;
  line-height: 1.55!important
}

.sskfm-hero-card aside {
  padding: 18px!important;
  border: 1px solid var(--sskfm-line-strong)!important;
  border-radius: 22px!important;
  background: var(--sskfm-gold-2)!important
}

.sskfm-hero-card aside span {
  display: block!important;
  color: var(--sskfm-gold)!important;
  text-transform: uppercase!important;
  letter-spacing: .14em!important;
  font-size: 10px!important;
  font-weight: 850!important;
  margin-bottom: 8px!important
}

.sskfm-hero-card aside strong {
  display: block!important;
  color: var(--sskfm-text)!important;
  font-size: 20px!important;
  line-height: 1.15!important
}

.sskfm-hero-card aside em {
  display: block!important;
  margin-top: 8px!important;
  color: var(--sskfm-soft)!important;
  font-style: normal!important;
  font-size: 12px!important
}

.sskfm-grid-two {
  display: grid!important;
  grid-template-columns: repeat(2, minmax(0, 1fr))!important;
  gap: 14px!important;
  margin: 0 0 14px!important
}

.sskfm-panel {
  padding: 18px!important;
  min-width: 0!important
}

.sskfm-panel.is-primary {
  border-color: var(--sskfm-line-strong)!important;
  background: radial-gradient(circle at 0 0, var(--sskfm-gold-2), transparent 44%), var(--sskfm-card)!important
}

.sskfm-panel h4 {
  margin: 7px 0 9px!important;
  color: var(--sskfm-text)!important;
  font-size: 20px!important;
  line-height: 1.15!important;
  font-weight: 850!important
}

.sskfm-panel-head {
  display: flex!important;
  align-items: flex-start!important;
  justify-content: space-between!important;
  gap: 14px!important;
  margin-bottom: 14px!important
}

.sskfm-chiplist {
  display: flex!important;
  flex-wrap: wrap!important;
  gap: 8px!important;
  margin-top: 12px!important
}

.sskfm-family-pill, .sskfm-term-chip, .sskfm-mini-compare {
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  min-height: 30px!important;
  border: 1px solid var(--sskfm-line)!important;
  border-radius: 999px!important;
  background: var(--sskfm-card)!important;
  color: var(--sskfm-text)!important;
  padding: 6px 10px!important;
  font-size: 12px!important;
  font-weight: 760!important;
  line-height: 1!important
}

.sskfm-term-chip {
  cursor: pointer!important
}

.sskfm-mini-compare {
  width: 30px!important;
  min-width: 30px!important;
  padding: 0!important;
  color: var(--sskfm-gold)!important;
  cursor: pointer!important
}

.sskfm-chiprow {
  display: inline-flex!important;
  align-items: center!important;
  gap: 4px!important
}

.sskfm-muted {
  color: var(--sskfm-muted)!important;
  font-style: normal!important;
  font-size: 13px!important
}

.sskfm-mini-guide {
  display: grid!important;
  grid-template-columns: repeat(3, minmax(0, 1fr))!important;
  gap: 10px!important
}

.sskfm-mini-guide span {
  display: block!important;
  padding: 12px!important;
  border: 1px solid var(--sskfm-line)!important;
  border-radius: 16px!important;
  background: var(--sskfm-card-soft)!important;
  color: var(--sskfm-muted)!important;
  font-size: 13px!important;
  line-height: 1.45!important
}

.sskfm-mini-guide strong {
  display: block!important;
  color: var(--sskfm-text)!important;
  margin-bottom: 3px!important
}

.sskfm-search-card {
  display: grid!important;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.35fr)!important;
  gap: 18px!important;
  align-items: end!important;
  padding: 18px!important;
  margin: 0 0 14px!important
}

.sskfm-search-copy h4, .sskfm-results-head h4 {
  margin: 7px 0 5px!important;
  font-size: 18px!important;
  line-height: 1.15!important;
  color: var(--sskfm-text)!important
}

.sskfm-scope {
  display: flex!important;
  flex-wrap: wrap!important;
  gap: 8px!important;
  align-items: center!important;
  margin-top: 12px!important;
  color: var(--sskfm-soft)!important;
  text-transform: uppercase!important;
  font-size: 10.5px!important;
  font-weight: 850!important;
  letter-spacing: .08em!important
}

.sskfm-scope strong {
  display: inline-flex!important;
  align-items: center!important;
  min-height: 28px!important;
  border: 1px solid var(--sskfm-line-strong)!important;
  border-radius: 999px!important;
  padding: 6px 10px!important;
  color: var(--sskfm-text)!important;
  background: var(--sskfm-gold-2)!important;
  text-transform: none!important;
  letter-spacing: 0!important;
  font-size: 12px!important
}

.sskfm-search-controls {
  display: grid!important;
  grid-template-columns: minmax(180px, 260px) minmax(220px, 1fr) auto!important;
  gap: 10px!important;
  min-width: 0!important
}

.sskfm-search-controls select, .sskfm-search-controls input {
  appearance: none!important;
  -webkit-appearance: none!important;
  width: 100%!important;
  min-width: 0!important;
  min-height: 42px!important;
  border: 1px solid var(--sskfm-line)!important;
  border-radius: 999px!important;
  background: var(--sskfm-card-2)!important;
  color: var(--sskfm-text)!important;
  padding: 10px 14px!important;
  font-size: 14px!important;
  outline: none!important
}

.sskfm-search-controls select {
  padding-right: 30px!important;
  background-image: linear-gradient(45deg, transparent 50%, var(--sskfm-gold) 50%), linear-gradient(135deg, var(--sskfm-gold) 50%,
    transparent 50%)!important;
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px!important;
  background-size: 5px 5px, 5px 5px!important;
  background-repeat: no-repeat!important
}

.sskfm-search-controls input::placeholder {
  color: var(--sskfm-soft)!important
}

.sskfm-search-controls select:focus, .sskfm-search-controls input:focus {
  border-color: var(--sskfm-line-strong)!important;
  box-shadow: 0 0 0 3px var(--sskfm-gold-2)!important
}

.sskfm-search-controls select option {
  background: #fffaf2!important;
  color: #172235!important
}

.sskfm-modal[data-sskfm-theme="dark"] .sskfm-search-controls select option {
  background: #0d1b28!important;
  color: #eef4ff!important
}

.sskfm-search-controls button {
  appearance: none!important;
  min-height: 42px!important;
  border: 1px solid var(--sskfm-line)!important;
  border-radius: 999px!important;
  background: var(--sskfm-card)!important;
  color: var(--sskfm-muted)!important;
  padding: 10px 14px!important;
  font-size: 11px!important;
  font-weight: 850!important;
  letter-spacing: .08em!important;
  text-transform: uppercase!important;
  cursor: pointer!important
}

.sskfm-results-card {
  padding: 18px!important
}

.sskfm-results-head {
  display: flex!important;
  justify-content: space-between!important;
  align-items: flex-start!important;
  gap: 14px!important;
  margin-bottom: 14px!important
}

.sskfm-result-tools {
  display: flex!important;
  align-items: center!important;
  gap: 8px!important;
  color: var(--sskfm-muted)!important;
  font-size: 12px!important;
  white-space: nowrap!important
}

.sskfm-result-tools button {
  appearance: none!important;
  min-height: 32px!important;
  border: 1px solid var(--sskfm-line-strong)!important;
  border-radius: 999px!important;
  background: var(--sskfm-gold-2)!important;
  color: var(--sskfm-text)!important;
  padding: 7px 12px!important;
  font-size: 11px!important;
  font-weight: 850!important;
  cursor: pointer!important
}

.sskfm-card-grid {
  display: grid!important;
  grid-template-columns: repeat(3, minmax(0, 1fr))!important;
  gap: 12px!important
}

.sskfm-term-card {
  position: relative!important;
  min-width: 0!important;
  min-height: 154px!important;
  padding: 16px!important;
  border: 1px solid var(--sskfm-line)!important;
  border-radius: 20px!important;
  background: linear-gradient(145deg, var(--sskfm-card-2), var(--sskfm-card))!important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .045)!important
}

.sskfm-term-card:hover {
  border-color: var(--sskfm-line-strong)!important;
  transform: translateY(-1px)!important
}

.sskfm-term-card h5 {
  margin: 0 38px 9px 0!important;
  color: var(--sskfm-text)!important;
  font-size: 15px!important;
  line-height: 1.22!important;
  font-weight: 850!important;
  overflow-wrap: anywhere!important
}

.sskfm-term-card p {
  margin: 8px 0 12px!important;
  color: var(--sskfm-muted)!important;
  font-size: 12px!important;
  line-height: 1.35!important
}

.sskfm-role {
  display: inline-flex!important;
  align-items: center!important;
  min-height: 24px!important;
  border: 1px solid var(--sskfm-line)!important;
  border-radius: 999px!important;
  background: var(--sskfm-card-soft)!important;
  color: var(--sskfm-soft)!important;
  padding: 5px 9px!important;
  font-size: 10px!important;
  font-weight: 850!important;
  letter-spacing: .08em!important;
  text-transform: uppercase!important
}

.sskfm-card-fav {
  position: absolute!important;
  right: 12px!important;
  top: 12px!important;
  width: 30px!important;
  height: 30px!important;
  border: 1px solid var(--sskfm-line)!important;
  border-radius: 999px!important;
  background: var(--sskfm-card)!important;
  color: var(--sskfm-soft)!important;
  display: grid!important;
  place-items: center!important;
  cursor: pointer!important;
  padding: 0!important
}

.sskfm-card-fav.is-active {
  color: var(--sskfm-gold)!important;
  background: var(--sskfm-gold-2)!important;
  border-color: var(--sskfm-line-strong)!important
}

.sskfm-card-actions {
  display: flex!important;
  align-items: center!important;
  gap: 7px!important;
  margin-top: 10px!important;
  padding-top: 10px!important;
  border-top: 1px solid var(--sskfm-line)!important
}

.sskfm-icon {
  appearance: none!important;
  width: 31px!important;
  height: 31px!important;
  min-width: 31px!important;
  border: 1px solid var(--sskfm-line)!important;
  border-radius: 999px!important;
  background: var(--sskfm-card)!important;
  color: var(--sskfm-text)!important;
  display: inline-grid!important;
  place-items: center!important;
  padding: 0!important;
  cursor: pointer!important;
  font-size: 13px!important;
  line-height: 1!important
}

.sskfm-icon.is-compare {
  color: var(--sskfm-gold)!important;
  border-color: var(--sskfm-line-strong)!important;
  background: var(--sskfm-gold-2)!important
}

.sskfm-more-wrap {
  display: flex!important;
  justify-content: center!important;
  margin-top: 16px!important
}

.sskfm-modal mark {
  border-radius: 5px!important;
  background: rgba(202, 167, 102, .24)!important;
  color: inherit!important;
  padding: 0 3px!important
}

.sskfm-compare-path {
  margin-top: 14px!important
}

.sskfm-compare-grid {
  display: grid!important;
  grid-template-columns: repeat(2, minmax(0, 1fr))!important;
  gap: 12px!important
}

.sskfm-compare-grid article {
  padding: 14px!important;
  border: 1px solid var(--sskfm-line)!important;
  border-radius: 18px!important;
  background: var(--sskfm-card-soft)!important
}

.sskfm-compare-grid article p {
  margin: 7px 0 10px!important
}

.sskfm-modal .ss-ds-kbd-card-action.is-family, .ss-ds-kbd-card-action.is-family {
  color: #8e642a!important;
  background: rgba(142, 100, 42, .12)!important
}

.sskfm-modal[data-sskfm-theme="dark"] .ss-ds-kbd-card-action.is-family,
body.ss-dark-mode .ss-ds-kbd-card-action.is-family {
  color: #caa766!important;
  background: rgba(202, 167, 102, .13)!important
}

.ss-ds-kbd-action-link.is-family,
.sskp-action.is-family,
.sskbds-map-head-link.is-family,
.sskc-action.is-family {
  border-color: rgba(142, 100, 42, .28)!important;
  background: rgba(142, 100, 42, .12)!important;
  color: inherit!important
}

.ss-ds-kbd-action-link.is-family:hover, .sskp-action.is-family:hover,
.sskbds-map-head-link.is-family:hover,
.sskc-action.is-family:hover {
  border-color: rgba(142, 100, 42, .42)!important;
  background: rgba(142, 100, 42, .20)!important
}

/* ------------------------------------------------------
   v1.0.4 — Trail / Favorite / Search Hub
------------------------------------------------------ */
.sskfm-search-hub {
  display: grid !important;
  grid-template-columns: minmax(320px, 1.35fr) minmax(220px, 0.82fr) minmax(220px, 0.82fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin: 0 0 14px !important;
}

.sskfm-search-hub-card {
  min-width: 0 !important;
  padding: 16px !important;
}

.sskfm-search-hub-card.is-search {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

.sskfm-search-hub-card h4 {
  margin: 7px 0 7px !important;
  color: var(--sskfm-text) !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
}

.sskfm-search-hub-card .sskfm-muted {
  display: block !important;
  margin: 10px 0 0 !important;
  padding: 12px !important;
  border: 1px dashed var(--sskfm-line) !important;
  border-radius: 14px !important;
  background: var(--sskfm-card-soft) !important;
  color: var(--sskfm-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

.sskfm-quick-list {
  display: grid !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.sskfm-quick-item {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 11px !important;
  border: 1px solid var(--sskfm-line) !important;
  border-radius: 14px !important;
  background: var(--sskfm-card-soft) !important;
  color: var(--sskfm-text) !important;
  cursor: pointer !important;
  text-align: left !important;
  line-height: 1.2 !important;
}

.sskfm-quick-item:hover,
.sskfm-quick-item:focus-visible {
  border-color: var(--sskfm-line-strong) !important;
  background:
    radial-gradient(circle at 0% 0%, var(--sskfm-gold-2), transparent 70%),
    var(--sskfm-card) !important;
  outline: none !important;
}

.sskfm-quick-item strong {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--sskfm-text) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.sskfm-quick-item span {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-top: 3px !important;
  color: var(--sskfm-soft) !important;
  font-size: 10.5px !important;
}

@media(max-width: 980px) {
  .sskfm-search-hub {
    grid-template-columns: 1fr !important;
  }

}

@media(max-width: 920px) {
  .sskfm-hero-card, .sskfm-search-card {
    grid-template-columns: 1fr!important
  }

  .sskfm-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))!important
  }

  .sskfm-grid-two, .sskfm-compare-grid {
    grid-template-columns: 1fr!important
  }

  .sskfm-mini-guide {
    grid-template-columns: 1fr!important
  }

  .sskfm-search-controls {
    grid-template-columns: 1fr!important
  }

  .sskfm-results-head {
    display: block!important
  }

  .sskfm-result-tools {
    margin-top: 10px!important
  }

}

@media(max-width: 620px) {
  .sskfm-shell {
    inset: 0!important;
    width: 100vw!important;
    height: 100dvh!important;
    max-height: 100dvh!important;
    border-radius: 0!important;
    border-left: 0!important;
    border-right: 0!important
  }

  .sskfm-header {
    padding: 14px 14px 11px!important
  }

  .sskfm-title {
    font-size: 32px!important
  }

  .sskfm-subtitle {
    font-size: 13px!important
  }

  .sskfm-header-actions {
    gap: 6px!important
  }

  .sskfm-heart, .sskfm-theme, .sskfm-close {
    width: 34px!important;
    height: 34px!important;
    min-width: 34px!important;
    min-height: 34px!important
  }

  .sskfm-tabs {
    padding: 9px 10px!important
  }

  .sskfm-tabs button {
    min-width: 96px!important;
    font-size: 10.5px!important
  }

  .sskfm-body {
    padding: 14px!important
  }

  .sskfm-card-grid {
    grid-template-columns: 1fr!important
  }

  .sskfm-hero-card {
    padding: 16px!important
  }

  .sskfm-hero-card h3 {
    font-size: 28px!important
  }

  .sskfm-panel, .sskfm-results-card, .sskfm-search-card {
    padding: 14px!important
  }

  .sskfm-actions {
    gap: 6px!important
  }

  .sskfm-action {
    font-size: 11px!important;
    padding: 7px 10px!important
  }

  .sskfm-chiplist {
    gap: 6px!important
  }

  .sskfm-term-chip, .sskfm-family-pill {
    font-size: 11.5px!important
  }

  .sskfm-card-actions {
    gap: 6px!important
  }

  .sskfm-icon {
    width: 30px!important;
    height: 30px!important;
    min-width: 30px!important
  }

}

/* ------------------------------------------------------
   v1.0.5 — Search Hub Scroll Polish
   - Follows the existing KBDS popup search/jejak/favorit grammar.
   - Keeps the Family Map Search Hub inside its card.
   - Adds bounded vertical scroll areas for Jejak and Favorit.
   - Polishes the main popup scrollbar.
------------------------------------------------------ */

.sskfm-body {
  scrollbar-width: thin !important;
  scrollbar-color: var(--sskfm-gold) transparent !important;
}

.sskfm-body::-webkit-scrollbar {
  width: 8px !important;
}

.sskfm-body::-webkit-scrollbar-track {
  background: transparent !important;
}

.sskfm-body::-webkit-scrollbar-thumb {
  min-height: 46px !important;
  border-radius: 999px !important;
  background: var(--sskfm-gold) !important;
}

.sskfm-body::-webkit-scrollbar-thumb:hover {
  background: var(--sskfm-line-strong) !important;
}

.sskfm-tabs::-webkit-scrollbar,
.sskfm-actions::-webkit-scrollbar {
  height: 7px !important;
}

.sskfm-tabs::-webkit-scrollbar-track,
.sskfm-actions::-webkit-scrollbar-track {
  background: transparent !important;
}

.sskfm-tabs::-webkit-scrollbar-thumb,
.sskfm-actions::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: var(--sskfm-gold) !important;
}

.sskfm-search-hub {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.96fr) minmax(0, 0.96fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin: 0 0 14px !important;
  min-width: 0 !important;
}

.sskfm-search-hub-card {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 16px !important;
  overflow: hidden !important;
}

.sskfm-search-hub-card.is-search,
.sskfm-search-hub-card.is-trail,
.sskfm-search-hub-card.is-favorites {
  display: flex !important;
  flex-direction: column !important;
}

.sskfm-search-hub-card.is-search {
  justify-content: flex-start !important;
}

.sskfm-search-hub-card.is-trail,
.sskfm-search-hub-card.is-favorites {
  max-height: clamp(238px, 28dvh, 320px) !important;
}

.sskfm-search-hub-card h4 {
  flex: 0 0 auto !important;
  margin: 7px 0 7px !important;
}

.sskfm-search-hub-card .sskfm-eyebrow {
  flex: 0 0 auto !important;
}

.sskfm-search-hub-card .sskfm-muted {
  flex: 0 0 auto !important;
}

.sskfm-search-hub .sskfm-search-copy {
  min-width: 0 !important;
  max-width: 100% !important;
}

.sskfm-search-hub .sskfm-search-copy p {
  max-width: 100% !important;
}

.sskfm-search-hub .sskfm-scope {
  min-width: 0 !important;
  max-width: 100% !important;
}

.sskfm-search-hub .sskfm-scope strong {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sskfm-search-hub .sskfm-search-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-top: 12px !important;
}

.sskfm-search-hub .sskfm-search-controls select,
.sskfm-search-hub .sskfm-search-controls input,
.sskfm-search-hub .sskfm-search-controls button {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
}

.sskfm-search-hub .sskfm-search-controls select,
.sskfm-search-hub .sskfm-search-controls input {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  font-size: 13px !important;
}

.sskfm-search-hub .sskfm-search-controls select {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background-position: calc(100% - 18px) 16px, calc(100% - 13px) 16px !important;
}

.sskfm-search-hub .sskfm-search-controls button {
  justify-content: center !important;
  padding: 9px 12px !important;
}

.sskfm-quick-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: clamp(158px, 20dvh, 232px) !important;
  margin-top: 10px !important;
  padding-right: 4px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--sskfm-gold) transparent !important;
}

.sskfm-quick-list::-webkit-scrollbar {
  width: 7px !important;
}

.sskfm-quick-list::-webkit-scrollbar-track {
  background: transparent !important;
}

.sskfm-quick-list::-webkit-scrollbar-thumb {
  min-height: 34px !important;
  border-radius: 999px !important;
  background: var(--sskfm-gold) !important;
}

.sskfm-quick-list::-webkit-scrollbar-thumb:hover {
  background: var(--sskfm-line-strong) !important;
}

.sskfm-quick-item {
  max-width: 100% !important;
  min-height: 54px !important;
}

.sskfm-quick-item strong,
.sskfm-quick-item span {
  max-width: 100% !important;
}

.sskfm-results-card {
  clear: both !important;
}

@media (min-width: 1180px) {
  .sskfm-search-hub {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.91fr) minmax(0, 0.91fr) !important;
  }
}

@media (max-width: 980px) {
  .sskfm-search-hub {
    grid-template-columns: 1fr !important;
  }

  .sskfm-search-hub-card.is-trail,
  .sskfm-search-hub-card.is-favorites {
    max-height: none !important;
  }

  .sskfm-quick-list {
    max-height: clamp(160px, 24dvh, 240px) !important;
  }
}

@media (max-width: 620px) {
  .sskfm-search-hub {
    gap: 10px !important;
  }

  .sskfm-search-hub-card {
    padding: 14px !important;
  }

  .sskfm-search-hub .sskfm-search-controls {
    gap: 8px !important;
  }

  .sskfm-quick-list {
    max-height: 210px !important;
  }
}


/* ------------------------------------------------------
   INLINE SEARCH RESULT PARITY v1.0.6
------------------------------------------------------ */
.sskfm-inline-search {
  flex: 0 0 auto !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--sskfm-line) !important;
}

.sskfm-inline-search[hidden] {
  display: none !important;
}

.sskfm-inline-search-label {
  display: block !important;
  margin: 0 0 7px !important;
  color: var(--sskfm-gold) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

.sskfm-inline-search.is-empty p {
  margin: 0 !important;
  color: var(--sskfm-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

.sskfm-inline-search-list {
  display: grid !important;
  gap: 6px !important;
  max-height: clamp(138px, 18dvh, 214px) !important;
  min-height: 0 !important;
  padding-right: 4px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--sskfm-gold) transparent !important;
}

.sskfm-inline-search-list::-webkit-scrollbar {
  width: 7px !important;
}

.sskfm-inline-search-list::-webkit-scrollbar-track {
  background: transparent !important;
}

.sskfm-inline-search-list::-webkit-scrollbar-thumb {
  min-height: 34px !important;
  border-radius: 999px !important;
  background: var(--sskfm-gold) !important;
}

.sskfm-inline-search-item {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  border: 1px solid var(--sskfm-line) !important;
  border-radius: 14px !important;
  background: var(--sskfm-card-2) !important;
  color: var(--sskfm-text) !important;
  cursor: pointer !important;
  text-align: left !important;
  box-shadow: none !important;
}

.sskfm-inline-search-item:hover,
.sskfm-inline-search-item:focus-visible {
  border-color: var(--sskfm-line-strong) !important;
  background: var(--sskfm-gold-2) !important;
  outline: none !important;
}

.sskfm-inline-search-item strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--sskfm-text) !important;
  font-size: 13.2px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sskfm-inline-search-item span {
  display: block !important;
  max-width: 150px !important;
  overflow: hidden !important;
  color: var(--sskfm-soft) !important;
  font-size: 10.6px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sskfm-inline-search-item mark {
  padding: 0 2px !important;
  border-radius: 4px !important;
  background: var(--sskfm-gold-2) !important;
  color: var(--sskfm-text) !important;
}

@media (max-width: 620px) {
  .sskfm-inline-search-list {
    max-height: 190px !important;
  }

  .sskfm-inline-search-item {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sskfm-inline-search-item span {
    max-width: 100% !important;
  }
}