/* ============================================================
   Claude Token Share — Premium Dashboard Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---- Design Tokens ---- */
:root {
  --bg-deep: #09090b;
  --bg-base: #0c0c0e;
  --bg-surface: rgba(18, 18, 22, 0.7);
  --bg-card: rgba(22, 22, 28, 0.55);
  --bg-card-hover: rgba(28, 28, 36, 0.65);
  --bg-elevated: rgba(30, 30, 38, 0.6);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(251, 191, 36, 0.25);

  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-dim: #52525b;

  --accent-amber: #f59e0b;
  --accent-orange: #f97316;
  --accent-emerald: #34d399;
  --accent-blue: #60a5fa;
  --accent-purple: #a78bfa;
  --accent-rose: #fb7185;

  --gradient-primary: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%);
  --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);

  --glass-bg: rgba(16, 16, 20, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 20px;

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  background: var(--bg-deep) !important;
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Ambient background glow */
body::before {
  content: '';
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.035) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.025) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: ambientShift 25s ease-in-out infinite alternate;
}

@keyframes ambientShift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(2%, -1%) rotate(1deg); }
  100% { transform: translate(-1%, 2%) rotate(-0.5deg); }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* ---- Selection ---- */
::selection { background: rgba(245, 158, 11, 0.3); color: #fff; }

/* ---- Header ---- */
header {
  background: rgba(9, 9, 11, 0.78) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle) !important;
}

header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,0.2), rgba(249,115,22,0.15), transparent);
}

/* Logo glow */
header .w-9.h-9 {
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), inset 0 1px 1px rgba(255,255,255,0.15);
}

/* ---- Tab Navigation ---- */
.tab-btn {
  position: relative;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  transition: all var(--transition-base);
}

.active-tab {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  border-bottom: none !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.08);
}

.inactive-tab { color: var(--text-secondary) !important; }

.inactive-tab:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-primary) !important;
}

/* Tab bar */
.border-b.border-zinc-800.bg-\\[\\#161615\\] {
  background: rgba(9, 9, 11, 0.6) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* ---- Glass Cards (KPI, Charts, Panels) ---- */
.bg-\\[\\#1a1a19\\] {
  background: var(--bg-card) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-color: var(--border-default) !important;
  transition: all var(--transition-base);
}

/* Hover lift for grid cards */
.grid > div.bg-\\[\\#1a1a19\\]:hover,
.grid > div.border.border-zinc-800:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Icon glow containers */
.w-12.h-12.rounded-xl.bg-amber-500\/10 { box-shadow: 0 0 22px rgba(245,158,11,0.1); }
.w-12.h-12.rounded-xl.bg-emerald-500\/10 { box-shadow: 0 0 22px rgba(52,211,153,0.1); }
.w-12.h-12.rounded-xl.bg-blue-500\/10 { box-shadow: 0 0 22px rgba(96,165,250,0.1); }
.w-12.h-12.rounded-xl.bg-purple-500\/10 { box-shadow: 0 0 22px rgba(167,139,250,0.1); }

/* KPI numbers */
.text-2xl.font-bold {
  letter-spacing: -0.03em;
  font-weight: 800 !important;
  font-feature-settings: 'tnum' 1;
}

/* ---- Timeframe Buttons ---- */
.timeframe-btn {
  cursor: pointer;
  transition: all var(--transition-base);
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
}

.timeframe-btn:hover { transform: translateY(-1px); }

.timeframe-btn.active-filter {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
  font-weight: 600 !important;
  box-shadow: 0 0 16px rgba(245,158,11,0.1);
}

/* ---- Primary Buttons ---- */
.bg-gradient-to-r.from-amber-600.to-orange-600 {
  position: relative; overflow: hidden;
  transition: all var(--transition-base);
  box-shadow: 0 2px 12px rgba(245,158,11,0.2), inset 0 1px 1px rgba(255,255,255,0.1) !important;
  border-radius: var(--radius-md) !important;
}

.bg-gradient-to-r.from-amber-600.to-orange-600:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(245,158,11,0.35), inset 0 1px 1px rgba(255,255,255,0.15) !important;
}

.bg-gradient-to-r.from-amber-600.to-orange-600:active { transform: translateY(0px); }

.bg-amber-600 {
  transition: all var(--transition-base);
  box-shadow: 0 2px 12px rgba(245,158,11,0.15);
  border-radius: var(--radius-md) !important;
}

.bg-amber-600:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(245,158,11,0.25);
}

/* ---- Table ---- */
table { font-variant-numeric: tabular-nums; }

thead { background: rgba(15, 15, 18, 0.6) !important; }

thead th {
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  font-size: 0.68rem !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}

tbody tr { transition: all var(--transition-fast); }
tbody tr:hover { background: rgba(255,255,255,0.02) !important; }

/* ---- Token Cards ---- */
#tokensGrid > div {
  transition: all var(--transition-base);
  position: relative; overflow: hidden;
}

#tokensGrid > div::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,0.25), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

#tokensGrid > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

#tokensGrid > div:hover::before { opacity: 1; }

/* ---- Modals ---- */
#inviteModal > div,
#addTokenModal > div {
  background: rgba(20, 20, 24, 0.95) !important;
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 1px rgba(255,255,255,0.08);
  animation: modalEnter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalEnter {
  0% { opacity: 0; transform: scale(0.95) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

#inviteModal, #addTokenModal {
  background: rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---- Form Inputs ---- */
input[type="text"],
input[type="password"],
select,
textarea {
  background: rgba(15, 15, 18, 0.6) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-base);
  font-family: 'Inter', sans-serif !important;
  color: var(--text-primary) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.08), 0 0 20px rgba(245,158,11,0.06);
  outline: none !important;
}

input::placeholder { color: var(--text-dim) !important; }

/* ---- Code Fonts ---- */
code, pre, .font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace !important;
}

/* ---- Chat Playground ---- */
#playChatHistory {
  background: rgba(10, 10, 12, 0.6) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
}

.bg-amber-600.text-white.rounded-2xl {
  background: linear-gradient(135deg, #d97706, #ea580c) !important;
  box-shadow: 0 2px 12px rgba(217, 119, 6, 0.2);
}

/* ---- Toast ---- */
#toast > div {
  background: rgba(20, 20, 24, 0.95) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.toast-show {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* ---- Balance Bar ---- */
.bg-zinc-800.rounded-full.h-2 {
  background: rgba(255,255,255,0.06) !important;
}

.bg-amber-500.h-2.rounded-full {
  background: var(--gradient-accent) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Setup Cards ---- */
.bg-\\[\\#151514\\] {
  background: rgba(16, 16, 20, 0.6) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-default) !important;
  transition: all var(--transition-base);
}

.bg-\\[\\#151514\\]:hover {
  border-color: var(--border-hover) !important;
  transform: translateY(-1px);
}

.bg-zinc-950 {
  background: rgba(6, 6, 8, 0.7) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
}

/* ---- Animations ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.animate-pulse-subtle { animation: pulse-subtle 2s infinite ease-in-out; }

/* View animations */
#view-dashboard, #view-tokens, #view-members, #view-playground, #view-setup {
  animation: fadeInUp 0.4s ease-out;
}

/* Staggered card entrance */
.grid > div:nth-child(1) { animation: fadeInUp 0.35s ease-out 0.05s both; }
.grid > div:nth-child(2) { animation: fadeInUp 0.35s ease-out 0.1s both; }
.grid > div:nth-child(3) { animation: fadeInUp 0.35s ease-out 0.15s both; }
.grid > div:nth-child(4) { animation: fadeInUp 0.35s ease-out 0.2s both; }

/* Pulse animation */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.animate-pulse { animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Live badge */
.text-\\[10px\\].px-1\\.5.py-0\\.5.rounded.bg-emerald-500\\/20 {
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,211,153,0.3); }
  50% { opacity: 0.85; box-shadow: 0 0 8px rgba(52,211,153,0.2); }
}

/* ---- Main ---- */
main { position: relative; z-index: 1; }

/* ---- Dropdown ---- */
#collectionSelect {
  background: transparent !important;
  border: none !important;
  font-weight: 600;
  cursor: pointer;
}

#collectionSelect option { background: #18181b; color: #e4e4e7; }

/* ---- Borders override ---- */
.border-b.border-zinc-800 { border-color: var(--border-subtle) !important; }

/* ---- Pool selector ---- */
.bg-zinc-900.border.border-zinc-800.rounded-lg {
  background: rgba(15, 15, 18, 0.5) !important;
  border: 1px solid var(--border-default) !important;
  transition: all var(--transition-base);
}

.bg-zinc-900.border.border-zinc-800.rounded-lg:hover {
  border-color: var(--border-hover) !important;
}

/* ---- Meta banner ---- */
#playMetaBanner {
  background: rgba(15, 15, 18, 0.6) !important;
  border: 1px solid var(--border-default) !important;
}

/* ---- Canvas ---- */
canvas { border-radius: var(--radius-sm); }

/* ---- Dashed border ---- */
.border-dashed {
  border-style: dashed !important;
  border-color: rgba(255,255,255,0.08) !important;
}