/* ============================================================
   side.exchange — apply the index.html "SIDE" identity (dark
   #0a0a0f, yellow #FFE94A, Inter) to the inner pages. Loaded
   AFTER /assets/tailwind.min.css. Matches index.html tokens.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --s-bg:#0a0a0f; --s-bg2:#08080d; --s-elev:#14141a; --s-elev2:#1a1a1e; --s-elev3:#1e1e22;
  --s-border:rgba(255,255,255,.06); --s-border2:rgba(255,255,255,.12);
  --s-yellow:#FFE94A; --s-yellow-h:#ffec68; --s-yellow-deep:#f5d800; --s-yellow-soft:rgba(255,233,74,.1);
  --s-text:#e2e8f0; --s-dim:#9ca3af;
}

/* base */
html,body{ background:#0a0a0f !important; }
body{ font-family:'Inter',system-ui,sans-serif !important; color:var(--s-text) !important; }
.font-mono,code,pre{ font-family:'JetBrains Mono',ui-monospace,monospace !important; }
/* subtle radial glow like the home */
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(900px 520px at 80% -8%, rgba(255,233,74,.06), transparent 60%),
             radial-gradient(800px 480px at 5% 0%, rgba(255,233,74,.04), transparent 55%); }

/* surfaces */
.bg-dark-600,.bg-dark-700{ background-color:var(--s-bg2) !important; }
.bg-dark-400,.bg-dark-300,.bg-dark-200,.bg-dark-100,.bg-dark-50{
  background-color:var(--s-elev) !important; border:1px solid var(--s-border) !important; }
.bg-white{ background-color:var(--s-elev2) !important; }

/* borders */
.border-gray-800,.border-gray-700,.border-gray-600,.border-gray-500,.border-white{ border-color:var(--s-border) !important; }

/* text */
.text-white,.text-gray-100{ color:#f1f5f9 !important; }
.text-gray-300{ color:#cbd5e1 !important; }
.text-gray-400,.text-gray-500,.text-gray-600{ color:var(--s-dim) !important; }

/* accent: orange/monero/primary/yellow → SIDE yellow */
.text-orange-300,.text-orange-400,.text-orange-500,.text-monero,
.text-primary-400,.text-primary-500,.text-yellow-300,.text-yellow-400,
.hover\:text-orange-300:hover,.hover\:text-orange-400:hover,.hover\:text-primary-400:hover{ color:var(--s-yellow) !important; }

.bg-monero,.bg-monero-light,.bg-primary-500,.bg-yellow-300,.bg-yellow-400,.bg-orange-400,
a.bg-monero,button.bg-monero,
.hover\:bg-monero:hover,.hover\:bg-monero-light:hover{
  background-color:var(--s-yellow) !important; color:#0a0a0f !important; font-weight:600;
  box-shadow:0 8px 30px rgba(255,233,74,.18); border-color:var(--s-yellow) !important; }
.bg-monero:hover,.bg-primary-500:hover,a.bg-monero:hover,button.bg-monero:hover{ background-color:var(--s-yellow-h) !important; }

.border-monero,.border-primary-500{ border-color:var(--s-yellow) !important; }
.from-monero,.from-primary-500{ --tw-gradient-from:#FFE94A var(--tw-gradient-from-position) !important; --tw-gradient-to:rgba(255,233,74,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important; }
.to-monero,.to-monero-light,.to-primary-700{ --tw-gradient-to:#f5d800 var(--tw-gradient-to-position) !important; }
.ring-monero,.ring-primary-500{ --tw-ring-color:#FFE94A !important; }

/* header → SIDE (matches index: dark/blur, yellow hover) */
header.sticky,header[class*="border-b"]{
  background:rgba(10,10,15,.7) !important; border-bottom:1px solid var(--s-border) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
header nav a:hover{ color:var(--s-yellow) !important; }
header .font-bold,header .text-xl{ letter-spacing:-.01em; }

/* footer */
footer[class*="border-t"]{ border-top:1px solid var(--s-border) !important; background:rgba(8,8,13,.5); }

/* inputs */
input,textarea,select{ background:var(--s-elev) !important; border:1px solid var(--s-border) !important; color:var(--s-text) !important; }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--s-yellow) !important; box-shadow:0 0 0 2px var(--s-yellow-soft) !important; }
input::placeholder,textarea::placeholder{ color:#6b7280 !important; }

/* headings */
h1,h2,h3,h4{ color:#f8fafc !important; }

/* code blocks */
pre,code{ background:rgba(10,10,15,.7) !important; border:1px solid var(--s-border); }

/* ===== canonical SIDE header (identical to index.html) ===== */
.side-hd{ position:sticky; top:0; z-index:50; padding:16px 20px; background:rgba(10,10,15,.55); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.05); font-family:'Inter',system-ui,sans-serif; }
@media(min-width:640px){ .side-hd{ padding:16px 40px; } }
.side-hd-in{ max-width:80rem; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.side-hd-logo{ display:inline-flex; align-items:center; gap:8px; color:#fff !important; text-decoration:none; }
.side-hd-logo span{ font-weight:900; font-size:20px; letter-spacing:-.02em; color:#fff !important; }
.side-hd-nav{ display:none; align-items:center; gap:28px; font-size:14px; }
@media(min-width:768px){ .side-hd-nav{ display:flex; } }
.side-hd-nav a{ color:rgba(255,255,255,.7) !important; text-decoration:none; transition:color .2s; }
.side-hd-nav a:hover{ color:#fff !important; }
.side-hd-cta{ display:inline-block; padding:8px 16px; border-radius:12px; background:#FFE94A !important; color:#0a0a0f !important; font-weight:600; font-size:14px; text-decoration:none; transition:all .2s; white-space:nowrap; }
.side-hd-cta:hover{ background:#ffec68 !important; box-shadow:0 0 32px rgba(255,233,74,.4); }

/* ===== canonical SIDE footer (identical to index.html) ===== */
.side-ft{ position:relative; padding:48px 20px; border-top:1px solid rgba(255,255,255,.05); margin-top:64px; font-family:'Inter',system-ui,sans-serif; }
@media(min-width:640px){ .side-ft{ padding:48px 40px; } }
.side-ft-in{ max-width:80rem; margin:0 auto; }
.side-ft-top{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:24px; margin-bottom:32px; }
@media(min-width:640px){ .side-ft-top{ flex-direction:row; } }
.side-ft-nav{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 24px; font-size:14px; }
.side-ft-nav a{ color:rgba(255,255,255,.5) !important; text-decoration:none; transition:color .2s; }
.side-ft-nav a:hover{ color:#fff !important; }
.side-ft-bot{ padding-top:24px; border-top:1px solid rgba(255,255,255,.04); display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:12px; }
@media(min-width:640px){ .side-ft-bot{ flex-direction:row; } }
.side-ft-bot p{ font-size:12px; color:rgba(255,255,255,.4) !important; font-family:'JetBrains Mono',monospace; margin:0; }