/* CaratShares — premium midnight palette + serif/sans hybrid type system */

:root {
  --bg-deep:        #050B1F;
  --bg-surface:     #0A1232;
  --bg-card:        #0F1A3D;
  --bg-elevated:    #131F47;
  --border-subtle:  rgba(184, 197, 214, 0.08);
  --border-emphasis:rgba(184, 197, 214, 0.18);
  --text-primary:   #F5F5F5;
  --text-secondary: #D6DEE8;
  --text-muted:     #8895AC;
  --accent-gold:    #D4AF37;
  --accent-sapphire:#4169E1;
  --accent-ruby:    #E0115F;
  --accent-emerald: #50C878;
  --accent-pink:    #F4ACB7;
  --accent-paraiba: #00BFFF;

  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: color 160ms ease; }
a:hover { color: var(--accent-gold); }

img { max-width: 100%; height: auto; display: block; }

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

/* ─── Typography ─── */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 0 0 var(--space-4);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 300; }
h2 { font-size: clamp(2rem,   4vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
h4 { font-size: 1.2rem; font-weight: 500; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-gold);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.muted  { color: var(--text-muted); }
.serif  { font-family: var(--font-serif); }

/* ─── Layout ─── */

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 var(--space-6); }

section { padding: var(--space-24) 0; }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-emphasis), transparent);
  margin: var(--space-16) auto;
  max-width: 200px;
}

/* ─── Network mismatch action (lives inside the user dropdown) ─── */

.nav-menu-panel .nav-net-switch {
  color: var(--accent-gold);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-1);
  padding-top: var(--space-3);
}
.nav-menu-panel .nav-net-switch:hover {
  background: rgba(212, 175, 55, 0.12);
  color: var(--accent-gold);
}

/* ─── Toast notifications ─── */

.toast-host {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 280ms ease, transform 280ms ease;
  max-width: 380px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-error { background: rgba(80, 20, 40, 0.92); border: 1px solid rgba(224, 17, 95, 0.5); color: #ffd0dc; }
.toast-ok    { background: rgba(20, 60, 35, 0.92); border: 1px solid rgba(80, 200, 120, 0.5); color: #d0ffe0; }
.toast-warn  { background: rgba(60, 50, 20, 0.92); border: 1px solid rgba(212, 175, 55, 0.5); color: #ffe9ad; }

/* ─── Header ─── */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-4) var(--space-6);
  background: rgba(5, 11, 31, 0.88);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.site-header .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.brand {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.brand .accent { color: var(--accent-gold); }

.nav { display: flex; gap: var(--space-5); align-items: center; }
.nav > a {
  font-size: 0.85rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  padding: var(--space-2) 0;
  position: relative;
  transition: color 200ms ease;
}
.nav > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav > a:hover { color: var(--accent-gold); }
.nav > a:hover::after { transform: scaleX(1); }

.nav-user {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: var(--space-4);
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-subtle);
}
.nav-user > a { font-size: 0.9rem; color: var(--text-secondary); }
.nav-user .nav-link { color: var(--text-secondary); }
.nav-user .nav-cta {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  border-radius: 2px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav-user .nav-cta:hover { background: var(--accent-gold); color: var(--bg-deep); }

.nav-wallet {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 2px 6px;
  background: rgba(184, 197, 214, 0.06);
  border-radius: 2px;
}

.nav-menu { position: relative; }
.nav-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background 160ms ease;
}
.nav-menu-trigger:hover { background: rgba(255, 255, 255, 0.04); }
.nav-chev { font-size: 0.6rem; opacity: 0.5; }

.nav-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius);
  padding: var(--space-2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 200;
}
.nav-menu-panel a, .nav-menu-panel button {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: 0.9rem;
  text-align: left;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: background 160ms ease, color 160ms ease;
}
.nav-menu-panel a:hover, .nav-menu-panel button:hover {
  background: rgba(212, 175, 55, 0.08);
  color: var(--accent-gold);
}

/* ─── Auth + form pages ─── */

.auth-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-24) var(--space-6) var(--space-12);
}
.auth-shell h2 { margin-bottom: var(--space-2); }
.auth-shell .lead { color: var(--text-muted); margin-bottom: var(--space-8); }
.auth-shell .switch { color: var(--text-muted); font-size: 0.9rem; margin-top: var(--space-6); text-align: center; }
.auth-shell .switch a { color: var(--accent-gold); }

.form {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-surface));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-8);
}

.field { margin-bottom: var(--space-5); }
.field:last-of-type { margin-bottom: var(--space-6); }
.field label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-deep);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 160ms ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent-gold);
}
.field .hint { font-size: 0.78rem; color: var(--text-muted); margin-top: var(--space-2); }

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--space-4);
  background: var(--accent-gold);
  color: var(--bg-deep);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.9rem;
  border-radius: 2px;
  transition: opacity 160ms ease, transform 160ms ease;
}
.btn-block:hover { transform: translateY(-1px); }
.btn-block:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.form-error {
  padding: var(--space-3) var(--space-4);
  background: rgba(224, 17, 95, 0.08);
  border: 1px solid rgba(224, 17, 95, 0.3);
  border-radius: var(--radius-sm);
  color: #ff6f93;
  font-size: 0.85rem;
  margin-bottom: var(--space-4);
}
.form-ok {
  padding: var(--space-3) var(--space-4);
  background: rgba(80, 200, 120, 0.08);
  border: 1px solid rgba(80, 200, 120, 0.3);
  border-radius: var(--radius-sm);
  color: var(--accent-emerald);
  font-size: 0.85rem;
  margin-bottom: var(--space-4);
}

/* ─── Hero ─── */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24) var(--space-6);
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
}

.hero h1 .accent {
  color: var(--accent-gold);
  font-style: italic;
}

.hero p.lede {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 560px;
  margin: var(--space-6) auto var(--space-8);
}

.hero-cta {
  display: inline-flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  background: linear-gradient(135deg, var(--accent-gold) 0%, #F4D03F 100%);
  color: var(--bg-deep);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.hero-cta:hover {
  color: var(--bg-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.25);
}

/* Floating stones — 5 faceted gems with cursor parallax */
.stones-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  perspective: 1000px;
}

.stone {
  position: absolute;
  pointer-events: none;
  animation: float 10s ease-in-out infinite;
  will-change: transform, translate;
}
.stone svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 12px var(--shine, transparent));
}
.stone::before {
  content: '';
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  background: var(--halo);
  filter: blur(42px);
  opacity: 0.55;
  z-index: -1;
}

.stone-sapphire {
  width: 130px; height: 156px;
  top: 14%; left: 6%;
  --halo: radial-gradient(circle, rgba(59, 109, 222, 0.75), transparent 70%);
  --shine: rgba(120, 175, 255, 0.55);
  animation-delay: -1s;
  animation-duration: 11s;
}

.stone-ruby {
  width: 110px; height: 110px;
  top: 64%; left: 10%;
  --halo: radial-gradient(circle, rgba(220, 58, 100, 0.75), transparent 70%);
  --shine: rgba(255, 130, 170, 0.55);
  animation-delay: -3s;
  animation-duration: 13s;
}

.stone-emerald {
  width: 80px; height: 100px;
  top: 22%; right: 10%;
  --halo: radial-gradient(circle, rgba(16, 185, 129, 0.75), transparent 70%);
  --shine: rgba(120, 230, 175, 0.55);
  animation-delay: -6s;
  animation-duration: 9s;
}

.stone-paraiba {
  width: 130px; height: 65px;
  top: 70%; right: 10%;
  --halo: radial-gradient(circle, rgba(6, 182, 212, 0.75), transparent 70%);
  --shine: rgba(130, 220, 240, 0.55);
  animation-delay: -2s;
  animation-duration: 12s;
}

.stone-pink {
  width: 65px; height: 65px;
  top: 46%; left: 52%;
  --halo: radial-gradient(circle, rgba(236, 72, 153, 0.7), transparent 70%);
  --shine: rgba(255, 180, 215, 0.55);
  animation-delay: -5s;
  animation-duration: 14s;
}

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%      { transform: translate3d(8px, -16px, 0) rotate(2deg); }
  50%      { transform: translate3d(-4px, -28px, 0) rotate(-1deg); }
  75%      { transform: translate3d(-12px, -12px, 0) rotate(1deg); }
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 2;
}
.scroll-indicator::after {
  content: '';
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--accent-gold), transparent);
  animation: scroll-pulse 2.5s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50%      { opacity: 1;   transform: scaleY(1.15); }
}

/* ─── Sections ─── */

.section-head { text-align: center; margin-bottom: var(--space-16); }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head p  { color: var(--text-secondary); max-width: 520px; margin: 0 auto; }

/* ─── Stone catalog grid ─── */

.stones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.stone-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 240ms ease, border-color 240ms ease;
}
.stone-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-emphasis);
  color: inherit;
}

.stone-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-deep);
  position: relative;
}
.stone-card-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 2px 10px;
  background: rgba(5, 11, 31, 0.85);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 2px;
}

.stone-card-body { padding: var(--space-6); }
.stone-card-name { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.2; margin-bottom: var(--space-2); }
.stone-card-meta { color: var(--text-muted); font-size: 0.85rem; letter-spacing: 0.04em; margin-bottom: var(--space-4); }
.stone-card-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.stone-card-price .label { color: var(--text-muted); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.stone-card-price .amount { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; color: var(--accent-gold); }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-8);
}

.step {
  padding: var(--space-8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-surface) 100%);
  transition: border-color 240ms ease, transform 240ms ease;
}
.step:hover {
  border-color: var(--border-emphasis);
  transform: translateY(-2px);
}
.step .num {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--accent-gold);
  line-height: 1;
  margin-bottom: var(--space-4);
}
.step h4 { margin-bottom: var(--space-3); }
.step p { color: var(--text-secondary); margin: 0; font-size: 0.95rem; }

/* ─── Empty / coming-soon block ─── */

.coming-soon {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.06), transparent 60%),
    var(--bg-card);
}
.coming-soon h3 { color: var(--text-secondary); }
.coming-soon p { color: var(--text-muted); }

.pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent-gold);
  border-radius: 50%;
  margin-right: var(--space-3);
  vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ─── Trust strip ─── */

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  opacity: 0.6;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ─── Footer ─── */

footer.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-8) var(--space-6);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}
footer.site-footer .legal { margin-top: var(--space-2); font-size: 0.75rem; opacity: 0.7; }

/* ─── Mobile ─── */

@media (max-width: 720px) {
  .nav { gap: var(--space-4); }
  .nav a:not(.brand) { display: none; }
  section { padding: var(--space-16) 0; }
  .stone-emerald, .stone-pink { display: none; }
}

/* ─── Reduced-motion ─── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ✦ Visual effects layer — installed by /js/effects.js on every page
   ═══════════════════════════════════════════════════════════════════════ */

/* Cursor sparkle trail */
.cursor-spark {
  position: fixed;
  left: 0; top: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 14px var(--c), 0 0 4px #fff;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  filter: blur(0.5px);
  animation: cursor-spark-fly 950ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  will-change: transform, opacity;
}
@keyframes cursor-spark-fly {
  0%   { opacity: 0.95; transform: translate(-50%, -50%) scale(1.15); }
  60%  { opacity: 0.7; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -40px))) scale(0.2); }
}

/* Ambient floating gems behind content (inner pages) */
.ambient-gems {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient-gem {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.7;
  animation: ambient-drift 22s ease-in-out infinite;
  will-change: transform;
}
@keyframes ambient-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25%      { transform: translate3d(40px, -32px, 0); }
  50%      { transform: translate3d(-24px, -56px, 0); }
  75%      { transform: translate3d(-44px, -20px, 0); }
}

/* Make sure normal page content sits above the ambient layer.
   Header is intentionally excluded — it has its own .site-header rule
   (position: fixed, z-index: 100) that must not be overridden here. */
body > main, body > section, body > footer { position: relative; z-index: 1; }

/* Scroll-reveal — apply [data-reveal] in HTML to fade-up on enter */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════
   ✦ Component layer — shared button / panel / card / table styles
   ═══════════════════════════════════════════════════════════════════════ */

/* Buttons — unify across pages. Use .btn + a variant. */
.btn, .btn-buy, .btn-block, .btn-primary, .btn-secondary, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: 2px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 200ms ease, border-color 200ms ease, color 200ms ease;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  user-select: none;
}
.btn:disabled, .btn-buy:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled, .btn-block:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-primary, .btn-buy, .btn-block {
  background: linear-gradient(135deg, var(--accent-gold) 0%, #f4d27a 100%);
  color: var(--bg-deep);
  font-weight: 600;
}
.btn-primary:not(:disabled):hover,
.btn-buy:not(:disabled):hover,
.btn-block:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.32);
  color: var(--bg-deep);
}
/* Gold shimmer on hover */
.btn-primary::after, .btn-buy::after, .btn-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 700ms ease;
  pointer-events: none;
}
.btn-primary:not(:disabled):hover::after,
.btn-buy:not(:disabled):hover::after,
.btn-block:not(:disabled):hover::after {
  transform: translateX(120%);
}

.btn-secondary {
  background: rgba(184, 197, 214, 0.04);
  border-color: var(--border-emphasis);
  color: var(--text-secondary);
}
.btn-secondary:not(:disabled):hover {
  background: rgba(212, 175, 55, 0.06);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.btn-danger {
  background: transparent;
  border-color: rgba(224, 17, 95, 0.5);
  color: #ff6f93;
}
.btn-danger:not(:disabled):hover {
  background: rgba(224, 17, 95, 0.12);
  border-color: rgba(224, 17, 95, 0.8);
  color: #ffb8c8;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-mini {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid var(--border-emphasis);
  background: rgba(184, 197, 214, 0.04);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.btn-mini:not(:disabled):hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.06);
}
.btn-mini.fill {
  background: var(--accent-gold);
  color: var(--bg-deep);
  border-color: var(--accent-gold);
  font-weight: 600;
}
.btn-mini.fill:not(:disabled):hover {
  background: #f4d27a;
  border-color: #f4d27a;
  color: var(--bg-deep);
}
.btn-mini.cancel {
  border-color: rgba(224, 17, 95, 0.4);
  color: #ff6f93;
}
.btn-mini.cancel:not(:disabled):hover {
  background: rgba(224, 17, 95, 0.1);
  border-color: rgba(224, 17, 95, 0.8);
  color: #ffb8c8;
}
.btn-mini:disabled { opacity: 0.4; cursor: not-allowed; }

/* Generic panel — replaces ad-hoc per-page panel styles */
.panel {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-surface));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  position: relative;
  transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}
.panel:hover {
  border-color: var(--border-emphasis);
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.06);
}

/* Add a soft gold halo to highlighted (gold-bordered) panels */
.panel.highlight {
  border-color: rgba(212, 175, 55, 0.4);
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-card), var(--bg-surface));
}

/* Catalog card hover — pull the existing rule into a more luxurious version */
.stone-card {
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 320ms ease,
              box-shadow 320ms ease;
}
.stone-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(212, 175, 55, 0.12),
              0 0 48px rgba(212, 175, 55, 0.18);
}
.stone-card-photo { transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.stone-card:hover .stone-card-photo { transform: scale(1.04); }

/* Tables — used by admin and elsewhere */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.table th, .table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.table th {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.table tbody tr {
  transition: background 160ms ease;
}
.table tbody tr:hover { background: rgba(212, 175, 55, 0.04); }
.table .right { text-align: right; }
.table .empty {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-8);
}
.table code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-secondary);
  background: rgba(184, 197, 214, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
}

/* Status pills */
.pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid;
}
.pill-ok    { background: rgba(80, 200, 120, 0.08); border-color: rgba(80, 200, 120, 0.4);  color: var(--accent-emerald); }
.pill-warn  { background: rgba(212, 175, 55, 0.08); border-color: rgba(212, 175, 55, 0.4);  color: var(--accent-gold); }
.pill-mute  { background: rgba(184, 197, 214, 0.06); border-color: var(--border-emphasis); color: var(--text-muted); }
.pill-error { background: rgba(224, 17, 95, 0.08); border-color: rgba(224, 17, 95, 0.4);   color: #ff6f93; }

/* Form-grid for admin add-stone and similar layouts */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}
.form-grid .field { margin-bottom: 0; }
.form-grid .field.span-2 { grid-column: span 2; }

/* Inline key-value rows */
.kv {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: var(--space-3) var(--space-6);
}
.kv .label {
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 4px;
}
.kv .value { font-size: 1rem; word-break: break-word; }
.kv .value.mono { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-secondary); }

/* Generic page shell used by profile / portfolio / admin / etc. */
.page-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-24) var(--space-6) var(--space-16);
  position: relative;
  z-index: 1;
}
.page-shell--narrow { max-width: 720px; }
.page-shell--wide   { max-width: 1280px; }

/* Stat tiles — reused on portfolio / admin */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.stat-card {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-surface));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  transition: border-color 240ms ease, transform 240ms ease;
}
.stat-card:hover { border-color: var(--border-emphasis); transform: translateY(-2px); }
.stat-card .stat-label {
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.stat-card .stat-value {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-top: var(--space-2);
  line-height: 1.15;
}
.stat-card .stat-sub { color: var(--text-muted); font-size: 0.8rem; margin-top: var(--space-1); }

/* ─── Term tooltips ───
   <span class="term" data-tip="explanation">FLO</span>
   Shows a small ⓘ marker after the term and reveals the explanation on
   hover or focus (focusable on mobile via tabindex="0"). CSS-only.        */
.term {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1px dotted rgba(212, 175, 55, 0.45);
  color: inherit;
  outline: none;
}
.term::after {
  content: 'i';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 4px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: var(--accent-gold);
  font-size: 0.65rem;
  font-family: 'Times New Roman', serif;
  font-style: italic;
  line-height: 1;
  vertical-align: text-top;
  transform: translateY(-1px);
}
.term:hover::after, .term:focus::after {
  background: var(--accent-gold);
  color: var(--bg-deep);
}
.term::before {
  content: attr(data-tip);
  position: fixed;
  /* Coordinates injected via CSS vars by the runtime positioner so the
     tooltip stays inside the viewport even when the term is near an edge.
     Defaults centre the tooltip directly above the term. */
  top: var(--tip-top, auto);
  left: var(--tip-left, 50%);
  bottom: auto;
  transform: translateY(4px);
  width: max-content;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 24px));
  padding: var(--space-3) var(--space-4);
  background: #0d1740;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 1000;
}
.term:hover::before, .term:focus::before {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 760px) {
  .term::before { min-width: 200px; max-width: min(260px, calc(100vw - 16px)); font-size: 0.75rem; }
}

/* ─── Mobile pass — single breakpoint ─── */

@media (max-width: 760px) {
  :root {
    --space-24: 4rem;
    --space-16: 3rem;
  }
  .page-shell { padding: var(--space-16) var(--space-4) var(--space-12); }
  .panel { padding: var(--space-5); }
  .form-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: var(--space-1) var(--space-3); }
  .kv .label { padding-top: var(--space-3); }
  .table { font-size: 0.85rem; }
  .table th, .table td { padding: var(--space-2) var(--space-3); }
}