.header { padding:10px 15px; }
	.header h1{ font-size: 2.6rem; font-family:soraneubold; }
.form-group {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }	
.form-group label { display: block; margin-bottom: 8px;font-weight: 500; color: #CCC;}

.form-group input {
flex: 1;
            padding: 12px 16px;
            border: 2px solid #999;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s;
			background-color:#000;
			color:#FFF;
}
.form-group input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
 .form-group button {  padding: 12px 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s; } 
 .form-group button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); } .form-group button:active { transform: translateY(0); } 
 .error { background: #fee; color: #c33; padding: 15px; border-radius: 6px; margin-bottom: 20px; border-left: 4px solid #c33; } 
 .results { margin-top: 40px; } 
 .score-section { /* background: #f8f9fa;*/ padding: 0px; border-radius: 8px; margin-bottom: 0px; text-align: center; } 
 .score-circle { width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 48px; font-weight: bold; color: white; } 
 .score-circle.excellent { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } 
 .score-circle.good { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); } 
 .score-circle.fair { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } 
 .score-circle.poor { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } 
 .score-label { font-size: 20px; color: #CCC; font-weight: 600; margin-bottom: 10px; } 
 .score-description { color: #CCC;font-size: 14px; } .findings-section { margin-bottom: 30px; } 
 .findings-section h3 { font-size: 18px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #667eea; color: #333; } 
 .findings-section.critical h3 { border-bottom-color: #ef4444; color: #ef4444; } 
 .findings-section.major h3 { border-bottom-color: #f59e0b; color: #f59e0b; } 
 .findings-section.minor h3 { border-bottom-color: #3b82f6; color: #3b82f6; } 
 .findings-section.best_practices h3 { border-bottom-color: #10b981; color: #10b981; } 
 .finding { background: white; border-left: 4px solid; padding: 15px; margin-bottom: 12px; border-radius: 4px; } 
 .findings-section.critical .finding { border-left-color: #ef4444; background: #000;  } 
 .findings-section.major .finding { border-left-color: #f59e0b; background: #000; } 
 .findings-section.minor .finding { border-left-color: #3b82f6; background: #000; }
 .findings-section.best_practices .finding { border-left-color: #10b981; background: #000; } 
 .finding-title { font-weight: 500; margin-bottom: 5px; font-size: 16px; color:#FFF; } 
 .finding-description { color: #CCC; font-size: 13px; margin-bottom: 8px; } 
 .finding-recommendation {  padding: 0px; border-radius: 4px; font-size: 13px; color: #444; font-style: italic;  padding-left: 0px; } 
 .stats { /*background: #f8f9fa;*/ padding: 20px; border-radius: 8px; margin-bottom: 30px; }
 .stats h3 { font-size: 16px; margin-bottom: 15px; color: #CCC; }
 .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; } 
 .stat-card { background: #000; padding: 15px; border-radius: 6px; text-align: center; border: 1px solid #444; } 
 .stat-label { font-size: 12px; color: #CCC; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; font-weight: 600; }
 .stat-value { font-size: 28px; font-weight: bold; color: #FFF; }
 .no-findings { padding: 20px; text-align: center; color: #10b981; font-weight: 600; }
 .url-display { color: #666; font-size: 14px; margin-bottom: 20px; word-break: break-all; } 
 
 @media (max-width: 768px) { 
 .header { padding: 25px; } 
 .header h1 { font-size: 24px; }
 .content { padding: 25px; } 
 .score-circle { width: 120px; height: 120px; font-size: 36px; } 
 }