/* ── JDC Dashboard · Shared Theme ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #F2F7FB;
  --surface: #E6EFF7;
  --card:    #FFFFFF;
  --border:  #C7D8E8;
  --text:    #1E2D3D;
  --muted:   #7A8FA2;
  --subtle:  #5A7088;
  --accent:  #5B9BD5;
  --plat:    #C2D0DC;
  --gold:    #CFA042;
  --silver:  #A0ABB5;
  --bronze:  #B87E56;
  --earned-bg: rgba(80,140,200,.06);
  --locked-opacity: .5;
  --plat-ps:    #2663a9;
  --plat-xbox:  #2a7a2a;
  --plat-pc:    #6b7280;
  --plat-mac:   #8e8e93;
  --plat-nin:   #c23a2e;
}

html.dark {
  --bg:      #101820;
  --surface: #172028;
  --card:    #1E2A34;
  --border:  #2E4050;
  --text:    #E0EAF2;
  --muted:   #7E93A6;
  --subtle:  #98B0C4;
  --accent:  #6AAEE0;
  --plat:    #AABCCC;
  --gold:    #DCAE50;
  --silver:  #8892A0;
  --bronze:  #C88E64;
  --earned-bg: rgba(100,170,220,.1);
  --locked-opacity: .45;
  --plat-ps:    #4a9de0;
  --plat-xbox:  #4aad4a;
  --plat-pc:    #9ca3af;
  --plat-mac:   #a2aaad;
  --plat-nin:   #e05a4e;
}

html { scroll-behavior: smooth; font-size: 110%; overflow-x: hidden; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.5; min-height: 100vh;
  overflow-x: clip; padding-top: 56px;
}

/* ── Animations ── */
@keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

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

/* ── Header ── */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(242,247,251,.94); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 32px; display: flex; align-items: center;
  justify-content: space-between; height: 56px;
  animation: slideDown .4s ease both;
}
html.dark header { background: rgba(16,24,32,.94); }

.nav-left { display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -.2px; text-decoration: none; color: var(--text); }
.logo-badge {
  width: 28px; height: 28px; border-radius: 6px; background: var(--accent);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
}
.logo span { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 2px; }

/* Nav links */
.nav-links { display: flex; gap: 4px; }
.nav-link {
  font-size: 12px; font-weight: 500; color: var(--muted);
  text-decoration: none; padding: 6px 12px; border-radius: 6px;
  transition: all .12s;
}
.nav-link:hover { color: var(--text); background: var(--surface); }
.nav-link.active { color: var(--text); background: var(--surface); font-weight: 600; }

.header-right { display: flex; align-items: center; gap: 6px; }
.theme-toggle {
  background: none; border: 1px solid var(--border); cursor: pointer;
  color: var(--muted); width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center; transition: all .15s; flex-shrink: 0;
}
.theme-toggle:hover, .logout-btn:hover { color: var(--text); border-color: var(--subtle); }
.logout-btn {
  background: none; border: 1px solid var(--border); cursor: pointer;
  color: var(--muted); width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center; transition: all .15s; flex-shrink: 0;
}
.theme-toggle svg, .refresh-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-moon { display: block; }
.icon-sun  { display: none; }
html.dark .icon-moon { display: none; }
html.dark .icon-sun  { display: block; }

/* ── Footer ── */
footer {
  text-align: center; padding: 32px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--border); letter-spacing: .04em;
}

/* ── Shared page container ── */
.page-content {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(14px, 3vw, 24px);
}

@media (max-width: 600px) {
  body { padding-top: 48px; }
  header { padding: 0 14px; height: 48px; gap: 8px; }
  .nav-left { gap: 10px; min-width: 0; flex: 1; }
  .nav-links {
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { font-size: 12px; padding: 4px 8px; white-space: nowrap; flex-shrink: 0; }
  .logo { font-size: 13px; gap: 8px; flex-shrink: 0; }
  .logo-badge { width: 24px; height: 24px; font-size: 11px; }
}