/* ========================================
   KANZ — Components
   Gem Cards, Facets, Interactions
   ======================================== */

/* ================================================================
   GEM CARD — Base
   ================================================================ */
.gem-card {
  background: var(--bg-section);
  border-radius: var(--radius);
  border: 2px solid var(--border);
  padding: var(--space-lg);
  position: relative;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.gem-card:hover {
  box-shadow: var(--shadow);
}

/* ================================================================
   JEWEL CARD SHARED — all jewel cards are dark, text is light
   Uses :is() to avoid repeating quran/hadith/spinel selectors
   ================================================================ */
:is(.gem-card--quran, .gem-card--hadith) { color: #ece7e0; }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__arabic { color: #fff; }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__transliteration { color: rgba(255, 255, 255, 0.55); }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__translation { color: rgba(255, 255, 255, 0.85); }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__translation-label { color: rgba(255, 255, 255, 0.4); }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__source-type { color: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.25); }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__source-link { color: rgba(255, 255, 255, 0.7); }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__source-ref { color: rgba(255, 255, 255, 0.5); }
:is(.gem-card--quran, .gem-card--hadith) :is(.gem-card__dropdown-toggle, .gem-card__context-toggle) { color: rgba(255, 255, 255, 0.4); }
:is(.gem-card--quran, .gem-card--hadith) :is(.gem-card__dropdown-toggle, .gem-card__context-toggle):hover { color: rgba(255, 255, 255, 0.7); }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__dropdown-inner { background: rgba(0, 0, 0, 0.2); color: rgba(255, 255, 255, 0.8); }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__dropdown-inner dt { color: rgba(255, 255, 255, 0.4); }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__dropdown-inner dd { color: rgba(255, 255, 255, 0.85); }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__counter-tap { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); }
:is(.gem-card--quran, .gem-card--hadith) :is(.gem-card__counter-count, .gem-card__counter-reset) { color: rgba(255, 255, 255, 0.4); }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__pair-link { color: rgba(255, 255, 255, 0.4); }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__pair-link:hover { color: rgba(255, 255, 255, 0.75); }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__toggle-btn { color: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.2); }
:is(.gem-card--quran, .gem-card--hadith) :is(.gem-card__toggle-btn:hover, .gem-card__toggle-btn[data-active="true"]) { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.08); }
:is(.gem-card--quran, .gem-card--hadith) .gem-card__toggle-label { color: rgba(255, 255, 255, 0.35); }
:is(.gem-card--quran, .gem-card--hadith) :is(.gem-card__dropdown, .gem-card__pair) { border-color: rgba(255, 255, 255, 0.08); }

/* ---- Quranic: Deep Gold ---- */
.gem-card--quran {
  background: var(--gold-bg);
  border-color: var(--gold-border);
  box-shadow: var(--gold-glow);
}

.gem-card--quran:hover {
  background: var(--gold-bg-hover);
  box-shadow: var(--shadow), 0 0 40px rgba(128, 91, 17, 0.5);
}

/* ---- Prophetic: Deep Emerald ---- */
.gem-card--hadith {
  background: var(--emerald-bg);
  border-color: var(--emerald-border);
  box-shadow: var(--emerald-glow);
}

.gem-card--hadith:hover {
  background: var(--emerald-bg-hover);
  box-shadow: var(--shadow), 0 0 40px rgba(11, 69, 63, 0.5);
}

/* ---- Hadith Collection: Deep Spinel ---- */
.gem-card--spinel {
  background: var(--spinel-bg);
  border-color: var(--spinel-border);
  box-shadow: var(--spinel-glow);
  color: #ece7e0;
}

.gem-card--spinel:hover {
  background: var(--spinel-bg-hover);
  box-shadow: var(--shadow), 0 0 40px rgba(74, 10, 58, 0.5);
}

.gem-card--spinel .gem-card__arabic { color: #fff; }
.gem-card--spinel .gem-card__transliteration,
.gem-card--spinel .gem-card__narrator { color: rgba(255, 255, 255, 0.55); }
.gem-card--spinel .gem-card__translation { color: rgba(255, 255, 255, 0.85); }
.gem-card--spinel .gem-card__source-type {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.25);
}
.gem-card--spinel .gem-card__source-ref,
.gem-card--spinel .gem-card__source-link { color: rgba(255, 255, 255, 0.6); }
.gem-card--spinel .gem-card__dropdown-toggle,
.gem-card--spinel .gem-card__context-toggle { color: rgba(255, 255, 255, 0.4); }
.gem-card--spinel .gem-card__dropdown,
.gem-card--spinel .gem-card__pair { border-color: rgba(255, 255, 255, 0.08); }
.gem-card--spinel .gem-card__dropdown-inner { background: rgba(0, 0, 0, 0.15); }

/* Spinel treasury */
.gem-card--spinel .gem-card__treasury-btn:hover {
  border-color: var(--chip-spinel);
  color: var(--chip-spinel);
}
.gem-card--spinel .gem-card__treasury-btn--active {
  color: var(--chip-spinel);
  border-color: var(--chip-spinel);
  background: rgba(208, 128, 192, 0.12);
}
.gem-card--spinel .treasury-picker__option--active .treasury-picker__check {
  color: var(--chip-spinel);
}

/* Spinel list item */
.gem-list-item--spinel .gem-list-item__arabic {
  color: var(--chip-spinel);
}

/* ================================================================
   GEM CARD — Content Layers
   ================================================================ */

/* Arabic — the gem itself. Colored by source. */
.gem-card__arabic {
  font-family: var(--font-arabic);
  font-size: var(--text-3xl);
  line-height: 2;
  text-align: center;
  direction: rtl;
  padding: var(--space-sm) 0 var(--space-md);
}

/* Placeholder text like [mention your need here] */
.gem-card__placeholder {
  font-size: 0.7em;
  font-style: italic;
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--font-body);
}

/* Highlight changed words when toggled */
.gem-card__arabic .toggle-changed {
  background: var(--toggle-highlight);
  border-radius: 4px;
  padding: 0 4px;
  transition: background var(--transition-base);
}

/* Transliteration */
.gem-card__transliteration {
  font-size: var(--text-sm);
  color: var(--text-light);
  text-align: center;
  font-style: italic;
  margin-bottom: var(--space-md);
}

/* Translation */
.gem-card__translation {
  font-size: var(--text-base);
  color: var(--text);
  text-align: center;
  line-height: var(--line-height-body);
  margin-bottom: var(--space-md);
}

.gem-card__translation-label {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  display: block;
  margin-bottom: var(--space-xs);
  font-style: italic;
}

/* ================================================================
   SOURCE LINE — Badge + reference
   ================================================================ */
.gem-card__source-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.gem-card__source-type {
  font-size: var(--text-xxs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 10px;
  border-radius: 50px;
  border: 1px solid;
}

.gem-card__source-ref {
  font-size: var(--text-xs);
  color: var(--text-light);
}

.gem-card__source-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.15);
}

.gem-card__source-link:hover {
  text-decoration-color: currentColor;
}

/* ================================================================
   SOURCE DROPDOWN — Full reference (chevron)
   ================================================================ */
.gem-card__dropdown {
  border-top: 1px solid var(--border-light);
  margin-top: var(--space-sm);
}

.gem-card__dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: var(--space-sm) 0;
  font-size: var(--text-xs);
  color: var(--text-lighter);
  cursor: pointer;
  transition: color var(--transition-fast);
  letter-spacing: 0.02em;
}

.gem-card__dropdown-toggle:hover {
  color: var(--text-light);
}

.gem-card__dropdown-chevron {
  display: inline-block;
  transition: transform var(--transition-fast);
  font-size: 10px;
}

.gem-card__dropdown-toggle[aria-expanded="true"] .gem-card__dropdown-chevron {
  transform: rotate(180deg);
}

.gem-card__dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), opacity var(--transition-base);
  opacity: 0;
}

.gem-card__dropdown-content[data-expanded="true"] {
  max-height: 2000px;
  opacity: 1;
}

.gem-card__dropdown-inner {
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.2);
  border-radius: calc(var(--radius) - 4px);
  font-size: var(--text-sm);
  color: var(--text-light);
  line-height: var(--line-height-body);
}

/* ---- Structured Reference Card ---- */
.ref-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ref-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ref-card__row:last-of-type {
  border-bottom: none;
}

.ref-card__label {
  font-size: var(--text-xxs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  margin-right: var(--space-md);
}

.ref-card__value {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  text-align: right;
}

.ref-card__value--strong {
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.9);
}

.ref-card__row--context .ref-card__value {
  text-align: left;
  font-style: italic;
}

.ref-card__block {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ref-card__block-label {
  font-size: var(--text-xxs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: var(--space-xs);
}

.ref-card__arabic {
  direction: rtl;
  font-family: var(--font-arabic);
  font-size: var(--text-base);
  line-height: 2;
  color: rgba(255, 255, 255, 0.85);
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

.ref-card__english {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: rgba(255, 255, 255, 0.75);
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  margin-top: var(--space-xs);
}

.ref-card__verify {
  text-align: center;
  margin-top: var(--space-md);
}

.ref-card__verify a {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.ref-card__verify a:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Light mode ref card — see night-mode.css */

/* ================================================================
   WE/I TOGGLE
   ================================================================ */
.gem-card__toggle-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.gem-card__toggle-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  border-radius: 50px;
  font-size: var(--text-xs);
  color: var(--text-lighter);
  border: 1px solid var(--border);
  transition: all var(--transition-fast);
}

.gem-card__toggle-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.gem-card__toggle-btn[data-active="true"] {
  color: var(--amber);
  border-color: rgba(212, 148, 74, 0.4);
  background: rgba(212, 148, 74, 0.1);
}

.gem-card__toggle-btn .toggle-icon {
  font-size: 11px;
}

.gem-card__toggle-label {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  font-style: italic;
}

/* ================================================================
   COUNTER
   ================================================================ */
.gem-card__counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
  margin-top: var(--space-md);
}

/* Counter bead — convex polished stone feel */
.gem-card__counter-tap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.12) 0%, var(--bg-aside) 50%, rgba(0,0,0,0.1) 100%);
  border: 1.5px solid var(--border);
  font-size: var(--text-xl);
  color: var(--text-light);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Subtle convex 3D appearance */
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.15);
}

.gem-card__counter-tap:hover {
  border-color: var(--amber);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.2);
}

.gem-card__counter-tap:active {
  transform: scale(0.92);
}

.gem-card__counter-tap.pulse {
  animation: counterPulse 300ms ease-out;
}

.gem-card__counter-tap.pulse-complete {
  animation: counterPulseComplete 600ms ease-out;
}

@keyframes counterPulse {
  0% { box-shadow: 0 0 0 0 var(--pulse); }
  100% { box-shadow: 0 0 0 16px transparent; }
}

@keyframes counterPulseComplete {
  0% {
    box-shadow: 0 0 0 0 var(--complete);
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.12) 0%, var(--bg-aside) 50%, rgba(0,0,0,0.1) 100%);
  }
  40% {
    box-shadow: 0 0 0 18px var(--complete);
    background: radial-gradient(circle at 35% 35%, rgba(212, 168, 75, 0.3) 0%, rgba(128, 91, 17, 0.15) 50%, rgba(0,0,0,0.1) 100%);
  }
  100% {
    box-shadow: 0 0 0 30px transparent;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.12) 0%, var(--bg-aside) 50%, rgba(0,0,0,0.1) 100%);
  }
}

.gem-card__counter-count {
  font-size: var(--text-sm);
  color: var(--text-lighter);
  min-width: 55px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.gem-card__counter-reset {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  padding: 2px var(--space-sm);
  border-radius: 4px;
  transition: color var(--transition-fast);
}

.gem-card__counter-reset:hover {
  color: var(--text-light);
}

/* ================================================================
   MY TREASURY BUTTON (on gem card)
   ================================================================ */
.gem-card__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gem-card__share-wrap {
  position: relative;
}

.gem-card__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.gem-card__share-btn:hover {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.2);
}

.gem-card__share-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  background: var(--bg-aside);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  min-width: 200px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.gem-card__share-menu--open {
  display: block;
}

.gem-card__share-option {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-light);
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.gem-card__share-option:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.gem-card__share-option + .gem-card__share-option {
  border-top: 1px solid var(--border);
}

.gem-card__treasury-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

/* Quran treasury — gold */
.gem-card--quran .gem-card__treasury-btn:hover {
  border-color: var(--chip-gold);
  color: var(--chip-gold);
}

.gem-card--quran .gem-card__treasury-btn--active {
  color: var(--chip-gold);
  border-color: var(--chip-gold);
  background: rgba(212, 176, 96, 0.12);
}

/* Hadith treasury — emerald */
.gem-card--hadith .gem-card__treasury-btn:hover {
  border-color: var(--chip-emerald);
  color: var(--chip-emerald);
}

.gem-card--hadith .gem-card__treasury-btn--active {
  color: var(--chip-emerald);
  border-color: var(--chip-emerald);
  background: rgba(61, 184, 142, 0.12);
}

.gem-card__treasury-icon {
  font-size: 10px;
}

/* Light mode — see night-mode.css */

/* Treasury view */
.treasury-collection {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.treasury-collection__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-section);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--transition-fast);
}

.treasury-collection__header:hover {
  background: var(--bg-aside);
}

.treasury-collection__left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.treasury-collection__chevron {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  transition: transform var(--transition-fast);
  width: 12px;
}

.treasury-collection__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Drawer — collapses/expands */
.treasury-collection__drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.treasury-collection__drawer[data-expanded="true"] {
  max-height: 2000px;
}

.treasury-collection__drawer .gem-list-compact {
  border-radius: 0;
}

.treasury-collection__drawer .treasury-tasbih-btn {
  border-radius: 0;
  border-top: 1px solid var(--border);
}

.treasury-collection__drawer .treasury-empty {
  padding: var(--space-md) var(--space-lg);
}

.treasury-collection__delete {
  color: var(--text-lighter);
  font-size: var(--text-xxs);
  cursor: pointer;
  opacity: 0.3;
  transition: all var(--transition-fast);
  margin-left: 6px;
}

.treasury-collection__delete:hover {
  opacity: 1;
  color: #d08080;
}

.treasury-collection__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.treasury-collection__count {
  font-size: var(--text-xs);
  color: var(--text-lighter);
}

.treasury-empty {
  font-size: var(--text-sm);
  color: var(--text-lighter);
  font-style: italic;
  text-align: center;
  padding: var(--space-lg);
}

.treasury-tasbih-btn {
  display: block;
  width: 100%;
  padding: var(--space-sm);
  margin-top: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: none;
  color: var(--text-lighter);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.treasury-tasbih-btn:hover {
  border-color: var(--emerald);
  color: var(--emerald);
}

.treasury-new-btn {
  display: block;
  width: 100%;
  padding: var(--space-md);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: none;
  color: var(--text-lighter);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.treasury-new-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Treasury collection picker popup */
.treasury-picker {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  background: var(--bg-aside);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  min-width: 200px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.treasury-picker__title {
  font-size: var(--text-xxs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-lighter);
  padding: 8px 14px 4px;
}

.treasury-picker__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-light);
  cursor: pointer;
  transition: background var(--transition-fast);
  text-align: left;
}

.treasury-picker__option:hover {
  background: rgba(255, 255, 255, 0.05);
}

.treasury-picker__option--active {
  color: var(--text);
}

.gem-card--quran .treasury-picker__option--active .treasury-picker__check {
  color: var(--chip-gold);
}

.gem-card--hadith .treasury-picker__option--active .treasury-picker__check {
  color: var(--chip-emerald);
}

.treasury-picker__option--new {
  border-top: 1px solid var(--border);
  color: var(--text-lighter);
}

.treasury-picker__check {
  font-size: 10px;
  width: 14px;
  text-align: center;
}

.treasury-picker__name {
  flex: 1;
}

/* Light mode treasury-picker — see night-mode.css */

.treasury-remove {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-lighter);
  font-size: 9px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  margin-top: 4px;
}

.treasury-remove:hover {
  opacity: 1;
  color: var(--ruby);
}

/* ================================================================
   DU'A PAIR LINK
   ================================================================ */
.gem-card__pair {
  text-align: center;
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
  border-top: 1px solid var(--border-light);
}

.gem-card__pair-link {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  font-style: italic;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.gem-card__pair-link:hover {
  color: var(--amber);
}

/* ================================================================
   PAIR OVERLAY
   ================================================================ */
.pair-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-lg);
  cursor: pointer;
}

/* ================================================================
   FACET CARDS — Each gem has its own color
   ================================================================ */
.facet-card {
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-base);
  border: 2px solid;
}

.facet-card:hover {
  transform: translateY(-2px);
}

/* Individual jewel tones */
/* Ruby — deep dark red */
.facet-card--ruby {
  background: var(--ruby-bg);
  border-color: var(--ruby-border);
}
.facet-card--ruby:hover {
  background: var(--ruby-bg-hover);
  box-shadow: 0 0 30px rgba(71, 0, 0, 0.5);
}

/* Amber — deep burnt amber */
.facet-card--amber {
  background: var(--amber-bg);
  border-color: var(--amber-border);
}
.facet-card--amber:hover {
  background: var(--amber-bg-hover);
  box-shadow: 0 0 30px rgba(98, 32, 17, 0.5);
}

/* Sapphire — deep dark blue */
.facet-card--sapphire {
  background: var(--sapphire-bg);
  border-color: var(--sapphire-border);
}
.facet-card--sapphire:hover {
  background: var(--sapphire-bg-hover);
  box-shadow: 0 0 30px rgba(28, 42, 71, 0.5);
}

/* Emerald — deep teal-green */
.facet-card--emerald {
  background: var(--emerald-bg);
  border-color: var(--emerald-border);
}
.facet-card--emerald:hover {
  background: var(--emerald-bg-hover);
  box-shadow: 0 0 30px rgba(11, 69, 63, 0.5);
}

/* Amethyst — deep dark purple */
.facet-card--amethyst {
  background: var(--amethyst-bg);
  border-color: var(--amethyst-border);
}
.facet-card--amethyst:hover {
  background: var(--amethyst-bg-hover);
  box-shadow: 0 0 30px rgba(29, 9, 38, 0.5);
}

/* Gold — deep rich gold */
.facet-card--gold {
  background: var(--gold-bg);
  border-color: var(--gold-border);
}
.facet-card--gold:hover {
  background: var(--gold-bg-hover);
  box-shadow: 0 0 30px rgba(128, 91, 17, 0.5);
}

/* Olive/Peridot — dark olive green */
.facet-card--olive {
  background: var(--olive-bg);
  border-color: var(--olive-border);
}
.facet-card--olive:hover {
  background: var(--olive-bg-hover);
  box-shadow: 0 0 30px rgba(74, 77, 0, 0.5);
}

/* Topaz — warm brown-gold */
.facet-card--topaz {
  background: var(--topaz-bg);
  border-color: var(--topaz-border);
}
.facet-card--topaz:hover {
  background: var(--topaz-bg-hover);
  box-shadow: 0 0 30px rgba(107, 68, 0, 0.5);
}

/* Tanzanite — deep blue-violet */
.facet-card--tanzanite {
  background: var(--tanzanite-bg);
  border-color: var(--tanzanite-border);
}
.facet-card--tanzanite:hover {
  background: var(--tanzanite-bg-hover);
  box-shadow: 0 0 30px rgba(26, 16, 64, 0.5);
}

/* Tourmaline — dark teal */
.facet-card--tourmaline {
  background: var(--tourmaline-bg);
  border-color: var(--tourmaline-border);
}
.facet-card--tourmaline:hover {
  background: var(--tourmaline-bg-hover);
  box-shadow: 0 0 30px rgba(27, 75, 58, 0.5);
}

/* Citrine — yellow-brown */
.facet-card--citrine {
  background: var(--citrine-bg);
  border-color: var(--citrine-border);
}
.facet-card--citrine:hover {
  background: var(--citrine-bg-hover);
  box-shadow: 0 0 30px rgba(92, 74, 0, 0.5);
}

/* Garnet — deep wine red */
.facet-card--garnet {
  background: var(--garnet-bg);
  border-color: var(--garnet-border);
}
.facet-card--garnet:hover {
  background: var(--garnet-bg-hover);
  box-shadow: 0 0 30px rgba(75, 6, 6, 0.5);
}

/* Carnelian — deep burnt orange-red */
.facet-card--carnelian {
  background: var(--carnelian-bg);
  border-color: var(--carnelian-border);
}
.facet-card--carnelian:hover {
  background: var(--carnelian-bg-hover);
  box-shadow: 0 0 30px rgba(107, 27, 10, 0.5);
}

/* Lapis Lazuli — deep royal blue */
.facet-card--lapis {
  background: var(--lapis-bg);
  border-color: var(--lapis-border);
}
.facet-card--lapis:hover {
  background: var(--lapis-bg-hover);
  box-shadow: 0 0 30px rgba(27, 58, 107, 0.5);
}

/* Jade — deep rich green */
.facet-card--jade {
  background: var(--jade-bg);
  border-color: var(--jade-border);
}
.facet-card--jade:hover {
  background: var(--jade-bg-hover);
  box-shadow: 0 0 30px rgba(10, 107, 58, 0.5);
}

/* Turquoise — deep teal-blue */
.facet-card--turquoise {
  background: var(--turquoise-bg);
  border-color: var(--turquoise-border);
}
.facet-card--turquoise:hover {
  background: var(--turquoise-bg-hover);
  box-shadow: 0 0 30px rgba(10, 74, 92, 0.5);
}

/* Tiger Eye — deep golden-brown */
.facet-card--tiger-eye {
  background: var(--tiger-eye-bg);
  border-color: var(--tiger-eye-border);
}
.facet-card--tiger-eye:hover {
  background: var(--tiger-eye-bg-hover);
  box-shadow: 0 0 30px rgba(92, 58, 10, 0.5);
}

/* Pearl — warm iridescent */
.facet-card--pearl {
  background: var(--pearl-bg);
  border-color: var(--pearl-border);
}
.facet-card--pearl:hover {
  background: var(--pearl-bg-hover);
  box-shadow: 0 0 30px rgba(234, 224, 200, 0.1);
}

.facet-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2px;
}

.facet-card__subtitle {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  line-height: 1.4;
}


/* ================================================================
   CUSTOM DIALOG — Replaces native prompt() and confirm()
   ================================================================ */
.kanz-dialog {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--transition-base);
  padding: var(--space-md);
}

.kanz-dialog--visible {
  opacity: 1;
}

.kanz-dialog__box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  width: 100%;
  max-width: 340px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(8px);
  transition: transform var(--transition-base);
}

.kanz-dialog--visible .kanz-dialog__box {
  transform: translateY(0);
}

.kanz-dialog__message {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.kanz-dialog__input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  outline: none;
  transition: border-color var(--transition-fast);
  margin-bottom: var(--space-md);
  box-sizing: border-box;
}

.kanz-dialog__input:focus {
  border-color: var(--aged-brass);
}

.kanz-dialog__input::placeholder {
  color: var(--text-lighter);
  font-style: italic;
}

.kanz-dialog__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

.kanz-dialog__btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.kanz-dialog__btn--cancel {
  background: none;
  color: var(--text-light);
  border-color: var(--border);
}

.kanz-dialog__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.04);
}

.kanz-dialog__btn--confirm {
  background: var(--aged-brass);
  color: #fff;
  border-color: var(--aged-brass);
}

.kanz-dialog__btn--confirm:hover {
  background: #7a6438;
}

.kanz-dialog__btn--danger {
  background: var(--ruby);
  border-color: var(--ruby-border);
}

.kanz-dialog__btn--danger:hover {
  background: var(--ruby-bg-hover);
}

/* Light mode dialog */
body.light-mode .kanz-dialog__input {
  background: #fff;
  border-color: #e0dbd3;
}

body.light-mode .kanz-dialog__input:focus {
  border-color: var(--aged-brass);
}


/* ================================================================
   TOAST — Shared feedback notification
   ================================================================ */
.kanz-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-aside);
  color: var(--text-light);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: var(--text-xs);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s;
}