@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --primary-color: #0d9488; --primary-hover: #14b8a6; --secondary-color: #f97316; --bg-color: #f8fafc; --surface-color: #ffffff; --text-dark: #1e293b; --text-light: #475569; --border-color: #e2e8f0; --radius-md: 0.5rem; --radius-sm: 0.375rem; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } body { background-color: var(--bg-color); font-family: 'Inter', sans-serif; color: var(--text-light); } .navbar-brand { font-weight: 700; color: var(--text-dark); } .scan-section { background-color: var(--surface-color); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 2rem; } .form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border-color); } .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.25); } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); border-radius: var(--radius-sm); padding: 0.75rem 1.5rem; font-weight: 600; } .btn-primary:hover, .btn-primary:focus { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:disabled { background-color: #94a3b8; border-color: #94a3b8; } .results-section { display: none; } .risk-meter { width: 150px; height: 150px; } .badge-severity { font-size: 0.8rem; font-weight: 600; padding: 0.4em 0.8em; border-radius: var(--radius-sm); } .badge-critical { background-color: #ef4444; color: white; } .badge-high { background-color: #f97316; color: white; } .badge-medium { background-color: #facc15; color: var(--text-dark); } .badge-low { background-color: #22c55e; color: white; } .issue-card { border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 1rem; } .issue-card .card-body { padding: 1.5rem; } .issue-card h5 { color: var(--text-dark); font-weight: 600; } .fix-code { background-color: #f1f5f9; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 1rem; font-family: monospace; white-space: pre-wrap; word-break: break-all; } #loader { display: none; } /* Spinner animation */ .spinner-border { width: 3rem; height: 3rem; color: var(--primary-color); }