/* =============================================
   RESUME ANALYZER — SaaS UI  |  style.css
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Variables ---------- */
:root {
  --red:     #DC2626;
  --red-d:   #B91C1C;
  --red-bg:  #FEF2F2;
  --red-br:  #FECACA;
  --green:   #16A34A;
  --green-bg:#F0FDF4;
  --green-br:#DCFCE7;
  --orange:  #D97706;
  --org-bg:  #FFFBEB;
  --org-br:  #FDE68A;
  --ink:     #111827;
  --ink2:    #374151;
  --muted:   #6B7280;
  --border:  #E5E7EB;
  --track:   #F3F4F6;
  --white:   #FFFFFF;
  --page-bg: #F5F6FA;
  --shadow:  0 1px 4px rgba(0,0,0,.08);
  --shadow-h:0 10px 32px rgba(0,0,0,.10);
  --r:       16px;
  --tr:      all .28s cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
#hc-resume-analyzer {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
#hc-resume-analyzer button { font-family: inherit; cursor: pointer; }
#hc-resume-analyzer select, #hc-resume-analyzer input { font-family: inherit; }
#hc-resume-analyzer ul { list-style: none; }

/* ---------- Page Layout ---------- */
#hc-resume-analyzer .page {
  padding: 40px 20px 60px;
  background: var(--page-bg);
  min-height: 60vh;
}
#hc-resume-analyzer .container {
  max-width: 1060px;
  margin: 0 auto;
}

/* =============================================
   UPLOAD STEP
   ============================================= */
#hc-resume-analyzer .upload-card {
  max-width: 620px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 40px;
  box-shadow: var(--shadow);
  text-align: center;
}
#hc-resume-analyzer .badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: #FEF2F2;
  color: var(--red);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
#hc-resume-analyzer .upload-card h1 {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 8px;
}
#hc-resume-analyzer .upload-card .sub {
  color: var(--muted);
  font-size: .95rem;
  margin-bottom: 24px;
}
#hc-resume-analyzer .drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--r);
  padding: 44px 24px;
  background: #FAFBFC;
  transition: var(--tr);
  cursor: pointer;
  margin-bottom: 20px;
}
#hc-resume-analyzer .drop-zone:hover,
#hc-resume-analyzer .drop-zone.over {
  border-color: var(--red);
  background: #FFF5F5;
}
#hc-resume-analyzer .dz-icon { color: var(--muted); margin-bottom: 14px; }
#hc-resume-analyzer .drop-zone h3 { font-size: 1rem; font-weight: 600; color: var(--ink2); margin-bottom: 6px; }
#hc-resume-analyzer .drop-zone p  { font-size: .85rem; color: var(--muted); margin-bottom: 18px; }

#hc-resume-analyzer .file-chip-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
#hc-resume-analyzer .file-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; background: var(--track); border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: var(--ink2);
  box-shadow: var(--shadow); max-width: 320px;
}
#hc-resume-analyzer .file-chip svg { color: var(--muted); flex-shrink: 0; }
#hc-resume-analyzer .file-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hc-resume-analyzer .rm-btn {
  background: none; border: none; color: var(--muted);
  font-size: 1.25rem; line-height: 1; padding: 0 2px;
  transition: color .2s; flex-shrink: 0;
}
#hc-resume-analyzer .rm-btn:hover { color: var(--red); }

#hc-resume-analyzer .form-group { text-align: left; margin-bottom: 22px; }
#hc-resume-analyzer .form-group label {
  display: block; font-size: .85rem; font-weight: 600;
  color: var(--ink2); margin-bottom: 8px;
}
#hc-resume-analyzer .custom-select {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: .95rem; color: var(--ink);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none; transition: var(--tr);
}
#hc-resume-analyzer .custom-select:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(220,38,38,.14);
}

/* Buttons */
#hc-resume-analyzer .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 10px; font-weight: 600;
  transition: var(--tr); white-space: nowrap;
}
#hc-resume-analyzer .btn-primary {
  background: var(--red); color: var(--white);
  padding: 12px 24px; font-size: .95rem;
}
#hc-resume-analyzer .btn-primary:hover:not(:disabled) {
  background: var(--red-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(220,38,38,.28);
}
#hc-resume-analyzer .btn-primary:active:not(:disabled) { transform: scale(.97); }
#hc-resume-analyzer .btn-primary:disabled {
  background: #E5E7EB; color: #9CA3AF; cursor: not-allowed;
}
#hc-resume-analyzer .btn-outline-red {
  background: var(--white); color: var(--red);
  border: 1.5px solid var(--red); padding: 9px 18px; font-size: .85rem;
}
#hc-resume-analyzer .btn-outline-red:hover {
  background: var(--red); color: var(--white);
}
#hc-resume-analyzer .btn-block { width: 100%; padding: 15px; font-size: 1rem; }

/* =============================================
   SCANNING STEP
   ============================================= */
#hc-resume-analyzer .scan-card {
  max-width: 560px; margin: 0 auto;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 44px 40px;
  box-shadow: var(--shadow); text-align: center;
}
#hc-resume-analyzer .pulse-wrap {
  width: 72px; height: 72px; border-radius: 50%;
  background: #FEF2F2; color: var(--red);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  animation: hc-pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes hc-pulse {
  0%   { transform: scale(.96); box-shadow: 0 0 0 0 rgba(220,38,38,.35); }
  70%  { transform: scale(1);   box-shadow: 0 0 0 18px rgba(220,38,38,0); }
  100% { transform: scale(.96); box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
#hc-resume-analyzer .scan-card h2  { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
#hc-resume-analyzer .scan-card > p { font-size: .9rem; color: var(--muted); margin-bottom: 28px; }

#hc-resume-analyzer .step-list { text-align: left; margin-bottom: 28px; display: flex; flex-direction: column; gap: 2px; }
#hc-resume-analyzer .step-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 10px;
  font-size: .9rem; font-weight: 500; color: var(--muted);
  transition: var(--tr);
}
#hc-resume-analyzer .step-item .step-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; transition: var(--tr);
}
#hc-resume-analyzer .step-item.active { background: #FEF2F2; color: var(--red); font-weight: 600; }
#hc-resume-analyzer .step-item.active .step-dot { border-color: var(--red); background: var(--red); color: var(--white); }
#hc-resume-analyzer .step-item.done { color: var(--green); }
#hc-resume-analyzer .step-item.done .step-dot { border-color: var(--green); background: var(--green-bg); color: var(--green); }

#hc-resume-analyzer .progress-row { display: flex; align-items: center; gap: 14px; }
#hc-resume-analyzer .progress-track { flex: 1; height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; }
#hc-resume-analyzer .progress-fill { height: 100%; width: 0; background: var(--red); border-radius: 4px; transition: width .1s linear; }
#hc-resume-analyzer .progress-pct { font-size: .95rem; font-weight: 700; color: var(--red); min-width: 44px; text-align: right; }

/* =============================================
   DASHBOARD
   ============================================= */
#hc-resume-analyzer .dashboard-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
#hc-resume-analyzer .dashboard-header h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.025em; }
#hc-resume-analyzer .dashboard-header p  { font-size: .85rem; color: var(--muted); margin-top: 4px; }

#hc-resume-analyzer .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
#hc-resume-analyzer .col-2 { grid-column: span 2; }
#hc-resume-analyzer .col-3 { grid-column: span 3; }

#hc-resume-analyzer .card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px;
  box-shadow: var(--shadow); transition: var(--tr);
}
#hc-resume-analyzer .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }

#hc-resume-analyzer .card-title {
  display: flex; align-items: center; gap: 9px;
  font-size: .9rem; font-weight: 700; color: var(--ink);
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
#hc-resume-analyzer .card-icon { color: var(--red); flex-shrink: 0; }

/* Score Gauge */
#hc-resume-analyzer .gauge-wrap { text-align: center; }
#hc-resume-analyzer .gauge-svg-box { width: 150px; margin: 0 auto 14px; }
#hc-resume-analyzer .gauge-svg { width:100%; height:100%; transform:rotate(-90deg); display:block; }
#hc-resume-analyzer .g-bg { fill:none; stroke:var(--track); stroke-width:9; }
#hc-resume-analyzer .g-fill {
  fill:none; stroke:var(--red); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:282.74; stroke-dashoffset:282.74;
  transition: stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
}
#hc-resume-analyzer .g-text {
  fill:var(--ink); font-size:18px; font-weight:800;
  text-anchor:middle; dominant-baseline:middle;
  font-family:'Inter',sans-serif;
  transform:rotate(90deg); transform-origin:60px 60px;
}
#hc-resume-analyzer .grade {
  display:inline-block; padding:5px 18px; border-radius:999px;
  font-weight:700; font-size:.82rem;
  background:var(--track); color:var(--muted);
}
#hc-resume-analyzer .grade-ex { background:var(--green-bg); color:var(--green); border:1px solid var(--green-br); }
#hc-resume-analyzer .grade-gd { background:var(--org-bg);   color:var(--orange); border:1px solid var(--org-br); }
#hc-resume-analyzer .grade-pr { background:var(--red-bg);   color:var(--red);    border:1px solid var(--red-br); }

#hc-resume-analyzer .km-box { background:var(--track); border-radius:10px; padding:14px; margin-top:16px; }
#hc-resume-analyzer .km-row { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; font-weight:500; margin-bottom:8px; }
#hc-resume-analyzer .km-row span:last-child { font-weight:700; }
#hc-resume-analyzer .mini-track { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
#hc-resume-analyzer .mini-bar   { height:100%; width:0; background:var(--red); border-radius:3px; transition:width 1s ease .4s; }

/* Structure */
#hc-resume-analyzer .struct-list { display:flex; flex-direction:column; gap:9px; }
#hc-resume-analyzer .struct-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border-radius:10px;
  background:#F9FAFB; border:1px solid var(--border);
  font-size:.85rem; font-weight:600; color:var(--muted); transition:var(--tr);
}
#hc-resume-analyzer .struct-item.found { background:var(--green-bg); color:#166534; border-color:var(--green-br); }
#hc-resume-analyzer .struct-item .si-icon { font-size:.9rem; }

/* Competency */
#hc-resume-analyzer .comp-list { display:flex; flex-direction:column; gap:18px; }
#hc-resume-analyzer .comp-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
#hc-resume-analyzer .comp-label { font-size:.85rem; font-weight:600; color:var(--ink2); }
#hc-resume-analyzer .comp-value { font-size:.85rem; font-weight:700; color:var(--red); }
#hc-resume-analyzer .comp-track { height:10px; background:var(--track); border-radius:5px; overflow:hidden; }
#hc-resume-analyzer .comp-bar   { height:100%; width:0; background:var(--red); border-radius:5px; transition:width 1.2s cubic-bezier(.4,0,.2,1) .3s; }

/* Keywords */
#hc-resume-analyzer .kw-layout { display:flex; flex-direction:column; gap:16px; }
#hc-resume-analyzer .kw-box { border-radius:12px; padding:16px 18px; }
#hc-resume-analyzer .kw-box.gaps    { background:var(--red-bg);   border:1px solid var(--red-br); }
#hc-resume-analyzer .kw-box.matched { background:var(--green-bg); border:1px solid var(--green-br); }
#hc-resume-analyzer .kw-box.other   { background:var(--org-bg);   border:1px solid var(--org-br); }
#hc-resume-analyzer .kw-split { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#hc-resume-analyzer .kw-label { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:10px; }
#hc-resume-analyzer .kw-label.red    { color:var(--red); }
#hc-resume-analyzer .kw-label.green  { color:var(--green); }
#hc-resume-analyzer .kw-label.orange { color:var(--orange); }

#hc-resume-analyzer .pill-box { display:flex; flex-wrap:wrap; gap:7px; min-height:30px; align-content:flex-start; }
#hc-resume-analyzer .pill {
  display:inline-flex; align-items:center;
  padding:5px 12px; border-radius:8px; font-size:.78rem; font-weight:600;
  white-space:nowrap; box-shadow:var(--shadow); transition:transform .18s;
  border:1px solid transparent;
}
#hc-resume-analyzer .pill:hover { transform:scale(1.05); }
#hc-resume-analyzer .pill-red   { background:var(--red-bg);   color:var(--red);    border-color:var(--red-br); }
#hc-resume-analyzer .pill-green { background:var(--green-bg); color:var(--green);  border-color:var(--green-br); }
#hc-resume-analyzer .pill-org   { background:var(--org-bg);   color:var(--orange); border-color:var(--org-br); }

/* Strengths */
#hc-resume-analyzer .strength-list { display:flex; flex-direction:column; gap:9px; }
#hc-resume-analyzer .strength-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px; border-radius:10px;
  background:#F9FAFB; border-left:3px solid var(--green);
  font-size:.85rem; font-weight:500; color:var(--ink2); line-height:1.5;
}
#hc-resume-analyzer .strength-item::before { content:'✓'; color:var(--green); font-weight:800; flex-shrink:0; }

/* Tips */
#hc-resume-analyzer .tips-list { display:flex; flex-direction:column; gap:10px; }
#hc-resume-analyzer .tip-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 15px; border-radius:10px;
  background:#F9FAFB; border:1px solid var(--border);
  transition:var(--tr);
}
#hc-resume-analyzer .tip-item:hover { background:var(--white); border-color:var(--red); box-shadow:var(--shadow); }
#hc-resume-analyzer .tip-icon { font-size:1.1rem; flex-shrink:0; }
#hc-resume-analyzer .tip-text { font-size:.85rem; font-weight:500; color:var(--ink2); line-height:1.5; }

/* Utilities */
#hc-resume-analyzer .hidden { display:none !important; }
#hc-resume-analyzer .fade-in { animation: hc-fadeIn .5s cubic-bezier(.4,0,.2,1) both; }
@keyframes hc-fadeIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
#hc-resume-analyzer .fade-out { opacity:0; transform:scale(.98); transition:opacity .3s ease, transform .3s ease; }

/* Responsive */
@media (max-width: 860px) {
  #hc-resume-analyzer .grid { grid-template-columns:1fr; }
  #hc-resume-analyzer .col-2, #hc-resume-analyzer .col-3 { grid-column:auto; }
  #hc-resume-analyzer .kw-split { grid-template-columns:1fr; }
}
@media (max-width: 500px) {
  #hc-resume-analyzer .upload-card,
  #hc-resume-analyzer .scan-card { padding:28px 20px; }
  #hc-resume-analyzer .upload-card h1 { font-size:1.5rem; }
}