/* ISDM NxT Career Bridge Design System */
:root {
  --cb-primary: #E91E63;
  --cb-primary-dark: #D81B60;
  --cb-purple: #7B1FA2;
  --cb-plum: #512DA8;
  --cb-charcoal: #1E1E2D;

  --cb-bg: #F8FAFC;
  --cb-card: #FFFFFF;
  --cb-soft-pink: #FFE4EC;
  --cb-soft-purple: #EDE7F6;
  --cb-soft-plum: #F3E5F5;
  --cb-soft-gray: #F5F6FA;

  --cb-text: #374151;
  --cb-heading: #1E1E2D;
  --cb-muted: #6B7280;
  --cb-light-text: #9CA3AF;

  --cb-border: #E5E7EB;
  --cb-border-soft: #EEF0F4;

  --cb-success: #10B981;
  --cb-warning: #F59E0B;
  --cb-danger: #EF4444;
  --cb-info: #3B82F6;

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

  --cb-shadow-sm: 0 4px 12px rgba(30, 30, 45, 0.04);
  --cb-shadow-md: 0 8px 24px rgba(30, 30, 45, 0.06);
  --cb-shadow-lg: 0 12px 32px rgba(30, 30, 45, 0.10);

  --cb-gradient-primary: linear-gradient(135deg, #E91E63 0%, #7B1FA2 100%);
  --cb-gradient-sidebar: linear-gradient(180deg, #E91E63 0%, #7B1FA2 55%, #512DA8 100%);
  --cb-gradient-dark: linear-gradient(135deg, #1E1E2D 0%, #512DA8 100%);
  --cb-gradient-soft-card: linear-gradient(135deg, #FFF5F8 0%, #F3E5F5 100%);
  --cb-gradient-button-hover: linear-gradient(135deg, #D81B60 0%, #512DA8 100%);

  --cb-font: 'Poppins', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--cb-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cb-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; }
button, input, select, textarea { font: inherit; }
img, svg, canvas { max-width: 100%; }

h1, h2, h3, h4, h5, h6 {
  color: var(--cb-heading);
  letter-spacing: -0.2px;
}

.cb-card,
.dash-card,
.dash-panel,
.admin-panel,
.admin-section,
.admin-stat-card,
.admin-quick-card,
.auth-card {
  background: var(--cb-card);
  border: 1px solid var(--cb-border-soft);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-md);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.cb-card:hover,
.dash-card:hover,
.admin-panel:hover,
.admin-section:hover,
.admin-stat-card:hover,
.admin-quick-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cb-shadow-lg);
}

.btn,
.dash-button,
.admin-primary-link,
.admin-inline-search button,
.nav-cta,
.btn-primary {
  background: var(--cb-gradient-primary);
  color: var(--cb-card) !important;
  border: 0;
  border-radius: var(--cb-radius-md);
  box-shadow: 0 8px 18px rgba(233, 30, 99, .22);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn:hover,
.dash-button:hover,
.admin-primary-link:hover,
.admin-inline-search button:hover,
.nav-cta:hover,
.btn-primary:hover {
  background: var(--cb-gradient-button-hover);
  transform: translateY(-1px);
}

input,
select,
textarea,
.auth-card input,
.auth-card select,
.admin-inline-search input {
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-md);
  background: var(--cb-card);
  color: var(--cb-text);
  outline: none;
}

input:focus,
select:focus,
textarea:focus,
.auth-card input:focus,
.auth-card select:focus,
.admin-inline-search input:focus {
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 4px rgba(233, 30, 99, .10);
}

.alert {
  border: 1px solid #FFD4E1;
  border-radius: var(--cb-radius-md);
  color: #991B1B;
  background: #FFF1F5;
}

.admin-status,
.admin-source-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.admin-status {
  color: #166534;
  background: #DCFCE7;
}

.admin-source-badge {
  color: var(--cb-primary-dark);
  background: var(--cb-soft-pink);
}

/* Auth and form surfaces */
.auth-wrap {
  background: linear-gradient(180deg, var(--cb-bg) 0%, #FFFFFF 100%) !important;
}

.auth-card {
  width: min(100%, 460px);
  padding: 28px;
}

.auth-card h1 {
  color: var(--cb-heading) !important;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
}

.auth-card label {
  color: var(--cb-text) !important;
  font-size: 13px;
  font-weight: 600 !important;
}

.auth-card input,
.auth-card select {
  min-height: 44px;
  padding: 10px 14px;
}

.eyebrow {
  color: var(--cb-primary-dark) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
}