/* LEAP page — matches learneasy.biz homepage design */
:root {
  --navy: #0f172a;
  --navy-soft: #1e293b;
  --blue: #4f8ef7;
  --blue-dark: #3b7de8;
  --orange: #f97316;
  --gold: #f59e0b;
  --green: #10b981;
  --bg: #f8fafc;
  --card: #ffffff;
  --muted: #64748b;
  --border: #e2e8f0;
  --radius: 16px;
  --shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
  --font-display: 'Syne', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --nav-h: 64px;
}

body {
  font-family: var(--font-body) !important;
  background:
    radial-gradient(ellipse 80% 50% at 70% 0%, rgba(79, 142, 247, 0.12), transparent),
    linear-gradient(180deg, #fff 0%, var(--bg) 100%) !important;
  padding: 0 !important;
}

.container {
  max-width: 1100px !important;
  margin: 20px auto 40px !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  animation: leapIn 0.5s ease forwards !important;
}
@keyframes leapIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.header {
  background: linear-gradient(135deg, var(--navy) 0%, #1e3a5f 55%, var(--blue-dark) 100%) !important;
  padding: 28px 24px !important;
}
.header h1, .header p { font-family: var(--font-display); }
.header p { opacity: 0.88 !important; }

.content { padding: 28px 24px !important; }
@media (min-width: 768px) { .content { padding: 36px 40px !important; } }

.progress-bar { background: #e2e8f0 !important; }
.progress-fill { background: linear-gradient(90deg, var(--blue), var(--orange)) !important; }

.btn, .btn-primary {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
.btn:hover, .btn-primary:hover { background: var(--blue-dark) !important; }
.btn-secondary { border-color: var(--border) !important; color: var(--navy) !important; }
.btn-secondary.active, #publicTabTutors[style*="667eea"] {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}

h2, h3, .login-section h2 { color: var(--navy) !important; font-family: var(--font-display); }
.login-section p, #loadingStatus { color: var(--muted) !important; }

.tutor-card {
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
}
.tutor-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow) !important;
}
.tutor-card.has-video { border-color: rgba(79, 142, 247, 0.35) !important; }
.tutor-badge { background: rgba(79, 142, 247, 0.12) !important; color: var(--blue-dark) !important; }

.filters-section {
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg) !important;
}

.form-group input, .form-group select, .form-group textarea,
.filter-group select {
  border-radius: 10px !important;
  border-color: var(--border) !important;
}
.form-group input:focus, .form-group select:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.15) !important;
}

.google-btn { border-radius: 12px !important; }
.google-btn:hover:not(:disabled) {
  border-color: var(--blue) !important;
  box-shadow: 0 4px 16px rgba(79, 142, 247, 0.15) !important;
}

.tutor-detail-content {
  border-radius: var(--radius) !important;
}
.tutor-detail-modal { backdrop-filter: blur(4px); }

.user-info {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

.stat-value { color: var(--blue) !important; }

@media (max-width: 768px) {
  .container { margin: 12px !important; border-radius: 12px !important; }
}