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

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg: #0c0c14;
  --bg2: #14141e;
  --bg3: #1c1c28;
  --glass: rgba(255,255,255,0.04);
  --glass2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.12);
  --text: #e6e6f0;
  --text2: #8888a0;
  --text3: #555568;
  --accent: #00d4aa;
  --accent-dim: #00a080;
  --danger: #ef4444;
  --font: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="light"] {
  --bg: #f8f9fa;
  --bg2: #ffffff;
  --bg3: #f1f3f5;
  --glass: rgba(0,0,0,0.03);
  --glass2: rgba(0,0,0,0.05);
  --border: rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.15);
  --text: #1a1a2e;
  --text2: #5a5a6e;
  --text3: #9a9aaa;
  --accent: #00a884;
  --accent-dim: #008f6e;
  --danger: #dc2626;
}

html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height:100vh;
  line-height:1.6;
  font-size:15px;
  -webkit-tap-highlight-color: transparent;
  overflow-x:hidden;
}

/* NO BLUE OUTLINE ANYWHERE */
*:focus, *:focus-visible, *:active { outline: none !important; }
button, a, textarea, input, select, [tabindex] {
  -webkit-tap-highlight-color: transparent;
}
button:focus, button:focus-visible, button:active,
a:focus, a:focus-visible, a:active,
textarea:focus, textarea:focus-visible, textarea:active,
input:focus, input:focus-visible, input:active,
select:focus, select:focus-visible, select:active {
  outline: none !important;
  box-shadow: none !important;
}

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; }

/* Loading */
.loading-wrap { text-align:center; padding:60px 20px; color:var(--text2); }
.loading-spinner {
  width:28px; height:28px; margin:0 auto 12px;
  border:2px solid var(--border2); border-top-color:var(--accent);
  border-radius:50%; animation:spin 0.8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg);} }
.retry-btn {
  margin-top:14px; padding:8px 20px;
  background:transparent; color:var(--accent);
  border:1px solid var(--accent); border-radius:8px;
  font-family:var(--font); font-size:0.8rem; cursor:pointer;
  transition:all 0.2s ease;
}
.retry-btn:hover { background:var(--accent); color:var(--bg); }