/* Custom styles supplementing Tailwind */
html { scroll-behavior: smooth; }

/* =============== MODERN PRIMITIVES =============== */
.card-elevated {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.95));
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 1.5rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 24px 48px -24px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  position: relative;
  overflow: hidden;
}
.card-elevated::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(94, 234, 212, 0.08), transparent 40%);
  pointer-events: none;
}

.btn-primary-modern {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  background: linear-gradient(135deg, rgb(42, 63, 234), rgb(34, 47, 199) 80%, rgb(31, 43, 160));
  color: white;
  font-weight: 600;
  border-radius: 0.85rem;
  border: 0;
  cursor: pointer;
  box-shadow: 0 12px 24px -10px rgba(42, 63, 234, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}
.btn-primary-modern:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 18px 32px -12px rgba(42, 63, 234, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn-primary-modern:active { transform: translateY(0); }

.btn-ghost-modern {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: white;
  color: rgb(51 65 85);
  font-weight: 600;
  border-radius: 0.85rem;
  border: 1.5px solid rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: all 0.18s ease;
  font-size: 0.92rem;
}
.btn-ghost-modern:hover { background: rgb(248 250 252); border-color: rgba(15, 23, 42, 0.16); transform: translateY(-1px); }

/* =============== APPLICANT BANNER (modern) =============== */
.applicant-banner {
  position: relative;
  display: flex; align-items: center; gap: 0.95rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, rgba(209, 250, 229, 0.6), rgba(204, 251, 239, 0.4));
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 1rem;
  overflow: hidden;
}
.applicant-banner-pulse {
  position: absolute;
  top: 50%; left: 1.55rem;
  transform: translate(-50%, -50%);
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: rgb(52, 211, 153);
  opacity: 0.25;
  animation: pulseBanner 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes pulseBanner {
  0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.45; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
.applicant-banner-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgb(52, 211, 153), rgb(5, 150, 105));
  color: white;
  box-shadow: 0 6px 14px -4px rgba(5, 150, 105, 0.4);
}
.applicant-banner-icon svg { width: 1.05rem; height: 1.05rem; }
.applicant-banner-text { flex: 1; min-width: 0; }
.applicant-banner-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: rgb(6, 78, 59);
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}
.applicant-banner-sub {
  font-size: 0.8rem;
  color: rgb(15, 118, 110);
  margin-top: 0.1rem;
}

/* =============== RESUME BANNER (karier landing) =============== */
.resume-banner {
  position: relative;
  display: flex; align-items: center; gap: 0.95rem;
  padding: 0.85rem 1rem 0.85rem 1.15rem;
  background: linear-gradient(135deg, rgb(255 251 235), rgb(254 243 199 / 0.7));
  border: 1px solid rgb(252 211 77);
  border-radius: 1rem;
  box-shadow: 0 8px 24px -12px rgba(217, 119, 6, 0.25);
}
.resume-banner-icon {
  flex-shrink: 0;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgb(251 191 36), rgb(217 119 6));
  color: white;
  box-shadow: 0 6px 14px -4px rgba(217, 119, 6, 0.45);
}
.resume-banner-icon svg { width: 1.2rem; height: 1.2rem; }
.resume-banner-text { flex: 1; min-width: 0; }
.resume-banner-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: rgb(120, 53, 15);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.resume-banner-sub {
  font-size: 0.82rem;
  color: rgb(146, 64, 14);
  margin-top: 0.1rem;
}
.resume-banner-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: linear-gradient(135deg, rgb(217 119 6), rgb(180 83 9));
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 0.75rem;
  box-shadow: 0 8px 16px -6px rgba(180, 83, 9, 0.45);
  transition: transform 0.18s ease, filter 0.18s ease;
  flex-shrink: 0;
}
.resume-banner-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.resume-banner-dismiss {
  flex-shrink: 0;
  width: 1.85rem; height: 1.85rem;
  border-radius: 999px;
  display: grid; place-items: center;
  color: rgb(146, 64, 14);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.resume-banner-dismiss:hover { background: rgb(254 243 199); }
@media (max-width: 640px) {
  .resume-banner { flex-wrap: wrap; }
  .resume-banner-cta { width: 100%; justify-content: center; }
}


/* =============== WIZARD =============== */
.wizard-step.hidden { display: none; }

.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.wizard-steps::-webkit-scrollbar { height: 4px; }
.wizard-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.2rem 0.2rem;
  background: transparent;
  border: 0;
  cursor: default;
  transition: color 0.2s ease;
}
.wizard-step-item.clickable { cursor: pointer; }
.wizard-step-num {
  width: 1.9rem; height: 1.9rem;
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  background: rgb(241 245 249);
  color: rgb(100 116 139);
  border: 2px solid rgb(226 232 240);
  transition: all 0.25s ease;
}
.wizard-step-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgb(100 116 139);
  white-space: nowrap;
  transition: color 0.2s ease;
}
/* Active */
.wizard-step-item.is-active .wizard-step-num {
  background: linear-gradient(135deg, rgb(20 184 166), rgb(13 148 136));
  color: white;
  border-color: rgb(94 234 212);
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.25);
}
.wizard-step-item.is-active .wizard-step-label {
  color: rgb(15 118 110);
}
/* Done */
.wizard-step-item.is-done .wizard-step-num {
  background: rgb(5 150 105);
  color: white;
  border-color: rgb(5 150 105);
}
.wizard-step-item.is-done .wizard-step-label {
  color: rgb(4 120 87);
}
.wizard-step-item.is-done .wizard-step-num::after {
  content: '';
  display: block;
  width: 0.7rem; height: 0.7rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='3' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
}
.wizard-step-item.is-done .wizard-step-num > * { display: none; }
.wizard-step-item.is-done .wizard-step-num { position: relative; font-size: 0; }

.wizard-line {
  flex: 1;
  height: 2px;
  background: rgb(226 232 240);
  min-width: 1rem;
  margin-bottom: 1.2rem;
  transition: background 0.3s ease;
}
.wizard-line.is-done { background: rgb(5 150 105); }

@media (max-width: 640px) {
  .wizard-step-label { display: none; }
  .wizard-step-item.is-active .wizard-step-label { display: inline; }
}

/* =============== LAMAR FORM =============== */
.form-section {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
}
.form-section-head {
  display: flex; align-items: flex-start; gap: 0.9rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(241 245 249);
}
.form-section-num {
  width: 2rem; height: 2rem;
  border-radius: 0.6rem;
  background: linear-gradient(135deg, rgb(94 234 212), rgb(13 148 136));
  color: white;
  display: grid; place-items: center;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  flex-shrink: 0;
}
.form-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: rgb(15 23 42);
  font-size: 1.1rem;
}
.form-section-desc {
  color: rgb(100 116 139);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .md\:col-span-2 { grid-column: span 2; }
}
/* Modern field with floating label */
.field {
  position: relative;
  display: block;
}
.field > span {
  position: absolute;
  left: 0.95rem;
  top: 0.95rem;
  pointer-events: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgb(100 116 139);
  background: white;
  padding: 0 0.35rem;
  border-radius: 0.25rem;
  transform-origin: left center;
  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1.1), color 0.18s ease, top 0.18s ease;
  z-index: 1;
  letter-spacing: 0;
  text-transform: none;
}
.field > span.req::after {
  content: ' *';
  color: rgb(244 63 94);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.95rem 0.95rem 0.65rem;
  border: 1.5px solid rgb(226 232 240);
  border-radius: 0.7rem;
  background: white;
  color: rgb(15 23 42);
  font-size: 0.92rem;
  font-family: inherit;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea {
  min-height: 4.5rem;
  padding: 1.6rem 0.95rem 0.65rem;
  resize: vertical;
  line-height: 1.5;
}
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgb(100,116,139)' stroke-width='2' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem 1.1rem;
  padding-right: 2.5rem;
}
.field input::placeholder,
.field textarea::placeholder { color: transparent; }

/* Float label up on focus or when filled.
   Uses :focus-within (label-agnostic of order) and :has() (modern selectors).
   Both work whether <span> is before or after <input> inside the .field <label>. */
.field:focus-within > span,
.field:has(input:not(:placeholder-shown)) > span,
.field:has(textarea:not(:placeholder-shown)) > span,
.field:has(select) > span,
.field:has(input[type="date"]) > span,
/* Legacy sibling-after-input fallback (no harm if both match) */
.field input:focus + span,
.field input:not(:placeholder-shown) + span,
.field textarea:focus + span,
.field textarea:not(:placeholder-shown) + span,
.field select + span,
.field input[type="date"] + span {
  top: -0.55rem;
  transform: scale(0.78);
  color: rgb(15 118 110);
  font-weight: 600;
}

/* Focus ring */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgb(20 184 166);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18);
}
/* Filled state: slight border tint */
.field input:not(:placeholder-shown):not(:focus),
.field textarea:not(:placeholder-shown):not(:focus) {
  border-color: rgb(203 213 225);
}
/* Invalid feedback (only after user interaction) */
.field input:not(:placeholder-shown):invalid:not(:focus) {
  border-color: rgb(252 165 165);
}

/* Date input: minor tweaks for native picker icon position */
.field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(40%) sepia(15%) saturate(700%) hue-rotate(130deg);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* flatpickr theme integration */
.flatpickr-input { font-family: inherit !important; }
.flatpickr-calendar {
  border-radius: 1rem !important;
  box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.1) !important;
  border: 1px solid rgb(226 232 240) !important;
  font-family: 'Inter', sans-serif !important;
  padding: 0.5rem;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: linear-gradient(135deg, rgb(20 184 166), rgb(13 148 136)) !important;
  border-color: rgb(13 148 136) !important;
  font-weight: 700;
}
.flatpickr-day.today { border-color: rgb(94 234 212) !important; color: rgb(15 118 110); font-weight: 600; }
.flatpickr-day:hover { background: rgb(240 253 249) !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { font-weight: 700 !important; color: rgb(15 23 42); }
.flatpickr-prev-month, .flatpickr-next-month { color: rgb(15 118 110) !important; fill: rgb(15 118 110) !important; }
.flatpickr-weekday { color: rgb(100 116 139) !important; font-weight: 600 !important; font-size: 0.78rem; }
.reference-block {
  background: rgb(248 250 252);
  border: 1px dashed rgb(203 213 225);
  border-radius: 0.85rem;
  padding: 1rem 1.15rem;
}

/* =============== KRAEPELIN TEST (50x50 grid) =============== */
:root {
  --kp-col-w: 46px;       /* lebar 1 kolom Kraepelin */
  --kp-num-h: 22px;       /* tinggi sel angka */
  --kp-gap-h: 22px;       /* tinggi sel input */
  --kp-num-shift-x: -7px; /* angka digeser tipis ke kiri */
  --kp-inp-shift-x: 9px;  /* input digeser ke kanan — staircase vibe */
}
@media (max-width: 768px) {
  :root { --kp-col-w: 38px; --kp-num-h: 18px; --kp-gap-h: 18px; --kp-num-shift-x: -5px; --kp-inp-shift-x: 7px; }
}
.kp-header {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
}
.kp-stage-progress {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: rgb(15 23 42);
  background: white;
  border: 1px solid rgb(226 232 240);
  padding: 0.55rem 1rem;
  border-radius: 0.7rem;
  font-size: 0.92rem;
}
.kp-stage-progress span:first-of-type { color: rgb(34 47 199); font-size: 1.15rem; }

.kp-runner-shell {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 1.2rem;
  box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.10);
  overflow: hidden;
}
.kp-runner-toolbar {
  position: sticky; top: 0; z-index: 5;
  background: white;
  border-bottom: 1px solid rgb(226 232 240);
}
.kp-runner-bar {
  height: 4px;
  background: rgb(241 245 249);
}
.kp-runner-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, rgb(94 234 212), rgb(34 47 199) 60%, rgb(244 63 94));
  transition: width 1s linear;
}
.kp-runner-toolbar-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.7rem 1rem;
  flex-wrap: wrap; gap: 0.65rem;
}
.kp-time {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.85rem;
  color: rgb(15 23 42);
  letter-spacing: -0.03em;
}
.kp-info { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kp-info-item {
  font-size: 0.85rem;
  color: rgb(51 65 85);
}
.kp-info-item strong {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: rgb(34 47 199);
  font-size: 1.05rem;
}
.kp-skip-btn {
  font-size: 0.78rem;
  color: rgb(100 116 139);
  background: transparent;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.55rem;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.kp-skip-btn:hover { background: rgb(248 250 252); color: rgb(15 23 42); }

.kp-grid-scroll {
  max-height: 70vh;
  overflow: auto;
  scroll-behavior: smooth;
  background:
    linear-gradient(180deg, white, rgb(248 250 252));
  padding: 0.6rem;
}
.kp-grid {
  display: grid;
  /* grid-template-columns di-set inline → repeat(N, var(--kp-col-w)) */
  grid-auto-rows: min-content;
  width: max-content;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
  column-gap: 0;
}
/* 1 kolom Kraepelin = 1 grid column berisi angka & input selang-seling. */
.kp-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 0.55rem;
  padding: 4px 0;
  transition: background 0.15s ease;
  position: relative;
}
.kp-cell {
  display: grid; place-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  width: 100%;
}
.kp-cell.kp-num {
  height: var(--kp-num-h);
  font-weight: 700;
  font-size: 0.95rem;
  color: rgb(30 41 59);
  background: transparent;
  /* Geser angka tipis ke kiri supaya pasangan angka–input terlihat zigzag */
  transform: translateX(var(--kp-num-shift-x));
}
.kp-cell.kp-gap {
  height: var(--kp-gap-h);
}

/* Active column highlight */
.kp-col.kp-col-active {
  background: linear-gradient(180deg, rgb(238 244 255), rgb(224 232 254));
  box-shadow: inset 0 0 0 1px rgb(187 207 255);
}
.kp-col.kp-col-active .kp-cell.kp-num {
  color: rgb(34 47 199);
}

.kp-input {
  width: 24px;
  height: calc(var(--kp-gap-h) - 4px);
  border: 1px solid rgb(203 213 225);
  border-radius: 0.4rem;
  background: white;
  text-align: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: rgb(15 23 42);
  outline: none;
  padding: 0;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
  /* Input digeser ke kanan supaya pasangan angka–input zigzag */
  transform: translateX(var(--kp-inp-shift-x));
  position: relative;
  z-index: 1;
}
.kp-col.kp-col-active .kp-input {
  border-color: rgb(187 207 255);
  background: white;
}
.kp-input:focus {
  border-color: rgb(34 47 199);
  background: white;
  box-shadow: 0 0 0 3px rgba(94, 131, 255, 0.30);
  transform: translateX(var(--kp-inp-shift-x)) scale(1.18);
  z-index: 2;
}
.kp-input.kp-input-correct {
  border-color: rgb(110 231 183);
  background: rgb(209 250 229);
  color: rgb(5 150 105);
}
.kp-input.kp-input-wrong {
  border-color: rgb(252 165 165);
  background: rgb(254 226 226);
  color: rgb(190 18 60);
}
/* Inactive columns: dim slightly + disable interaction */
.kp-col:not(.kp-col-active) .kp-input {
  pointer-events: none;
  opacity: 0.45;
}
.kp-col:not(.kp-col-active) .kp-cell.kp-num {
  color: rgb(148 163 184);
}

/* ---- Kraepelin demo / contoh pengisian (intro page) ---- */
.kp-demo-wrap {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(180deg, rgb(248 250 252), white);
  border: 1px dashed rgb(203 213 225);
  border-radius: 0.85rem;
}
.kp-demo-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(71 85 105);
  margin-bottom: 0.85rem;
}
.kp-demo-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.kp-demo-flow {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  color: rgb(100 116 139);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kp-demo-arrow-up { width: 18px; height: 18px; color: rgb(34 47 199); }
.kp-demo-arrow-up svg { width: 100%; height: 100%; }
.kp-demo-flow-label { color: rgb(148 163 184); }
.kp-demo-flow-start {
  background: rgb(238 244 255);
  color: rgb(34 47 199);
  border: 1px solid rgb(187 207 255);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Demo column — visualisasi mirip layout asli (angka tipis ke kiri, input ke kanan) */
.kp-demo-col {
  display: flex; flex-direction: column;
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.55rem;
  padding: 6px 14px;
  width: 64px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-variant-numeric: tabular-nums;
}
.kp-demo-cell {
  height: 22px;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
}
.kp-demo-num { color: rgb(30 41 59); transform: translateX(-7px); }
.kp-demo-num.kp-demo-hl { color: rgb(34 47 199); }
.kp-demo-inp { /* container — bentuk input ada di .kp-demo-inp-box */ }
.kp-demo-inp-box {
  display: inline-grid; place-items: center;
  width: 24px; height: 18px;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgb(15 23 42);
  background: white;
  transform: translateX(7px);
}
.kp-demo-inp-box.kp-demo-hl-inp {
  border-color: rgb(34 47 199);
  background: rgb(34 47 199);
  color: white;
  box-shadow: 0 4px 10px -3px rgba(34, 47, 199, 0.45);
}

.kp-demo-explain {
  flex: 1;
  min-width: 220px;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.kp-demo-explain-eq {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-variant-numeric: tabular-nums;
}
.kp-demo-eq-num {
  font-weight: 700;
  font-size: 1.25rem;
  color: rgb(15 23 42);
  background: rgb(241 245 249);
  border-radius: 0.4rem;
  padding: 0.05rem 0.55rem;
}
.kp-demo-eq-op {
  font-weight: 700;
  color: rgb(100 116 139);
  font-size: 1.1rem;
}
.kp-demo-eq-result {
  font-weight: 800;
  font-size: 1.25rem;
  color: rgb(15 23 42);
}
.kp-demo-eq-result strong {
  color: rgb(34 47 199);
  background: rgb(238 244 255);
  border-radius: 0.4rem;
  padding: 0.05rem 0.4rem;
  margin-left: 0.05rem;
}
.kp-demo-explain-note {
  font-size: 0.85rem;
  color: rgb(71 85 105);
  line-height: 1.5;
}
.kp-demo-keyhint {
  display: inline-block;
  background: rgb(34 47 199);
  color: white;
  padding: 0.05rem 0.45rem;
  border-radius: 0.35rem;
  font-size: 0.85rem;
  margin: 0 0.05rem;
}
.kp-demo-explain-flow {
  font-size: 0.78rem;
  color: rgb(100 116 139);
  border-top: 1px dashed rgb(226 232 240);
  padding-top: 0.5rem;
}
.kp-demo-flow-tag {
  display: inline-block;
  background: rgb(238 244 255);
  color: rgb(34 47 199);
  font-weight: 700;
  width: 18px; height: 18px;
  text-align: center; line-height: 16px;
  border-radius: 50%;
  margin-right: 0.25rem;
}

/* =============== DISC TEST =============== */
.disc-grid { margin-top: 0.5rem; }
.disc-grid-head {
  display: grid;
  grid-template-columns: 1fr 3rem 3rem;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(100 116 139);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgb(241 245 249);
  text-align: center;
}
.disc-grid-head > span:first-child { text-align: left; }
.disc-grid-head .disc-col-p { color: rgb(34 47 199); }
.disc-grid-head .disc-col-k { color: rgb(190 18 60); }
.disc-row {
  display: grid;
  grid-template-columns: 1fr 3rem 3rem;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.25rem;
  border-bottom: 1px solid rgb(241 245 249);
  cursor: pointer;
  transition: background 0.15s ease;
}
.disc-row:hover { background: rgb(248 250 252); }
.disc-row:last-child { border-bottom: 0; }
.disc-text {
  font-size: 0.92rem;
  color: rgb(15 23 42);
}
.disc-radio-p, .disc-radio-k {
  display: grid;
  place-items: center;
}
.disc-radio-p input[type="radio"] {
  width: 1.15rem; height: 1.15rem;
  accent-color: rgb(34 47 199);
  cursor: pointer;
}
.disc-radio-k input[type="radio"] {
  width: 1.15rem; height: 1.15rem;
  accent-color: rgb(244 63 94);
  cursor: pointer;
}

/* =============== REVIEW BLOCK =============== */
.review-block {
  background: rgb(248 250 252);
  border: 1px solid rgb(226 232 240);
  border-radius: 0.85rem;
  padding: 0.9rem 1.15rem;
}
.review-block-head {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(15 118 110);
  margin-bottom: 0.5rem;
}
.review-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 2fr;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgb(241 245 249);
  font-size: 0.87rem;
}
.review-row:last-child { border-bottom: 0; }
.review-label { color: rgb(100 116 139); font-weight: 500; }
.review-val { color: rgb(15 23 42); font-weight: 500; word-break: break-word; }

/* =============== JOBS LIST =============== */
.job-card {
  position: relative;
  overflow: hidden;
}
.job-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(45, 212, 191, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.job-card:hover::before { opacity: 1; }

/* =============== APPLICANT DETAIL =============== */
.app-field {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgb(241 245 249);
}
.app-field-label {
  min-width: 160px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(100 116 139);
  flex-shrink: 0;
}
.app-field-value {
  color: rgb(15 23 42);
  flex: 1;
  word-break: break-word;
}
.app-field-value a { color: rgb(15 118 110); text-decoration: underline; }

.admin-tab {
  padding: 0.65rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(100 116 139);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.admin-tab:hover { color: rgb(34 47 199); }
.admin-tab.active {
  color: rgb(34 47 199);
  border-bottom-color: rgb(34 47 199);
}

/* =============== Document List (new compact UI) =============== */
.doc-list { display: flex; flex-direction: column; gap: 0.75rem; }
.doc-item {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  transition: all 0.2s ease;
}
.doc-item.ready { border-color: rgb(134 239 172); background: rgb(240 253 244); }
.doc-item.error { border-color: rgb(252 165 165); background: rgb(254 242 242); }

.doc-item-head {
  display: flex; align-items: center; gap: 0.85rem;
}
.doc-item-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.6rem;
  background: rgb(240 253 249);
  color: rgb(15 118 110);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.doc-item-icon svg { width: 1.15rem; height: 1.15rem; }
.doc-item.ready .doc-item-icon { background: rgb(209 250 229); color: rgb(5 150 105); }
.doc-item-title { flex: 1; min-width: 0; }
.doc-item-name { font-size: 0.92rem; font-weight: 600; color: rgb(15 23 42); line-height: 1.2; }
.doc-item-hint { font-size: 0.75rem; color: rgb(100 116 139); margin-top: 0.15rem; }
.doc-item-state {
  font-size: 0.78rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.4rem;
  flex-shrink: 0;
}
.doc-item-state .ok { color: rgb(5 150 105); }
.doc-item-state .err { color: rgb(190 18 60); }
.doc-item-state .remove-btn {
  font-size: 0.72rem; color: rgb(244 63 94); cursor: pointer;
  background: none; border: 0; font-weight: 600; padding: 0; margin-left: 0.35rem;
}
.doc-item-state .remove-btn:hover { text-decoration: underline; }

.doc-mode-tabs {
  display: flex;
  margin-top: 0.75rem;
  gap: 0;
  background: rgb(241 245 249);
  padding: 0.18rem;
  border-radius: 0.55rem;
  width: fit-content;
}
.doc-mode-tab {
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgb(100 116 139);
  background: transparent;
  border: 0;
  border-radius: 0.42rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.doc-mode-tab:hover { color: rgb(15 23 42); }
.doc-mode-tab.active {
  background: white;
  color: rgb(15 118 110);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.doc-mode-panel { margin-top: 0.6rem; }
.doc-mode-panel.hidden { display: none; }

.doc-file-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: rgb(248 250 252);
  border: 1px dashed rgb(203 213 225);
  border-radius: 0.55rem;
  color: rgb(51 65 85);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}
.doc-file-btn:hover { border-color: rgb(94 234 212); background: rgb(240 253 249); color: rgb(15 118 110); }
.doc-file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.doc-url-input {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.55rem;
  background: rgb(248 250 252);
  font-size: 0.87rem;
  transition: border 0.15s ease, box-shadow 0.15s ease;
}
.doc-url-input:focus {
  outline: none;
  border-color: rgb(20 184 166);
  background: white;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
}

@media (max-width: 640px) {
  .doc-item-head { flex-wrap: wrap; }
  .doc-item-state { width: 100%; margin-left: 3rem; }
}

/* =============== File Upload (legacy, kept for compat) =============== */
.file-up { display: flex; flex-direction: column; gap: 0.5rem; }
.file-up-header { display: flex; justify-content: space-between; align-items: baseline; }
.file-up-label { font-size: 0.75rem; font-weight: 600; color: rgb(71 85 105); text-transform: uppercase; letter-spacing: 0.03em; }
.file-up-hint  { font-size: 0.7rem; color: rgb(100 116 139); }
.file-up-drop {
  position: relative;
  display: block;
  border: 1.5px dashed rgb(203 213 225);
  border-radius: 0.85rem;
  padding: 1rem;
  background: rgb(248 250 252);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  text-align: center;
}
.file-up-drop:hover { border-color: rgb(94 234 212); background: rgb(240 253 249); }
.file-up-drop.dragging { border-color: rgb(45 212 191); background: rgb(204 251 239); }
.file-up-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-up-inner { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; pointer-events: none; }
.file-up-text { font-size: 0.85rem; color: rgb(71 85 105); font-weight: 500; }
.file-up.uploading .file-up-drop { border-color: rgb(94 234 212); background: rgb(240 253 249); }
.file-up.uploaded .file-up-drop {
  border-color: rgb(52 211 153);
  background: linear-gradient(135deg, rgb(240 253 249), rgb(209 250 229));
}
.file-up.uploaded .file-up-inner svg { color: rgb(16 185 129); }
.file-up.error .file-up-drop { border-color: rgb(248 113 113); background: rgb(254 242 242); }
.file-up-status {
  font-size: 0.78rem;
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 1.2em;
}
.file-up-status .ok    { color: rgb(5 150 105); font-weight: 600; }
.file-up-status .err   { color: rgb(190 18 60); font-weight: 600; }
.file-up-status .pending{ color: rgb(100 116 139); }
.file-up-progress {
  height: 4px; width: 100%;
  background: rgb(226 232 240);
  border-radius: 999px;
  overflow: hidden;
}
.file-up-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, rgb(20 184 166), rgb(13 148 136));
  transition: width 0.2s ease;
}
.file-up-remove {
  font-size: 0.72rem; color: rgb(244 63 94); font-weight: 600; cursor: pointer;
}
.file-up-remove:hover { text-decoration: underline; }



/* Question option button styling */
.opt-btn {
  width: 100%;
  text-align: left;
  border: 1.5px solid rgb(226 232 240);
  background: white;
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  cursor: pointer;
  transition: all 0.15s ease;
}
.opt-btn:hover { border-color: rgb(94 131 255); background: rgb(238 244 255); }
.opt-btn .badge {
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  background: rgb(241 245 249);
  color: rgb(51 65 85);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.opt-btn.selected {
  border-color: rgb(42 63 234);
  background: linear-gradient(180deg, rgb(238 244 255), white);
  box-shadow: 0 0 0 4px rgb(187 207 255 / 0.4);
}
.opt-btn.selected .badge {
  background: rgb(42 63 234);
  color: white;
}

/* Question card */
.q-card {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
  transition: border-color 0.15s ease;
}
.q-card.unanswered { border-color: rgb(254 215 170); background: linear-gradient(180deg, rgb(255 251 235 / 0.5), white); }
.q-card.answered { border-color: rgb(187 207 255); }
.q-card .q-num {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  background: rgb(34 47 199);
  color: white;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

/* Psikogram tables */
.psk-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.psk-table th, .psk-table td { border: 1px solid rgb(226 232 240); padding: 0.55rem 0.75rem; text-align: left; }
.psk-table thead th {
  background: rgb(238 244 255);
  color: rgb(29 41 128);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.psk-table tbody tr:nth-child(even) td { background: rgb(248 250 252); }

.level-pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.lvl-1 { background: #fee2e2; color: #b91c1c; }
.lvl-2 { background: #fed7aa; color: #c2410c; }
.lvl-3 { background: #fef9c3; color: #a16207; }
.lvl-4 { background: #d1fae5; color: #047857; }
.lvl-5 { background: #c7e6ff; color: #1e40af; }

.verdict-card {
  border-radius: 1rem;
  padding: 1.25rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.verdict-lulus { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.verdict-pertimbangan { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.verdict-tidak { background: linear-gradient(135deg, #fecaca, #fca5a5); color: #991b1b; }

/* Print styles */
@media print {
  body { background: white !important; font-size: 11pt; }
  header, footer { display: none !important; }
  main { padding: 0 !important; }
  .print\:hidden { display: none !important; }
  .psk-table thead th { background: #e0e7ff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .verdict-card, .level-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}