:root {
  --cn-gradient-start: #667eea;
  --cn-gradient-end: #764ba2;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.cn-gradient-header {
  background: linear-gradient(135deg, var(--cn-gradient-start) 0%, var(--cn-gradient-end) 100%);
}

.cn-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.btn-primary {
  background: linear-gradient(135deg, var(--cn-gradient-start) 0%, var(--cn-gradient-end) 100%);
  border: none;
  transition: opacity 0.2s;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  opacity: 0.9;
  background: linear-gradient(135deg, var(--cn-gradient-start) 0%, var(--cn-gradient-end) 100%);
}

/* Hide fallback text by default, let JS show it if img fails */
img[onerror] + .logo-text-fallback {
    display: none !important;
}
img[src=''] + .logo-text-fallback {
    display: inline-block !important;
}