/* SoftHub Marketplace — Components */

/* ===== Button ===== */
.btn-sh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--d-state) var(--ease),
              background-color var(--d-state) var(--ease),
              border-color var(--d-state) var(--ease),
              box-shadow var(--d-state) var(--ease);
  text-decoration: none;
  min-height: 36px;
}

.btn-sh-primary {
  background: var(--text);
  color: var(--bg-paper);
}
.btn-sh-primary:hover { transform: translateY(-1px); }
.btn-sh-primary:active { transform: translateY(0); }

.btn-sh-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--hairline);
}
.btn-sh-ghost:hover { border-color: var(--text); color: var(--text); }

.btn-sh-cream {
  background: var(--bg-paper);
  color: var(--text);
}
.btn-sh-cream:hover { transform: translateY(-1px); box-shadow: var(--sh-md); }

/* Glass-surface button — fits the glassmorphism design system, higher contrast than ghost */
.btn-sh-surface {
  background: var(--surface-strong);
  border-color: rgba(10, 10, 10, 0.1);
  color: var(--text);
  backdrop-filter: blur(10px);
  box-shadow: var(--sh-inset), var(--sh-sm);
}
.btn-sh-surface:hover {
  border-color: var(--accent-warm-2);
  transform: translateY(-1px);
  box-shadow: var(--sh-inset), var(--sh-md);
}
.btn-sh-surface:active { transform: translateY(0); box-shadow: var(--sh-inset); }
body.dark .btn-sh-surface {
  border-color: rgba(255, 255, 255, 0.1);
}
body.dark .btn-sh-surface:hover {
  border-color: var(--accent-warm);
  box-shadow: var(--sh-inset), 0 4px 16px -4px rgba(212, 197, 169, 0.25);
}

.btn-sh:disabled,
.btn-sh[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-sh-lg {
  padding: 12px 20px;
  font-size: 13px;
  min-height: 44px;
}

/* ===== Chip ===== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--d-state) var(--ease);
  font-family: var(--font-body);
  white-space: nowrap;
}
.chip:hover { border-color: var(--text-3); color: var(--text); }
.chip.is-active {
  background: var(--text);
  color: var(--bg-paper);
  border-color: var(--text);
}
.chip:active { transform: scale(0.96); }

/* ===== Filter bar — segmented underline (refined) ===== */
.sh-filter-bar .chip {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 2px;
  margin-right: 22px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-4);
  text-transform: none;
}
.sh-filter-bar .chip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 240ms var(--ease);
}
.sh-filter-bar .chip:hover {
  background: transparent;
  border: none;
  color: var(--text-2);
}
.sh-filter-bar .chip.is-active {
  background: transparent;
  border: none;
  color: var(--text);
  font-weight: 600;
}
.sh-filter-bar .chip.is-active::after { transform: scaleX(1); }
.sh-filter-bar .chip:active { transform: none; }

/* uppercase the badge labels (HOT, NEW, FREE…) so they read as tags */
.sh-filter-bar .chip[data-filter="hot"],
.sh-filter-bar .chip[data-filter="new"],
.sh-filter-bar .chip[data-filter="free"],
.sh-filter-bar .chip[data-filter="vip"],
.sh-filter-bar .chip[data-filter="full"] {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chip-count {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: rgba(10, 10, 10, 0.06);
  color: inherit;
}
.chip.is-active .chip-count {
  background: rgba(245, 243, 236, 0.18);
}

/* ===== Input ===== */
.input-sh {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-input);
  background: var(--surface);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-glass);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: box-shadow var(--d-state) var(--ease), border-color var(--d-state) var(--ease);
}
.input-sh::placeholder { color: var(--text-4); }
.input-sh:focus {
  box-shadow: 0 0 0 4px rgba(10, 10, 10, .06);
  border-color: var(--text);
}
body.dark .input-sh:focus {
  box-shadow: 0 0 0 4px rgba(245, 243, 236, .08);
}

.input-sh.has-error {
  border-color: var(--danger);
}
.helper-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 4px;
}

/* ===== Card (3 variants) ===== */
.card-sh {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform var(--d-state) var(--ease),
              box-shadow var(--d-state) var(--ease),
              border-color var(--d-state) var(--ease),
              background-color var(--d-state) var(--ease);
  display: flex;
  flex-direction: column;
}

/* Variant: glass */
.card-sh.is-glass {
  background: var(--surface-strong);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--border-glass);
  box-shadow: var(--sh-inset), var(--sh-md);
}
.card-sh.is-glass:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-inset), var(--sh-lg);
}

/* Variant: borderless */
.card-sh.is-borderless {
  background: transparent;
  border: 1px solid transparent;
}
.card-sh.is-borderless:hover {
  background: var(--surface);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-color: var(--border-glass);
  transform: translateY(-6px);
}

/* Variant: outline */
.card-sh.is-outline {
  background: transparent;
  border: 1px solid var(--hairline);
}
.card-sh.is-outline:hover {
  border-color: var(--accent-warm-2);
  transform: translateY(-6px);
}

/* Card thumb (browser-chrome + filename placeholder) */
.card-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(245, 243, 236, 0.2) 100%),
    var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.card-sh.is-outline .card-thumb { border-bottom: none; }

/* Dark thumbnail variant — applied via class on .card-thumb */
.card-thumb.is-dark {
  background:
    linear-gradient(180deg, rgba(20, 18, 14, 0.92) 0%, rgba(10, 10, 10, 0.96) 100%);
}
.card-thumb.is-dark .card-thumb-name { color: rgba(245, 243, 236, 0.45); }
.card-thumb.is-dark .browser-chrome span:nth-child(1) { background: rgba(220, 38, 38, 0.85); }
.card-thumb.is-dark .browser-chrome span:nth-child(2) { background: rgba(212, 175, 55, 0.85); }
.card-thumb.is-dark .browser-chrome span:nth-child(3) { background: rgba(22, 163, 74, 0.85); }

/* Filename placeholder — sits behind the image. If image loads, image covers it.
   If image is broken / hidden, the filename shows through. */
.card-thumb-name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  word-break: break-word;
  line-height: 1.4;
  pointer-events: none;
  z-index: 1;
}

.card-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
  z-index: 2;
  /* Hide alt-text fallback for broken images so the placeholder shows through */
  color: transparent;
  font-size: 0;
  background: transparent;
}
.card-thumb img[hidden] { display: none; }
.card-sh:hover .card-thumb img { transform: scale(1.04); }

/* Fallback when image URL is empty or 404 — gradient + centered icon
   (no fake filename text). */
.card-thumb.has-no-image,
.card-thumb.img-broken {
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(212, 197, 169, 0.32), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(245, 243, 236, 0.25) 100%),
    var(--surface);
}
body.dark .card-thumb.has-no-image,
body.dark .card-thumb.img-broken {
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(212, 197, 169, 0.18), transparent 65%),
    linear-gradient(180deg, rgba(40, 36, 30, 0.55) 0%, rgba(20, 18, 14, 0.4) 100%),
    var(--surface);
}
.card-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-4);
  opacity: 0.4;
  z-index: 1;
}
body.dark .card-thumb-fallback {
  color: rgba(245, 243, 236, 0.5);
}

/* ===== New card body bits — meta line, title+version row, views ===== */
.card-meta-line {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  line-height: 1;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.card-title-row .card-title {
  flex: 1;
  min-width: 0;
}
.card-version {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 3px 7px;
  border-radius: var(--r-pill);
  margin-top: 2px;
  line-height: 1;
}

.card-price-num {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
}

.card-views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-4);
}
.card-views svg { opacity: 0.7; }

.browser-chrome {
  position: absolute;
  top: 10px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 4;
}
.browser-chrome span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(10, 10, 10, .12);
}
.browser-chrome span:nth-child(1) { background: rgba(220, 38, 38, .55); }
.browser-chrome span:nth-child(2) { background: rgba(212, 175, 55, .6); }
.browser-chrome span:nth-child(3) { background: rgba(22, 163, 74, .55); }

/* Card body */
.card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.card-title {
  font-family: var(--font-body) !important;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  text-transform: none;
}

.card-price {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
  margin-top: 2px;
}
.card-price del {
  display: block;
  font-size: 11px;
  color: var(--text-4);
  font-weight: 400;
  margin-bottom: 2px;
}
.card-price-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 2px;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.card-sold {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: 0.04em;
}

/* HOT badge */
.hot-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  z-index: 5;
  box-shadow: 0 1px 4px rgba(10, 10, 10, 0.08);
}

/* Quick-view eye (top-right) */
.quick-eye {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--surface-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--d-state) var(--ease), transform var(--d-state) var(--ease);
  z-index: 3;
}
.card-sh:hover .quick-eye { opacity: 1; transform: translateY(0); }

/* ===== Modal ===== */
.modal-sh-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.modal-sh-overlay.is-open {
  display: flex;
  opacity: 1;
}
.modal-sh {
  background: var(--surface-strong);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-shell);
  box-shadow: var(--sh-inset), var(--sh-xl);
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  animation: scalein 280ms var(--ease) both;
}

.modal-close {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: all var(--d-state) var(--ease);
}
.modal-close:hover { border-color: var(--text); }

/* ===== Sidebar ===== */
.sh-sidebar {
  width: 264px;
  /* Divide by --ui-scale so the sidebar still fills the visible viewport
     after body { zoom } is applied. With ui-scale=1 this resolves to
     calc(100vh - 32px), unchanged. */
  height: calc((100vh - 32px) / var(--ui-scale, 1));
  position: sticky;
  top: 16px;
  margin: 16px;
  padding: 0;
  border-radius: var(--r-shell);
  display: flex;
  flex-direction: column;
  transition: width var(--d-layout) var(--ease);
  overflow: hidden;
}

/* Three regions inside sidebar:
   1. Brand block (fixed top)
   2. Nav scroll (scrollable middle)
   3. Balance card (fixed bottom) */
.sh-brand-block {
  flex-shrink: 0;
  padding: 18px 18px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sh-brand-block .sh-brand { flex: 1; min-width: 0; }
.sh-brand-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--d-page) var(--ease), color var(--d-state) var(--ease), border-color var(--d-state) var(--ease);
}
.sh-brand-toggle:hover { color: var(--text); border-color: var(--text); }
/* Default SVG points ">" (right). When sidebar is EXPANDED we rotate to "<"
   so the chevron visually invites the user to "close/push left". When
   COLLAPSED we leave it as ">" inviting "expand right". */
.sh-brand-toggle { transform: rotate(180deg); }
.sh-sidebar.is-collapsed .sh-brand-toggle { transform: rotate(0deg); }
.sh-brand-block-divider {
  height: 1px;
  background: var(--hairline);
  margin: 0 18px;
}
.sh-nav-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--text-5) transparent;
}
.sh-nav-scroll::-webkit-scrollbar { width: 6px; }
.sh-nav-scroll::-webkit-scrollbar-track { background: transparent; }
.sh-nav-scroll::-webkit-scrollbar-thumb { background: var(--text-5); border-radius: 3px; }

.sh-balance-block {
  flex-shrink: 0;
  padding: 14px 18px 18px;
}
.sh-sidebar.is-collapsed {
  width: 84px;
}
.sh-sidebar.is-collapsed .sh-brand-meta,
.sh-sidebar.is-collapsed .sh-group-label,
.sh-sidebar.is-collapsed .sh-nav-item > span:not(.sh-nav-icon),
.sh-sidebar.is-collapsed .sh-balance-block {
  /* display: none (not width:0) — width:0 still leaves the element as a flex
     item, and the parent's `gap` between siblings pushes the icon off-center. */
  display: none !important;
}
.sh-sidebar.is-collapsed .sh-nav-item { justify-content: center; padding: 14px 12px; }
.sh-sidebar.is-collapsed .sh-brand { gap: 0; justify-content: center; }
.sh-sidebar.is-collapsed .sh-sub { display: none !important; }

/* Collapsed sidebar tweaks — stack brand mark on top of toggle so the
   toggle stays visible (and won't overlap "S"). User clicks toggle to expand. */
.sh-sidebar.is-collapsed .sh-brand-block {
  padding: 18px 0 14px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.sh-sidebar.is-collapsed .sh-brand-toggle {
  /* Visible below brand mark, rotated to point right (= expand) */
  display: inline-flex;
  width: 28px;
  height: 28px;
}
/* In collapsed state, hide brand-meta entirely so the mark is the only child
   inside .sh-brand. Without this, flex:1 on .sh-brand-meta steals space and
   pushes the mark off-center. */
.sh-sidebar.is-collapsed .sh-brand-meta {
  display: none !important;
}
.sh-sidebar.is-collapsed .sh-brand {
  flex: 0 0 auto;
  justify-content: center;
  gap: 0;
  width: 44px;
}
.sh-sidebar.is-collapsed .sh-brand-block-divider {
  margin: 0 22px;
}
/* Tighter, square-ish active chip in collapsed state. With non-icon children
   hidden via display:none, gap:0 keeps the icon at the geometric center. */
.sh-sidebar.is-collapsed .sh-nav-item {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  padding: 0;
  gap: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.sh-sidebar.is-collapsed .sh-nav-scroll {
  align-items: center;
  padding: 14px 0;
  gap: 14px;
}
.sh-sidebar.is-collapsed .sh-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
/* Active state — make sure the cream chip is visible (override base color
   tokens that might have been overridden elsewhere) */
.sh-sidebar.is-collapsed .sh-nav-item.is-active {
  background: var(--inverse-bg);
  color: var(--inverse-fg);
}
.sh-sidebar.is-collapsed .sh-nav-item.is-active .sh-nav-icon {
  color: var(--inverse-fg);
}

.sh-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
}
.sh-brand-mark {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  flex-shrink: 0;
  /* Logo-only: no background plate, no border-radius bg — just the image */
  background: transparent;
  color: var(--text);
  border-radius: 0;
}
.sh-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sh-brand-text {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  white-space: nowrap;
  line-height: 1;
  transition: opacity var(--d-state) var(--ease);
}
.sh-brand-sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-4);
  margin-top: 4px;
  white-space: nowrap;
}
.sh-brand-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.sh-group { display: flex; flex-direction: column; gap: 4px; }
.sh-group-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-4);
  padding: 4px 14px 8px;
}

.sh-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.32s var(--ease),
              color 0.32s var(--ease),
              padding-left 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

/* Sliding gradient sheen — warm glow lights up across on hover, signature
   editorial gesture matching the sub-link wash. */
.sh-nav-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(212, 197, 169, 0.18) 50%,
    transparent 100%
  );
  transform: translateX(-110%);
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.sh-nav-item:hover::after { transform: translateX(110%); }
body.dark .sh-nav-item::after {
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(220, 200, 170, 0.12) 50%,
    transparent 100%
  );
}

.sh-nav-item:hover {
  background: rgba(10, 10, 10, 0.04);
  color: var(--text);
  padding-left: 18px;
}
body.dark .sh-nav-item:hover { background: rgba(255, 255, 255, 0.05); }

/* Icon: subtle scale-in on hover for a tactile micro-interaction */
.sh-nav-item .sh-nav-icon {
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              color 0.32s var(--ease);
}
.sh-nav-item:hover .sh-nav-icon { transform: scale(1.08); }

.sh-nav-item.is-active {
  background: var(--inverse-bg);
  color: var(--inverse-fg);
  font-weight: 600;
  padding-left: 18px;
}
.sh-nav-item.is-active .sh-nav-icon { transform: none; }

.sh-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sh-nav-icon svg { width: 100%; height: 100%; }

/* Dropdown chevron on items with children */
.sh-nav-item.has-children {
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.sh-nav-item .sh-nav-chev {
  margin-left: auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-4);
  transition: transform var(--d-state) var(--ease), color var(--d-state) var(--ease);
}
.sh-nav-item[aria-expanded="true"] .sh-nav-chev {
  transform: rotate(90deg);
  color: var(--text);
}

/* Leaf nav items don't get a trailing chevron — only items with a submenu do.
   Removing the redundant arrow keeps the sidebar clean and reserves the chevron
   as a clear "this expands" affordance. */

/* Submenu */
.sh-sub {
  list-style: none;
  margin: 4px 0 4px;
  padding: 0 0 0 28px;
  display: none;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.sh-sub::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--hairline);
}
.sh-nav-item[aria-expanded="true"] + .sh-sub {
  display: flex;
  animation: itemIn 220ms var(--ease) both;
}
/* ── Sub-links: editorial morph indicator + italic Cormorant on active ──
   Default  → tiny round bullet, muted text
   Hover    → bullet stretches into a short vertical bar, text slides right
   Active   → bar grows tall + warm gold, text shifts to italic Cormorant
              (signature editorial moment — sidebar's only serif italic)    */
.sh-sub-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--text-3);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: color 0.32s var(--ease),
              background-color 0.32s var(--ease),
              padding-left 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              font-family 0s,
              letter-spacing 0.35s var(--ease);
  overflow: hidden;
}

/* Sliding gradient sheen on hover — left-to-right wash, very subtle */
.sh-sub-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(212, 197, 169, 0.10) 50%,
    transparent 100%
  );
  transform: translateX(-110%);
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.sh-sub-link:hover::after { transform: translateX(110%); }
body.dark .sh-sub-link::after {
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(220, 200, 170, 0.08) 50%,
    transparent 100%
  );
}

.sh-sub-link:hover {
  color: var(--text);
  background: rgba(10, 10, 10, 0.03);
  padding-left: 18px;
}
body.dark .sh-sub-link:hover { background: rgba(255, 255, 255, 0.04); }

.sh-sub-link.is-active {
  color: var(--text);
  background: transparent;
  padding-left: 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* Bullet (the .sh-sub-bullet element in markup) morphs through the states.
   We don't use ::before any more — the bullet itself is the indicator. */
.sh-sub-link.is-active::before { content: none; }

.sh-sub-bullet {
  width: 3px;
  height: 3px;
  border-radius: 2px;
  background: var(--text-5);
  flex-shrink: 0;
  display: inline-block;
  transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1),
              height 0.4s cubic-bezier(0.65, 0, 0.35, 1),
              background-color 0.3s var(--ease),
              box-shadow 0.4s var(--ease);
}
.sh-sub-link:hover .sh-sub-bullet {
  width: 2px;
  height: 14px;
  background: var(--text-3);
}
.sh-sub-link.is-active .sh-sub-bullet {
  width: 2px;
  height: 20px;
  background: var(--accent-warm-2);
  box-shadow: 0 0 0 3px rgba(154, 136, 112, 0.16);
}

/* Sidebar balance — compact editorial token, no chunky cream button */
.sh-balance {
  padding: 14px 16px 12px;
  border-radius: 14px;
  background: var(--inverse-bg);
  color: var(--inverse-fg);
  position: relative;
  overflow: hidden;
  transition: transform var(--d-state) var(--ease), box-shadow var(--d-state) var(--ease);
}
/* Soft aurora glow in the corner — same vibe as the hero */
.sh-balance::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(212, 197, 169, 0.32), transparent 65%);
  pointer-events: none;
  transition: opacity var(--d-page) var(--ease);
}
.sh-balance:hover::before { opacity: 1.4; }

.sh-balance-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--inverse-fg);
  opacity: 0.5;
  margin-bottom: 4px;
}

.sh-balance-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}
.sh-balance-value .unit {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.45;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Action — converted from chunky button to inline link with hairline divider */
.sh-balance .btn-sh-cream,
.sh-balance .sh-balance-action {
  background: transparent;
  color: var(--inverse-fg);
  width: 100%;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 9px 0 0;
  margin-top: 11px;
  min-height: auto;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: color var(--d-state) var(--ease), border-color var(--d-state) var(--ease);
  text-decoration: none;
}
.sh-balance .btn-sh-cream:hover,
.sh-balance .sh-balance-action:hover {
  color: var(--accent-warm);
  border-top-color: rgba(212, 197, 169, 0.3);
  transform: none;
  box-shadow: none;
}
.sh-balance .btn-sh-cream svg,
.sh-balance .sh-balance-action svg {
  transition: transform var(--d-state) var(--ease);
  opacity: 0.7;
}
.sh-balance .btn-sh-cream:hover svg,
.sh-balance .sh-balance-action:hover svg {
  transform: translateX(3px);
  opacity: 1;
}
/* Dark mode: balance card flips to cream — divider needs dark color */
body.dark .sh-balance .btn-sh-cream,
body.dark .sh-balance .sh-balance-action {
  border-top-color: rgba(10, 10, 10, 0.08);
}
body.dark .sh-balance .btn-sh-cream:hover,
body.dark .sh-balance .sh-balance-action:hover {
  border-top-color: rgba(154, 136, 112, 0.4);
}


/* ===== Top bar ===== */
.sh-topbar {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  margin: 16px 0 24px 0;
  border-radius: var(--r-shell);
  /* Sticky + high z-index so the navbar (and dropdowns inside it) always
     sit above stat cards' transform-created stacking contexts. */
  position: sticky;
  top: 16px;
  z-index: 100;
}
/* Mask strip above the sticky topbar — mirrors body.aurora bg with fixed
   attachment so it stays seamless with the body. Hides content scrolling
   through the 16px gap between viewport top and the floating navbar. */
.sh-topbar::before {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  top: -16px;
  height: 16px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 55% at 12% 8%,  var(--bg-aurora-1), transparent 60%),
    radial-gradient(ellipse 70% 50% at 88% 92%, var(--bg-aurora-2), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 30%, var(--bg-aurora-3), transparent 70%),
    var(--bg-paper);
  background-attachment: fixed;
  background-size: 180% 180%;
  animation: auroraShift 22s ease-in-out infinite;
}
body.dark .sh-topbar::before {
  background:
    radial-gradient(ellipse 60% 50% at 92% 95%, rgba(245, 220, 170, 0.18), transparent 60%),
    radial-gradient(ellipse 65% 45% at 8% 5%,   rgba(180, 150, 220, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 30%, rgba(255, 200, 100, 0.10), transparent 70%),
    linear-gradient(125deg, #0a0a0a 0%, #14110d 55%, #1f1a14 100%);
  background-attachment: fixed;
  background-size: 200% 200%;
}
/* Soft fade strip BELOW the navbar — solid bg-paper at the top fades to
   transparent at the bottom, so content scrolling up under the navbar
   gradually disappears into the body bg with no hard edge. The fade-out
   end is the key: any color mismatch with the aurora bg dissolves into
   the gradient instead of producing a visible line. z-index: -1 keeps
   the search popover above this scrim. */
.sh-topbar::after {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -28px;
  height: 28px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(to bottom,
    var(--bg-paper) 0%,
    var(--bg-paper) 35%,
    rgba(245, 243, 236, 0) 100%);
}
body.dark .sh-topbar::after {
  background: linear-gradient(to bottom,
    #14110d 0%,
    #14110d 35%,
    rgba(20, 17, 13, 0) 100%);
}
/* Inside .sh-pinned-top wrapper the wrapper itself handles stickiness +
   masking, so revert the topbar to static flow and drop its own scrims.
   But keep a high z-index so dropdowns inside the topbar (notifications,
   user menu) render above stat-cards / chips below in the same wrapper. */
.sh-pinned-top .sh-topbar {
  position: relative;
  top: auto;
  z-index: 100;
}
.sh-pinned-top .sh-topbar::before,
.sh-pinned-top .sh-topbar::after {
  content: none;
}

.sh-search-shell {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-glass);
  position: relative;
  transition: box-shadow var(--d-state) var(--ease);
}
.sh-search-shell:focus-within {
  box-shadow: 0 0 0 4px rgba(10, 10, 10, .06);
}
.sh-search-shell input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}
.sh-search-shell input::placeholder { color: var(--text-4); }
.sh-search-icon { color: var(--text-4); flex-shrink: 0; display: inline-flex; }
.kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(10, 10, 10, 0.06);
  color: var(--text-3);
  letter-spacing: 0.04em;
}

.sh-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--surface);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-glass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  position: relative;
  transition: transform var(--d-state) var(--ease);
}
.sh-icon-btn:hover { transform: translateY(-1px); }
.sh-icon-btn .dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  animation: hotPulse 1.4s var(--ease) infinite;
}

.sh-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--r-pill);
  background: var(--surface);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-glass);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  transition: transform var(--d-state) var(--ease);
}
.sh-user-chip:hover { transform: translateY(-1px); }
.sh-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-warm), var(--accent-warm-2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-paper);
  font-family: var(--font-display);
  font-size: 16px;
  flex-shrink: 0;
  /* No overflow:hidden — frame img extends outside. User photo is clipped via its own border-radius. */
}
.sh-avatar > img:not(.sh-avatar-frame) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.sh-user-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}
.sh-user-role {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Search autocomplete popover */
/* ===== Search popover ===== */
.sh-search-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  border-radius: 16px;
  /* Fully opaque (no alpha) — nothing shows through, content always readable */
  background: #ffffff;
  border: 1px solid var(--hairline);
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.04),
    0 12px 32px -8px rgba(10, 10, 10, 0.18),
    0 32px 80px -16px rgba(10, 10, 10, 0.25);
  padding: 6px;
  display: none;
  z-index: 100;
  max-height: 480px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--text-5) transparent;
}
body.dark .sh-search-popover {
  background: #14110d;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 12px 32px -8px rgba(0, 0, 0, 0.5),
    0 32px 80px -16px rgba(0, 0, 0, 0.6);
}
.sh-search-popover.is-open { display: block; animation: itemIn 200ms var(--ease) both; }
.sh-search-popover::-webkit-scrollbar { width: 6px; }
.sh-search-popover::-webkit-scrollbar-thumb { background: var(--text-5); border-radius: 3px; }

/* Header — result count + hint */
.sh-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  font-size: 11.5px;
  color: var(--text-4);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--hairline);
  margin: -6px -6px 4px;
}
.sh-search-header strong {
  color: var(--text);
  font-weight: 600;
}
.sh-search-header.is-empty {
  border-bottom: none;
  padding: 18px 14px;
  text-align: center;
  display: block;
}
.sh-search-header kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--text-3);
}

.sh-search-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Item row */
.sh-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  transition: background-color var(--d-state) var(--ease);
  position: relative;
}
.sh-search-item:hover {
  background: rgba(10, 10, 10, 0.04);
}
body.dark .sh-search-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Thumb with fallback initial */
.sh-search-thumb {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-warm), var(--accent-warm-2));
  display: flex;
  align-items: center;
  justify-content: center;
}
.sh-search-thumb-fallback {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
}
.sh-search-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--d-state) var(--ease);
}
.sh-search-thumb.has-image img { opacity: 1; }

/* Info column */
.sh-search-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sh-search-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.sh-search-name mark {
  background: rgba(212, 197, 169, 0.4);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}
body.dark .sh-search-name mark {
  background: rgba(212, 197, 169, 0.25);
}

.sh-search-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-4);
}
.sh-search-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--text-3);
}
.sh-search-price {
  font-family: var(--font-mono);
  color: var(--text-2);
  font-weight: 500;
}
.sh-search-price em {
  font-style: normal;
  color: var(--text-4);
  font-weight: 400;
  margin-left: 4px;
}

/* Trailing arrow — appears on hover */
.sh-search-arrow {
  flex-shrink: 0;
  color: var(--text-4);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--d-state) var(--ease), transform var(--d-state) var(--ease);
}
.sh-search-item:hover .sh-search-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--text);
}

/* Loading skeleton */
.sh-search-skeleton {
  height: 60px;
  border-radius: 10px;
  background: linear-gradient(90deg,
    var(--hairline) 0%,
    rgba(10, 10, 10, 0.03) 50%,
    var(--hairline) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  margin: 4px 0;
}
body.dark .sh-search-skeleton {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
}

/* ===== Hero banner ===== */
.sh-hero {
  position: relative;
  border-radius: var(--r-shell);
  padding: 36px 40px;
  background:
    radial-gradient(ellipse 60% 80% at 95% 110%, rgba(245, 243, 236, 0.18), transparent 70%),
    linear-gradient(105deg, #0a0a0a 0%, #1a1a1a 60%, #2a2520 100%);
  background-size: 200% 200%;
  animation: heroShift 12s ease-in-out infinite;
  /* Hero is ALWAYS dark — force cream text regardless of mode */
  color: #f5f3ec;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  overflow: hidden;
  margin-bottom: 28px;
}
/* Dark mode: ensure hero text stays cream (don't inherit inverse-fg swap) */
body.dark .sh-hero { color: #f5f3ec; }
body.dark .sh-hero-eyebrow { color: rgba(245, 243, 236, 0.65); }
body.dark .sh-hero-title { color: #f5f3ec; }
body.dark .sh-hero-desc { color: rgba(245, 243, 236, 0.78); }
body.dark .sh-hero-cta-meta { color: rgba(245, 243, 236, 0.55); }
@keyframes heroShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.sh-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 243, 236, 0.65);
  margin-bottom: 12px;
}
.sh-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--inverse-fg);
  margin: 0 0 12px;
}
.sh-hero-title em {
  color: var(--accent-warm);
  font-style: italic;
}
.sh-hero-desc {
  font-size: 13px;
  color: rgba(245, 243, 236, 0.78);
  max-width: 56ch;
  margin: 0;
}
.sh-hero-cta-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.sh-hero-cta-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(245, 243, 236, 0.6);
  letter-spacing: 0.06em;
}

/* ===== Filter bar ===== */
.sh-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 24px 0 16px;
}

/* ===== Section ===== */
.sh-section { margin-bottom: 48px; }
.sh-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.sh-section-head-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sh-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-4);
}
.sh-section-eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--text-4);
  display: inline-block;
}
.sh-section-title {
  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.sh-section-count {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-4);
  vertical-align: baseline;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
.sh-section-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  white-space: nowrap;
}
.sh-section-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--d-state) var(--ease), gap var(--d-state) var(--ease);
}
.sh-section-more:hover { color: var(--text); gap: 10px; }

.sh-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px) {
  .sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .sh-grid { grid-template-columns: 1fr; }
}

/* ===== Empty state ===== */
.sh-empty {
  padding: 60px 24px;
  text-align: center;
  border-radius: var(--r-card);
  border: 1px dashed var(--hairline);
}
.sh-empty-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.15;
}
.sh-empty-hint {
  font-size: 13px;
  color: var(--text-4);
  margin: 0;
}

/* ===== Live widget ===== */
.sh-live {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 90;
  animation: liveIn 380ms var(--ease) both;
}

/* ===== Notification banner — hero-style dark card ===== */
.sh-notify {
  position: relative;
  padding: 36px 40px;
  border-radius: var(--r-shell);
  background:
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(212, 197, 169, 0.10), transparent 70%),
    radial-gradient(ellipse 40% 60% at 0% 0%, rgba(154, 136, 112, 0.08), transparent 70%),
    linear-gradient(105deg, #0a0a0a 0%, #1a1a1a 60%, #2a2520 100%);
  background-size: 200% 200%;
  animation: heroShift 14s ease-in-out infinite;
  color: var(--inverse-fg);
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 28px;
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.sh-notify-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.sh-notify-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--inverse-fg);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.sh-notify-title .pass-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.02em;
  color: var(--accent-warm);
  background: rgba(212, 197, 169, 0.08);
  border: 1px solid rgba(212, 197, 169, 0.25);
  padding: 2px 12px;
  border-radius: var(--r-pill);
  margin-left: 4px;
}

.sh-notify-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sh-notify-actions .btn-sh {
  background: rgba(245, 243, 236, 0.04);
  border: 1px solid rgba(245, 243, 236, 0.14);
  color: rgba(245, 243, 236, 0.88);
  padding: 9px 14px 9px 12px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.sh-notify-actions .btn-sh:hover {
  background: rgba(245, 243, 236, 0.10);
  border-color: rgba(245, 243, 236, 0.32);
  color: var(--inverse-fg);
  transform: translateY(-1px);
}
.sh-notify-actions .btn-sh svg {
  flex-shrink: 0;
  opacity: 0.85;
}
.sh-notify-actions .btn-sh:hover svg { opacity: 1; }

/* Body: prefix label + content area */
.sh-notify-body {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(245, 243, 236, 0.10);
}
@media (max-width: 720px) {
  .sh-notify-body { grid-template-columns: 1fr; gap: 12px; }
}

.sh-notify-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(245, 243, 236, 0.5);
  padding-top: 4px;
}

.sh-notify-text {
  font-size: 14px;
  color: rgba(245, 243, 236, 0.82);
  margin: 0;
  line-height: 1.65;
}

/* Each <p> renders as a flex row with a custom bullet — strip leading "- " text via CSS */
.sh-notify-text p {
  position: relative;
  margin: 0 0 12px;
  padding-left: 22px;
  text-indent: 0;
}
.sh-notify-text p:last-child { margin-bottom: 0; }
.sh-notify-text p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 1px;
  background: rgba(212, 197, 169, 0.5);
}
.sh-notify-text strong {
  color: var(--inverse-fg);
  font-weight: 600;
  display: inline;
}
.sh-notify-text br + strong { display: inline; }
.sh-notify-text font[color] { color: var(--accent-warm) !important; }
.sh-notify-text i { color: var(--accent-warm); font-style: normal; }

/* ===== Pill / status ===== */
.pill-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  border: 1px solid var(--hairline);
  color: var(--text-3);
}
.pill-status.is-success { color: var(--success); }
.pill-status.is-danger  { color: var(--danger); }
.pill-status.is-pending { color: var(--text-3); }

/* Visually hidden — screen reader only */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===== Page layout shell ===== */
.sh-layout {
  display: flex;
  align-items: flex-start;
  /* Compensate for body { zoom } so the layout still fills the visible
     viewport. Resolves to 100vh when ui-scale=1. */
  min-height: calc(100vh / var(--ui-scale, 1));
}
.sh-main {
  flex: 1;
  min-width: 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
}

/* Pinned top — navbar + stats + filter stay put, only grid scrolls.
   Uses solid bg-paper so cards scrolling underneath are completely hidden,
   then a tall gradient fade below to soft-blend into the scroll area. */
.sh-pinned-top {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Full-bleed within sh-main (cancels its 24px padding) */
  margin: 0 -24px;
  padding: 0 24px 14px;
  /* MIRROR body.aurora EXACTLY — same 3-blob gradient + fixed attachment +
     animation. With both surfaces locked to viewport the pinned-top becomes
     visually indistinguishable from body, eliminating any seam. */
  background:
    radial-gradient(ellipse 75% 55% at 12% 8%,  var(--bg-aurora-1), transparent 60%),
    radial-gradient(ellipse 70% 50% at 88% 92%, var(--bg-aurora-2), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 30%, var(--bg-aurora-3), transparent 70%),
    var(--bg-paper);
  background-attachment: fixed;
  background-size: 180% 180%;
  animation: auroraShift 22s ease-in-out infinite;
}
body.dark .sh-pinned-top {
  background:
    radial-gradient(ellipse 60% 50% at 92% 95%, rgba(245, 220, 170, 0.18), transparent 60%),
    radial-gradient(ellipse 65% 45% at 8% 5%,   rgba(180, 150, 220, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 30%, rgba(255, 200, 100, 0.10), transparent 70%),
    linear-gradient(125deg, #0a0a0a 0%, #14110d 55%, #1f1a14 100%);
  background-attachment: fixed;
  background-size: 200% 200%;
}
.sh-pinned-top .sh-topbar {
  margin-bottom: 16px;
}
.sh-pinned-top .sh-stat-row {
  margin-bottom: 0;
}
.sh-pinned-top .sh-filter-bar-row {
  margin: 6px 0 0;
  border-bottom: none;
}
/* No fade ::after — pinned-top bg now matches body.aurora exactly via fixed
   attachment, so the bg flows continuously through the boundary. Adding a
   solid-color fade introduces a visible "band" because no static color can
   match the aurora gradient at that exact viewport y-position. */
.sh-main-inner {
  padding: 0 0 32px 0;
}

/* Override legacy .section-menu-left / .section-content-right when present */
.layout-wrap { display: flex; align-items: flex-start; min-height: calc(100vh / var(--ui-scale, 1)); }
.section-menu-left { width: auto; flex-shrink: 0; background: transparent !important; box-shadow: none !important; }
.section-content-right { flex: 1; min-width: 0; padding: 0 16px 0 0; }
.header-dashboard { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
.main-content { padding: 0 !important; background: transparent !important; }
.main-content-inner, .main-content-wrap { padding: 0 !important; background: transparent !important; }

/* ===== Responsive ===== */
/* Drawer mode at <=1100px so sidebar doesn't eat content space on tablets
   and small laptops. Below this width the sidebar slides off-screen by
   default, only revealed via the hamburger button in the navbar. */
@media (max-width: 1100px) {
  .sh-sidebar {
    /* Force EXPANDED width even if user previously toggled is-collapsed —
       a drawer in mobile state should always be full nav, not icon-only. */
    width: 280px !important;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    margin: 0;
    height: 100vh !important;
    z-index: 200;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
    box-shadow: 12px 0 40px -8px rgba(0, 0, 0, 0.45);
  }
  .sh-sidebar.is-mobile-open { transform: translateX(0); }
  /* JS strips `.is-collapsed` while drawer is open so the original
     full-width nav styles apply naturally — no fragile CSS resets here. */

  /* Scrim/backdrop — fades in when drawer is open, click to close */
  .sh-drawer-scrim {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 199;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
  }
  body.is-drawer-open .sh-drawer-scrim {
    opacity: 1;
    visibility: visible;
  }
  body.is-drawer-open { overflow: hidden; }
}

/* Hide brand-toggle (collapse button) in drawer mode — not useful when
   sidebar is full-width drawer; user closes via scrim or nav-link click. */
@media (max-width: 1100px) {
  .sh-brand-toggle { display: none !important; }
}

@media (max-width: 768px) {
  /* Tighter horizontal padding so content uses more of the small viewport. */
  .sh-main { padding: 0 16px; }
  .sh-pinned-top { margin: 0 -16px; padding: 0 16px 6px; }
  /* Even vertical rhythm: gap between chips ↔ sort = gap between sort ↔ content */
  .sh-filter-shell-row { gap: 8px !important; }
  .sh-filter-shell { padding: 0 !important; margin-top: 0 !important; }
  .sh-main-inner { padding-top: 0 !important; }
  /* Trim default margins that compound into a fat gap above the product grid */
  .sh-stat-row { margin-bottom: 14px !important; }
  .sh-products { margin: 8px 0 24px !important; }
  .sh-notify { margin-top: 0 !important; }
}
@media (max-width: 640px) {
  .sh-main { padding: 0 12px; }
  .sh-pinned-top { margin: 0 -12px; padding: 0 12px 6px; }
  .sh-hero {
    grid-template-columns: 1fr;
    padding: 22px 20px;
  }
  .sh-hero-cta-col { align-items: flex-start; }
  .sh-section-title { font-size: 22px; }
  /* Search bar on phones — hide ⌘K hint, full width */
  .sh-search-shell .kbd { display: none; }
  .sh-search-shell input { font-size: 14px; }
}

/* Hide hamburger on desktop — only show when drawer mode is active */
@media (min-width: 1101px) {
  [data-toggle-sidebar-mobile] { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE SIMPLIFICATION (≤768px)
   Hide non-essential decoration so the small viewport surfaces only
   what matters: search, stat numbers, product cards, drawer menu.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Stat cards: kill all visual noise (delta %, sparkline, trend label) ─
     Only keep: eyebrow + value + sub. Numbers are what matter on small UI. */
  .sh-stat-delta,
  .sh-stat-trend,
  .sh-stat-chart,
  .sh-stat-trend-label { display: none !important; }

  /* Asymmetric layout — balance gets full row + hero treatment, deposits
     full row beneath, source+tool side-by-side. Reduces visual repetition
     and gives the most-important number (balance) clear top billing. */
  .sh-stat-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Card 1 (balance) and Card 2 (deposits) span full row each */
  .sh-stat-row > .sh-stat-card:nth-child(1),
  .sh-stat-row > .sh-stat-card:nth-child(2) {
    grid-column: 1 / -1;
  }

  .sh-stat-card {
    padding: 14px 18px !important;
    min-height: auto !important;
    border-radius: 16px !important;
  }
  .sh-stat-card .sh-stat-head { margin-bottom: 6px !important; }
  .sh-stat-card .sh-stat-eyebrow {
    font-size: 9.5px !important;
    letter-spacing: 0.18em !important;
    opacity: 0.7;
  }
  .sh-stat-card .sh-stat-value { font-size: 22px !important; letter-spacing: -0.02em !important; }
  .sh-stat-card .sh-stat-sub,
  .sh-stat-card .sh-stat-sub-secondary {
    font-size: 10.5px !important;
    margin-top: 4px !important;
    opacity: 0.55;
  }
  /* Hero card (balance) — bigger value, brighter accent */
  .sh-stat-card.is-primary:nth-child(1) {
    padding: 18px 20px !important;
    position: relative;
    overflow: hidden;
  }
  .sh-stat-card.is-primary:nth-child(1) .sh-stat-value { font-size: 30px !important; font-weight: 600 !important; }
  /* Subtle radial sheen on hero card to make it feel premium */
  .sh-stat-card.is-primary:nth-child(1)::after {
    content: "";
    position: absolute;
    top: -40%; right: -20%;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
  }
  .sh-stat-card.is-primary:nth-child(1) > * { position: relative; z-index: 1; }
  /* Secondary cards (source, tool) — compact, value-focused */
  .sh-stat-card.is-secondary {
    padding: 12px 16px !important;
  }
  .sh-stat-card.is-secondary .sh-stat-value { font-size: 24px !important; font-weight: 600 !important; }
  .sh-stat-card.is-secondary .sh-stat-accent { font-size: 11px !important; opacity: 0.55; }

  /* Pinned top: don't sticky — let it scroll away */
  .sh-pinned-top { position: relative !important; }

  /* ── Topbar: tight enough that avatar doesn't clip on 360px ── */
  .sh-topbar { gap: 8px !important; padding: 10px 12px !important; }
  .sh-icon-btn { width: 38px; height: 38px; flex: 0 0 auto; }
  .sh-search-shell { flex: 1; min-width: 0; }
  /* Placeholder text shortened to "Tìm sản phẩm…" via JS (theme.js)
     because CSS `content` doesn't work on ::placeholder. */
  .sh-user-chip { padding: 4px 8px !important; gap: 6px !important; flex: 0 0 auto; }
  .sh-user-chip .sh-user-role { display: none; }
  .sh-user-chip .sh-user-name { display: none; } /* avatar-only chip on mobile */
  .sh-avatar { width: 32px !important; height: 32px !important; }
  .sh-notif { flex: 0 0 auto; }

  /* ── Filter row: horizontal-scrollable chip rail (single line, swipeable),
        sort dropdown full row beneath. No more 3-line wrap chaos. ── */
  .sh-filter-bar-row { gap: 10px; margin: 14px 0 12px; flex-direction: column; align-items: stretch; }
  .sh-filter-shell, .sh-filter-shell-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .chips,
  .sh-filter-bar,
  .sh-filter-bar-row > div[role="tablist"],
  .sh-filter-shell-row > .chips {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Soft fade on the right edge to hint that more chips exist off-screen */
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
    padding-right: 24px;
  }
  .chips::-webkit-scrollbar,
  .sh-filter-bar::-webkit-scrollbar { display: none; }
  .chip {
    font-size: 12px !important;
    padding: 6px 12px !important;
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .chip .chip-count, .chip .chip-num { font-size: 10px !important; }
  /* Hide brand icons inside chips on mobile — saves a lot of horizontal space
     and the label text alone is unambiguous (Facebook / TikTok / Instagram…) */
  .chip svg, .chip img, .chip .chip-icon { display: none !important; }
  /* Sort dropdown: right-aligned, auto width (not full row) */
  [data-sort-dropdown],
  .sh-sort-dropdown,
  .sh-filter-shell-row > select,
  .sh-filter-shell-row > .dropdown {
    width: auto !important;
    align-self: flex-end !important;
    margin-left: auto !important;
  }

  /* Product card grid: 1 column on phones */
  .sh-grid, .sh-card-grid, .sh-products { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Bento: 1 column */
  .sh-bento { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; gap: 12px !important; }
  .sh-bento .card-sh:nth-child(1) { grid-column: span 1 !important; grid-row: span 1 !important; }

  /* Hero */
  .sh-hero-eyebrow { font-size: 11px; }
  .sh-hero h1, .sh-hero-title { font-size: clamp(24px, 6vw, 32px) !important; line-height: 1.15 !important; }

  /* Product card: shrink decorative badges (NEW / HOT) */
  .card-sh .badge-new,
  .card-sh .badge-hot,
  .card-sh [class*="badge"] {
    font-size: 10px !important;
    padding: 3px 8px !important;
    transform: scale(0.85);
    transform-origin: top left;
  }
  /* Hide the 3 traffic-light dots (red/yellow/green) on card thumbs —
     pure decoration, conflicts with NEW badge in same corner on mobile. */
  .card-sh .browser-chrome,
  .card-sh .card-thumb-name { display: none !important; }

  .hist-pagination, .pagination-sh { font-size: 12px; }
}

/* ── Phones ≤480px: maximum compaction ── */
@media (max-width: 480px) {
  /* Keep the asymmetric layout (balance+deposits full row, source+tool 2-col)
     just shrink the hero number a touch so 9-digit deposits don't overflow. */
  .sh-stat-card { padding: 12px 14px !important; }
  .sh-stat-card.is-primary:nth-child(1) { padding: 16px 18px !important; }
  .sh-stat-card.is-primary:nth-child(1) .sh-stat-value { font-size: 26px !important; }
  .sh-stat-card .sh-stat-value { font-size: 20px !important; }
  .sh-stat-card.is-secondary .sh-stat-value { font-size: 22px !important; }

  /* Search: shorter placeholder via attribute swap (handled in JS) +
     no kbd hint (already hidden at 640px) + tighter padding */
  .sh-search-shell { padding: 0 10px; }
  .sh-search-shell input { padding: 8px 0; font-size: 13px; }

  /* Hide chip count badges entirely */
  .chip .chip-count, .chip .chip-num { display: none !important; }

  /* Topbar: drop notif on tiny screens to save space (still in user dropdown) */
  .sh-topbar { gap: 6px !important; padding: 8px 10px !important; }
  .sh-icon-btn { width: 36px; height: 36px; }
}

/* ════════════════════════════════════════════════════════════════════════
   STAT CARD ROW · Premium dashboard stats (Số dư, Tổng nạp, Source, Tool)
   Lifted from SoftHub Dashboard — primary cream/onyx + secondary glass
   ════════════════════════════════════════════════════════════════════════ */

.sh-stat-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}

.sh-stat-card {
  position: relative;
  border-radius: 20px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  transition: transform 280ms var(--ease), box-shadow 320ms var(--ease);
  animation: shStatIn 500ms var(--ease) both;
}
.sh-stat-card.is-primary {
  padding: 18px 20px 16px;
}
.sh-stat-card:nth-child(1) { animation-delay: 0ms; }
.sh-stat-card:nth-child(2) { animation-delay: 70ms; }
.sh-stat-card:nth-child(3) { animation-delay: 140ms; }
.sh-stat-card:nth-child(4) { animation-delay: 210ms; }
@keyframes shStatIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sh-stat-card.is-primary {
  background: linear-gradient(165deg, #fffdf6 0%, #ebdcb4 100%);
  border: 1px solid rgba(40, 30, 15, 0.14);
  box-shadow:
    0 20px 40px -18px rgba(120, 90, 40, 0.22),
    0 4px 10px rgba(40, 30, 15, 0.08),
    inset 0 1px 0 rgba(255, 253, 247, 0.85);
  color: var(--text);
}
.sh-stat-card.is-primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 32px 60px -18px rgba(120, 90, 40, 0.28),
    0 8px 18px rgba(40, 30, 15, 0.10),
    inset 0 1px 0 rgba(255, 253, 247, 0.85);
}
/* aurora wash behind value */
.sh-stat-card.is-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 240px 110px at 92% 8%, rgba(154, 126, 74, 0.18), transparent 65%);
  opacity: 0.7;
  transition: opacity 400ms var(--ease);
}
.sh-stat-card.is-primary:hover::before { opacity: 1; }

/* ── Primary in dark mode (onyx + champagne glow) ───────────── */
body.dark .sh-stat-card.is-primary {
  background: linear-gradient(165deg, #221d16 0%, #110e09 60%, #0c0a06 100%);
  border: 1px solid rgba(245, 235, 210, 0.10);
  box-shadow:
    0 18px 40px -22px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(245, 235, 210, 0.04),
    inset 0 1px 0 rgba(245, 235, 210, 0.06);
  color: #f5f3ec;
}
body.dark .sh-stat-card.is-primary:hover {
  box-shadow:
    0 32px 80px -28px rgba(0, 0, 0, 0.7),
    0 0 60px -10px rgba(212, 197, 169, 0.18),
    inset 0 1px 0 rgba(245, 235, 210, 0.10);
}
body.dark .sh-stat-card.is-primary::before {
  background: radial-gradient(ellipse 260px 120px at 92% 8%, rgba(212, 197, 169, 0.22), transparent 60%);
}

/* ── Secondary (glass — for source/tool counts) ─────────────── */
.sh-stat-card.is-secondary {
  background: var(--surface-strong);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-glass);
  box-shadow: var(--sh-inset), var(--sh-md);
  padding: 16px 18px 14px;
}
.sh-stat-card.is-secondary:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-inset), var(--sh-lg);
}

/* ── Stat header row (eyebrow + delta pill) ─────────────────── */
.sh-stat-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 1;
}

.sh-stat-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
}
.sh-stat-card.is-primary .sh-stat-eyebrow { color: var(--text-4); }
body.dark .sh-stat-card.is-primary .sh-stat-eyebrow { color: rgba(245, 243, 236, 0.5); }

.sh-stat-delta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.sh-stat-delta.is-up   { background: rgba(22, 163, 74, 0.10); color: var(--success); }
.sh-stat-delta.is-down { background: rgba(220, 38, 38, 0.10); color: var(--danger); }
body.dark .sh-stat-card.is-primary .sh-stat-delta.is-up {
  background: rgba(212, 197, 169, 0.16);
  color: var(--accent-warm);
}
.sh-stat-delta-icon { font-size: 8px; }

/* ── Big value (san-serif, tabular nums) ────────────────────── */
.sh-stat-value-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  z-index: 1;
}
.sh-stat-value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
}
.sh-stat-card.is-primary .sh-stat-value {
  font-size: 26px;
}
/* Secondary cards (Source/Tool đã mua) — slightly bigger to fill space */
.sh-stat-card.is-secondary .sh-stat-value {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sh-stat-accent {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  color: var(--text-4);
  margin-left: 2px;
  letter-spacing: 0;
  line-height: 1;
  align-self: baseline;
  opacity: 0.7;
}
.sh-stat-card.is-secondary .sh-stat-accent {
  font-size: 12px;
  margin-left: 6px;
}
.sh-stat-card.is-primary .sh-stat-accent { font-size: 12px; }
body.dark .sh-stat-card.is-primary .sh-stat-accent { color: rgba(212, 197, 169, 0.8); }

/* ── Sub label ──────────────────────────────────────────────── */
.sh-stat-sub {
  position: relative;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-4);
  text-transform: uppercase;
  z-index: 1;
}
body.dark .sh-stat-card.is-primary .sh-stat-sub { color: rgba(245, 243, 236, 0.4); }

/* ── Sparkline / mini-chart slot ────────────────────────────── */
.sh-stat-chart {
  position: relative;
  margin-top: 4px;
  height: 36px;
  color: var(--accent-warm-2);
  z-index: 1;
}
.sh-stat-card.is-secondary .sh-stat-chart { height: 16px; }
body.dark .sh-stat-card.is-primary .sh-stat-chart { color: var(--accent-warm); }
body.dark .sh-stat-chart { color: var(--accent-warm); }
.sh-stat-chart svg { width: 100%; height: 100%; display: block; }

/* End-point dot — round (not stretched by preserveAspectRatio=none) with halo. */
.sh-spark-dot {
  position: absolute;
  right: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(50%, -50%);
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
  pointer-events: none;
}
/* Fallback for browsers without color-mix support */
@supports not (background: color-mix(in srgb, red, blue)) {
  .sh-spark-dot {
    box-shadow: 0 0 0 4px rgba(212, 197, 169, 0.25);
  }
}

/* ── Mini meter (for source/tool count cards) ──────────────── */
.sh-stat-meter {
  position: relative;
  display: flex;
  gap: 3px;
  margin-top: 4px;
  height: 20px;
  align-items: flex-end;
  z-index: 1;
}
.sh-stat-meter-cell {
  flex: 1;
  background: rgba(154, 126, 74, 0.18);
  border-radius: 2px;
  transition: height 600ms var(--ease);
}
body.dark .sh-stat-meter-cell { background: rgba(212, 197, 169, 0.22); }

/* ── Micro-stats row (for source/tool secondary cards) ─────── */
.sh-stat-micro {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  z-index: 1;
}
.sh-stat-micro-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sh-stat-micro-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.sh-stat-micro-value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.sh-stat-micro-value .accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
  color: var(--text-4);
  margin-left: 2px;
}
body.dark .sh-stat-card.is-secondary .sh-stat-micro { border-top-color: rgba(245, 243, 236, 0.08); }

/* Trend sparkline area in secondary stat cards.
   margin-top: auto pushes the block to the bottom of the flex card so the
   sparkline lines up across all secondary cards regardless of sub-line height. */
.sh-stat-trend {
  position: relative;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  z-index: 1;
}
body.dark .sh-stat-card.is-secondary .sh-stat-trend { border-top-color: rgba(245, 243, 236, 0.08); }
.sh-stat-trend-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  display: block;
  margin-bottom: 6px;
}
.sh-stat-trend .sh-stat-chart {
  height: 32px;
  margin: 0 -2px -4px;
  color: var(--accent-warm-2);
}
body.dark .sh-stat-trend .sh-stat-chart { color: var(--accent-warm); }

/* Responsive collapse */
@media (max-width: 1100px) {
  .sh-stat-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sh-stat-row { grid-template-columns: 1fr; }
  .sh-stat-card.is-primary .sh-stat-value { font-size: 24px; }
  .sh-stat-value { font-size: 20px; }
  .sh-stat-card.is-secondary .sh-stat-value { font-size: 28px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PRODUCT CARD · Refined to match SoftHub Dashboard "glass" variant
   Tight spacing + clearer hierarchy + button arrow + hairline footer
   ════════════════════════════════════════════════════════════════════════ */

/* Tighter glass card lift + softer shadow */
.card-sh.is-glass {
  background: var(--surface-strong);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--border-glass);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
  border-radius: 22px;
}
/* Hover lift — warm-tinted drop shadow (gold/cream tones) instead of hard
   black, plus a subtle warm border highlight so the edge reads as "lifted"
   rather than "outlined in black". Reads softer in light mode. */
.card-sh.is-glass:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 134, 50, 0.4);
  box-shadow:
    0 28px 56px -16px rgba(120, 90, 50, 0.32),
    0 12px 24px -10px rgba(184, 134, 50, 0.18),
    0 2px 6px -2px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
body.dark .card-sh.is-glass:hover {
  border-color: rgba(220, 200, 170, 0.35);
  box-shadow:
    0 24px 60px -18px rgba(0, 0, 0, 0.55),
    0 8px 22px -6px rgba(220, 188, 140, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* Inset thumbnail (frame inside card) — Dashboard style */
.card-sh.is-glass .card-thumb,
.card-sh.is-borderless .card-thumb {
  margin: 6px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border-bottom: none;
  background: linear-gradient(180deg, #ffffff 0%, #f0ede5 100%);
  overflow: hidden;
}
body.dark .card-sh.is-glass .card-thumb,
body.dark .card-sh.is-borderless .card-thumb {
  background: linear-gradient(180deg, #1a1a1d 0%, #0e0e10 100%);
}

/* Outline variant keeps full-bleed thumb */
.card-sh.is-outline .card-thumb {
  margin: 0;
  border-radius: 0;
}

/* Browser chrome dots — slightly larger, traffic light hue */
.card-sh.is-glass .browser-chrome,
.card-sh.is-borderless .browser-chrome {
  top: 8px;
  left: 10px;
}

/* Filename mono caption */
.card-sh.is-glass .card-thumb-name,
.card-sh.is-borderless .card-thumb-name {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: rgba(10, 10, 10, 0.45);
  font-weight: 500;
}
body.dark .card-sh.is-glass .card-thumb-name,
body.dark .card-sh.is-borderless .card-thumb-name {
  color: rgba(245, 243, 236, 0.45);
}

/* Body — tighter spacing closer to Dashboard */
.card-sh.is-glass .card-body,
.card-sh.is-borderless .card-body {
  padding: 6px 18px 18px;
  gap: 8px;
}
.card-sh.is-outline .card-body { padding: 14px 18px 18px; gap: 8px; }

/* Force left-align across all card content (override any inherited center) */
.card-sh,
.card-sh .card-body,
.card-sh .card-title,
.card-sh .card-price,
.card-sh .card-footer { text-align: left; }

/* Eyebrow style */
.card-sh .card-body .eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 0;
}

/* Title — sans, slightly tighter. Reserve exactly 2 lines so all cards in a
   row align price/footer at the same vertical position regardless of how
   long each title is. */
.card-sh .card-title {
  font-family: var(--font-body) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  min-height: calc(1.35em * 2); /* reserve 2 lines */
}

/* Price — mono, inline text flow (del above on its own line) */
.card-sh .card-price {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  display: block;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-sh .card-price del {
  display: block;
  font-size: 11px;
  color: var(--text-4);
  font-weight: 400;
  margin: 0 0 2px;
  letter-spacing: 0;
  text-decoration: line-through;
}
.card-sh .card-price-unit {
  display: inline;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-4);
  white-space: nowrap;
  margin-left: 4px;
}

/* Footer — hairline divider above */
.card-sh .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
}
.card-sh .card-sold {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: 0.04em;
}

/* "Xem chi tiết" → compact pill button with arrow.
   No transform on hover (prevents any shift that could clip against the
   card's overflow:hidden boundary). Use a subtle bg/arrow change instead. */
.card-sh .card-footer .btn-sh-primary {
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg-paper);
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 200ms var(--ease);
}
.card-sh .card-footer .btn-sh-primary span {
  white-space: nowrap;
}
.card-sh .card-footer .btn-sh-primary svg {
  transition: transform 200ms var(--ease);
}
/* Hover: arrow slides right, no card-shift */
.card-sh .card-footer .btn-sh-primary:hover {
  transform: none;
  background: var(--text-2);
}
.card-sh .card-footer .btn-sh-primary:hover svg {
  transform: translateX(2px);
}

/* Footer left text shouldn't push button into wrap */
.card-sh .card-footer .card-sold {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   PRODUCT BADGES — distinctive personality per label type
   Each ribbon has its own color story + icon + animation.
   Premium glass aesthetic — backdrop blur, soft glow, no flat colors.
   ============================================================ */
.card-sh .hot-badge {
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  z-index: 5;
  white-space: nowrap;
}
.card-sh .hot-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
.card-sh .hot-badge .hot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
}

/* ── HOT — molten fire gradient, shine sweep, ember glow ── */
.card-sh .hot-badge.is-hot {
  background: linear-gradient(135deg, #ff8a3d 0%, #ef4444 45%, #b91c1c 100%);
  border-color: rgba(255, 220, 180, 0.45);
  color: #fff1e6;
  text-shadow: 0 1px 2px rgba(120, 20, 0, 0.5);
  box-shadow:
    0 4px 14px -2px rgba(220, 38, 38, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -6px 14px -4px rgba(120, 10, 0, 0.4);
  position: relative;
  overflow: hidden;
  animation: hb-hot-pulse 2.4s ease-in-out infinite;
}
.card-sh .hot-badge.is-hot svg {
  filter: drop-shadow(0 0 3px rgba(255, 200, 130, 0.85)) drop-shadow(0 0 6px rgba(255, 90, 30, 0.55));
  animation: hb-flame 1.6s ease-in-out infinite alternate;
}
/* Shine sweep — same premium move as the NEW badge */
.card-sh .hot-badge.is-hot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 210, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: hb-shine 3.4s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes hb-hot-pulse {
  0%, 100% {
    box-shadow:
      0 4px 14px -2px rgba(220, 38, 38, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -6px 14px -4px rgba(120, 10, 0, 0.4);
  }
  50% {
    box-shadow:
      0 6px 22px -2px rgba(255, 90, 30, 0.85),
      0 0 0 1px rgba(255, 220, 180, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 -6px 14px -4px rgba(120, 10, 0, 0.4);
  }
}
@keyframes hb-flame {
  0%   { transform: rotate(-3deg) scale(1); }
  100% { transform: rotate(3deg) scale(1.1); }
}

/* ── NEW — champagne gold, sparkle rotation, premium fresh ── */
.card-sh .hot-badge.is-new {
  background: linear-gradient(135deg, #fef3c7, #f5d97f 50%, #d4af37);
  border-color: rgba(255,255,255,0.4);
  color: #5b3f05;
  box-shadow: 0 4px 14px -2px rgba(212,175,55,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
  position: relative;
  overflow: hidden;
}
.card-sh .hot-badge.is-new svg {
  animation: hb-spark 2.8s ease-in-out infinite;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
}
@keyframes hb-spark {
  0%, 100% { transform: rotate(0) scale(1); }
  50%      { transform: rotate(180deg) scale(1.15); }
}
/* Shine sweep across the NEW badge */
.card-sh .hot-badge.is-new::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: hb-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hb-shine {
  0%        { transform: translateX(-120%); }
  40%, 100% { transform: translateX(120%); }
}

/* ── FREE — cool teal/blue, gift bow, accessible vibe ── */
.card-sh .hot-badge.is-free {
  background: linear-gradient(135deg, rgba(20,184,166,0.95), rgba(14,116,144,0.95));
  border-color: rgba(255,255,255,0.2);
  color: #fff;
  box-shadow: 0 4px 14px -2px rgba(20,184,166,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
  animation: hb-free-bob 2.6s ease-in-out infinite;
}
.card-sh .hot-badge.is-free svg {
  animation: hb-gift-tilt 2.6s ease-in-out infinite;
}
@keyframes hb-free-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes hb-gift-tilt {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* ── VIP — luxury gold deep, crown, restrained ── */
.card-sh .hot-badge.is-vip {
  background: linear-gradient(135deg, #1a1410, #3d2f1c 70%, #d4af37);
  border-color: rgba(212,175,55,0.5);
  color: #f5d97f;
  box-shadow: 0 4px 14px -2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(212,175,55,0.4);
}
.card-sh .hot-badge.is-vip svg {
  filter: drop-shadow(0 0 3px rgba(212,175,55,0.6));
}

/* ── FULL — slate/dark, shield check, complete ── */
.card-sh .hot-badge.is-full {
  background: linear-gradient(135deg, rgba(75,85,99,0.95), rgba(31,41,55,0.95));
  border-color: rgba(255,255,255,0.15);
  color: #fff;
  box-shadow: 0 4px 14px -2px rgba(31,41,55,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* ── AI — purple/pink gradient, sparkle dot ── */
.card-sh .hot-badge.is-ai {
  background: linear-gradient(135deg, #a855f7, #6366f1 50%, #ec4899);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
  box-shadow: 0 4px 14px -2px rgba(168,85,247,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
  background-size: 200% 200%;
  animation: hb-ai-shift 4s ease-in-out infinite;
}
.card-sh .hot-badge.is-ai svg {
  animation: hb-spark 2.8s ease-in-out infinite;
}
@keyframes hb-ai-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── SALE / discount — red gradient with tag icon ── */
.card-sh .hot-badge.is-sale {
  background: linear-gradient(135deg, #fb7185, #e11d48);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
  box-shadow: 0 4px 14px -2px rgba(225,29,72,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ── Other / fallback — neutral slate ── */
.card-sh .hot-badge.is-other {
  background: rgba(255,255,255,0.92);
  border-color: rgba(10,10,10,0.08);
  color: #0a0a0a;
}

/* Reduced motion respect — kill animations */
@media (prefers-reduced-motion: reduce) {
  .card-sh .hot-badge,
  .card-sh .hot-badge svg,
  .card-sh .hot-badge::before { animation: none !important; }
}

/* ============================================================
   BENTO FEATURED — magazine-style highlight grid
   ============================================================ */
.sh-bento-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
}
.sh-bento-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-4);
  margin-bottom: 6px;
  display: block;
}
.sh-bento-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
}
.sh-bento-title em {
  font-style: italic;
  color: var(--accent-warm-2);
}

.sh-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
  margin-bottom: 36px;
}
.sh-bento .card-sh:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}
.sh-bento .card-sh:nth-child(1) .card-thumb {
  flex: 1;
  min-height: 0;
}
.sh-bento .card-sh:nth-child(1) .card-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.sh-bento .card-sh:nth-child(2),
.sh-bento .card-sh:nth-child(3) {
  grid-column: span 1;
}
.sh-bento .card-sh:nth-child(4),
.sh-bento .card-sh:nth-child(5) {
  grid-column: span 1;
}

@media (max-width: 1024px) {
  .sh-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }
  .sh-bento .card-sh:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
  }
}
@media (max-width: 640px) {
  .sh-bento {
    grid-template-columns: 1fr;
  }
  .sh-bento .card-sh:nth-child(1) { grid-column: span 1; }
}

/* Aurora glow on bento featured (subtle, only on lead card) */
.sh-bento .card-sh:nth-child(1)::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(ellipse 60% 60% at 95% 95%,
              rgba(212, 197, 169, 0.28),
              transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-page) var(--ease);
  z-index: 0;
}
.sh-bento .card-sh:nth-child(1):hover::before { opacity: 1; }
.sh-bento .card-sh:nth-child(1) > * { position: relative; z-index: 1; }

/* ============================================================
   STICKY UNIFIED FILTER — search + sort + chips + count
   ============================================================ */
.sh-filter-wrap {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 -28px 24px;
  padding: 14px 28px 12px;
  background: var(--surface-strong);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-bottom: 1px solid var(--hairline);
}

.sh-filter-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.sh-filter-search {
  flex: 1;
  min-width: 220px;
  position: relative;
}
.sh-filter-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-4);
  pointer-events: none;
}
.sh-filter-search input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border-glass);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color var(--d-state) var(--ease),
              box-shadow var(--d-state) var(--ease);
}
.sh-filter-search input:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 4px rgba(10, 10, 10, .06);
}
body.dark .sh-filter-search input:focus {
  box-shadow: 0 0 0 4px rgba(245, 243, 236, .08);
}

.sh-filter-sort {
  position: relative;
}
.sh-filter-sort select {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 36px 10px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border-glass);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--d-state) var(--ease);
}
.sh-filter-sort select:hover { border-color: var(--text-3); }
.sh-filter-sort::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.sh-filter-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-4);
  white-space: nowrap;
  margin-left: auto;
}
.sh-filter-meta strong {
  color: var(--text);
  font-weight: 600;
}

.sh-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.sh-filter-chips .sh-filter-divider {
  width: 1px;
  height: 18px;
  background: var(--hairline);
  margin: 0 6px;
}
.sh-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text-3);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--d-state) var(--ease);
  white-space: nowrap;
}
.sh-filter-chip:hover {
  border-color: var(--text-3);
  color: var(--text);
}
.sh-filter-chip.is-active {
  background: var(--text);
  color: var(--bg-paper);
  border-color: var(--text);
}
.sh-filter-chip[data-kind="label"] {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================
   PRODUCT GRID — unified, hover lift on cards
   ============================================================ */
.sh-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  /* Top breathing room — first-row cards lift -6px on hover; without this
     buffer they'd intrude into pinned-top's z-index:40 zone and get clipped. */
  margin: 20px 0 32px;
}

.sh-products .card-sh {
  transition: box-shadow var(--d-state) var(--ease),
              border-color var(--d-state) var(--ease),
              background-color var(--d-state) var(--ease),
              transform var(--d-state) var(--ease);
}
.sh-products .card-sh:hover {
  box-shadow: var(--sh-lg);
  border-color: var(--text-4);
}

/* ============================================================
   LUXE CARD HOVER EFFECTS — spotlight + gold gradient border
   + accent reveal line. Multiple subtle layers compound for "sang trọng".
   ============================================================ */

/* Layer 1 — Cursor-following spotlight (warm gold radial)
   Uses CSS variables --mx / --my set by JS on mousemove. */
.sh-products .card-sh {
  --mx: 50%;
  --my: 50%;
}
.sh-products .card-sh::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx) var(--my),
    rgba(212, 197, 169, 0.18),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 320ms var(--ease);
  pointer-events: none;
  z-index: 1;
}
.sh-products .card-sh:hover::before { opacity: 1; }
body.dark .sh-products .card-sh::before {
  background: radial-gradient(
    420px circle at var(--mx) var(--my),
    rgba(212, 197, 169, 0.12),
    transparent 45%
  );
}

/* Layer 2 — Light beam running around the card perimeter on hover.
   Conic-gradient with a bright "comet" arc spins via @property --shine-angle.
   mask-composite carves out the interior so only the 1.5px ring is visible.

   Light mode uses a darker amber/copper comet so it reads on cream bg;
   dark mode keeps the cream-gold beam (overridden below). */
@property --shine-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.sh-products .card-sh::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  /* Light mode default — deeper amber/bronze comet for cream-bg contrast */
  background: conic-gradient(
    from var(--shine-angle, 0deg),
    transparent 0deg,
    transparent 70deg,
    rgba(184, 134, 50, 0.55) 86deg,
    rgba(212, 160, 60, 0.95) 94deg,
    rgba(150, 105, 40, 1) 100deg,
    rgba(212, 160, 60, 0.95) 106deg,
    rgba(184, 134, 50, 0.55) 114deg,
    transparent 130deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 320ms var(--ease);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 6px rgba(184, 134, 50, 0.5));
}
/* Dark mode — bright cream-gold beam stays luminous against ink bg */
body.dark .sh-products .card-sh::after {
  background: conic-gradient(
    from var(--shine-angle, 0deg),
    transparent 0deg,
    transparent 70deg,
    rgba(255, 230, 180, 0.55) 88deg,
    rgba(255, 240, 200, 1) 95deg,
    rgba(212, 175, 55, 1) 100deg,
    rgba(255, 240, 200, 1) 105deg,
    rgba(255, 230, 180, 0.55) 112deg,
    transparent 130deg,
    transparent 360deg
  );
  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.6));
}
.sh-products .card-sh:hover::after {
  opacity: 1;
  animation: cardShineRun 2.6s linear infinite;
}
@keyframes cardShineRun {
  to { --shine-angle: 360deg; }
}
/* Fallback for browsers without @property — fade in static gradient ring */
@supports not (background: paint(unused)) {
  .sh-products .card-sh::after {
    background: linear-gradient(
      135deg,
      rgba(212, 197, 169, 0) 0%,
      rgba(212, 197, 169, 0.6) 30%,
      rgba(154, 136, 112, 0.4) 50%,
      rgba(212, 197, 169, 0.6) 70%,
      rgba(212, 197, 169, 0) 100%
    );
    background-size: 200% 200%;
    background-position: 0% 50%;
  }
  .sh-products .card-sh:hover::after {
    animation: cardBorderShineFallback 3s linear infinite;
  }
  @keyframes cardBorderShineFallback {
    0%   { background-position:   0% 50%; }
    100% { background-position: 200% 50%; }
  }
}

/* Layer 3 — Title gets a gold accent line that slides in on hover */
.sh-products .card-sh .card-title {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.sh-products .card-sh .card-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    var(--accent-warm-2),
    var(--accent-warm),
    transparent
  );
  transition: width 480ms var(--ease);
}
.sh-products .card-sh:hover .card-title::after { width: 100%; }
body.dark .sh-products .card-sh .card-title::after {
  background: linear-gradient(90deg, var(--accent-warm), var(--accent-warm-2), transparent);
}

/* Layer 4 — Image gets subtle brightness + scale on hover (already had scale,
   add brightness for sophistication) */
.sh-products .card-sh .card-thumb img {
  transition: transform 600ms var(--ease), filter 320ms var(--ease);
}
.sh-products .card-sh:hover .card-thumb img {
  transform: scale(1.05);
  filter: brightness(1.04) contrast(1.02);
}

/* Layer 5 — Lift card slightly (subtle, not gaudy) */
.sh-products .card-sh:hover {
  transform: translateY(-4px);
}

/* Body content z-index above spotlight */
.sh-products .card-sh > * { position: relative; z-index: 1; }

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .sh-products .card-sh::after,
  .sh-products .card-sh:hover::after { animation: none !important; }
  .sh-products .card-sh:hover { transform: none; }
  .sh-products .card-sh:hover .card-thumb img { transform: none; filter: none; }
}

/* ============================================================
   FILTER BAR ROW — segmented underline + sort dropdown right
   ============================================================ */
.sh-filter-bar-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 18px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0;
  flex-wrap: wrap;
}

.sh-filter-bar-row .sh-filter-bar {
  display: flex;
  align-items: end;
  gap: 0;
  flex-wrap: wrap;
}

/* Number badge appended in chip ("Tất cả 48") */
.sh-filter-bar .chip .chip-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-left: 8px;
  color: var(--text-4);
  font-weight: 500;
  vertical-align: middle;
}
.sh-filter-bar .chip.is-active .chip-num {
  color: var(--text-3);
}

/* ============================================================
   SHARED FILTER SHELL — glass card wrapping filter chips + (optional)
   sort dropdown. Used on Tool/list, dashboard, index for consistency.
   Top edge has a hair-thin gold gradient stripe as editorial accent.
   ============================================================ */
.sh-filter-shell {
    position: relative;
    margin-top: 8px;
    padding: 4px 0;
    /* No outer border / glass surface — pure layout container.
       Keeps spacing structure while letting page bg show through. */
}

/* ============================================================
   NOTIFICATION DROPDOWN — bell icon + popup panel.
   Click bell → toggles .is-open on .sh-notif. Outside click + Esc close.
   Badge shows unread count, hidden when 0.
   ============================================================ */
.sh-notif {
    position: relative;
    display: inline-block;
    z-index: 9999;
}

/* Ensure user chip dropdown (Bootstrap) and any dropdown inside the navbar
   render above stat cards / cards on the page. */
.sh-topbar .dropdown-menu,
.sh-topbar .dropdown {
    z-index: 9999 !important;
}
.sh-notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--text);
    color: var(--bg-paper);
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 600;
    line-height: 13px;
    text-align: center;
    letter-spacing: 0.02em;
    border: 1px solid var(--accent-warm-2);
    pointer-events: none;
    box-shadow:
        0 1px 3px rgba(10, 10, 10, 0.2),
        0 0 0 2px var(--bg-paper);
    /* Subtle pulse — only when there are unread items */
    animation: shNotifPulse 2.4s ease-in-out infinite;
}
body.dark .sh-notif-badge {
    background: var(--accent-warm);
    color: #14110d;
    border-color: var(--accent-warm-2);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.4),
        0 0 0 2px #14110d;
}
@keyframes shNotifPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

.sh-notif-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    background: var(--surface-strong);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--hairline);
    box-shadow:
        0 1px 2px rgba(10, 10, 10, 0.04),
        0 20px 50px -12px rgba(120, 90, 50, 0.22),
        0 8px 18px -6px rgba(184, 134, 50, 0.10);
    z-index: 9999;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
    transition: opacity 220ms var(--ease),
                transform 220ms var(--ease);
}
.sh-notif.is-open .sh-notif-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
body.dark .sh-notif-panel {
    background: rgba(30, 28, 24, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 24px 60px -12px rgba(0, 0, 0, 0.6);
}

.sh-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--hairline);
}
.sh-notif-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 17px;
    color: var(--text);
    letter-spacing: -0.01em;
}
.sh-notif-mark-all {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-4);
    padding: 4px 6px;
    transition: color var(--d-state) var(--ease);
}
.sh-notif-mark-all:hover { color: var(--text); }

.sh-notif-list {
    max-height: 420px;
    overflow-y: auto;
    padding: 4px;
}
.sh-notif-list::-webkit-scrollbar { width: 6px; }
.sh-notif-list::-webkit-scrollbar-thumb {
    background: var(--text-5);
    border-radius: 3px;
}

.sh-notif-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    transition: background-color 180ms var(--ease);
}
.sh-notif-item:hover { background: rgba(10, 10, 10, 0.04); }
body.dark .sh-notif-item:hover { background: rgba(255, 255, 255, 0.04); }

.sh-notif-item.is-unread::after {
    content: '';
    position: absolute;
    top: 18px;
    right: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-warm-2);
    box-shadow: 0 0 0 3px rgba(184, 134, 50, 0.18);
}
.sh-notif-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-warm-2);
}
body.dark .sh-notif-icon { color: var(--accent-warm); }
.sh-notif-icon svg { width: 18px; height: 18px; }
.sh-notif-body { flex: 1; min-width: 0; }
.sh-notif-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 3px;
    line-height: 1.35;
}
.sh-notif-msg {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.45;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sh-notif-time {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-4);
}

.sh-notif-empty {
    padding: 36px 20px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-4);
}

/* Mobile: detach panel from bell anchor — break out of topbar bounds and
   pin to viewport edges so it never clips off-screen regardless of which
   icon-button is the parent.is-notif. */
@media (max-width: 768px) {
    .sh-notif-panel {
        position: fixed !important;
        top: 64px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
}
@media (max-width: 480px) {
    .sh-notif-panel {
        top: 56px !important;
        left: 8px !important;
        right: 8px !important;
    }
}

/* ============================================================
   SHARED FEEDBACK PILL — toast-style inline message used by
   voucher form, password change, future flows. Slide+fade in.
   ============================================================ */
.pdp-voucher-feedback {
    margin: 0 0 4px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 280ms var(--ease), opacity 200ms var(--ease), margin 280ms var(--ease);
}
.pdp-voucher-feedback:not(:empty) {
    max-height: 80px;
    opacity: 1;
    margin: 0 0 12px;
}
.pdp-voucher-feedback > .fb-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.005em;
    animation: voucherFb 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes voucherFb {
    0%   { transform: translateY(-6px); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}
.pdp-voucher-feedback .fb-icon {
    display: inline-flex;
    width: 22px; height: 22px;
    border-radius: 7px;
    align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pdp-voucher-feedback .fb-icon svg { width: 12px; height: 12px; }

.pdp-voucher-feedback.is-success > .fb-inner {
    background: linear-gradient(135deg, rgba(245, 217, 127, 0.18), rgba(212, 175, 55, 0.08));
    border: 1px solid rgba(212, 175, 55, 0.38);
    color: #5b3f05;
}
body.dark .pdp-voucher-feedback.is-success > .fb-inner { color: var(--accent-warm); }
.pdp-voucher-feedback.is-success .fb-icon {
    background: linear-gradient(135deg, #f5d97f, #d4af37);
    color: #1a1a1a;
}

.pdp-voucher-feedback.is-error > .fb-inner {
    background: linear-gradient(135deg, rgba(254, 226, 226, 0.55), rgba(254, 226, 226, 0.2));
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #b91c1c;
}
body.dark .pdp-voucher-feedback.is-error > .fb-inner {
    background: linear-gradient(135deg, rgba(60, 18, 18, 0.5), rgba(239, 68, 68, 0.08));
    color: #fca5a5;
}
.pdp-voucher-feedback.is-error .fb-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    animation: voucherShake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes voucherShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-2px); }
    75%      { transform: translateX(2px); }
}

.pdp-voucher-feedback.is-info > .fb-inner {
    background: rgba(10, 10, 10, 0.04);
    border: 1px solid var(--hairline);
    color: var(--text-3);
}
body.dark .pdp-voucher-feedback.is-info > .fb-inner { background: rgba(255, 255, 255, 0.05); }
.pdp-voucher-feedback.is-info .fb-icon {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: #fff;
    animation: voucherSpin 0.85s linear infinite;
}
@keyframes voucherSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pdp-voucher-feedback > .fb-inner,
    .pdp-voucher-feedback .fb-icon { animation: none !important; }
}

/* ── Chip with brand icon (Facebook/TikTok/Zalo/…) ──
   Icon sits before label, currentColor so it follows chip text color
   through default → hover → active states. Used on Tool/list + dashboard. */
.chip-with-icon {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity var(--d-state) var(--ease),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chip-icon svg,
.chip-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.chip-with-icon.is-active .chip-icon { opacity: 1; }

/* ============================================================
   Premium chip filter row — luxe interactions on chips inside
   `.chips` container (filter rows on Tool/list + dashboard).
   - Cursor-tracked gold spotlight (CSS vars --mx, --my from JS).
   - Gold sheen wash sweeping across on hover.
   - Lift + scale + warm halo shadow on hover.
   - Active state gets animated gold gradient border + glow halo.
   - Icon micro-bounce + slight rotate on hover.
   ============================================================ */
.chips .chip {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        color 0.3s var(--ease),
        background-color 0.3s var(--ease),
        border-color 0.3s var(--ease),
        box-shadow 0.4s var(--ease);
}
.chips .chip > * { position: relative; z-index: 2; }

/* Cursor-tracked gold spotlight inside the chip */
.chips .chip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle 70px at var(--mx, 50%) var(--my, 50%),
        rgba(212, 175, 55, 0.22),
        transparent 70%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
    z-index: 0;
}
.chips .chip:hover::before { opacity: 1; }

/* Gold sheen sweeping across on hover */
.chips .chip::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 30%,
        rgba(212, 197, 169, 0.42) 50%,
        transparent 70%
    );
    transform: translateX(-110%);
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 1;
}
.chips .chip:hover::after { transform: translateX(110%); }

/* Hover — lift + scale + warm shadow halo */
.chips .chip:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: rgba(212, 197, 169, 0.6);
    box-shadow:
        0 6px 20px -8px rgba(154, 136, 112, 0.4),
        0 2px 6px -2px rgba(212, 175, 55, 0.2);
}
body.dark .chips .chip:hover {
    border-color: rgba(220, 200, 170, 0.4);
    box-shadow:
        0 6px 24px -8px rgba(220, 188, 140, 0.3),
        0 2px 8px -2px rgba(255, 200, 100, 0.15);
}

/* Active — animated gold gradient border + ink fill + glow halo */
.chips .chip.is-active {
    background:
        linear-gradient(var(--inverse-bg), var(--inverse-bg)) padding-box,
        linear-gradient(135deg,
            var(--accent-warm) 0%,
            var(--accent-warm-2) 25%,
            var(--accent-warm) 50%,
            var(--accent-warm-2) 75%,
            var(--accent-warm) 100%
        ) border-box;
    background-size: 100% 100%, 200% 200%;
    background-position: 0 0, 0% 50%;
    border: 1.5px solid transparent;
    color: var(--inverse-fg);
    box-shadow:
        0 6px 22px -8px rgba(212, 175, 55, 0.5),
        0 2px 8px -2px rgba(154, 136, 112, 0.25);
    animation: chipBorderShine 5s linear infinite;
}
@keyframes chipBorderShine {
    0%   { background-position: 0 0,   0% 50%; }
    100% { background-position: 0 0, 200% 50%; }
}
.chips .chip.is-active:hover {
    transform: translateY(-2px) scale(1.04);
}
.chips .chip.is-active::before {
    background: radial-gradient(
        circle 70px at var(--mx, 50%) var(--my, 50%),
        rgba(255, 220, 150, 0.35),
        transparent 70%
    );
}

/* Press */
.chips .chip:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

/* Icon micro-bounce on hover */
.chips .chip:hover .chip-icon {
    transform: scale(1.18) rotate(-5deg);
    opacity: 1;
}

/* Reduced motion — skip the animations, keep just basic state changes */
@media (prefers-reduced-motion: reduce) {
    .chips .chip,
    .chips .chip-icon { transition: none; }
    .chips .chip::after { display: none; }
    .chips .chip.is-active { animation: none; }
    .chips .chip:hover { transform: none; }
}
.sh-filter-shell-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 4px;
    flex-wrap: wrap;
}
.sh-filter-shell-row + .sh-filter-shell-row {
    border-top: 1px solid var(--hairline);
}
.sh-filter-shell .chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
}
@media (max-width: 720px) {
    .sh-filter-shell { padding: 4px 12px; }
    .sh-filter-shell-row { gap: 12px; padding: 8px 0; }
    .sh-filter-shell .chips { overflow-x: auto; flex-wrap: nowrap; }
}

/* ============================================================
   SHARED SORT DROPDOWN — fully styled, JetBrains Mono throughout.
   Used on Tool/list, dashboard, index. JS attaches a click toggle
   on .sh-sort-trigger that adds .is-open to .sh-sort-dropdown.
   ============================================================ */
.sh-sort-dropdown {
  position: relative;
  display: inline-block;
}
.sh-sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 18px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--d-state) var(--ease),
              background-color var(--d-state) var(--ease),
              box-shadow var(--d-state) var(--ease);
}
.sh-sort-trigger:hover {
  border-color: var(--text-4);
  box-shadow: 0 4px 16px -8px rgba(10, 10, 10, 0.18);
}
.sh-sort-dropdown.is-open .sh-sort-trigger {
  border-color: var(--text-3);
  background: var(--surface-strong);
}
.sh-sort-trigger .key {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
}
.sh-sort-trigger .val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}
.sh-sort-trigger .chev {
  width: 12px;
  height: 12px;
  color: var(--text-4);
  transition: transform var(--d-state) var(--ease);
  flex-shrink: 0;
}
.sh-sort-dropdown.is-open .sh-sort-trigger .chev { transform: rotate(180deg); }

.sh-sort-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface-strong);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--hairline);
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.04),
    0 16px 40px -10px rgba(10, 10, 10, 0.22);
  z-index: 50;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 200ms var(--ease),
              transform 200ms var(--ease);
}
.sh-sort-dropdown.is-open .sh-sort-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
body.dark .sh-sort-menu {
  background: rgba(30, 28, 24, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 20px 50px -10px rgba(0, 0, 0, 0.55);
}
.sh-sort-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease),
              color 160ms var(--ease);
  white-space: nowrap;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.sh-sort-opt:hover {
  background: rgba(10, 10, 10, 0.04);
  color: var(--text);
}
body.dark .sh-sort-opt:hover {
  background: rgba(255, 255, 255, 0.05);
}
.sh-sort-opt.is-active {
  background: var(--inverse-bg);
  color: var(--inverse-fg);
}
.sh-sort-opt.is-active::after {
  content: '';
  width: 5px; height: 9px;
  border: solid var(--inverse-fg);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) translate(-2px, -1px);
  display: inline-block;
}

/* ============================================================
   STAT CARD SECONDARY SUB-LINE — "42 ĐANG HOẠT ĐỘNG"
   ============================================================ */
.sh-stat-sub-secondary {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: -4px 0 10px;
}

/* ============================================================
   ACTIVITY TOAST — luxe refined with animated gold gradient border
   ============================================================ */
/* Editorial press-card aesthetic — solid INK background in BOTH themes
   (a luxe black "calling card" stamped onto the page). The animated gold
   gradient border only reads against ink, so we lock the toast surface to
   ink in light mode too instead of fighting the cream bg. */
.sh-activity-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 46px 12px 12px;
  border-radius: 18px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(20, 18, 14, 0.96), rgba(20, 18, 14, 0.96)) padding-box,
    linear-gradient(135deg,
      var(--accent-warm) 0%,
      var(--accent-warm-2) 25%,
      transparent 50%,
      var(--accent-warm-2) 75%,
      var(--accent-warm) 100%
    ) border-box;
  background-size: 100% 100%, 200% 200%;
  background-position: 0 0, 0% 50%;
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.12),
    0 18px 44px -12px rgba(10, 10, 10, 0.32),
    0 0 0 4px rgba(212, 197, 169, 0.08);
  min-width: 280px;
  max-width: 340px;
  transform: translateY(20px) scale(0.92);
  opacity: 0;
  transition: opacity 320ms var(--ease),
              transform 320ms var(--ease),
              box-shadow 320ms var(--ease);
  pointer-events: none;
  animation: shToastBorderShine 4s linear infinite;
  color: var(--inverse-fg);
}
body.dark .sh-activity-toast {
  background:
    linear-gradient(rgba(20, 18, 14, 0.85), rgba(20, 18, 14, 0.85)) padding-box,
    linear-gradient(135deg,
      var(--accent-warm) 0%,
      var(--accent-warm-2) 25%,
      transparent 50%,
      var(--accent-warm-2) 75%,
      var(--accent-warm) 100%
    ) border-box;
  background-size: 100% 100%, 200% 200%;
  background-position: 0 0, 0% 50%;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 20px 50px -10px rgba(0, 0, 0, 0.5),
    0 0 0 4px rgba(212, 197, 169, 0.04);
}

@keyframes shToastBorderShine {
  0%   { background-position: 0 0,   0% 50%; }
  100% { background-position: 0 0, 200% 50%; }
}

/* Pulse glow halo when entering */
.sh-activity-toast.is-visible {
  animation:
    shToastBorderShine 4s linear infinite,
    shToastEnter 600ms var(--ease) forwards;
}

@keyframes shToastEnter {
  0%   { transform: translateY(20px) scale(0.92); opacity: 0; }
  60%  { transform: translateY(-2px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-activity-toast,
  .sh-activity-toast.is-visible {
    animation: none !important;
  }
}
.sh-activity-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.sh-activity-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-warm), var(--accent-warm-2));
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-body);
  flex-shrink: 0;
  letter-spacing: 0;
  position: relative;
}

/* Decorative frame overlay (PNG/WEBP from /assets/images/khung/) — sits OUTSIDE
   the avatar circle. Reusable across .sh-activity-avatar + .sh-avatar (navbar). */
.sh-avatar-frame {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  pointer-events: none;
  z-index: 3;
  object-fit: contain;
  user-select: none;
  display: block;
}

/* Navbar user avatar gets a slightly tighter frame (smaller avatar) */
.sh-avatar { position: relative; }
.sh-avatar > .sh-avatar-frame {
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
}

/* Pulsing live dot on avatar bottom-right (kept INSIDE toast bounds) */
.sh-activity-avatar::after {
  content: '';
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid rgba(20, 18, 14, 0.95);
  z-index: 4;
  animation: shToastDotPulse 1.8s ease-in-out infinite;
}

@keyframes shToastDotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.sh-activity-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0;
  min-width: 0;
  flex: 1;
  line-height: 1.2;
}
/* Toast text colors — locked to ink-background palette in BOTH themes
   (the toast itself stays ink-card in light mode for the editorial look). */
.sh-activity-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-warm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.sh-activity-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(245, 243, 236, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  line-height: 1.4;
}
.sh-activity-meta .live-dot,
.sh-activity-meta .vua-mua { display: none; }

.sh-activity-product {
  font-size: 12.5px;
  font-weight: 700;
  /* Locked gold tone — works on the always-ink toast bg in BOTH themes.
     Using --inverse-fg flips to black in dark mode (cream is the dark-mode
     "inverse"), which disappears on the dark toast bg. */
  color: var(--accent-warm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
  line-height: 1.25;
}

/* Close button — sits inside the ink toast in BOTH themes, so it always
   wears the dark-card treatment (cream icon on translucent surface). */
.sh-activity-close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 243, 236, 0.7);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.sh-activity-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--inverse-fg);
  border-color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 992px) {
  .sh-activity-toast {
    left: 16px;
    right: auto;
    bottom: 16px;
    max-width: calc(100% - 32px);
  }
}

/* Hide live-purchase toast entirely on mobile — eats screen real estate
   and overlaps content. Desktop still shows it for social proof. */
@media (max-width: 768px) {
  .sh-activity-toast,
  .sh-activity-toast.is-visible { display: none !important; }
}

/* ============================================================
   RECHARGE PAGES — shared layout (wallet / bank / invoice)
   ============================================================ */

.rch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: flex-start;
  margin-top: 24px;
}
@media (max-width: 992px) { .rch-grid { grid-template-columns: 1fr; } }

.rch-card {
  padding: 26px 28px;
  border-radius: var(--r-card);
  border: 1px solid var(--hairline);
  background: var(--surface);
  backdrop-filter: blur(20px);
  margin-bottom: 16px;
}
.rch-card:last-child { margin-bottom: 0; }

.rch-card-head { margin-bottom: 18px; }
.rch-card-eyebrow {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 4px;
  display: block;
}
.rch-card-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text);
  margin: 0;
}
.rch-card-desc {
  font-size: 13px;
  color: var(--text-3);
  margin: 8px 0 0;
  line-height: 1.55;
}

.rch-field { margin-bottom: 14px; }
.rch-field-label {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 8px;
}

.rch-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .rch-row-2 { grid-template-columns: 1fr; } }

.rch-copy-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.rch-copy-row .btn-sh { flex: 1; justify-content: center; min-width: 140px; }

/* Logo banner inside card */
.rch-logo {
  display: block;
  max-width: 200px;
  margin: 0 auto 18px;
  height: auto;
}

/* ============================================================
   ALERT MESSAGES — luxe shimmery gold aesthetic
   Pearl-cream bg + gold border + animated shine sweep + glow halo.
   3 states: success (gold), danger (warm red), info (neutral with gold accent).
   ============================================================ */
.rch-alert {
  position: relative;
  padding: 14px 18px 14px 14px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.4;
  margin-bottom: 14px;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}
/* Shimmer sweep — light passes diagonally across alert */
.rch-alert::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  animation: rchAlertShine 3.6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes rchAlertShine {
  0%        { transform: translateX(-110%); }
  35%, 100% { transform: translateX(110%); }
}

.rch-alert-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 9px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.rch-alert > span {
  position: relative;
  z-index: 1;
}

/* ── SUCCESS — champagne gold (premium signature look) ── */
.rch-alert.is-success {
  background: linear-gradient(135deg, rgba(255, 250, 240, 0.95), rgba(245, 217, 127, 0.22));
  color: #5b3f05;
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow:
    0 8px 28px -10px rgba(212, 175, 55, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.rch-alert.is-success .rch-alert-icon {
  background: linear-gradient(135deg, #f5d97f, #d4af37);
  color: #1a1a1a;
  box-shadow: 0 3px 10px -3px rgba(212, 175, 55, 0.7);
}
body.dark .rch-alert.is-success {
  background: linear-gradient(135deg, rgba(60, 45, 18, 0.7), rgba(212, 175, 55, 0.15));
  color: #f5d97f;
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow:
    0 8px 28px -10px rgba(212, 175, 55, 0.3),
    inset 0 1px 0 rgba(212, 175, 55, 0.25);
}

/* ── DANGER — saturated rose/red, deeper for visibility ── */
.rch-alert.is-danger {
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.85), rgba(252, 165, 165, 0.35));
  color: #991b1b;
  border-color: rgba(220, 38, 38, 0.55);
  box-shadow:
    0 8px 28px -10px rgba(220, 38, 38, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.rch-alert.is-danger .rch-alert-icon {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  box-shadow: 0 3px 12px -2px rgba(220, 38, 38, 0.7);
}
.rch-alert.is-danger::after {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
}
body.dark .rch-alert.is-danger {
  background: linear-gradient(135deg, rgba(80, 25, 25, 0.75), rgba(239, 68, 68, 0.15));
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.5);
}

/* ── INFO — cool neutral with subtle gold tint ── */
.rch-alert.is-info {
  background: linear-gradient(135deg, rgba(250, 248, 244, 0.95), rgba(240, 235, 220, 0.5));
  color: var(--text-2);
  border-color: rgba(154, 136, 112, 0.35);
  box-shadow:
    0 8px 28px -10px rgba(154, 136, 112, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.rch-alert.is-info .rch-alert-icon {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: #fff;
}
body.dark .rch-alert.is-info {
  background: linear-gradient(135deg, rgba(40, 35, 28, 0.7), rgba(60, 50, 35, 0.4));
  color: var(--text-2);
}

/* Gold gradient text fill for highlighted values inside alert */
.rch-alert strong,
.rch-alert b,
.rch-alert code {
  background: linear-gradient(135deg, #d4af37, #f5d97f 50%, #b8860b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0 2px;
  filter: drop-shadow(0 1px 1px rgba(184, 134, 11, 0.15));
}
.rch-alert code {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
body.dark .rch-alert strong,
body.dark .rch-alert b,
body.dark .rch-alert code {
  background: linear-gradient(135deg, #f5d97f, #d4af37 50%, #f0c75e);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(245, 217, 127, 0.25));
}

/* In danger alert, override gold to soft red for highlights */
.rch-alert.is-danger strong,
.rch-alert.is-danger b,
.rch-alert.is-danger code {
  background: linear-gradient(135deg, #dc2626, #ef4444 50%, #991b1b);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Reduced motion — kill shine animation */
@media (prefers-reduced-motion: reduce) {
  .rch-alert::after { animation: none; opacity: 0; }
}

/* Trust list (right aside) */
.rch-aside-card {
  padding: 24px 26px;
  border-radius: var(--r-card);
  position: sticky;
  top: 220px; /* below pinned-top */
}
.rch-aside-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.rch-notes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rch-notes li {
  font-size: 13px;
  color: var(--text-3);
  padding-left: 18px;
  position: relative;
  line-height: 1.55;
}
.rch-notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-warm-2);
}
.rch-aside-divider {
  height: 1px;
  background: var(--hairline);
  margin: 18px 0;
}
.rch-aside-actions { display: flex; flex-direction: column; gap: 8px; }

/* Status pill (used by invoice + history rows) */
.rch-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.rch-pill-pending { color: var(--text-3); }
.rch-pill-success { color: var(--success); border-color: rgba(22, 163, 74, 0.25); }
.rch-pill-fail    { color: var(--danger);  border-color: rgba(220, 38, 38, 0.25); }

/* History card (transaction list inline below form) */
.rch-history { margin-top: 18px; }
.rch-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rch-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--r-input);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: 13px;
  transition: border-color var(--d-state) var(--ease);
}
.rch-history-row:hover { border-color: var(--text-4); }
.rch-history-row .col-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rch-history-row .col-amount {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.rch-history-row .col-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: 0.04em;
}
.rch-history-row .col-action { justify-self: end; }
@media (max-width: 720px) {
  .rch-history-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .rch-history-row .col-time { grid-column: span 2; }
  .rch-history-row .col-action { grid-column: span 2; justify-self: stretch; }
}

.rch-empty {
  text-align: center;
  padding: 40px 20px;
  border-radius: var(--r-input);
  border: 1px dashed var(--hairline);
  color: var(--text-4);
  font-size: 13px;
}

/* QR modal trigger button (full-width primary) */
.rch-cta-full { width: 100%; justify-content: center; margin-top: 6px; }

/* ============================================================
   QR-FIRST HERO — recharge page redesign (option A)
   ============================================================ */
.rch-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 4px;
}

/* Top balance bar */
.rch-balance-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.rch-balance-bar .balance-block {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.rch-balance-bar .balance-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
}
.rch-balance-bar .balance-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.rch-balance-bar .balance-value em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-4);
  margin-left: 4px;
  letter-spacing: 0.04em;
}

/* Hero card — QR + info side-by-side */
.rch-hero {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  padding: 28px;
  border-radius: var(--r-shell);
  border: 1px solid var(--hairline);
  background: var(--surface-strong);
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  .rch-hero {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 18px;
  }
}

.rch-hero-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.rch-hero-qr-frame {
  width: 220px;
  height: 220px;
  padding: 12px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rch-hero-qr-frame img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
}
.rch-hero-qr-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-4);
  text-align: center;
  margin-top: 2px;
}
.rch-hero-qr-fallback {
  width: 220px;
  height: 220px;
  border-radius: 18px;
  border: 1px dashed var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-4);
  font-size: 12px;
  text-align: center;
  padding: 16px;
}
.rch-hero-qr-fallback svg { width: 32px; height: 32px; opacity: 0.5; }

/* Info side */
.rch-hero-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.rch-hero-bank-name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.rch-hero-bank-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 3px;
}
.rch-hero-bank-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Info row — inline LABEL : value [copy] */
.rch-info-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.rch-info-row:last-of-type { border-bottom: none; }
.rch-info-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.rch-info-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
  word-break: break-all;
  min-width: 0;
}
.rch-info-copy {
  background: transparent;
  border: 1px solid var(--hairline);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.rch-info-copy:hover {
  background: var(--surface);
  color: var(--text);
  border-color: var(--text-4);
}
.rch-info-copy.is-copied {
  background: rgba(22, 163, 74, 0.08);
  color: var(--success);
  border-color: rgba(22, 163, 74, 0.3);
}

/* Amount input + quick chips for AUTO mode bank recharge */
.rch-amount-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.rch-amount-block .rch-field-label {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 8px;
}
.rch-amount-block .input-sh {
  width: 100%;
  margin-bottom: 10px;
}
.rch-amount-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rch-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.rch-chip:hover {
  background: rgba(212, 175, 55, 0.08);
  color: var(--text);
  border-color: var(--accent-warm-2);
}
.rch-chip.is-active {
  background: linear-gradient(135deg, var(--accent-warm), var(--accent-warm-2));
  color: #1a1a1a;
  border-color: transparent;
}
.rch-info-copy svg { width: 13px; height: 13px; }

/* Manual mode form (when auto OFF) — replaces info rows */
.rch-form-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rch-form-block .rch-field { margin-bottom: 14px; }
.rch-form-block .rch-field:last-of-type { margin-bottom: 18px; }

/* Compact history list */
.rch-history-section { margin-bottom: 24px; }
.rch-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rch-history-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
}
.rch-history-link {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  text-decoration: none;
  transition: color 180ms ease;
}
.rch-history-link:hover { color: var(--text); }

.rch-history-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--r-card);
  border: 1px solid var(--hairline);
  overflow: hidden;
  background: var(--surface);
}
.rch-history-rows .row-item {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  transition: background-color 180ms ease;
}
.rch-history-rows .row-item:last-child { border-bottom: none; }
.rch-history-rows .row-item:hover { background: rgba(10, 10, 10, 0.02); }
body.dark .rch-history-rows .row-item:hover { background: rgba(255, 255, 255, 0.03); }
.rch-history-rows .row-code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rch-history-rows .row-amount {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.rch-history-rows .row-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
  white-space: nowrap;
}

/* Notes accordion */
details.rch-notes-acc {
  border-top: 1px solid var(--hairline);
  padding: 14px 4px 0;
  margin-top: 8px;
}
details.rch-notes-acc summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  transition: color 180ms ease;
}
details.rch-notes-acc summary::-webkit-details-marker { display: none; }
details.rch-notes-acc summary::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 220ms ease;
}
details.rch-notes-acc[open] summary::before { transform: rotate(45deg); }
details.rch-notes-acc summary:hover { color: var(--text); }
details.rch-notes-acc .notes-body {
  padding: 12px 0 4px;
}
details.rch-notes-acc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
details.rch-notes-acc li {
  font-size: 13px;
  color: var(--text-3);
  padding-left: 16px;
  position: relative;
  line-height: 1.55;
}
details.rch-notes-acc li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-warm-2);
}
details.rch-notes-acc li strong { color: var(--text-2); font-weight: 600; }

/* ============================================================
   SWEETALERT2 — main site theme (login / register / promotions)
   ============================================================ */
.swal2-container { backdrop-filter: blur(4px); }
.swal2-container.swal2-backdrop-show { background: rgba(10, 10, 10, 0.45) !important; }

.swal2-popup {
  font-family: var(--font-body) !important;
  background: var(--bg-paper) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-shell) !important;
  padding: 28px 26px 22px !important;
  width: 420px !important;
  max-width: calc(100vw - 32px);
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.04),
    0 24px 60px -16px rgba(10, 10, 10, 0.25),
    0 8px 20px -8px rgba(10, 10, 10, 0.12) !important;
}
body.dark .swal2-popup { background: #14110d !important; border-color: rgba(255,255,255,0.08) !important; }

.swal2-title {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
  padding: 12px 0 4px !important;
  text-align: center !important;
}

.swal2-html-container, .swal2-content {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--text-3) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.swal2-icon {
  /* SweetAlert2's icon is 5em wide and all internal strokes (success tip/long,
     ring, x-mark) are positioned in em units. Scale by setting font-size on
     the icon itself — this shrinks the whole icon (5em ≈ 56px at 11.2px
     font-size) while keeping every internal stroke in the right place. */
  font-size: 11.2px !important;
  margin: 8px auto 14px !important;
  border-width: 2px !important;
}
.swal2-icon.swal2-info {
  border-color: rgba(212, 197, 169, 0.4) !important;
  color: var(--accent-warm-2) !important;
}
.swal2-icon.swal2-info .swal2-icon-content {
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  font-style: italic;
  color: var(--accent-warm-2) !important;
}
.swal2-icon.swal2-warning {
  border-color: rgba(212, 175, 55, 0.4) !important;
  color: var(--accent-warm-2) !important;
}
.swal2-icon.swal2-warning .swal2-icon-content {
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  color: var(--accent-warm-2) !important;
}
.swal2-icon.swal2-success { border-color: rgba(22, 163, 74, 0.4) !important; }
.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long { background-color: var(--success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border: 2px solid rgba(22, 163, 74, 0.3) !important; }
.swal2-icon.swal2-error { border-color: rgba(220, 38, 38, 0.4) !important; }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--danger) !important; }

.swal2-input, .swal2-textarea, .swal2-select {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--r-input) !important;
  height: 44px !important;
  padding: 10px 14px !important;
  margin: 4px 0 12px !important;
  box-shadow: none !important;
  color: var(--text) !important;
  width: calc(100% - 8px) !important;
}
.swal2-input:focus, .swal2-textarea:focus {
  border-color: var(--text) !important;
  box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.06) !important;
  outline: none !important;
}

.swal2-actions { gap: 10px; margin: 18px auto 4px !important; }
.swal2-styled {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--r-pill) !important;
  padding: 10px 22px !important;
  min-height: 40px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease !important;
}
.swal2-styled.swal2-confirm {
  background: var(--text) !important;
  color: var(--bg-paper) !important;
  border-color: var(--text) !important;
  background-image: none !important;
}
.swal2-styled.swal2-confirm:hover { background: var(--text-2) !important; }
.swal2-styled.swal2-cancel {
  background: transparent !important;
  color: var(--text-2) !important;
  border-color: var(--hairline) !important;
  background-image: none !important;
}
.swal2-styled.swal2-cancel:hover {
  background: rgba(10, 10, 10, 0.04) !important;
  border-color: var(--text-3) !important;
  color: var(--text) !important;
}
.swal2-styled:focus { box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.08) !important; }

.swal2-validation-message {
  background: rgba(220, 38, 38, 0.06) !important;
  border-radius: var(--r-input) !important;
  color: var(--danger) !important;
  font-size: 12px !important;
  padding: 8px 14px !important;
}
.swal2-validation-message::before { display: none !important; }

.swal2-close {
  color: var(--text-4) !important;
  font-size: 26px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  top: 12px !important;
  right: 12px !important;
}
.swal2-close:hover { color: var(--text) !important; background: rgba(10, 10, 10, 0.04) !important; }

/* Empty state for unified grid */
.sh-products-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-4);
}
.sh-products-empty h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--text-2);
}
.sh-products-empty p {
  font-size: 13px;
  margin: 0;
}

/* ============================================================
   Extract-password popup — premium reveal with gold accent.
   Used by /tool/history + /source/history "Tải về" buttons.
   ============================================================ */
.extract-pw-popup { padding: 24px 28px 28px !important; border-radius: 18px !important; }
.extract-pw-popup .swal2-html-container { margin: 0 !important; padding: 0 !important; overflow: visible !important; }
.extract-pw-popup .swal2-actions { gap: 10px; margin-top: 22px !important; }
.extract-pw-popup .swal2-styled.swal2-confirm,
.extract-pw-popup .swal2-styled.swal2-cancel {
  border-radius: 999px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 11px 22px !important;
}

.epw { text-align: center; }

.epw-icon {
  width: 56px;
  height: 56px;
  margin: 4px auto 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-warm-2);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.04) 70%);
  border: 1px solid rgba(212, 197, 169, 0.35);
  box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.05), 0 8px 20px -8px rgba(212, 175, 55, 0.4);
  animation: epw-pulse 2.4s ease-in-out infinite;
}
@keyframes epw-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.05), 0 8px 20px -8px rgba(212, 175, 55, 0.4); }
  50%      { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0.10), 0 12px 28px -8px rgba(212, 175, 55, 0.55); }
}
/* Variant — Telegram blue accent (used on the post-download "join group" popup) */
.epw-icon.epw-icon-tele {
  color: #229ED9;
  background: radial-gradient(circle, rgba(34, 158, 217, 0.20), rgba(34, 158, 217, 0.04) 70%);
  border-color: rgba(34, 158, 217, 0.35);
  box-shadow: 0 0 0 6px rgba(34, 158, 217, 0.06), 0 8px 20px -8px rgba(34, 158, 217, 0.45);
  animation: epw-pulse-tele 2.4s ease-in-out infinite;
}
@keyframes epw-pulse-tele {
  0%, 100% { box-shadow: 0 0 0 6px rgba(34, 158, 217, 0.06), 0 8px 20px -8px rgba(34, 158, 217, 0.45); }
  50%      { box-shadow: 0 0 0 10px rgba(34, 158, 217, 0.12), 0 12px 28px -8px rgba(34, 158, 217, 0.6); }
}

.epw-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--text-4);
  margin-bottom: 6px;
}

.epw-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 20px;
}
.epw-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--accent-warm) 0%, var(--accent-warm-2) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.epw-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: 16px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(20, 18, 14, 0.04), rgba(20, 18, 14, 0.04)) padding-box,
    linear-gradient(135deg, var(--accent-warm) 0%, var(--accent-warm-2) 50%, var(--accent-warm) 100%) border-box;
  box-shadow: 0 8px 24px -10px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
  isolation: isolate;
}
body.dark .epw-box {
  background:
    linear-gradient(rgba(20, 18, 14, 0.55), rgba(20, 18, 14, 0.55)) padding-box,
    linear-gradient(135deg, var(--accent-warm) 0%, var(--accent-warm-2) 50%, var(--accent-warm) 100%) border-box;
  box-shadow: 0 8px 24px -10px rgba(212, 175, 55, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.epw-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(255, 248, 220, 0.18) 50%,
    transparent 62%
  );
  transform: translateX(-120%);
  animation: epw-shine 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
@keyframes epw-shine {
  0%        { transform: translateX(-120%); }
  40%, 100% { transform: translateX(120%); }
}

.epw-pw {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 12px 4px 12px 20px;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  color: #1a1a1a;
  user-select: all;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.dark .epw-pw {
  color: #fff8e7;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(212, 175, 55, 0.35);
}

.epw-copy {
  position: relative;
  z-index: 1;
  margin: 6px 6px 6px 4px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 175, 55, 0.14);
  border: 1px solid rgba(212, 197, 169, 0.45);
  color: var(--accent-warm-2);
  cursor: pointer;
  transition: background-color 180ms var(--ease, ease), border-color 180ms var(--ease, ease), color 180ms var(--ease, ease), transform 180ms var(--ease, ease);
}
.epw-copy:hover {
  background: rgba(212, 175, 55, 0.24);
  border-color: var(--accent-warm-2);
  transform: translateY(-1px);
}
.epw-copy .ic-check { display: none; color: #10b981; }
.epw-copy.is-copied .ic-copy { display: none; }
.epw-copy.is-copied .ic-check { display: inline-block; }
.epw-copy.is-copied {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.5);
}

.epw-hint {
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--text-4);
  line-height: 1.55;
}

@media (max-width: 460px) {
  .epw-title { font-size: 22px; }
  .epw-pw { font-size: 20px; padding: 11px 4px 11px 18px; }
}