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

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --surface: #1a1a2e;
  --text-primary: #e8e6f0;
  --text-secondary: rgba(232, 230, 240, 0.6);
  --text-muted: rgba(232, 230, 240, 0.3);
  --border-color: rgba(255, 255, 255, 0.06);
  --accent-1: #6c5ce7;
  --accent-2: #00cec9;
  --accent-3: #fd79a8;
  --accent-1-dark: #a29bfe;
  --accent-2-dark: #55efc4;
  --accent-gradient: linear-gradient(135deg, #6c5ce7 0%, #00cec9 50%, #fd79a8 100%);
  --accent-gradient-dark: linear-gradient(135deg, #a29bfe 0%, #55efc4 50%, #fd79a8 100%);
  --glow: rgba(108, 92, 231, 0.15);
  --glow-strong: rgba(108, 92, 231, 0.3);
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r4u-bg: #0a0a0f;
  --r4u-surface: #12121a;
  --r4u-surface-2: #1a1a2e;
  --r4u-surface-3: rgba(255, 255, 255, 0.06);
  --r4u-border: rgba(255, 255, 255, 0.09);
  --r4u-text: #e8e6f0;
  --r4u-muted: rgba(232, 230, 240, 0.72);
  --r4u-accent: var(--accent-1-dark);
  --r4u-accent-2: var(--accent-2-dark);
  --r4u-accent-3: var(--accent-3);
  --r4u-success: #55efc4;
  --r4u-danger: #ff7675;
  --r4u-warning: #fdcb6e;
  --r4u-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);

  --bg: var(--r4u-bg);
  --surface: var(--r4u-surface);
  --surface2: var(--r4u-surface-2);
  --surface3: var(--r4u-surface-3);
  --s2: var(--r4u-surface-2);
  --border: var(--r4u-border);
  --text: var(--r4u-text);
  --muted: var(--r4u-muted);
  --accent: var(--r4u-accent);
  --accent-h: var(--accent-1);
  --accent2: var(--r4u-accent-2);
  --green: var(--r4u-success);
  --red: var(--r4u-danger);
  --warn: var(--r4u-warning);
  --purple: var(--accent-3);
}

html, body {
  font-family: var(--sans);
  background: var(--r4u-bg);
  color: var(--r4u-text);
}

code, pre, .mono {
  font-family: var(--mono);
}

.r4u-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.r4u-logo img {
  width: 32px;
  height: 32px;
}

.r4u-gradient-text {
  background: var(--accent-gradient-dark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.r4u-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid var(--r4u-border);
  box-shadow: var(--r4u-shadow);
  backdrop-filter: blur(14px);
}