:root {
  --bg: #0b1120;
  --surface: rgba(20, 30, 60, 0.88);
  --surface-strong: rgba(13, 22, 44, 0.96);
  --border: rgba(255, 255, 255, 0.08);
  --primary: #7c5cff;
  --primary-strong: #5d3bff;
  --secondary: #23d997;
  --text: #f4f7ff;
  --muted: #adc0ff;
  --accent: #ff7a8d;
  --input-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: radial-gradient(circle at top, rgba(124, 92, 255, 0.22), transparent 25%),
    radial-gradient(circle at bottom right, rgba(35, 217, 151, 0.18), transparent 20%),
    linear-gradient(180deg, #05090f 0%, #0b1120 100%);
  color: var(--text);
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  /* No backdrop-filter here on purpose: it (like transform/filter) creates a
     new CSS containing block for fixed-position descendants — the mobile
     nav drawer and its backdrop are position:fixed children of this element,
     and with backdrop-filter present they'd be positioned relative to
     .topbar instead of the real viewport, dragging the "fixed" drawer up and
     away as the page scrolled instead of it staying pinned on screen. The
     background below is already opaque enough without the blur. */
  background: rgba(10, 16, 30, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brand {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: #fff;
}
.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.nav-link,
.button-link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  cursor: pointer;
}
.nav-link:hover,
.button-link:hover {
  color: #fff;
}
.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}
.tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0 24px;
  border-bottom: 1px solid var(--border);
}
.tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 14px 14px 0 0;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-bottom: none;
  transform: translateY(1px);
  transition: color 0.2s ease, background 0.2s ease;
}
.tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.tab.active {
  color: #fff;
  background: var(--surface);
  border-color: var(--border);
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(124, 92, 255, 0.16);
  color: #dcdcff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  margin: 4px 4px 4px 0;
}
.chip-match {
  background: rgba(35, 217, 151, 0.14);
  color: #b5ffe2;
}
.job-card {
  background: rgba(15, 22, 42, 0.95);
  border: 1px solid rgba(124, 92, 255, 0.14);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
}
/* --- Job-list loading skeletons: shown while filtering/paginating/switching
   tabs on /jobs (see public/js/jobs-loading.js) --- */
.skeleton-card {
  cursor: default;
}
.skeleton-line {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.14) 37%,
    rgba(255, 255, 255, 0.06) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.skeleton-title {
  height: 22px;
  width: 60%;
  margin-bottom: 14px;
}
.skeleton-sub {
  height: 14px;
  width: 40%;
  margin-bottom: 14px;
}
.skeleton-chips {
  height: 24px;
  width: 80%;
  margin-bottom: 18px;
}
.skeleton-actions {
  height: 38px;
  width: 100%;
  border-radius: 16px;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 24px 0 8px;
}
.pagination .disabled {
  opacity: 0.4;
  pointer-events: none;
}
.job-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.score {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: default;
}
.score-excellent {
  color: #b5ffe2;
  background: rgba(35, 217, 151, 0.16);
}
.score-strong {
  color: #d3ffd0;
  background: rgba(122, 217, 35, 0.14);
}
.score-good {
  color: #ffe9b0;
  background: rgba(255, 196, 61, 0.14);
}
.score-fair {
  color: #ffd0b0;
  background: rgba(255, 140, 61, 0.14);
}
.score-weak {
  color: #ffc2cb;
  background: rgba(255, 122, 141, 0.14);
}
.company {
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.5;
}
.status {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.68);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.actions form {
  display: inline;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #f4f7ff;
  padding: 12px 18px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.14);
}
.btn.primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  color: #fff;
  box-shadow: 0 14px 38px rgba(124, 92, 255, 0.28);
}
.btn.subtle {
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
}
.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  align-items: end;
}
label:not(.checkbox) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
}
/* .filters lays its own fields out on a grid with its own gap, so it
   supplies field-to-field spacing itself — this is for plain stacked forms
   (billing, subscribe, auth, ...) which previously had no vertical rhythm
   between one label and the next, or between the last field and the submit
   button. */
form:not(.filters) > label:not(.checkbox) {
  margin-bottom: 16px;
}
/* Visually hides an element while keeping it in the accessibility tree and
   still reachable/focusable — used for the real <input type="file"> behind
   a <label for="..."> styled as a normal button (see views/cv/upload.hbs). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.btn[aria-disabled='true'] {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}
label input,
label select,
textarea,
input[type='text'],
input[type='number'],
input[type='url'] {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--input-bg);
  color: #f4f7ff;
  padding: 14px 16px;
  border-radius: 16px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
label select {
  color: #f4f7ff;
  background: var(--input-bg);
  appearance: none;
}
label select option,
label select optgroup {
  color: #0d1a2c;
  background: #f4f7ff;
}
label select option:checked {
  background: rgba(124, 92, 255, 0.18);
}
label input:focus,
label select:focus,
textarea:focus,
input[type='text']:focus,
input[type='number']:focus,
input[type='url']:focus {
  border-color: rgba(124, 92, 255, 0.75);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.12);
}
label.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: auto;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
}
label.checkbox input[type='checkbox'] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  accent-color: var(--primary);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}
.manual-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}
.hint {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.7;
}
textarea {
  min-height: 120px;
  resize: vertical;
}
summary {
  cursor: pointer;
}
input[type='checkbox'] {
  width: auto;
  accent-color: var(--primary);
}
.auth-shell {
  min-height: calc(100vh - 88px);
  display: grid;
  place-items: center;
  padding: 48px 24px 32px;
}
.auth-card {
  width: min(520px, 100%);
  background: rgba(11, 17, 32, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 36px 34px 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.auth-card h1 {
  margin-top: 0;
  color: #fff;
  font-size: 2rem;
}
.auth-card p {
  color: rgba(255, 255, 255, 0.72);
}
.auth-card label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.82);
}
.auth-card input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f4f7ff;
  padding: 14px 16px;
}
.auth-card button {
  width: 100%;
  margin-top: 8px;
}
.auth-card .link-row {
  margin-top: 18px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
}
.auth-card .link-row a {
  color: var(--primary);
  text-decoration: none;
}
.auth-card .error {
  color: #ff7a8d;
  background: rgba(255, 122, 141, 0.12);
  padding: 14px 16px;
  border-radius: 14px;
  margin-bottom: 18px;
}
/* --- Clean row-per-item lists (subscriptions, etc.) — replaces cramped
   default <li> flow where title/chip/button ran into each other and wrapped
   unpredictably, especially with longer country names. --- */
.list-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.list-row:last-child {
  border-bottom: none;
}
.list-row-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.72);
}
.list-row-info strong {
  color: #fff;
}

/* --- Mobile hamburger + side menu (hidden on desktop) --- */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  /* .nav-backdrop is a sibling (z-index 999) that dims the whole viewport
     while the side menu is open — this keeps the toggle (which turns into
     an X) visible and clickable above it rather than dimmed out too. Flex
     items respect z-index without needing `position` set. */
  z-index: 1002;
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 9, 15, 0.6);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
@media (max-width: 720px) {
  .filters {
    grid-template-columns: 1fr;
  }
  .menu-toggle {
    display: flex;
  }
  .nav-backdrop {
    display: block;
  }
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(280px, 80vw);
    background: var(--surface-strong);
    border-left: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 84px 24px 24px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1000;
  }
  .nav-links.open {
    transform: translateX(0);
  }
  .nav-links .nav-link {
    width: 100%;
    padding: 12px 0;
    font-size: 1rem;
  }
  .nav-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}
@media (max-width: 480px) {
  .container {
    padding: 20px 16px 40px;
  }
  .brand {
    font-size: 1.1rem;
  }
  .job-card {
    padding: 18px;
  }
  .job-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .actions {
    flex-direction: column;
  }
  .actions form,
  .actions .btn {
    width: 100%;
  }
  .actions form button {
    width: 100%;
  }
  .auth-card {
    padding: 28px 22px 22px;
  }
}

/* --- Plan status banner (trial/grace/expired), shown under the topbar --- */
.plan-banner {
  padding: 10px 32px;
  background: rgba(124, 92, 255, 0.14);
  color: var(--muted);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.plan-banner a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}
.plan-banner-warn {
  background: rgba(255, 122, 141, 0.16);
  color: #ffd7dc;
}

/* --- First-login guided tutorial (see public/js/tutorial.js) --- */
.tutorial-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 9, 15, 0.6);
  z-index: 9998;
}
.tutorial-spotlight {
  position: absolute;
  border-radius: 16px;
  box-shadow: 0 0 0 4px var(--primary), 0 0 0 9999px rgba(5, 9, 15, 0.6);
  transition: all 0.2s ease;
  pointer-events: none;
}
.tutorial-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 320px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.tutorial-tooltip.tutorial-centered {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.tutorial-tooltip h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: #fff;
}
.tutorial-tooltip p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.tutorial-tooltip .tutorial-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.tutorial-step-count {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}
.tutorial-resume-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 38px rgba(124, 92, 255, 0.35);
}

/* --- Admin dashboard: side-nav tabs + pure-CSS bar charts --- */
.admin-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 12px;
  position: sticky;
  top: 24px;
  box-shadow: var(--shadow);
}
.admin-sidebar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 0.95rem;
  margin-bottom: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-sidebar a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.admin-sidebar a.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  color: #fff;
}
.admin-sidebar .badge {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.75rem;
  min-width: 20px;
  text-align: center;
}
.admin-sidebar a.active .badge {
  background: rgba(255, 255, 255, 0.25);
}
.admin-content {
  flex: 1;
  min-width: 0;
}
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 42px;
  align-items: center;
  gap: 12px;
}
.bar-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  height: 14px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.bar-value {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.stat-tile {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
}
.stat-tile .stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
}
.stat-tile .stat-label {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 2px;
}
@media (max-width: 720px) {
  .admin-layout {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100%;
    position: static;
    display: flex;
    overflow-x: auto;
    gap: 6px;
  }
  .admin-sidebar a {
    flex-shrink: 0;
    margin-bottom: 0;
    white-space: nowrap;
  }
}

/* --- Web-push opt-in bar (public/js/push-notifications.js) ---------------
   Pinned to the bottom rather than injected under the topbar like
   .plan-banner: this appears after page load, and pushing the whole document
   down mid-read moves whatever the user was about to click. --- */
.push-prompt {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 60;
  width: min(680px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.92rem;
  animation: push-prompt-in 0.25s ease-out;
}
@keyframes push-prompt-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .push-prompt {
    animation: none;
  }
}
.push-prompt-text {
  color: var(--muted);
  line-height: 1.5;
}
.push-prompt-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.push-prompt .btn {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .push-prompt {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .push-prompt-actions {
    justify-content: center;
  }
}