header {
     text-align: center;
     padding: 40px 20px;
     margin-bottom: 30px;
 }

 header h1 {
     font-size: 2.8rem;
     margin-bottom: 15px;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 header p {
     font-size: 1.2rem;
     color: var(--gray);
     max-width: 700px;
     margin: 0 auto;
 }

 .card {
     background: white;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     padding: 30px;
     margin-bottom: 30px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }

 .main-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
 }

 @media (max-width: 768px) {
     .main-content {
         grid-template-columns: 1fr;
     }
 }

 .upload-section h2,
 .results-section h2 {
     color: var(--dark);
     margin-bottom: 20px;
     padding-bottom: 10px;
     border-bottom: 2px solid #f0f0f0;
 }

 .upload-area {
     border: 3px dashed var(--primary);
     border-radius: 10px;
     padding: 40px 20px;
     text-align: center;
     cursor: pointer;
     transition: all 0.3s ease;
     margin-bottom: 25px;
     background-color: var(--light);
 }

 .upload-area:hover {
     background-color: #e8f0fe;
     border-color: var(--primary-dark);
 }

 .upload-area i {
     font-size: 60px;
     color: var(--primary);
     margin-bottom: 20px;
 }

 .upload-area h3 {
     color: var(--dark);
     margin-bottom: 10px;
 }

 .upload-area p {
     color: var(--gray);
     margin-bottom: 15px;
 }

 .file-types {
     font-size: 0.9rem;
     color: var(--gray);
 }

 .upload-btn {
     display: inline-block;
     background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     color: white;
     padding: 14px 30px;
     border-radius: 50px;
     cursor: pointer;
     font-weight: 600;
     transition: all 0.3s ease;
     margin-top: 15px;
     border: none;
     font-size: 1rem;
     box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
 }

 .upload-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4);
 }

 input[type="file"] {
     display: none;
 }

 .analysis-progress {
     text-align: center;
     padding: 30px;
     display: none;
 }

 .progress-bar {
     height: 8px;
     background-color: #e0e0e0;
     border-radius: 4px;
     margin: 20px 0;
     overflow: hidden;
 }

 .progress-fill {
     height: 100%;
     background: linear-gradient(90deg, var(--primary), var(--secondary));
     width: 0%;
     transition: width 0.5s ease;
 }

 .ai-thinking {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 20px 0;
     font-style: italic;
     color: var(--dark);
 }

 .ai-thinking span {
     animation: pulse 1.5s infinite;
     margin: 0 5px;
 }

 @keyframes pulse {
     0% {
         opacity: 0.3;
     }

     50% {
         opacity: 1;
     }

     100% {
         opacity: 0.3;
     }
 }

 .score-display {
     text-align: center;
     margin-bottom: 30px;
     padding: 20px;
 }

 .score-circle {
     width: 180px;
     height: 180px;
     border-radius: 50%;
     background: conic-gradient(var(--secondary) 0%, var(--warning) 70%, var(--danger) 100%);
     margin: 0 auto 25px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .score-inner {
     width: 150px;
     height: 150px;
     border-radius: 50%;
     background: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2.8rem;
     font-weight: bold;
     color: var(--dark);
 }

 .score-text {
     font-size: 1.3rem;
     color: var(--dark);
     font-weight: 600;
 }

 .score-breakdown {
     margin: 30px 0;
 }

 .breakdown-item {
     display: flex;
     justify-content: space-between;
     margin-bottom: 15px;
     padding-bottom: 15px;
     border-bottom: 1px solid #f0f0f0;
 }

 .breakdown-name {
     font-weight: 500;
     color: var(--dark);
 }

 .breakdown-score {
     font-weight: 600;
     color: var(--primary);
 }

 .suggestions h3 {
     margin-bottom: 20px;
     color: var(--dark);
     padding-bottom: 10px;
     border-bottom: 2px solid #f0f0f0;
 }

 .suggestion-item {
     background: #f8fafc;
     padding: 20px;
     border-radius: 10px;
     margin-bottom: 20px;
     border-left: 4px solid var(--primary);
     transition: all 0.3s ease;
 }

 .suggestion-item:hover {
     background: #e8f0fe;
     transform: translateX(5px);
 }

 .suggestion-item h4 {
     margin-bottom: 10px;
     color: var(--dark);
     display: flex;
     align-items: center;
 }

 .suggestion-item h4 i {
     margin-right: 10px;
     color: var(--primary);
 }

 .suggestion-item p {
     color: #555;
     font-size: 0.95rem;
 }

 .improvement-tips {
     margin-top: 30px;
     background: linear-gradient(135deg, #e8f0fe, #f0f7ff);
     padding: 25px;
     border-radius: 10px;
 }

 .improvement-tips h3 {
     color: var(--dark);
     margin-bottom: 15px;
     display: flex;
     align-items: center;
 }

 .improvement-tips h3 i {
     margin-right: 10px;
     color: var(--secondary);
 }

 .tips-list {
     list-style-type: none;
 }

 .tips-list li {
     margin-bottom: 12px;
     padding-left: 25px;
     position: relative;
     color: #555;
 }

 .tips-list li:before {
     content: "✓";
     position: absolute;
     left: 0;
     color: var(--secondary);
     font-weight: bold;
 }


 .file-info {
     margin-top: 15px;
     font-size: 0.9rem;
     color: var(--gray);
 }

 .uploaded-file {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 20px;
     padding: 15px;
     background: #e8f0fe;
     border-radius: 8px;
     display: none;
 }

 .uploaded-file i {
     font-size: 30px;
     color: var(--primary);
     margin-right: 15px;
 }

 .file-details {
     text-align: left;
 }

 .file-details .file-name {
     font-weight: 600;
     color: var(--dark);
 }

 .file-details .file-size {
     font-size: 0.8rem;
     color: var(--gray);
 }

 .ai-features {
     display: flex;
     justify-content: space-between;
     margin-top: 20px;
     flex-wrap: wrap;
 }

 .ai-feature {
     display: flex;
     align-items: center;
     background: #f0f7ff;
     padding: 10px 15px;
     border-radius: 50px;
     margin: 5px;
 }

 .ai-feature i {
     color: var(--primary);
     margin-right: 8px;
 }

 .keyword-analysis {
     margin-top: 20px;
     padding: 15px;
     background: #f8fafc;
     border-radius: 8px;
 }

 .keyword-tags {
     display: flex;
     flex-wrap: wrap;
     margin-top: 10px;
 }

 .keyword-tag {
     background: var(--primary);
     color: white;
     padding: 5px 10px;
     border-radius: 20px;
     font-size: 0.8rem;
     margin: 5px;
 }

 .missing-keyword-tag {
     background: var(--gray);
     color: white;
     padding: 5px 10px;
     border-radius: 20px;
     font-size: 0.8rem;
     margin: 5px;
     opacity: 0.7;
 }

 .ats-score {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 20px 0;
     padding: 15px;
     background: linear-gradient(135deg, #e8f0fe, #f0f7ff);
     border-radius: 8px;
 }

 .ats-score i {
     font-size: 24px;
     color: var(--primary);
     margin-right: 10px;
 }

 .strength-meter {
     height: 8px;
     background-color: #e0e0e0;
     border-radius: 4px;
     margin: 10px 0;
     overflow: hidden;
 }

 .strength-fill {
     height: 100%;
     background: linear-gradient(90deg, var(--danger), var(--warning), var(--secondary));
     width: 0%;
     transition: width 0.5s ease;
 }

 .api-section {
     margin-top: 20px;
     padding: 15px;
     background: #fff8e1;
     border-radius: 8px;
     border-left: 4px solid var(--warning);
 }

 .api-section h4 {
     margin-bottom: 10px;
     color: var(--dark);
     display: flex;
     align-items: center;
 }

 .api-section h4 i {
     margin-right: 10px;
     color: var(--warning);
 }

 .api-input {
     width: 100%;
     padding: 12px;
     border: 1px solid #ddd;
     border-radius: 4px;
     font-size: 0.9rem;
     margin-bottom: 10px;
 }

 .api-input:focus {
     outline: none;
     border-color: var(--primary);
 }

 .api-status {
     font-size: 0.8rem;
     color: var(--gray);
     margin-top: 5px;
 }

 .api-connected {
     color: var(--secondary);
 }

 .api-disconnected {
     color: var(--danger);
 }

 .api-demo-note {
     background: #e8f5e9;
     padding: 10px;
     border-radius: 4px;
     margin-top: 10px;
     font-size: 0.85rem;
     color: var(--dark);
 }

 .api-demo-note i {
     color: var(--secondary);
     margin-right: 5px;
 }