/* ══════════════════════════════════════════
   TOP20COINS — Shared Stylesheet
   ══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800&family=Syne:wght@300;400;600;700&display=swap');

:root {
  --bg:        #060b14;
  --bg2:       #0c1424;
  --bg3:       #101e32;
  --teal:      #00e5c3;
  --teal-dim:  rgba(0,229,195,0.10);
  --teal-glow: rgba(0,229,195,0.30);
  --gold:      #f5c842;
  --gold-dim:  rgba(245,200,66,0.10);
  --red:       #ff4d6a;
  --green:     #00d68f;
  --text:      #e2eaf5;
  --muted:     #6b8099;
  --border:    rgba(0,229,195,0.13);
  --card:      rgba(12,20,36,0.97);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  font-family:'Syne',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.6;
}

body::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(0,229,195,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,195,.035) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
  z-index:0;
}

/* ── HEADER ── */
header {
  position:sticky; top:0; z-index:100;
  background:rgba(6,11,20,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 2rem; height:68px;
  display:flex; align-items:center; justify-content:space-between;
}

.logo { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.logo-icon { width:36px; height:36px; background:var(--teal); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:0 0 18px var(--teal-glow); color:var(--bg); font-weight:800; }
.logo-text { font-family:'Orbitron',monospace; font-size:1.1rem; font-weight:800; color:var(--text); letter-spacing:-.02em; }
.logo-text span { color:var(--teal); }

nav { display:flex; align-items:center; gap:.2rem; }
nav a { color:var(--muted); text-decoration:none; font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.4rem .9rem; border-radius:4px; transition:color .2s,background .2s; }
nav a:hover, nav a.active { color:var(--teal); background:var(--teal-dim); }
nav a.nav-cta { background:var(--teal); color:var(--bg) !important; margin-left:.4rem; }
nav a.nav-cta:hover { background:#00ffd8 !important; }

/* ── AD ZONES ── */
.ad-top { background:var(--bg2); border-bottom:1px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px; min-height:100px; position:relative; z-index:5; }
.ad-label { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.ad-sidebar { background:var(--bg3); border:1px dashed var(--border); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:260px; padding:1rem; }
.footer-ad { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px; min-height:110px; position:relative; z-index:2; }

/* ── LAYOUT ── */
.page-wrap { max-width:1260px; margin:0 auto; padding:2.5rem 1.5rem; display:grid; grid-template-columns:1fr 300px; gap:2rem; position:relative; z-index:2; }
@media(max-width:900px) { .page-wrap { grid-template-columns:1fr; } nav a:not(.nav-cta):not(.active) { display:none; } }

/* ── SECTION HEADER ── */
.section-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.section-title { font-family:'Orbitron',monospace; font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--teal); display:flex; align-items:center; gap:.6rem; }
.section-title::before { content:''; display:inline-block; width:3px; height:16px; background:var(--teal); border-radius:2px; }
.see-all { font-size:.75rem; color:var(--muted); text-decoration:none; letter-spacing:.06em; transition:color .2s; }
.see-all:hover { color:var(--teal); }

/* ── SIDEBAR ── */
.sidebar { display:flex; flex-direction:column; gap:1.5rem; }
.sidebar-widget { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.2rem; }
.widget-title { font-family:'Orbitron',monospace; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--teal); margin-bottom:1rem; padding-bottom:.7rem; border-bottom:1px solid var(--border); }

/* ── GAINER ROW ── */
.gainer-row { display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid rgba(0,229,195,.06); }
.gainer-row:last-child { border-bottom:none; }
.gainer-coin { display:flex; align-items:center; gap:.6rem; }
.gainer-name { font-weight:700; font-size:.85rem; }
.gainer-sym  { font-size:.68rem; color:var(--muted); }

/* ── GUIDE LINKS ── */
.guide-link { color:var(--text); text-decoration:none; font-size:.85rem; font-weight:600; line-height:1.35; transition:color .2s; padding:.3rem 0; display:block; }
.guide-link:hover { color:var(--teal); }

/* ── BUTTONS ── */
.btn-primary { background:var(--teal); color:var(--bg); border:none; padding:.85rem 2rem; font-family:'Syne',sans-serif; font-weight:700; font-size:.9rem; letter-spacing:.04em; border-radius:6px; cursor:pointer; box-shadow:0 0 24px var(--teal-glow); transition:all .2s; text-decoration:none; display:inline-block; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 36px var(--teal-glow); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border); padding:.85rem 2rem; font-family:'Syne',sans-serif; font-weight:600; font-size:.9rem; border-radius:6px; cursor:pointer; transition:all .2s; text-decoration:none; display:inline-block; }
.btn-ghost:hover { border-color:var(--teal); color:var(--teal); }
.btn-sm { padding:.5rem 1.2rem; font-size:.8rem; }

/* ── DISCLAIMER ── */
.disclaimer { background:rgba(245,200,66,.05); border:1px solid rgba(245,200,66,.18); border-radius:8px; padding:.9rem 1.5rem; font-size:.75rem; color:var(--muted); line-height:1.65; margin:0 auto 2rem; max-width:1260px; position:relative; z-index:2; }
.disclaimer strong { color:var(--gold); }

/* ── FOOTER ── */
footer { background:var(--bg); border-top:1px solid var(--border); padding:2.5rem 2rem; position:relative; z-index:2; }
.footer-inner { max-width:1260px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-links { display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer-links a { color:var(--muted); text-decoration:none; font-size:.8rem; transition:color .2s; }
.footer-links a:hover { color:var(--teal); }
.footer-copy { font-size:.78rem; color:var(--muted); }