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

/* ── Design Tokens (Linear-inspired) ───────────────────────────────────── */
:root{
  --bg:#010102;
  --surface:#0a0a0f;
  --surface-hover:#11111a;
  --border:#1a1a24;
  --border-soft:#14141e;
  --fg:#e4e4e7;
  --muted:#71717a;
  --accent:#5e6ad2;
  --accent-hover:#7c7fdd;
  --accent-dim:rgba(94,106,210,.15);
  --green:#4ade80;
  --red:#f87171;
  --yellow:#fbbf24;
  --orange:#fb923c;
  --radius:8px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'SF Mono',ui-monospace,'Cascadia Code','Fira Code',monospace;
}

html{background:var(--bg);color:var(--fg);font:400 14px/1.6 var(--font)}
body{min-height:100vh;overflow-x:hidden}
::selection{background:var(--accent-dim)}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ── Shell Layout ───────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar{
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  gap:20px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}

.brand{display:flex;gap:10px;align-items:center;padding:0 4px}
.brand-mark{
  width:28px;height:28px;
  background:var(--accent);
  border-radius:6px;
  flex-shrink:0;
}
.brand-title{font-weight:600;font-size:13px;letter-spacing:-.01em;color:var(--fg)}
.brand-subtitle{font-size:11px;color:var(--muted)}

.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;
  border-radius:var(--radius);
  background:transparent;border:none;
  color:var(--muted);
  font:500 13px var(--font);
  cursor:pointer;
  transition:all .12s;
  text-align:left;
  width:100%;
}
.nav-item:hover{background:var(--surface-hover);color:var(--fg)}
.nav-item.active{background:var(--accent-dim);color:var(--accent-hover)}
.nav-item svg{flex-shrink:0;opacity:.7}

.side-section{display:flex;flex-direction:column;gap:8px}
.side-section.compact{gap:6px}

.label{
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);
}

.dropzone{
  border:1px dashed var(--border);
  border-radius:var(--radius);
  padding:14px;
  cursor:pointer;text-align:center;
  font-size:12px;color:var(--muted);
  display:block;
  transition:border-color .12s;
}
.dropzone:hover{border-color:var(--accent)}
.dropzone.dragover{border-color:var(--accent);background:var(--accent-dim)}

textarea{
  resize:vertical;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--fg);
  padding:8px 10px;
  font:12px/1.5 var(--mono);
  width:100%;
}
textarea:focus{outline:none;border-color:var(--accent)}

.kv{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:2px 4px}
.kv strong{color:var(--fg);font-weight:500;font-size:12px}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 14px;
  border-radius:var(--radius);
  font:500 13px var(--font);
  border:1px solid transparent;
  cursor:pointer;
  transition:all .12s;
  white-space:nowrap;
}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover:not(:disabled){background:var(--accent-hover)}
.btn.secondary{border-color:var(--border);background:var(--surface);color:var(--fg)}
.btn.secondary:hover:not(:disabled){background:var(--surface-hover);border-color:var(--muted)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover:not(:disabled){color:var(--fg)}
.btn.accent{background:#dc2626;color:#fff}
.btn.accent:hover:not(:disabled){background:#ef4444}
.btn.full{width:100%}
.btn.sm{padding:4px 10px;font-size:12px}

/* ── Main ───────────────────────────────────────────────────────────────── */
.main{padding:24px 32px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;min-height:100vh}

.panel{display:none}
.panel.active{display:flex;flex-direction:column;gap:16px}

.panel-head{
  display:flex;justify-content:space-between;
  align-items:flex-start;gap:16px;
  margin-bottom:4px;
  flex-wrap:wrap;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}
.section-title{font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--fg)}
.muted{color:var(--muted);font-size:13px}

/* ── Metrics ───────────────────────────────────────────────────────────── */
.metrics-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
}
.metric-card{
  display:flex;flex-direction:column;gap:4px;
  padding:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.metric-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.metric-value{font:600 22px/1 var(--font);color:var(--fg)}

/* ── Status card ────────────────────────────────────────────────────────── */
.status-card{overflow:hidden}
.status-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.progress-number{font:600 18px/1 var(--mono);color:var(--fg)}
.bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.bar div{
  height:100%;width:0;
  background:var(--accent);
  border-radius:2px;
  transition:width .4s ease;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.search,.text-field{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--fg);
  padding:8px 12px;
  font:13px/1.5 var(--font);
  width:100%;
}
.search:focus,.text-field:focus{outline:none;border-color:var(--accent)}
.search{max-width:320px}

.text-area{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--fg);
  padding:8px 12px;
  font:12px/1.5 var(--mono);
  width:100%;
  resize:vertical;
}
.text-area:focus{outline:none;border-color:var(--accent)}

.select-field{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--fg);
  padding:8px 12px;
  font:13px var(--font);
  cursor:pointer;
  width:100%;
}
.select-field:focus{outline:none;border-color:var(--accent)}

.checkbox-row{display:flex;gap:18px;font-size:13px;color:var(--muted)}
.checkbox-row label{display:flex;align-items:center;gap:6px;cursor:pointer}
.checkbox-row input[type=checkbox]{accent-color:var(--accent)}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.form-full{grid-column:1/-1}

/* ── Jobs List ─────────────────────────────────────────────────────────── */
.list{display:grid;gap:8px}
.list.empty{color:var(--muted);padding:24px;border:1px dashed var(--border);border-radius:var(--radius);text-align:center}

.job-card{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  padding:14px;
  display:grid;gap:6px;
  transition:border-color .12s;
}
.job-card:hover{border-color:var(--muted)}
.job-top{display:flex;justify-content:space-between;gap:14px;align-items:start}
.job-title{font-weight:500;font-size:14px;letter-spacing:-.01em}
.job-meta{color:var(--muted);font-size:12px}
.job-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

.badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:500;
  padding:2px 8px;
  border-radius:4px;
  text-transform:uppercase;letter-spacing:.03em;
}
.badge-score{
  background:var(--accent-dim);
  color:var(--accent-hover);
  font-family:var(--mono);
}
.badge-portal{
  background:var(--surface-hover);
  color:var(--muted);
  border:1px solid var(--border);
}
.badge-green{background:rgba(74,222,128,.12);color:var(--green)}
.badge-yellow{background:rgba(251,191,36,.12);color:var(--yellow)}
.badge-red{background:rgba(248,113,113,.12);color:var(--red)}

.score{font:600 24px/1 var(--mono);color:var(--green)}
.score.medium{color:var(--yellow)}
.score.low{color:var(--red)}

a{color:var(--accent-hover);text-decoration:none;font-size:12px}
a:hover{text-decoration:underline}

/* ── Code blocks ───────────────────────────────────────────────────────── */
.code{
  margin:8px 0 0;
  padding:14px;
  min-height:100px;max-height:400px;
  overflow:auto;
  white-space:pre-wrap;
  color:var(--muted);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font:11px/1.5 var(--mono);
}

/* ── Apply tab ──────────────────────────────────────────────────────────── */
.apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.apply-left{display:flex;flex-direction:column;gap:6px}
.apply-right{display:flex;flex-direction:column;gap:12px}
.apply-actions{display:flex;flex-direction:column;gap:8px}
.apply-result{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  min-height:120px;
  font-size:13px;
}
.apply-result .success{color:var(--green);margin-bottom:8px;font-weight:500}
.apply-result .error{color:var(--red);margin-bottom:8px;font-weight:500}
.apply-result pre{margin-top:8px}

/* ── Answer Bank ────────────────────────────────────────────────────────── */
.answer-bank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.kv-list{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.kv-row{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:8px;align-items:center;
  padding:4px 0;
  border-bottom:1px solid var(--border-soft);
}
.kv-row:last-child{border-bottom:none}
.kv-row label{font-size:11px;color:var(--muted);font-weight:500;text-transform:lowercase}
.kv-row input{
  background:var(--bg);
  border:1px solid transparent;
  border-radius:4px;
  color:var(--fg);
  padding:4px 8px;
  font:12px var(--font);
  width:100%;
}
.kv-row input:hover{border-color:var(--border)}
.kv-row input:focus{outline:none;border-color:var(--accent)}

/* ── Tracker table ──────────────────────────────────────────────────────── */
.tracker-table-wrap{overflow-x:auto;margin-top:8px}
table.tracker-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.tracker-table th{
  text-align:left;
  font-weight:500;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.tracker-table td{
  padding:8px 10px;
  border-bottom:1px solid var(--border-soft);
  color:var(--fg);
}
.tracker-table tr:hover td{background:var(--surface-hover)}
.tracker-table .status-select{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--fg);
  padding:3px 6px;
  font:11px var(--font);
  cursor:pointer;
}
.status-dot{
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  margin-right:6px;
}
.status-dot.applied{background:var(--accent)}
.status-dot.interview{background:var(--yellow)}
.status-dot.offer{background:var(--green)}
.status-dot.rejected{background:var(--red)}
.status-dot.withdrawn{background:var(--muted)}
.status-dot.blocked{background:var(--muted)}
.status-dot.sent{background:var(--accent)}
.status-dot.replied{background:var(--green)}
.status-dot.exhausted{background:var(--muted)}
.status-dot.failed{background:var(--red)}
.status-dot.not_interested{background:var(--orange)}
.status-dot.bounced{background:var(--red)}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast-container{
  position:fixed;
  bottom:20px;right:20px;
  z-index:9999;
  display:flex;flex-direction:column;gap:8px;
}
.toast{
  padding:12px 16px;
  border-radius:var(--radius);
  font-size:13px;
  font-weight:500;
  max-width:380px;
  animation:slideIn .2s ease;
  display:flex;align-items:center;gap:8px;
}
.toast.success{background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.3);color:var(--green)}
.toast.error{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.3);color:var(--red)}
.toast.info{background:var(--surface);border:1px solid var(--border);color:var(--fg)}
@keyframes slideIn{from{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{to{transform:translateX(400px);opacity:0}}
.toast.removing{animation:slideOut .2s ease forwards}

/* ── Utilities ──────────────────────────────────────────────────────────── */
.hidden{display:none!important}
.control-buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.text-center{text-align:center}

/* ── Monitor panel ──────────────────────────────────────────────────────── */
#panel-monitor .metrics-grid .metric-value{font-size:18px}
#panel-monitor .tracker-table td{font-size:12px}
#panel-monitor .tracker-table th{font-size:11px}
.mn-status-on{color:var(--green)!important}
.mn-status-off{color:var(--muted)!important}

/* ── Interview Prep panel ──────────────────────────────────────────────────── */
.prep-question-list{display:grid;gap:10px;margin-top:12px}
.prep-question-card{
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:var(--radius);
  padding:12px 14px;
  display:flex;flex-direction:column;gap:6px;
}
.prep-question-header{display:flex;gap:6px;align-items:center}
.prep-question-text{font-size:13px;font-weight:500;color:var(--fg);line-height:1.5}
.prep-answer-text{font-size:12px;color:var(--muted);line-height:1.5}
.prep-star-hint{font-size:12px;color:var(--accent-hover);line-height:1.5;font-style:italic}

.prep-gap-list{display:grid;gap:8px;margin-top:12px}
.prep-gap-card{
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:var(--radius);
  padding:10px 14px;
}
.prep-gap-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.prep-gap-skill{font-weight:500;font-size:13px;color:var(--fg)}
.prep-gap-rec{font-size:12px;color:var(--muted);line-height:1.5}

.prep-plan-timeline{display:grid;gap:0;margin-top:12px}
.prep-plan-day{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:14px;
  position:relative;
  padding-bottom:20px;
}
.prep-plan-day.last{padding-bottom:0}
.prep-plan-day:not(.last)::before{
  content:'';
  position:absolute;
  left:17px;top:36px;
  width:2px;bottom:0;
  background:var(--border);
}
.prep-plan-marker{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--accent-dim);
  border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font:600 14px/1 var(--mono);
  color:var(--accent-hover);
  z-index:1;
}
.prep-plan-content{padding-top:4px}
.prep-plan-day-label{font-weight:600;font-size:13px;color:var(--fg);margin-bottom:6px}
.prep-plan-tasks{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:4px}
.prep-plan-tasks li{
  font-size:12px;color:var(--muted);
  padding-left:16px;position:relative;
  line-height:1.5;
}
.prep-plan-tasks li::before{
  content:'◦';
  position:absolute;left:2px;
  color:var(--accent);
}

.prep-tips-list{display:grid;gap:8px;margin-top:12px}
.prep-tip-item{
  display:flex;gap:10px;align-items:flex-start;
  padding:8px 12px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  background:var(--bg);
}
.prep-tip-number{
  flex-shrink:0;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--accent-dim);
  color:var(--accent-hover);
  font:600 11px/22px var(--mono);
  text-align:center;
}
.prep-tip-text{font-size:12px;color:var(--fg);line-height:1.5}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:960px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .main{padding:16px}
  .apply-grid{grid-template-columns:1fr}
  .answer-bank-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .search{max-width:none}
  .panel-head{flex-direction:column}
}

/* ── ATS Parseability Checker ────────────────────────────────────────────── */
.ats-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.ats-check-left,.ats-check-right{min-width:0}
.ats-score-display{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  padding:14px 16px;
}
.ats-fixable-list{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  padding:10px 14px;
}
.ats-check-results{font-size:13px;line-height:1.6}
.ats-category{margin-bottom:16px}
.ats-check-item{display:flex;align-items:flex-start;gap:8px;padding:3px 0;font-size:13px}
.ats-fixable-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border-soft)}
@media(max-width:960px){
  .ats-check-grid{grid-template-columns:1fr}
}

/* ── Diagnostics ────────────────────────────────────────────────────────── */
.diag-split{display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.diag-stat{display:flex;flex-direction:column;align-items:center;padding:8px 16px;background:var(--surface-hover);border:1px solid var(--border);border-radius:var(--radius)}
.diag-stat.success{border-color:rgba(74,222,128,.3)}
.diag-stat.failed{border-color:rgba(248,113,113,.3)}
.diag-num{font-size:20px;font-weight:700}
.diag-stat.success .diag-num{color:var(--green)}
.diag-stat.failed .diag-num{color:var(--red)}
.diag-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.diag-sites-list{display:flex;flex-direction:column;gap:4px}
.diag-site-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;cursor:default;transition:background .15s}
.diag-site-row.site-ok{background:rgba(74,222,128,.05)}
.diag-site-row.site-fail{background:rgba(248,113,113,.05);cursor:pointer}
.diag-site-row.site-fail:hover{background:rgba(248,113,113,.1)}
.diag-site-icon{display:flex;align-items:center;flex-shrink:0}
.site-ok .diag-site-icon{color:var(--green)}
.site-fail .diag-site-icon{color:var(--red)}
.diag-site-name{font-weight:500;font-size:13px;flex:1}
.diag-site-jobs{font-size:12px;color:var(--muted)}
.diag-site-jobs.failed{color:var(--red)}
.diag-error-detail{padding:8px 12px 8px 32px;font-size:12px;color:var(--red);background:rgba(248,113,113,.05);border-radius:6px;margin-top:2px;font-family:var(--mono);word-break:break-word}

/* ── User Switcher ──────────────────────────────────────────────────────── */
.user-switcher{position:relative}
.user-switcher-btn{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 12px;
  background:var(--surface-hover);
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;color:var(--fg);
  transition:border-color .15s;
}
.user-switcher-btn:hover{border-color:var(--accent)}
.user-switcher-info{flex:1;text-align:left}
.user-switcher-name{font-weight:600;font-size:13px}
.user-switcher-role{font-size:11px;color:var(--muted)}
.user-avatar{
  width:32px;height:32px;
  background:var(--accent);
  color:#fff;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;flex-shrink:0;
}
.user-avatar.sm{width:28px;height:28px;font-size:11px}
.user-switcher-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  z-index:100;overflow:hidden;
}
.user-switcher-dropdown.hidden{display:none}
.user-option{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;cursor:pointer;
  transition:background .15s;
}
.user-option:hover{background:var(--surface-hover)}
.user-option.active{background:var(--accent-dim)}
.user-option-name{font-weight:500;font-size:13px}
.user-option-role{font-size:11px;color:var(--muted)}

/* ── Gaps Tab ──────────────────────────────────────────────────────────── */
.gaps-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.gap-card{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  background:var(--surface-hover);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:border-color .15s;
}
.gap-card.severity-critical{border-left:3px solid var(--red)}
.gap-card.severity-moderate{border-left:3px solid var(--orange)}
.gap-card.severity-minor{border-left:3px solid var(--yellow)}
.gap-skill{font-weight:500;font-size:13px;min-width:120px;text-transform:capitalize}
.gap-freq-bar{
  flex:1;height:6px;
  background:var(--border);
  border-radius:3px;overflow:hidden;
}
.gap-freq-fill{
  height:100%;border-radius:3px;
  transition:width .3s ease;
}
.gap-freq-fill.severity-critical{background:var(--red)}
.gap-freq-fill.severity-moderate{background:var(--orange)}
.gap-freq-fill.severity-minor{background:var(--yellow)}
.gap-freq-text{font-size:11px;color:var(--muted);min-width:60px;text-align:right}
.gap-badge{
  font-size:10px;font-weight:600;
  padding:2px 8px;border-radius:4px;
  text-transform:uppercase;letter-spacing:.05em;
}
.gap-badge.critical{background:rgba(248,113,113,.15);color:var(--red)}
.gap-badge.moderate{background:rgba(251,146,60,.15);color:var(--orange)}
.gap-badge.minor{background:rgba(251,191,36,.15);color:var(--yellow)}
.gap-category{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

.matching-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.matching-skill{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;
  background:rgba(74,222,128,.1);
  border:1px solid rgba(74,222,128,.2);
  border-radius:6px;
  font-size:12px;color:var(--green);
  text-transform:capitalize;
}
.matching-skill svg{width:12px;height:12px}