/* Public design tokens + skeleton + fonts (lightweight, global) */

/* Skeleton loading animation */
.skeleton {
  background: linear-gradient(90deg, #525252 25%, #262626 50%, #525252 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Toast notifications */
.gdb-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 1000;
  animation: toast-slide-up 0.3s ease;
}

@keyframes toast-slide-up {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Badge states */
.badge-locked { opacity: 0.3; filter: grayscale(1); }
.badge-unlocked { opacity: 1; filter: grayscale(0); }
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Roboto+Slab:wght@700&display=swap');

:root{
  --bg:#1B2B24; --card:#24442F; --primary:#006E3B; --accent:#FDBF00;
  --blue:#1F4E9E; --text:#FDFCF9; --muted:#9DB3A8; --radius:12px;
}

html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}

h1,h2{font-family:"Roboto Slab", Georgia, serif}

/* Skeleton Loader */
.skeleton{background:linear-gradient(90deg,#253d2b 25%,#2f5036 37%,#253d2b 63%);background-size:400% 100%;animation:sk 1.2s ease infinite}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* Utility helpers used by public/offline and potential non-React fallbacks */
.container{max-width:720px;margin:0 auto;padding:16px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:0 8px 28px -10px rgba(0,0,0,.35);}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:9999px;background:var(--primary);color:var(--text);text-decoration:none}
.btn:focus{outline:3px solid rgba(253,191,0,.6);outline-offset:2px}