/* Gold Buy Sell — global design system (loaded on every page) */
body { font-family: 'Inter', sans-serif; }
.font-display { font-family: 'Playfair Display', serif; }
.text-gradient-gold { background: linear-gradient(92deg,#F3CF7A,#E0A82E 55%,#C28E1E); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bg-gold-gradient { background: linear-gradient(95deg,#F3CF7A,#E0A82E 55%,#C9952A); }
.bg-navy-radial { background: radial-gradient(1200px 600px at 80% -10%, #155068 0%, #0E3A4D 38%, #0A2A38 100%); }
.glass { background: rgba(255,255,255,.07); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.12); }
.card { background:#fff; border:1px solid #eef0f2; border-radius:1rem; box-shadow:0 10px 40px -18px rgba(14,58,77,.18); }
.btn-gold { background:linear-gradient(95deg,#F3CF7A,#E0A82E 55%,#C9952A); color:#0A2A38; font-weight:600; transition:.2s; }
.btn-gold:hover { filter:brightness(1.04); transform:translateY(-1px); box-shadow:0 10px 30px -8px rgba(224,168,46,.5); }
.link-underline { position:relative; }
.link-underline::after { content:''; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:#E0A82E; transition:.25s; }
.link-underline:hover::after { width:100%; }
.skel { background:linear-gradient(90deg,#eceff1 25%,#f6f8f9 37%,#eceff1 63%); background-size:500px 100%; }
::-webkit-scrollbar { height:8px; width:8px; }
::-webkit-scrollbar-thumb { background:#cdd5da; border-radius:8px; }
[x-cloak] { display:none !important; }

/* ── Go to top ───────────────────────────────────────────────────────────
   Global (public + app). Circular gold button whose ring fills as you
   scroll, so it doubles as a page-progress indicator.
   z-index 35 sits above the sticky topbar (30) but below the mobile sidebar
   scrim (40) and drawer (50), so it never floats over an open menu. */
.go-top {
    position: fixed; z-index: 35;
    right: calc(1.25rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    height: 52px; width: 52px; border: 0; border-radius: 50%; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    background: linear-gradient(135deg, #791236 0%, #FFD612 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(121,18,54,.42), 0 2px 8px rgba(0,0,0,.16);
    opacity: 0; transform: translateY(14px) scale(.86); pointer-events: none;
    transition: opacity .32s cubic-bezier(.2,.7,.2,1),
                transform .32s cubic-bezier(.2,.7,.2,1),
                box-shadow .25s ease;
}
.go-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.go-top:hover { box-shadow: 0 10px 26px rgba(121,18,54,.5), 0 2px 10px rgba(0,0,0,.2); }
.go-top.is-visible:hover { transform: translateY(-3px); }
.go-top:active { transform: translateY(-1px) scale(.97); }
.go-top:focus-visible { outline: 2px solid #FFE082; outline-offset: 3px; }

.go-top-arrow { height: 20px; width: 20px; position: relative; z-index: 1; }

/* progress ring */
.go-top-ring { position: absolute; inset: 0; height: 100%; width: 100%; transform: rotate(-90deg); }
.go-top-ring circle { fill: none; stroke-width: 2.5; }   /* cx/cy/r are attributes */
.go-top-track { stroke: rgba(36,28,6,.16); }
.go-top-bar {
    stroke: #241C06; stroke-linecap: round;
    stroke-dasharray: 125.66;           /* 2πr, r = 20 */
    stroke-dashoffset: 125.66;
    transition: stroke-dashoffset .12s linear;
}

@media (max-width: 640px) {
    .go-top { height: 48px; width: 48px; right: 1rem; bottom: 1rem; }
    .go-top-arrow { height: 18px; width: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .go-top, .go-top-bar { transition: none; }
    .go-top.is-visible:hover, .go-top:active { transform: none; }
}