/* ============================================================
   Careers Scout — Global Styles
   Mobile-first, teal accent (#1D9E75), works from 375px+
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --teal: #1D9E75;
  --teal-dark: #178a64;
  --teal-light: #D1FAE5;
  --teal-muted: #A7F3D0;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --amber: #F59E0B;
  --amber-light: #FEF3C7;
  --purple: #8B5CF6;
  --purple-light: #EDE9FE;
  --blue: #3B82F6;
  --blue-light: #DBEAFE;
  --red: #EF4444;
  --red-light: #FEE2E2;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow: 0 1px 4px rgba(0,0,0,.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1);
  --transition: 0.15s ease;
}

html { font-size: 16px; overflow-x: hidden; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--gray-50);
  color: var(--gray-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  transition: background var(--transition), opacity var(--transition), transform var(--transition);
}
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--gray-900);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(29,158,117,.12);
}
input::placeholder { color: var(--gray-400); }

/* ── Layout ───────────────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* ============================================================
   AUTH PAGES (login.html)
   ============================================================ */

.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0fdf9 0%, #f9fafb 100%);
  padding: 24px 16px;
}

.auth-main {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0fdf9 0%, #f9fafb 100%);
  padding: 32px 16px;
}

.auth-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}
.auth-logo-icon { font-size: 36px; }
.auth-logo-name {
  font-size: 26px;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.5px;
  margin-top: 4px;
}
.auth-logo-tagline { font-size: 13px; color: var(--gray-500); margin-top: 4px; }

/* Tab switcher */
.auth-tabs {
  display: flex;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  border-radius: 0;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-400);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition), border-color var(--transition);
}
.auth-tab.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

/* Form fields */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .hidden { display: none !important; }

.field-group { display: flex; flex-direction: column; gap: 4px; }
.field-group label { font-size: 13px; font-weight: 600; color: var(--gray-700); }

.password-wrap { position: relative; }
.password-wrap input { padding-right: 44px; }
.btn-eye {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 40px; background: none; border: none; border-radius: 0 8px 8px 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); font-size: 16px; padding: 0;
}
.btn-eye:hover { color: var(--gray-700); }

.field-error {
  font-size: 12px;
  color: var(--red);
  min-height: 16px;
}

.btn-primary {
  width: 100%;
  padding: 11px;
  background: var(--teal);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  margin-top: 4px;
}
.btn-primary:hover { background: var(--teal-dark); }

.auth-forgot {
  text-align: right;
  font-size: 13px;
  margin-top: -6px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--gray-400);
  font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

.btn-google {
  width: 100%;
  padding: 10px;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-google:hover { background: var(--gray-50); border-color: var(--gray-300); }
.btn-google svg { flex-shrink: 0; }

.auth-terms {
  font-size: 12px;
  color: var(--gray-400);
  text-align: center;
  line-height: 1.5;
}

.auth-message {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  display: none;
}
.auth-message.success { background: var(--teal-light); color: #065F46; display: block; }
.auth-message.error { background: var(--red-light); color: #991B1B; display: block; }

/* ============================================================
   APP HEADER
   ============================================================ */

.app-header {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.55);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.04);
}
.app-header .container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.4px;
  text-decoration: none;
}
.header-brand:hover { text-decoration: none; }
.header-brand-icon { font-size: 22px; }

.header-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  background: var(--teal-light);
  padding: 3px 10px;
  border-radius: 20px;
}
.live-dot {
  width: 7px; height: 7px;
  background: var(--teal);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.header-countdown {
  font-size: 12px;
  color: var(--gray-500);
  margin-left: 2px;
}

.header-spacer { flex: 1; }

.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--gray-600);
  overflow: hidden;
}
.header-email {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-icon {
  background: none;
  color: var(--gray-500);
  padding: 7px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover { background: var(--gray-100); color: var(--gray-900); }

.btn-logout {
  padding: 6px 14px;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 600;
  border-radius: 7px;
  white-space: nowrap;
}
.btn-logout:hover { background: var(--gray-200); }

/* ============================================================
   MAIN APP LAYOUT
   ============================================================ */

.app-main { padding: 24px 0 48px; }

/* ── Search Card ──────────────────────────────────────────── */
.search-card {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
  margin-bottom: 16px;
}

.search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.search-grid .field-full { grid-column: 1 / -1; }

@media (max-width: 600px) {
  .search-grid { grid-template-columns: 1fr; }
}

.search-filters {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 768px) {
  .search-filters { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .search-filters { grid-template-columns: 1fr; }
}

.custom-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 2px;
  flex-wrap: wrap;
}
.custom-date-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  white-space: nowrap;
}
.custom-date-row input[type="datetime-local"] {
  flex: 1;
  min-width: 190px;
  padding: 8px 10px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--gray-700);
  background: #fff;
  transition: border-color var(--transition);
}
.custom-date-row input[type="datetime-local"]:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(29,158,117,.1);
}
.btn-apply-custom {
  padding: 8px 18px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
}
.btn-apply-custom:hover { background: var(--teal-dark); }
@media (max-width: 600px) {
  .custom-date-row { flex-direction: column; align-items: stretch; }
  .custom-date-row input[type="datetime-local"] { min-width: 0; }
  .btn-apply-custom { width: 100%; }
}

.search-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn-search {
  flex: 1;
  padding: 10px 20px;
  background: var(--teal);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 8px;
}
.btn-search:hover { background: var(--teal-dark); }

.btn-clear {
  padding: 10px 14px;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 13px;
  border-radius: 8px;
  white-space: nowrap;
}
.btn-clear:hover { background: var(--gray-200); }

/* ── Filter Chips ─────────────────────────────────────────── */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.chip {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  background: #fff;
  border: 1.5px solid var(--gray-200);
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
}
.chip:hover { border-color: var(--teal); color: var(--teal); }
.chip.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* ── Tabs & Sort ──────────────────────────────────────────── */
.results-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tabs {
  display: flex;
  background: var(--gray-100);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.tab-btn {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-500);
  background: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
}
.tab-btn.active { background: #fff; color: var(--gray-900); box-shadow: var(--shadow-sm); font-weight: 600; }
.tab-btn:hover:not(.active) { color: var(--gray-700); }
.tab-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--teal);
  color: #fff;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.tab-btn:not(.active) .tab-count { background: var(--gray-300); color: var(--gray-700); }

.sort-wrap { margin-left: auto; }
.sort-select {
  width: auto;
  padding: 7px 28px 7px 12px;
  font-size: 13px;
  border-radius: 8px;
  border: 1.5px solid var(--gray-200);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: #fff;
}

/* ── Results Info ─────────────────────────────────────────── */
.results-info {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.results-info strong { color: var(--gray-700); }

/* ── Loading & Empty States ───────────────────────────────── */
.loading-state, .empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--gray-500);
}
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-state p { font-size: 15px; }

/* ── Empty state — SVG magnifier animation ─────────────────── */
.empty-anim-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.magnifier-wrap {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.magnifier-svg {
  width: 80px;
  height: 80px;
  overflow: visible;
}

.empty-text {
  opacity: 0;
  transform: scale(0.75) translateY(10px);
}
.empty-text h3 { font-size: 18px; color: var(--gray-700); margin-bottom: 6px; }
.empty-text p  { font-size: 14px; }

/* Playing state — triggered by JS */
.empty-anim-wrap.playing .magnifier-svg {
  animation:
    magnifierSearch 1.8s ease-in-out,
    magnifierGlide  0.55s 1.8s ease-in-out forwards;
}
.empty-anim-wrap.playing .empty-text {
  animation: emptyTextReveal 0.7s 2.05s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes magnifierSearch {
  0%   { transform: translateX(0)    translateY(0)    rotate(0deg); }
  18%  { transform: translateX(-30px) translateY(-10px) rotate(-9deg); }
  36%  { transform: translateX(26px)  translateY(7px)   rotate(6deg); }
  54%  { transform: translateX(-22px) translateY(-13px) rotate(-6deg); }
  72%  { transform: translateX(20px)  translateY(5px)   rotate(4deg); }
  88%  { transform: translateX(-8px)  translateY(-4px)  rotate(-2deg); }
  100% { transform: translateX(0)    translateY(0)    rotate(0deg); }
}
@keyframes magnifierGlide {
  from { transform: translateX(0) translateY(0)   scale(1);    opacity: 1; }
  to   { transform: translateX(0) translateY(36px) scale(0.62); opacity: 0.55; }
}
@keyframes emptyTextReveal {
  from { opacity: 0; transform: scale(0.75) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Saved-tab variant: no animation, just show immediately */
.empty-anim-wrap.saved .magnifier-svg { animation: none; opacity: 0.35; }
.empty-anim-wrap.saved .empty-text   { animation: none; opacity: 1; transform: none; }

/* ── Job Cards ────────────────────────────────────────────── */
.jobs-list { display: flex; flex-direction: column; gap: 10px; }

.job-card {
  background: #fff;
  border-radius: 12px;
  border: 1.5px solid var(--gray-200);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
}
.job-card:hover {
  border-color: var(--teal);
  box-shadow: 0 8px 28px rgba(29,158,117,0.12), 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}
.job-card.saved {
  border-left: 4px solid var(--teal);
}

/* Company avatar */
.job-avatar {
  width: 44px; height: 44px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}

/* Company logo avatar (via icon.horse with letter-avatar fallback) */
.job-avatar-logo {
  background: #F8F9FA;
  border: 1.5px solid var(--gray-200);
  padding: 5px;
  overflow: hidden;
}
.job-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}

.job-body { flex: 1; min-width: 0; }

.job-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-title-link {
  cursor: pointer;
  transition: color 0.15s;
}
.job-title-link:hover { color: var(--teal); }

.job-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.job-meta {
  font-size: 13px;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
}

.location-flag {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  vertical-align: middle;
  display: inline-block;
}

.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.tag-new { background: var(--amber-light); color: #92400E; }
.tag-remote { background: var(--teal-light); color: #065F46; }
.tag-type { background: var(--gray-100); color: var(--gray-600); }
.tag-exp { background: var(--purple-light); color: #5B21B6; }
.tag-category { background: var(--blue-light); color: #1E40AF; }
.tag-source { background: var(--gray-100); color: var(--gray-500); font-size: 10px; }
.tag-salary { background: #ECFDF5; color: #065F46; }
.tag-salary-na { background: var(--gray-100); color: var(--gray-400); }

/* Job actions */
.job-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.job-action-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.job-time {
  font-size: 11px;
  color: var(--gray-400);
  white-space: nowrap;
}

.btn-save {
  background: none;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 18px;
  line-height: 1;
  color: var(--gray-400);
  transition: all var(--transition);
}
.btn-save:hover, .btn-save.saved {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-light);
}

.btn-apply {
  padding: 7px 14px;
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 7px;
  white-space: nowrap;
}
.btn-apply:hover { background: var(--teal-dark); }

@media (max-width: 500px) {
  .job-card { flex-wrap: wrap; }
  .job-actions { flex-direction: row; width: 100%; justify-content: flex-end; align-items: center; }
  .job-time { margin-right: auto; }
  .job-action-btns { flex-direction: row; }
}

/* ============================================================
   SUBSCRIBE PAGE
   ============================================================ */

.subscribe-body {
  min-height: 100vh;
  background: var(--gray-50);
  padding-bottom: 48px;
}

.subscribe-header {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  padding: 16px 0;
  margin-bottom: 32px;
}
.subscribe-header .container {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-back {
  background: none;
  color: var(--teal);
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-back:hover { color: var(--teal-dark); }
.subscribe-header h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
}

.subscribe-section {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 20px;
}
.subscribe-section h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-100);
}

/* Toggle switch */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.toggle-label { font-size: 14px; font-weight: 600; color: var(--gray-700); }
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--gray-300);
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition);
}
.toggle-track::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: var(--shadow-sm);
}
.toggle input:checked + .toggle-track { background: var(--teal); }
.toggle input:checked + .toggle-track::after { transform: translateX(20px); }

.subscribe-form { display: flex; flex-direction: column; gap: 14px; }
.subscribe-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 500px) {
  .subscribe-form .form-row { grid-template-columns: 1fr; }
}

.subscribe-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  display: block;
  margin-bottom: 4px;
}

.btn-save-prefs {
  padding: 11px 24px;
  background: var(--teal);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  align-self: flex-start;
}
.btn-save-prefs:hover { background: var(--teal-dark); }

.status-msg {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  display: none;
}
.status-msg.show { display: block; }
.status-msg.success { background: var(--teal-light); color: #065F46; }
.status-msg.error { background: var(--red-light); color: #991B1B; }

/* ── Settings page section headers ─────────────────────── */
.settings-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
}
.settings-section-head h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 2px;
  padding-bottom: 0;
  border-bottom: none;
}
.settings-section-desc {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0;
}
.settings-badge {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-badge-blue  { background: #dbeafe; color: #1d4ed8; }
.settings-badge-green { background: #d1fae5; color: #065f46; }
.settings-badge-gray  { background: var(--gray-100); color: var(--gray-600); }

/* ── Profile section ────────────────────────────────────── */
.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-display-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}
.profile-email-label {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 1px;
}
.field-helper {
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 4px;
}

/* ── Account action rows ─────────────────────────────────── */
.account-action-list { display: flex; flex-direction: column; }
.account-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-100);
}
.account-action-row:last-child { border-bottom: none; }
.account-action-info { flex: 1; min-width: 0; }
.account-action-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 2px;
}
.account-action-desc {
  font-size: 13px;
  color: var(--gray-500);
}
.account-action-row-danger .account-action-title { color: var(--red); }

/* Secondary button */
.btn-secondary {
  padding: 8px 16px;
  background: #fff;
  color: var(--gray-700);
  border: 1.5px solid var(--gray-200);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.btn-secondary:hover { background: var(--gray-50); border-color: var(--gray-300); }

/* Danger button */
.btn-danger {
  padding: 8px 16px;
  background: #fff;
  color: var(--red);
  border: 1.5px solid var(--red);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-danger:hover { background: var(--red-light); }

/* ============================================================
   UTILITIES
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }

/* ============================================================
   LANDING PAGE  (lp-* prefix)
   ============================================================ */

.landing-body { background: #fff; }

/* ── Shared wrap ─────────────────────────────────────────── */
.lp-wrap {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 5vw;
}

/* ── Nav ─────────────────────────────────────────────────── */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.lp-nav-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 5vw;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.4px;
  text-decoration: none;
  flex-shrink: 0;
}
.lp-logo:hover { text-decoration: none; }
.lp-logo-icon { font-size: 22px; }
.lp-nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.lp-nav-link {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  border-radius: 8px;
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.lp-nav-link:hover { color: #111827; background: var(--gray-100); text-decoration: none; }
.lp-nav-cta {
  display: inline-block;
  padding: 8px 18px;
  background: var(--teal);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  margin-left: 8px;
  text-decoration: none;
  transition: background var(--transition);
}
.lp-nav-cta:hover { background: var(--teal-dark); text-decoration: none; }
.lp-burger {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--gray-700);
  padding: 8px;
  cursor: pointer;
}
.lp-mobile-nav {
  border-top: 1px solid var(--gray-200);
  padding: 12px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
}
.lp-mobile-nav a {
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-700);
  border-radius: 8px;
  text-decoration: none;
}
.lp-mobile-nav a:hover { background: var(--gray-100); }
.lp-mobile-nav .lp-nav-cta { margin-left: 0; text-align: center; margin-top: 4px; }
@media (max-width: 640px) {
  .lp-nav-right { display: none; }
  .lp-burger { display: flex; margin-left: 0; }
  /* theme toggle stays outside .lp-nav-right so it's always visible; push it right */
  .lp-theme-toggle { margin-left: auto; }
}

/* ── Hero ────────────────────────────────────────────────── */
.lp-hero {
  padding: 80px 0 80px;
  background: linear-gradient(160deg, #f0fdf9 0%, #ffffff 55%, #f8faff 100%);
  border-bottom: 1px solid var(--gray-100);
  overflow: hidden;
  position: relative;
}
.lp-hero-badge {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  background: var(--teal-light);
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 24px;
  border: 1px solid rgba(29,158,117,0.28);
  box-shadow: 0 0 20px rgba(29,158,117,0.15), inset 0 1px 0 rgba(255,255,255,0.6);
  letter-spacing: 0.01em;
}
.lp-hero-h1 {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  color: var(--gray-900);
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 20px;
}
.lp-h1-line { display: block; }
.lp-accent { color: var(--teal); }
.lp-hero-sub {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--gray-500);
  max-width: 600px;
  margin: 0 auto 36px;
  line-height: 1.65;
}
.lp-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}
.lp-btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  background: var(--teal);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}
.lp-btn-primary:hover { background: var(--teal-dark); transform: translateY(-1px); text-decoration: none; }
.lp-btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  background: #fff;
  color: var(--gray-900);
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid var(--gray-200);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
  white-space: nowrap;
}
.lp-btn-outline:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }
.lp-btn-outline-light {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.lp-btn-outline-light:hover { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.7); }
.lp-btn-sm {
  font-size: 14px !important;
  padding: 10px 20px !important;
  margin-top: 16px;
  display: inline-flex;
}
.lp-hero-note { font-size: 14px; color: var(--gray-500); }
.lp-hero-note a { color: var(--teal); }

/* ── Stats strip ─────────────────────────────────────────── */
.lp-stats-strip {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 20px 0;
}
.lp-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.lp-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 32px;
}
.lp-stat-item strong {
  font-size: 24px;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.5px;
  line-height: 1;
}
.lp-stat-item span {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
  margin-top: 3px;
  white-space: nowrap;
}
.lp-stat-sep {
  width: 1px;
  height: 36px;
  background: var(--gray-200);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .lp-stat-sep { display: none; }
  .lp-stats-row { gap: 8px; }
}

/* ── Sections ────────────────────────────────────────────── */
.lp-section { padding: 80px 0; }
.lp-about-section { background: #fff; }
.lp-how-section { background: var(--gray-50); }
.lp-companies-section { background: #fff; }
.lp-section-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-light);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.lp-section-h2 {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  text-align: center;
}
.lp-section-desc {
  font-size: 17px;
  color: var(--gray-500);
  max-width: 680px;
  line-height: 1.7;
  margin: 0 auto 48px;
  text-align: center;
}

/* ── Feature cards ───────────────────────────────────────── */
.lp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .lp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .lp-cards { grid-template-columns: 1fr; } }
.lp-card {
  padding: 28px;
  border-radius: 14px;
  border: 1.5px solid var(--gray-200);
  background: var(--gray-50);
  transition: border-color var(--transition), transform var(--transition);
}
.lp-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.lp-card-cta {
  background: linear-gradient(135deg, #f0fdf9, #e6f9f2);
  border-color: var(--teal-muted);
}
.lp-card-icon { font-size: 32px; margin-bottom: 14px; line-height: 1; }
.lp-card h3 { font-size: 17px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
.lp-card p { font-size: 14px; color: var(--gray-500); line-height: 1.65; }

/* ── How-it-works steps ──────────────────────────────────── */
.lp-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 680px;
}
.lp-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.lp-step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lp-step-body h3 { font-size: 17px; font-weight: 700; color: var(--gray-900); margin-bottom: 6px; }
.lp-step-body p { font-size: 14px; color: var(--gray-500); line-height: 1.65; }

/* ── Company grid ────────────────────────────────────────── */
.lp-company-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lp-company-grid span {
  display: inline-block;
  padding: 7px 16px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  transition: border-color var(--transition), color var(--transition);
}
.lp-company-grid span:hover { border-color: var(--teal); color: var(--teal); }
.lp-company-plus {
  background: var(--teal-light) !important;
  border-color: var(--teal-muted) !important;
  color: var(--teal) !important;
}

/* ── CTA Banner ──────────────────────────────────────────── */
.lp-cta-banner {
  background: linear-gradient(135deg, var(--teal) 0%, #158a62 100%);
  padding: 80px 0;
  text-align: center;
}
.lp-cta-banner h2 {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}
.lp-cta-banner p {
  font-size: 17px;
  color: rgba(255,255,255,.8);
  margin-bottom: 32px;
}
.lp-cta-banner .lp-btn-primary { background: #fff; color: var(--teal); }
.lp-cta-banner .lp-btn-primary:hover { background: var(--teal-light); }

/* ── Footer ──────────────────────────────────────────────── */
.lp-footer {
  background: var(--gray-100);
  padding: 56px 0 0;
  color: var(--gray-500);
  border-top: 1px solid var(--gray-200);
}
.lp-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--gray-200);
}
@media (max-width: 768px) { .lp-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .lp-footer-grid { grid-template-columns: 1fr; } }
.lp-footer-logo {
  font-size: 20px;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 10px;
}
.lp-footer-brand p { font-size: 14px; color: var(--gray-500); margin-bottom: 12px; line-height: 1.5; }
.lp-footer-brand a { font-size: 14px; color: var(--teal); font-weight: 500; }
.lp-footer-brand a:hover { color: var(--teal-dark); text-decoration: none; }
.lp-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 24px;
  border-left: 1px solid var(--gray-200);
}
.lp-footer-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-900);
  margin-bottom: 2px;
}
.lp-footer-col a {
  font-size: 14px;
  color: var(--gray-500);
  text-decoration: none;
  transition: color var(--transition);
}
.lp-footer-col a:hover { color: var(--teal); }
.lp-footer-bar { padding: 16px 0; }
.lp-footer-bar .lp-wrap { font-size: 13px; color: var(--gray-400); }
.lp-footer-bar-inner { display: block; }
.lp-footer-disclaimer { font-size: 11px; color: var(--gray-400); opacity: 0.7; }

/* ── Contact section ─────────────────────────────────────── */
.lp-contact-section {
  background: var(--gray-50);
  padding: 80px 0;
}
.lp-contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 768px) {
  .lp-contact-inner { grid-template-columns: 1fr; gap: 40px; }
}
.lp-contact-desc {
  font-size: 16px;
  color: var(--gray-500);
  line-height: 1.65;
  margin-bottom: 24px;
}
.lp-contact-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--gray-700);
}
.lp-contact-detail a { color: var(--teal); font-weight: 500; }
.lp-contact-detail a:hover { text-decoration: underline; }
.lp-contact-form-wrap {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.10);
  padding: 32px;
  border: 1px solid var(--gray-100);
}
.lp-contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lp-contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-contact-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}
.lp-contact-field textarea { resize: vertical; min-height: 120px; }
.lp-contact-submit {
  width: 100%;
  padding: 12px;
  background: var(--teal);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  transition: background var(--transition);
}
.lp-contact-submit:hover { background: var(--teal-dark); }
.lp-contact-status {
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  display: none;
}
.lp-contact-status.show { display: block; padding: 10px 14px; }
.lp-contact-status.success { background: var(--teal-light); color: #065F46; }
.lp-contact-status.error { background: var(--red-light); color: #991B1B; }

/* ── Jobs page guest header buttons ─────────────────────── */
.header-guest {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-signin-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  padding: 6px 12px;
  border-radius: 7px;
  transition: color var(--transition), background var(--transition);
  text-decoration: none;
}
.header-signin-link:hover { color: var(--gray-900); background: var(--gray-100); text-decoration: none; }

.header-signup-btn {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--teal);
  padding: 7px 16px;
  border-radius: 7px;
  text-decoration: none;
  transition: background var(--transition);
  white-space: nowrap;
}
.header-signup-btn:hover { background: var(--teal-dark); text-decoration: none; }

/* Toast notification */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--gray-900);
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  z-index: 999;
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ============================================================
   LANDING PAGE ENHANCEMENTS
   ============================================================ */

/* Hero 2-column layout */
.lp-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  position: relative;
  z-index: 1;
}
.lp-hero-text { display: flex; flex-direction: column; align-items: flex-start; }
.lp-hero-text .lp-hero-btns { justify-content: flex-start; }
.lp-hero-text .lp-hero-sub  { margin-left: 0; margin-right: 0; }
@media (max-width: 880px) {
  .lp-hero-inner              { grid-template-columns: 1fr; gap: 40px; }
  .lp-hero-text               { align-items: center; text-align: center; }
  .lp-hero-text .lp-hero-btns { justify-content: center; }
  .lp-hero-text .lp-hero-sub  { margin-left: auto; margin-right: auto; }
  .lp-hero-visual             { display: none; }
}

/* Animated background orbs */
.lp-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}
.lp-hero-orb-1 {
  width: 520px; height: 520px;
  background: rgba(29,158,117,0.11);
  top: -160px; right: -120px;
  animation: orb-drift 11s ease-in-out infinite;
}
.lp-hero-orb-2 {
  width: 380px; height: 380px;
  background: rgba(59,130,246,0.07);
  bottom: -100px; left: -80px;
  animation: orb-drift 14s ease-in-out infinite reverse;
}
.lp-hero-orb-3 {
  width: 260px; height: 260px;
  background: rgba(139,92,246,0.06);
  top: 45%; left: 38%;
  animation: orb-drift 9s ease-in-out infinite 2s;
}
@keyframes orb-drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(22px,-32px) scale(1.05); }
  66%       { transform: translate(-16px,18px) scale(0.96); }
}

/* App mockup visual */
.lp-hero-visual { position: relative; }
.lp-app-mock {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.13), 0 4px 16px rgba(0,0,0,0.06);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  animation: mock-float 6s ease-in-out infinite;
  max-width: 420px;
}
@keyframes mock-float {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50%       { transform: translateY(-10px) rotate(-0.6deg); }
}
.lp-mock-bar {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--gray-50);
}
.lp-mock-search {
  flex: 1;
  font-size: 12px;
  color: var(--gray-400);
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 7px;
  padding: 7px 10px;
  pointer-events: none;
  width: auto;
}
.lp-mock-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  background: var(--teal-light);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.lp-mock-cards { display: flex; flex-direction: column; }
.lp-preview-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  background: #fff;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.18s;
  cursor: default;
}
.lp-preview-card:last-child { border-bottom: none; }
.lp-preview-card:hover { background: #f8fffd; }
.lp-preview-logo {
  font-size: 18px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-50);
  border-radius: 9px;
  flex-shrink: 0;
  border: 1px solid var(--gray-200);
}
.lp-preview-info { flex: 1; min-width: 0; }
.lp-preview-title {
  font-size: 13px; font-weight: 700; color: var(--gray-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-preview-company { font-size: 11px; color: var(--gray-500); margin-top: 1px; }
.lp-preview-badge {
  font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 20px;
  flex-shrink: 0; letter-spacing: 0.02em;
}
.lp-badge-new { background: var(--teal-light); color: var(--teal); }
.lp-badge-hot { background: #FEF3C7; color: #D97706; }
.lp-mock-footer {
  padding: 10px 14px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lp-mock-count { font-size: 12px; color: var(--gray-500); font-weight: 500; }
.lp-mock-live {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--teal);
}

/* Scroll-reveal animations */
.lp-animate {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.58s cubic-bezier(.16,1,.3,1), transform 0.58s cubic-bezier(.16,1,.3,1);
}
.lp-animate[data-anim="fade-right"] { transform: translateX(-28px); }
.lp-animate[data-anim="fade-left"]  { transform: translateX(28px); }
.lp-animate.lp-visible { opacity: 1 !important; transform: none !important; }

/* Nav scroll shadow */
.lp-nav { transition: box-shadow 0.3s ease; }
.lp-nav-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

/* CTA button glow pulse */
.lp-btn-glow { animation: btn-glow-pulse 2.8s ease-in-out infinite; }
@keyframes btn-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29,158,117,0.42); }
  50%       { box-shadow: 0 0 0 10px rgba(29,158,117,0); }
}
.btn-arrow { display: inline-block; transition: transform 0.2s ease; margin-left: 2px; }
.lp-btn-primary:hover .btn-arrow { transform: translateX(4px); }

/* Contact form 2-column name + email row */
.lp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 500px) { .lp-form-row { grid-template-columns: 1fr; } }

/* File upload drag-and-drop zone */
.lp-file-drop {
  position: relative;
  border: 2px dashed var(--gray-300);
  border-radius: 10px;
  padding: 22px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--gray-50);
  overflow: hidden;
}
.lp-file-drop:hover { border-color: var(--teal); background: #f0fdf9; }
.lp-file-drag { border-color: var(--teal) !important; background: #e6f9f2 !important; }
.lp-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100% !important;
  height: 100%;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  z-index: 2;
}
.lp-file-placeholder {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; pointer-events: none;
}
.lp-file-icon   { font-size: 26px; margin-bottom: 4px; }
.lp-file-text   { font-size: 14px; color: var(--gray-600); }
.lp-file-browse { color: var(--teal); font-weight: 600; }
.lp-file-hint   { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
.lp-file-selected {
  display: flex; align-items: center; gap: 10px; justify-content: center;
}
.lp-file-name-text {
  font-size: 13px; font-weight: 600; color: var(--gray-700); word-break: break-all;
}
.lp-file-remove {
  background: none; border: none; color: var(--gray-400);
  font-size: 14px; cursor: pointer; padding: 4px 6px;
  border-radius: 4px; flex-shrink: 0; position: relative; z-index: 3;
  transition: color var(--transition), background var(--transition);
}
.lp-file-remove:hover { color: var(--red); background: var(--red-light); }

/* Label optional tag */
.lp-label-optional { font-weight: 400; color: var(--gray-400); font-size: 12px; margin-left: 3px; }

/* Contact left-column feature bullets */
.lp-contact-features { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.lp-contact-feature {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--gray-600); line-height: 1.45;
}
.lp-contact-feature-icon {
  width: 34px; height: 34px; min-width: 34px;
  background: var(--teal-light); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}

/* ============================================================
   AI RESUME TAILOR PANEL
   ============================================================ */

.rt-wrap {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rt-wrap.rt-applied-state {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(29,158,117,0.08);
}

/* Header row */
.rt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.rt-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.rt-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.rt-icon { font-size: 18px; }
.rt-title { font-size: 14px; font-weight: 700; color: var(--gray-800, #1f2937); }
.rt-ai-badge {
  font-size: 10px; font-weight: 800;
  color: var(--teal); background: var(--teal-light);
  padding: 2px 8px; border-radius: 20px; letter-spacing: 0.05em;
}
.rt-subtitle { font-size: 13px; color: var(--gray-500); }
.rt-toggle-btn {
  background: var(--teal); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 7px 16px; border-radius: 8px;
  border: none; cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}
.rt-toggle-btn:hover { background: var(--teal-dark); }

/* Expandable body */
.rt-body {
  border-top: 1px solid var(--gray-100);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Drop zone */
.rt-drop {
  position: relative;
  border: 2px dashed var(--gray-300);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  background: var(--gray-50);
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rt-drop:hover, .rt-drag { border-color: var(--teal); background: #f0fdf9; }
.rt-file-input {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100% !important; height: 100%;
  border: none !important; padding: 0 !important;
  box-shadow: none !important; z-index: 2;
}
.rt-drop-placeholder {
  display: flex; flex-direction: column;
  align-items: center; gap: 5px;
  pointer-events: none;
}
.rt-drop-icon { font-size: 28px; margin-bottom: 2px; }
.rt-drop-text { font-size: 14px; color: var(--gray-600); }
.rt-browse-link { color: var(--teal); font-weight: 600; }
.rt-drop-hint { font-size: 12px; color: var(--gray-400); }

.rt-drop-file {
  display: flex; align-items: center;
  gap: 8px; justify-content: center;
  pointer-events: none;
}
.rt-drop-file > * { pointer-events: auto; }
.rt-remove-file {
  background: none; border: none;
  color: var(--gray-400); font-size: 13px;
  cursor: pointer; padding: 4px 6px;
  border-radius: 4px; position: relative; z-index: 3;
  transition: color var(--transition), background var(--transition);
}
.rt-remove-file:hover { color: var(--red); background: var(--red-light); }

/* Analyzing state */
.rt-analyzing {
  display: flex; align-items: center;
  gap: 10px; padding: 12px;
  font-size: 14px; color: var(--gray-600);
}
.rt-spinner { width: 18px; height: 18px; border-width: 2px; flex-shrink: 0; }

/* Results */
.rt-results {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rt-result-row {
  display: flex; align-items: flex-start; gap: 12px;
}
.rt-result-label {
  font-size: 12px; font-weight: 700;
  color: var(--gray-500); text-transform: uppercase;
  letter-spacing: 0.05em; width: 44px;
  flex-shrink: 0; padding-top: 2px;
}
.rt-result-value { font-size: 14px; font-weight: 600; color: var(--gray-800, #1f2937); }
.rt-tag-exp {
  display: inline-block;
  background: var(--teal-light); color: var(--teal);
  padding: 2px 10px; border-radius: 20px;
  font-size: 13px; font-weight: 700;
}
.rt-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-skill {
  display: inline-block;
  background: #fff; border: 1.5px solid var(--gray-200);
  color: var(--gray-700); font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  transition: border-color var(--transition), color var(--transition);
}
.rt-result-actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 4px; flex-wrap: wrap;
}
.rt-apply-btn {
  background: var(--teal); color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 8px 18px; border-radius: 8px; border: none;
  cursor: pointer; transition: background 0.15s;
}
.rt-apply-btn:hover { background: var(--teal-dark); }
.rt-upload-again {
  background: none; border: none;
  color: var(--gray-500); font-size: 13px;
  cursor: pointer; padding: 6px 8px; border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
.rt-upload-again:hover { color: var(--gray-800, #1f2937); background: var(--gray-100); }

/* Error */
.rt-error {
  font-size: 13px; color: #991B1B;
  background: var(--red-light); border-radius: 8px;
  padding: 10px 14px;
}

/* Applied bar */
.rt-applied {
  display: flex; align-items: center;
  gap: 10px; padding: 10px 16px;
  background: linear-gradient(90deg, #f0fdf9 0%, #fff 100%);
  border-top: 1px solid var(--teal-muted);
  font-size: 13px; font-weight: 500; color: var(--gray-700);
  flex-wrap: wrap;
}
.rt-applied-icon { font-size: 15px; }
.rt-applied > #rt-applied-text { flex: 1; }
.rt-clear-btn {
  background: none; border: 1.5px solid var(--gray-300);
  color: var(--gray-600); font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 7px; cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.rt-clear-btn:hover { border-color: var(--red); color: var(--red); }

/* ============================================================
   ENHANCED ANIMATIONS & VISUAL POLISH
   ============================================================ */

/* ── Skeleton loading ─────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.sk {
  background: linear-gradient(90deg,#f0f2f5 25%,#e4e6ea 50%,#f0f2f5 75%);
  background-size: 1200px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}
.job-card-sk {
  background: #fff;
  border-radius: 12px;
  border: 1.5px solid var(--gray-100);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  pointer-events: none;
}
.sk-avatar { width:44px; height:44px; border-radius:10px; flex-shrink:0; }
.sk-body   { flex:1; display:flex; flex-direction:column; gap:9px; padding-top:2px; }
.sk-title  { height:17px; width:58%; }
.sk-meta   { height:13px; width:38%; }
.sk-tags   { height:20px; width:72%; border-radius:12px; }
.sk-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.sk-time   { height:11px; width:44px; border-radius:4px; }
.sk-btn    { height:32px; width:34px; border-radius:8px; }
.sk-apply  { height:32px; width:68px; border-radius:8px; }

/* ── Job card entrance stagger ────────────────────────────── */
@keyframes cardIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
.job-card { animation: cardIn 0.32s cubic-bezier(.16,1,.3,1) both; }

/* Better job card hover */
.job-card {
  border-left: 3px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.job-card:hover {
  border-left-color: var(--teal);
  box-shadow: 0 6px 28px rgba(29,158,117,.13);
  transform: translateX(3px);
}

/* ── Chip pulse on select ─────────────────────────────────── */
@keyframes chipPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.chip.active { animation: chipPop 0.22s ease; }

/* ── Search bar glow ──────────────────────────────────────── */
.search-card {
  transition: box-shadow 0.3s;
}
.search-card:focus-within {
  box-shadow: 0 0 0 3px rgba(29,158,117,.10), 0 4px 24px rgba(29,158,117,.08);
}

/* ── Login page animated background ──────────────────────── */
@keyframes authBg {
  0%,100% { background-position: 0 50%; }
  50%      { background-position: 100% 50%; }
}
.auth-body, .auth-main {
  background: linear-gradient(-45deg,#f0fdf9,#ecfdf5,#f0f9ff,#f5f3ff);
  background-size: 400% 400%;
  animation: authBg 14s ease infinite;
}

/* Auth card entrance + glass */
@keyframes authCardIn {
  from { opacity:0; transform:translateY(22px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.auth-card {
  animation: authCardIn 0.55s cubic-bezier(.16,1,.3,1) both;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 40px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.05);
}

/* ── Page transitions ─────────────────────────────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pageOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
body { animation: pageIn 0.38s cubic-bezier(.16,1,.3,1) both; }
body.page-leaving {
  animation: pageOut 0.26s cubic-bezier(.4,0,.6,1) forwards;
  pointer-events: none;
}

/* ── App mock browser chrome ──────────────────────────────── */
.lp-mock-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #F9FAFB;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.lp-mock-dots { display: flex; gap: 5px; flex-shrink: 0; }
.lp-mock-dots span {
  display: block;
  width: 11px; height: 11px; border-radius: 50%;
}
.lp-dot-r { background: #FF5F57; }
.lp-dot-y { background: #FEBC2E; }
.lp-dot-g { background: #28C840; }
.lp-mock-url {
  flex: 1;
  font-size: 10px;
  color: #9CA3AF;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 3px 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── App mock search bar icon ─────────────────────────────── */
.lp-mock-search {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

/* ── Company avatar (replaces emoji) ─────────────────────── */
.lp-preview-av {
  width: 36px; height: 36px;
  border-radius: 9px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}
.lp-preview-meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--gray-500); margin-top: 2px;
}
.lp-preview-dot { color: var(--gray-300); }
.lp-preview-company { font-weight: 600; color: var(--gray-600); }
.lp-preview-loc { color: var(--gray-400); }

/* ── Logo sizes ───────────────────────────────────────────── */
.lp-logo-img      { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.header-brand-logo{ width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; }
.auth-logo-img    { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 12px; }

/* ── Landing: nav glassmorphism on scroll ─────────────────── */
.lp-nav {
  transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
.lp-nav.lp-nav-scrolled {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 24px rgba(0,0,0,.08);
}
[data-theme="dark"] .lp-nav.lp-nav-scrolled {
  background: rgba(15,23,42,.95);
  box-shadow: 0 2px 24px rgba(0,0,0,.4);
}

/* ── Landing: hero gradient text cycle ───────────────────── */
@keyframes wordIn {
  from { opacity:0; transform:translateY(16px) rotateX(-30deg); }
  to   { opacity:1; transform:translateY(0)    rotateX(0); }
}
@keyframes wordOut {
  from { opacity:1; transform:translateY(0)     rotateX(0); }
  to   { opacity:0; transform:translateY(-16px) rotateX(30deg); }
}
.lp-cycle-wrap {
  display: inline-block;
  perspective: 300px;
}
.lp-cycle-word {
  display: inline-block;
  color: var(--teal);
  background: linear-gradient(135deg,#1D9E75,#34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: wordIn 0.45s cubic-bezier(.16,1,.3,1) both;
}
.lp-cycle-word.out {
  animation: wordOut 0.35s cubic-bezier(.4,0,1,1) both;
}

/* ── Landing: feature card glow hover ────────────────────── */
.lp-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.lp-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,rgba(29,158,117,.06),rgba(52,211,153,.03));
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.lp-card:hover {
  border-color: var(--teal);
  box-shadow: 0 16px 48px rgba(29,158,117,.14);
  transform: translateY(-5px);
}
.lp-card:hover::after { opacity: 1; }

/* ── Landing: steps connector pulse ──────────────────────── */
@keyframes stepGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(29,158,117,.35); }
  50%      { box-shadow: 0 0 0 8px rgba(29,158,117,0); }
}
.lp-step-circle { animation: stepGlow 2.6s ease-in-out infinite; }
.lp-step:nth-child(2) .lp-step-circle { animation-delay: .87s; }
.lp-step:nth-child(3) .lp-step-circle { animation-delay: 1.74s; }

/* ── Landing: hero app mock glassmorphism ─────────────────── */
.lp-app-mock {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06) !important;
}

/* ── Preview card hover lift ──────────────────────────────── */
.lp-preview-card {
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.lp-preview-card:hover {
  background: #f0fdf9 !important;
  transform: translateX(4px);
  box-shadow: -3px 0 0 var(--teal);
}

/* ── Toast polish ─────────────────────────────────────────── */
@keyframes toastIn {
  from { opacity:0; transform:translateX(-50%) translateY(12px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
.toast.show { animation: toastIn 0.3s cubic-bezier(.16,1,.3,1) both; }

/* ── Job Detail Drawer ────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.drawer-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.job-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(480px, 100vw);
  background: #fff;
  z-index: 901;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,0.14);
  transform: translateX(100%);
  visibility: hidden;
  /* visibility delays to 'hidden' AFTER the slide-out finishes (0.3s), becomes visible instantly on open */
  transition: transform 0.3s cubic-bezier(.16,1,.3,1), visibility 0s 0.3s;
  will-change: transform;
}
.job-drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s cubic-bezier(.16,1,.3,1), visibility 0s 0s;
}
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
  gap: 10px;
}
.drawer-close {
  background: var(--gray-100);
  color: var(--gray-600);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.drawer-close:hover { background: var(--gray-200); color: var(--gray-900); }
.drawer-header-apply {
  background: var(--teal);
  color: #fff;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s;
}
.drawer-header-apply:hover { background: var(--teal-dark); text-decoration: none; transform: translateY(-1px); }

.drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.drawer-footer {
  flex-shrink: 0;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--gray-100);
  background: #fff;
}

/* Drawer company header */
.drawer-company-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.drawer-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
/* Drawer logo avatar */
.drawer-avatar-logo {
  background: #F8F9FA;
  border: 1.5px solid var(--gray-200);
  padding: 5px;
  overflow: hidden;
}
.drawer-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.drawer-company-info { flex: 1; min-width: 0; }
.drawer-company-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-source-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
  background: var(--teal-light);
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 3px;
}

/* Drawer title */
.drawer-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.3;
  letter-spacing: -0.3px;
}

/* Drawer meta row */
.drawer-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-500);
  font-size: 14px;
  flex-wrap: wrap;
}
.drawer-meta-dot { color: var(--gray-300); }

/* Drawer tags */
.drawer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Drawer info grid */
.drawer-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.drawer-info-item {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 12px 14px;
}
.drawer-info-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400);
  margin-bottom: 4px;
}
.drawer-info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}
.drawer-info-value.salary { color: var(--teal); }

/* Drawer divider */
.drawer-divider {
  height: 1px;
  background: var(--gray-100);
}

/* Drawer posted */
.drawer-posted {
  font-size: 13px;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Drawer action buttons */
.drawer-actions {
  display: flex;
  gap: 10px;
}
.drawer-btn-apply {
  flex: 1;
  background: var(--teal);
  color: #fff;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.drawer-btn-apply:hover { background: var(--teal-dark); text-decoration: none; transform: translateY(-1px); }
.drawer-btn-save {
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 13px 18px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 400;
  transition: background 0.15s, color 0.15s;
  border: 1.5px solid var(--gray-200);
}
.drawer-btn-save:hover { background: var(--red-light); color: var(--red); border-color: var(--red); }
.drawer-btn-save.saved { background: var(--red-light); color: var(--red); border-color: var(--red); }

/* ── Drawer insight panel (match / checklist) ────────────── */
.drawer-insight {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.di-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 6px;
}
.di-icon { font-size: 15px; }

/* Score bar */
.di-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.di-score-label { font-size: 12px; color: var(--gray-500); font-weight: 600; }
.di-score-pct {
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.di-score-pct.good { background: #d1fae5; color: #065f46; }
.di-score-pct.ok   { background: #fef3c7; color: #92400e; }
.di-score-pct.low  { background: #fee2e2; color: #991b1b; }
.di-bar {
  height: 6px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}
.di-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.5s ease;
}
.di-bar-fill.good { background: var(--teal); }
.di-bar-fill.ok   { background: #f59e0b; }
.di-bar-fill.low  { background: #ef4444; }

/* Skill chips */
.di-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.di-skill {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.di-skill.matched { background: #d1fae5; color: #065f46; }
.di-skill.miss    { background: var(--gray-100); color: var(--gray-400); text-decoration: line-through; }

/* Exp / location match rows */
.di-rows { display: flex; flex-direction: column; gap: 6px; }
.di-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.4;
}
.di-dot {
  font-size: 12px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.di-dot.yes { background: #d1fae5; color: #065f46; }
.di-dot.no  { background: #fee2e2; color: #991b1b; }
.di-empty { font-size: 13px; color: var(--gray-400); font-style: italic; margin: 0; }

/* Checklist */
.di-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.di-checklist li {
  font-size: 13px;
  color: var(--gray-700);
  padding-left: 22px;
  position: relative;
  line-height: 1.45;
}
.di-checklist li::before {
  content: '☐';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-size: 14px;
  line-height: 1.2;
}
.di-tip {
  font-size: 12px;
  color: var(--gray-400);
  padding: 8px 12px;
  background: var(--gray-50);
  border-radius: 8px;
  border: 1px solid var(--gray-100);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .job-drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 90dvh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
    transform: translateY(100%);
  }
  .job-drawer.open { transform: translateY(0); }
  .drawer-info-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.pg-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-btn:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); background: var(--teal-light); }
.pg-btn.active { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 700; }
.pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pg-ellipsis {
  min-width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); font-size: 14px; user-select: none;
}

/* ============================================================
   SETTINGS SIDEBAR LAYOUT
   ============================================================ */

.settings-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 960px;
  margin: 0 auto;
}

.settings-nav {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 80px;
}

.settings-nav-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  padding: 4px 10px 10px;
}

.settings-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-600);
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.settings-nav-btn:hover { background: var(--gray-100); color: var(--gray-900); }
.settings-nav-btn.active { background: var(--teal-light); color: var(--teal); }

.settings-nav-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gray-100);
}
.settings-nav-btn.active .settings-nav-icon { background: rgba(29,158,117,.15); }

.settings-content { flex: 1; min-width: 0; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }

@media (max-width: 700px) {
  .settings-layout { flex-direction: column; gap: 16px; }
  .settings-nav { width: 100%; flex-direction: row; position: static; overflow-x: auto; padding: 8px; gap: 4px; }
  .settings-nav-label { display: none; }
  .settings-nav-btn { flex-direction: column; gap: 3px; padding: 8px 12px; font-size: 12px; min-width: 80px; text-align: center; justify-content: center; }
  .settings-nav-icon { width: 24px; height: 24px; font-size: 13px; }
}

/* ============================================================
   DARK MODE
   ============================================================ */

[data-theme="dark"] {
  --gray-50:  #0f172a;
  --gray-100: #1e293b;
  --gray-200: #334155;
  --gray-300: #475569;
  --gray-400: #94a3b8;
  --gray-500: #cbd5e1;
  --gray-600: #e2e8f0;
  --gray-700: #f1f5f9;
  --gray-800: #e2e8f0;
  --gray-900: #f8fafc;
  --teal-light: #0d3d2b;
  --amber-light: #3d2a00;
  --purple-light: #2a1a4d;
  --blue-light: #1a2e4d;
  --red-light: #3d1515;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 1px 4px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
}

[data-theme="dark"] body { background: #0f172a; color: #f8fafc; }
[data-theme="dark"] a { color: #34d399; }
[data-theme="dark"] a:hover { color: #6ee7b7; }

/* Header */
[data-theme="dark"] .app-header { background: rgba(15,23,42,0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom-color: rgba(255,255,255,0.07); box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 4px 20px rgba(0,0,0,0.2); }
[data-theme="dark"] .header-brand { color: #f8fafc; }
[data-theme="dark"] .header-countdown { color: #94a3b8; }
[data-theme="dark"] .header-live { background: #0d3d2b; }
[data-theme="dark"] .header-user { color: #cbd5e1; }
[data-theme="dark"] .header-email { color: #cbd5e1; }

/* Buttons */
[data-theme="dark"] .btn-icon { color: #94a3b8; }
[data-theme="dark"] .btn-icon:hover { background: #334155; color: #f8fafc; }
[data-theme="dark"] .btn-logout { background: #334155; color: #e2e8f0; }
[data-theme="dark"] .btn-logout:hover { background: #475569; }
[data-theme="dark"] .btn-apply { color: #fff; }
[data-theme="dark"] .btn-apply:hover { color: #fff; }
[data-theme="dark"] .drawer-btn-apply { color: #fff; }
[data-theme="dark"] .drawer-btn-apply:hover { color: #fff; }
[data-theme="dark"] .btn-back { color: #34d399; }
[data-theme="dark"] .btn-back:hover { color: #6ee7b7; }
[data-theme="dark"] .btn-clear { background: #334155; color: #cbd5e1; }
[data-theme="dark"] .btn-clear:hover { background: #475569; }
[data-theme="dark"] .btn-secondary { background: #334155; color: #e2e8f0; border-color: #475569; }
[data-theme="dark"] .btn-secondary:hover { background: #475569; border-color: #64748b; }
[data-theme="dark"] .btn-danger { background: #3d1515; color: #fca5a5; border-color: #ef4444; }
[data-theme="dark"] .btn-danger:hover { background: #4d1c1c; }
[data-theme="dark"] .btn-google { background: #334155; color: #e2e8f0; border-color: #475569; }
[data-theme="dark"] .btn-google:hover { background: #475569; border-color: #64748b; }
[data-theme="dark"] .btn-eye { color: #64748b; }
[data-theme="dark"] .btn-eye:hover { color: #94a3b8; }
[data-theme="dark"] .btn-save { border-color: #334155; color: #64748b; }
[data-theme="dark"] .btn-save:hover, [data-theme="dark"] .btn-save.saved { border-color: #1D9E75; color: #1D9E75; background: #0d3d2b; }

/* Search card & inputs */
[data-theme="dark"] .search-card { background: #1e293b; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: #0f172a; border-color: #334155; color: #f8fafc;
}
[data-theme="dark"] input::placeholder { color: #64748b; }
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus {
  border-color: #1D9E75; box-shadow: 0 0 0 3px rgba(29,158,117,.15);
}
[data-theme="dark"] .sort-select { background-color: #1e293b; }
[data-theme="dark"] .custom-date-label { color: #94a3b8; }
[data-theme="dark"] .custom-date-row input[type="datetime-local"] { background: #0f172a; border-color: #334155; color: #f8fafc; }

/* Chips */
[data-theme="dark"] .chip { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .chip:hover { border-color: #1D9E75; color: #34d399; }
[data-theme="dark"] .chip.active { background: var(--teal); color: #fff; border-color: var(--teal); }

/* Tabs */
[data-theme="dark"] .tabs { background: #0f172a; }
[data-theme="dark"] .tab-btn { color: #94a3b8; }
[data-theme="dark"] .tab-btn.active { background: #1e293b; color: #f8fafc; }
[data-theme="dark"] .tab-btn:hover:not(.active) { color: #cbd5e1; }
[data-theme="dark"] .tab-btn:not(.active) .tab-count { background: #475569; color: #cbd5e1; }

/* Results */
[data-theme="dark"] .results-info { color: #94a3b8; }
[data-theme="dark"] .results-info strong { color: #cbd5e1; }

/* Job cards */
[data-theme="dark"] .job-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .job-card:hover { border-color: #1D9E75; }
[data-theme="dark"] .job-avatar-logo { border-color: #475569; }
[data-theme="dark"] .drawer-avatar-logo { border-color: #475569; }
[data-theme="dark"] .job-title { color: #f8fafc; }
[data-theme="dark"] .job-title-link:hover { color: #34d399; }
[data-theme="dark"] .job-meta { color: #94a3b8; }
[data-theme="dark"] .job-time { color: #64748b; }

/* Tags */
[data-theme="dark"] .tag-new { background: #3d2a00; color: #fcd34d; }
[data-theme="dark"] .tag-remote { background: #0d3d2b; color: #6ee7b7; }
[data-theme="dark"] .tag-type { background: #334155; color: #cbd5e1; }
[data-theme="dark"] .tag-exp { background: #2a1a4d; color: #c4b5fd; }
[data-theme="dark"] .tag-category { background: #1a2e4d; color: #93c5fd; }
[data-theme="dark"] .tag-source { background: #334155; color: #94a3b8; }
[data-theme="dark"] .tag-salary { background: #0d3d2b; color: #6ee7b7; }
[data-theme="dark"] .tag-salary-na { background: #334155; color: #64748b; }

/* Pagination */
[data-theme="dark"] .pg-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .pg-btn:hover:not(:disabled) { border-color: #1D9E75; color: #34d399; background: #0d3d2b; }
[data-theme="dark"] .pg-btn.active { background: #1D9E75; border-color: #1D9E75; color: #fff; }
[data-theme="dark"] .pg-ellipsis { color: #64748b; }

/* Loading / empty */
[data-theme="dark"] .empty-state { color: #94a3b8; }
[data-theme="dark"] .empty-text h3 { color: #cbd5e1; }
[data-theme="dark"] .empty-text p  { color: #94a3b8; }
[data-theme="dark"] .magnifier-svg circle[fill="rgba(29,158,117,.07)"] { fill: rgba(29,158,117,.12); }
[data-theme="dark"] .spinner { border-color: #334155; border-top-color: #1D9E75; }

/* Toast */
[data-theme="dark"] .toast { background: #334155; color: #f8fafc; }

/* Drawer */
[data-theme="dark"] .drawer-overlay { background: rgba(0,0,0,.6); }
[data-theme="dark"] .job-drawer { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .drawer-header { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .drawer-footer { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .drawer-close { color: #94a3b8; }
[data-theme="dark"] .drawer-close:hover { background: #334155; color: #f8fafc; }
[data-theme="dark"] .di-label { color: #94a3b8; }
[data-theme="dark"] .di-value { color: #e2e8f0; }
[data-theme="dark"] .di-tip { background: #0f172a; border-color: #334155; color: #94a3b8; }

/* Resume tailor */
[data-theme="dark"] .rt-wrap { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .rt-drop { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .rt-title { color: #f8fafc; }
[data-theme="dark"] .rt-subtitle { color: #94a3b8; }
[data-theme="dark"] .rt-drop-text { color: #94a3b8; }
[data-theme="dark"] .rt-drop-hint { color: #64748b; }
[data-theme="dark"] .rt-result-label { color: #94a3b8; }
[data-theme="dark"] .rt-result-value { color: #e2e8f0; }

/* Settings / subscribe page */
[data-theme="dark"] .subscribe-body { background: #0f172a; }
[data-theme="dark"] .subscribe-header { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .subscribe-header h1 { color: #f8fafc; }
[data-theme="dark"] .subscribe-section { background: #1e293b; }
[data-theme="dark"] .subscribe-section h2 { color: #f8fafc; border-color: #334155; }
[data-theme="dark"] .subscribe-form label { color: #cbd5e1; }
[data-theme="dark"] .toggle-label { color: #cbd5e1; }
[data-theme="dark"] .field-group label { color: #cbd5e1; }
[data-theme="dark"] .field-helper { color: #64748b; }
[data-theme="dark"] .status-msg.success { background: #0d3d2b; color: #6ee7b7; }
[data-theme="dark"] .status-msg.error { background: #3d1515; color: #fca5a5; }

/* Settings section headers */
[data-theme="dark"] .settings-section-head { border-color: #334155; }
[data-theme="dark"] .settings-section-head h2 { color: #f8fafc; }
[data-theme="dark"] .settings-section-desc { color: #94a3b8; }
[data-theme="dark"] .settings-badge-blue { background: #1a2e4d; color: #93c5fd; }
[data-theme="dark"] .settings-badge-green { background: #0d3d2b; color: #6ee7b7; }
[data-theme="dark"] .settings-badge-gray { background: #334155; color: #94a3b8; }

/* Profile section */
[data-theme="dark"] .profile-display-name { color: #f8fafc; }
[data-theme="dark"] .profile-email-label { color: #94a3b8; }

/* Account action rows */
[data-theme="dark"] .account-action-row { border-color: #334155; }
[data-theme="dark"] .account-action-title { color: #e2e8f0; }
[data-theme="dark"] .account-action-desc { color: #94a3b8; }
[data-theme="dark"] .account-action-row-danger .account-action-title { color: #fca5a5; }

/* Auth page */
[data-theme="dark"] .auth-body { background: linear-gradient(135deg, #0d2a1f 0%, #0f172a 100%); }
[data-theme="dark"] .auth-main { background: linear-gradient(135deg, #0d2a1f 0%, #0f172a 100%); }
[data-theme="dark"] .auth-card { background: #1e293b; }
[data-theme="dark"] .auth-logo-name { color: #f8fafc; }
[data-theme="dark"] .auth-logo-tagline { color: #94a3b8; }
[data-theme="dark"] .auth-tabs { border-color: #334155; }
[data-theme="dark"] .auth-tab { color: #64748b; }
[data-theme="dark"] .auth-tab.active { color: #1D9E75; border-bottom-color: #1D9E75; }
[data-theme="dark"] .auth-divider { color: #475569; }
[data-theme="dark"] .auth-divider::before, [data-theme="dark"] .auth-divider::after { background: #334155; }
[data-theme="dark"] .auth-terms { color: #64748b; }
[data-theme="dark"] .auth-message.success { background: #0d3d2b; color: #6ee7b7; }
[data-theme="dark"] .auth-message.error { background: #3d1515; color: #fca5a5; }

/* Settings sidebar nav */
[data-theme="dark"] .settings-nav { background: #1e293b; }
[data-theme="dark"] .settings-nav-label { color: #64748b; }
[data-theme="dark"] .settings-nav-btn { color: #94a3b8; }
[data-theme="dark"] .settings-nav-btn:hover { background: #334155; color: #f8fafc; }
[data-theme="dark"] .settings-nav-btn.active { background: #0d3d2b; color: #34d399; }
[data-theme="dark"] .settings-nav-icon { background: #334155; }
[data-theme="dark"] .settings-nav-btn.active .settings-nav-icon { background: rgba(52,211,153,.15); }

/* Dark mode toggle icons — applies to both .btn-theme (app pages) and .lp-theme-toggle (landing) */
.btn-theme .icon-sun,
.lp-theme-toggle .icon-sun  { display: none; }
.btn-theme .icon-moon,
.lp-theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .btn-theme .icon-sun,
[data-theme="dark"] .lp-theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .btn-theme .icon-moon,
[data-theme="dark"] .lp-theme-toggle .icon-moon { display: none; }

/* Landing page theme toggle button */
.lp-theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  border-radius: 8px;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.lp-theme-toggle:hover { background: var(--gray-100); color: var(--gray-900); }
[data-theme="dark"] .lp-theme-toggle { color: #94a3b8; }
[data-theme="dark"] .lp-theme-toggle:hover { background: #334155; color: #f8fafc; }

/* ============================================================
   LANDING PAGE — DARK MODE
   ============================================================ */

[data-theme="dark"] .landing-body { background: #0f172a; }

/* Nav */
[data-theme="dark"] .lp-nav { background: rgba(15,23,42,0.82); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom-color: rgba(255,255,255,0.07); box-shadow: 0 1px 0 rgba(0,0,0,0.3); }
[data-theme="dark"] .lp-nav-scrolled { background: rgba(15,23,42,.99); }
[data-theme="dark"] .lp-logo { color: #f8fafc; }
[data-theme="dark"] .lp-nav-link { color: #e2e8f0; }
[data-theme="dark"] .lp-nav-link:hover { color: #fff; background: #1e293b; }
[data-theme="dark"] .lp-mobile-nav { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .lp-mobile-nav a { color: #cbd5e1; }
[data-theme="dark"] .lp-mobile-nav a:hover { background: #334155; }

/* Hero */
[data-theme="dark"] .lp-hero { background: linear-gradient(160deg, #0d2a1f 0%, #0f172a 55%, #111827 100%); }
[data-theme="dark"] .lp-hero-h1 { color: #f8fafc; }
[data-theme="dark"] .lp-hero-sub { color: #94a3b8; }
[data-theme="dark"] .lp-hero-note { color: #64748b; }
[data-theme="dark"] .lp-btn-primary { color: #fff; }
[data-theme="dark"] .lp-btn-primary:hover { color: #fff; }
[data-theme="dark"] .lp-btn-outline { background: #1e293b; color: #e2e8f0; border-color: #475569; }
[data-theme="dark"] .lp-btn-outline:hover { border-color: #1D9E75; color: #34d399; }

/* Mock app preview */
[data-theme="dark"] .lp-app-mock { background: #1e293b; border-color: #334155; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
[data-theme="dark"] .lp-mock-chrome { background: #334155; border-color: #475569; }
[data-theme="dark"] .lp-mock-url { color: #94a3b8; background: #1e293b; border-color: #475569; }
[data-theme="dark"] .lp-mock-bar { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .lp-mock-search { color: #64748b; background: #1e293b; border-color: #334155; }
[data-theme="dark"] .lp-mock-tag { background: #0d3d2b; color: #6ee7b7; }
[data-theme="dark"] .lp-mock-footer { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .lp-mock-count { color: #94a3b8; }
[data-theme="dark"] .lp-preview-card { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .lp-preview-card:hover { background: #1e293b !important; }
[data-theme="dark"] .lp-preview-title { color: #f8fafc; }
[data-theme="dark"] .lp-preview-company { color: #94a3b8; }
[data-theme="dark"] .lp-preview-loc { color: #64748b; }
[data-theme="dark"] .lp-preview-dot { color: #475569; }

/* Stats strip */
[data-theme="dark"] .lp-stats-strip { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .lp-stat-item strong { color: #f8fafc; }
[data-theme="dark"] .lp-stat-item span { color: #94a3b8; }
[data-theme="dark"] .lp-stat-sep { background: #334155; }

/* About & how-it-works sections */
[data-theme="dark"] .lp-about-section { background: #0f172a; }
[data-theme="dark"] .lp-how-section { background: #111827; }
[data-theme="dark"] .lp-companies-section { background: #0f172a; }
[data-theme="dark"] .lp-section-h2 { color: #f8fafc; }
[data-theme="dark"] .lp-section-desc { color: #94a3b8; }

/* Feature cards */
[data-theme="dark"] .lp-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .lp-card:hover { border-color: #1D9E75; }
[data-theme="dark"] .lp-card h3 { color: #f8fafc; }
[data-theme="dark"] .lp-card p { color: #94a3b8; }
[data-theme="dark"] .lp-card-cta { background: #0d3d2b; border-color: #1D9E75; }

/* How-it-works steps */
[data-theme="dark"] .lp-step-body h3 { color: #f8fafc; }
[data-theme="dark"] .lp-step-body p { color: #94a3b8; }

/* Company grid */
[data-theme="dark"] .lp-company-grid span { background: #1e293b; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .lp-company-grid span:hover { border-color: #1D9E75; color: #34d399; }
[data-theme="dark"] .lp-company-plus { color: #64748b; }

/* CTA banner */
[data-theme="dark"] .lp-cta-banner { background: linear-gradient(135deg, #0d3d2b, #0f172a); }
[data-theme="dark"] .lp-cta-banner h2 { color: #f8fafc; }
[data-theme="dark"] .lp-cta-banner p { color: #94a3b8; }
[data-theme="dark"] .lp-cta-banner .lp-btn-primary { background: var(--teal); color: #fff; }
[data-theme="dark"] .lp-cta-banner .lp-btn-primary:hover { background: var(--teal-dark); color: #fff; }

/* Footer */
[data-theme="dark"] .lp-footer { background: #111827; color: #9ca3af; border-top-color: #1e293b; }
[data-theme="dark"] .lp-footer-logo { color: #fff; }
[data-theme="dark"] .lp-footer-heading { color: #fff; }
[data-theme="dark"] .lp-footer-grid { border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .lp-footer-col { border-left-color: rgba(255,255,255,.1); }
[data-theme="dark"] .lp-footer-col a { color: #9ca3af; }
[data-theme="dark"] .lp-footer-col a:hover { color: #fff; }
[data-theme="dark"] .lp-footer-brand a { color: #34d399; }
[data-theme="dark"] .lp-footer-brand a:hover { color: #6ee7b7; }
[data-theme="dark"] .lp-footer-bar .lp-wrap { color: #6b7280; }

/* Contact section */
[data-theme="dark"] .lp-contact-section { background: #0f172a; }
[data-theme="dark"] .lp-contact-desc { color: #94a3b8; }
[data-theme="dark"] .lp-contact-feature { color: #94a3b8; }
[data-theme="dark"] .lp-contact-form-wrap { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .lp-contact-field label { color: #cbd5e1; }
[data-theme="dark"] .lp-file-drop { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .lp-file-drop:hover { border-color: #475569; }
[data-theme="dark"] .lp-file-text { color: #94a3b8; }
[data-theme="dark"] .lp-file-hint { color: #64748b; }
[data-theme="dark"] .lp-file-name-text { color: #cbd5e1; }
[data-theme="dark"] .lp-contact-status.success { background: #0d3d2b; color: #6ee7b7; }
[data-theme="dark"] .lp-contact-status.error { background: #3d1515; color: #fca5a5; }
[data-theme="dark"] .lp-burger { color: #94a3b8; }

/* ============================================================
   VISUAL REFRESH — GLASS, ANIMATIONS, GRADIENT, SHIMMER
   ============================================================ */

/* ── CTA button shimmer sweep ────────────────────────────── */
@keyframes btn-shimmer {
  0%   { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(220%) skewX(-12deg); }
}
.lp-btn-primary {
  position: relative;
  overflow: hidden;
}
.lp-btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: btn-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}
.lp-btn-primary.lp-btn-glow {
  box-shadow: 0 4px 20px rgba(29,158,117,0.35);
}
.lp-btn-primary.lp-btn-glow:hover {
  box-shadow: 0 8px 32px rgba(29,158,117,0.5), 0 2px 8px rgba(29,158,117,0.2);
}

/* ── Hero dot grid overlay ───────────────────────────────── */
.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .lp-hero::before {
  background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
}

/* ── Hero orbs — enhanced vibrancy ──────────────────────── */
.lp-hero-orb-1 {
  background: radial-gradient(circle at 40% 40%, rgba(29,158,117,0.28), rgba(29,158,117,0.04) 70%);
  width: 620px; height: 620px;
}
.lp-hero-orb-2 {
  background: radial-gradient(circle at 60% 60%, rgba(59,130,246,0.18), rgba(59,130,246,0.03) 70%);
  width: 440px; height: 440px;
}
.lp-hero-orb-3 {
  background: radial-gradient(circle at 50% 50%, rgba(139,92,246,0.16), rgba(139,92,246,0.02) 70%);
  width: 300px; height: 300px;
}
[data-theme="dark"] .lp-hero-orb-1 {
  background: radial-gradient(circle at 40% 40%, rgba(29,158,117,0.35), rgba(29,158,117,0.05) 70%);
}
[data-theme="dark"] .lp-hero-orb-2 {
  background: radial-gradient(circle at 60% 60%, rgba(59,130,246,0.22), rgba(59,130,246,0.04) 70%);
}
[data-theme="dark"] .lp-hero-orb-3 {
  background: radial-gradient(circle at 50% 50%, rgba(139,92,246,0.20), rgba(139,92,246,0.03) 70%);
}

/* ── Section eyebrow pill — glossy ──────────────────────── */
.lp-section-eyebrow {
  background: linear-gradient(135deg, rgba(29,158,117,0.12), rgba(52,211,153,0.08));
  border: 1px solid rgba(29,158,117,0.22);
  box-shadow: 0 0 16px rgba(29,158,117,0.1), inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="dark"] .lp-section-eyebrow {
  background: linear-gradient(135deg, rgba(29,158,117,0.18), rgba(52,211,153,0.1));
  border-color: rgba(52,211,153,0.2);
  box-shadow: 0 0 16px rgba(29,158,117,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Stats strip — gradient numbers ─────────────────────── */
.lp-stat-item strong {
  background: linear-gradient(135deg, var(--gray-900) 0%, #1D9E75 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .lp-stat-item strong {
  background: linear-gradient(135deg, #f8fafc 0%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Landing cards — glass tint ──────────────────────────── */
.lp-card {
  backdrop-filter: blur(4px);
}

/* ── Search card dark mode glass ─────────────────────────── */
[data-theme="dark"] .search-card {
  background: rgba(30,41,59,0.88);
  border-color: rgba(255,255,255,0.07);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.2);
}

/* ── Job card dark hover ─────────────────────────────────── */
[data-theme="dark"] .job-card:hover {
  box-shadow: 0 8px 28px rgba(29,158,117,0.2), 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Auth card — richer glass ────────────────────────────── */
.auth-card {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 20px 60px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
}
[data-theme="dark"] .auth-card {
  background: rgba(30,41,59,0.92);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Auth animated background — enhanced ─────────────────── */
.auth-body, .auth-main {
  background: linear-gradient(-45deg, #e8fdf5, #ecfdf5, #e8f4ff, #f0eeff, #f5fdf8);
  background-size: 400% 400%;
}
[data-theme="dark"] .auth-body, [data-theme="dark"] .auth-main {
  background: linear-gradient(-45deg, #0d2a1f, #0f172a, #0d1a2e, #130d2a, #0f1f17);
  background-size: 400% 400%;
}

/* ── Jobs page — staggered entrance animations ───────────── */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.app-header { animation: slideUpFade 0.4s cubic-bezier(.16,1,.3,1) both; }
.search-card { animation: slideUpFade 0.45s cubic-bezier(.16,1,.3,1) 0.05s both; }
.filter-chips { animation: slideUpFade 0.45s cubic-bezier(.16,1,.3,1) 0.1s both; }
.results-header { animation: slideUpFade 0.45s cubic-bezier(.16,1,.3,1) 0.13s both; }
#jobs-container { animation: slideUpFade 0.5s cubic-bezier(.16,1,.3,1) 0.17s both; }

/* ── Chip — glossy active state ─────────────────────────── */
.chip.active {
  box-shadow: 0 2px 10px rgba(29,158,117,0.3);
}

/* ── Tab active — glass pill ─────────────────────────────── */
.tab-btn.active {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ── App mock glass (dark mode) ──────────────────────────── */
[data-theme="dark"] .lp-app-mock {
  background: rgba(30,41,59,0.88) !important;
  border-color: rgba(255,255,255,0.1) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3) !important;
}


/* ── Reduced motion safety ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE / TABLET
   (all rules below are inside media queries — zero desktop impact)
   ============================================================ */

/* ── App header: compact mobile layout ───────────────────── */
@media (max-width: 640px) {
  /* Hide non-essential header items; keep logo img + toggle + settings + logout */
  .header-brand span { display: none; }
  .header-live { display: none; }
  .header-countdown { display: none; }
  .header-email { display: none; }
  .app-header .container { gap: 6px; }
}

/* ── Landing page hero: tighten on small phones ──────────── */
@media (max-width: 480px) {
  .lp-hero { padding: 48px 0 48px; }
  .lp-hero-h1 { font-size: clamp(24px, 7vw, 36px); }
  .lp-hero-sub { font-size: 14px; }
  .lp-hero-btns { flex-direction: column; align-items: stretch; }
  .lp-btn-primary, .lp-btn-outline { text-align: center; }
  .lp-hero-badge { font-size: 12px; }
}

/* ── Landing page stats strip: wrap on phones ────────────── */
@media (max-width: 480px) {
  .lp-stats-row { flex-wrap: wrap; gap: 16px; justify-content: center; }
  .lp-stat-sep { display: none; }
}

/* ── RT (Resume Tailor) component ────────────────────────── */
@media (max-width: 600px) {
  .rt-header { flex-direction: column; align-items: flex-start; }
  .rt-header-right { width: 100%; justify-content: flex-start; }
}

/* ── Pagination: larger touch targets on mobile ──────────── */
@media (max-width: 480px) {
  .pg-btn { min-width: 40px; height: 40px; font-size: 15px; }
}

/* ── Filter chips: better touch targets on mobile ────────── */
@media (max-width: 640px) {
  .chip { padding: 7px 14px; font-size: 14px; }
}