.scan-layout { max-width: 900px; margin: 0 auto; padding: var(--space-8) var(--container-padding); }

.scan-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-6); }
@media (max-width: 768px) { .scan-options { grid-template-columns: 1fr; } }

.scan-option-card {
  background: var(--color-bg-card);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-glass);
  transition: all var(--transition-fast);
}
.scan-option-card:hover { box-shadow: var(--shadow-md); }

.scan-option-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-2); }
.scan-option-desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-4); }

.upload-area {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-12); text-align: center;
  background: var(--color-bg-card);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  transition: all var(--transition-fast);
  cursor: pointer;
}
.upload-area:hover, .upload-area.drag-over { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.upload-icon { width: 56px; height: 56px; color: var(--color-text-tertiary); margin: 0 auto var(--space-4); }
.upload-area:hover .upload-icon, .upload-area.drag-over .upload-icon { color: var(--color-primary); }
.upload-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-2); }
.upload-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-2); }

.jd-input { margin-top: var(--space-4); }
.jd-input label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); margin-bottom: var(--space-2); }
.jd-input textarea {
  width: 100%; min-height: 120px; padding: var(--space-3); font-size: var(--font-size-sm);
  font-family: var(--font-body); line-height: var(--line-height-relaxed);
  background: var(--color-bg-glass); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  resize: vertical; transition: all var(--transition-fast);
}
.jd-input textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-subtle); }

.scan-results { margin-top: var(--space-8); }

.results-card {
  background: var(--color-bg-card);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
}

.score-ring { width: 140px; height: 140px; margin: 0 auto var(--space-4); position: relative; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring-bg { fill: none; stroke: rgba(67,97,238,0.10); stroke-width: 8; }
.score-ring-value { fill: none; stroke: url(#scoreGradient); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 314; transition: stroke-dashoffset 0.5s ease; }
.score-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-number { font-family: var(--font-heading); font-size: 2.25rem; font-weight: var(--font-weight-bold); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.score-label { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-top: var(--space-1); font-weight: var(--font-weight-medium); }

.breakdown-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
@media (max-width: 640px) { .breakdown-grid { grid-template-columns: 1fr; } }

.breakdown-item {
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: all var(--transition-fast);
}
.breakdown-item:hover { background: var(--color-bg-glass-hover); }
.breakdown-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.breakdown-item-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.breakdown-item-score { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.breakdown-bar { height: 6px; background: rgba(67,97,238,0.10); border-radius: var(--radius-full); overflow: hidden; }
.breakdown-bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); border-radius: var(--radius-full); transition: width 0.5s ease; }

.keywords-section, .suggestions-section { margin-top: var(--space-6); }
.section-card-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-4); color: var(--color-text); }

.keywords-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.keyword-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 14px; font-size: var(--font-size-sm); border-radius: var(--radius-full); font-weight: var(--font-weight-medium); }
.keyword-tag.missing { background: var(--color-error-light); color: var(--color-error); border: 1px solid rgba(239,68,68,0.15); }
.keyword-tag.matched { background: var(--color-success-light); color: var(--color-success); border: 1px solid rgba(16,185,129,0.15); }

.suggestion-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-sm); transition: background var(--transition-fast);
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--color-primary-subtle); border-radius: var(--radius-md); }
.suggestion-icon { width: 20px; height: 20px; color: var(--color-accent); margin-top: 2px; flex-shrink: 0; }

.rate-limit-info { text-align: center; font-size: var(--font-size-sm); color: var(--color-text-tertiary); margin-top: var(--space-4); padding: var(--space-3); background: var(--color-bg-glass); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }

.scan-history { margin-top: var(--space-6); }
.history-list { display: flex; flex-direction: column; gap: var(--space-3); }
.history-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
}
.history-item:hover { background: var(--color-bg-glass-hover); border-color: var(--color-border-dark); }
.history-score { font-family: var(--font-heading); font-weight: var(--font-weight-bold); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.history-date { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.history-resume-name { color: var(--color-text-secondary); }