.tls-form { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; } .tls-input { background-color: #202020; color: #E0E0E0; border: 1px solid #3a3a3a; border-radius: 6px; padding: 10px 12px; font-family: inherit; font-size: inherit; } .tls-input:focus { outline: none; border-color: #00C0FF; } .tls-submit { align-self: flex-start; background-color: #202020; color: #E0E0E0; border: 1px solid #3a3a3a; border-radius: 6px; padding: 10px 20px; cursor: pointer; font-family: inherit; } .tls-submit:hover { border-color: #00C878; color: #00C878; } .tls-progress-track { height: 6px; background-color: #202020; border-radius: 3px; overflow: hidden; margin: 12px 0; } .tls-progress-bar { height: 100%; background-color: #00C878; transition: width 0.3s ease; } .tls-log { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; font-family: "MesloLGS NF", "Menlo", "Consolas", monospace; font-size: 10pt; } .tls-log-row { padding: 2px 0; } .tls-summary { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .tls-rank-badge { width: 120px; height: 120px; border-radius: 50%; background-color: #202020; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid currentColor; flex-shrink: 0; } .tls-rank-letters { font-size: 48pt; font-weight: 700; line-height: 1; } .tls-rank-score { font-size: 10pt; color: #939393; margin-top: 4px; } .tls-summary-meta { min-width: 200px; } .tls-target { margin: 0 0 8px 0; word-break: break-all; } .tls-finding { margin: 4px 0; line-height: 1.5; } .tls-table { width: 100%; border-collapse: collapse; margin-top: 8px; } .tls-table th, .tls-table td { border-bottom: 1px solid #3a3a3a; padding: 6px 8px; text-align: left; } .tls-table th { color: #939393; font-weight: 400; font-size: 10pt; } .tls-raw { max-height: 400px; overflow: auto; background-color: #202020; padding: 12px; border-radius: 6px; font-size: 10pt; }