* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: system-ui, sans-serif; background: #f4f7fa; color: #1a1a1a; line-height: 1.6; }
.container { max-width: 900px; margin: 2rem auto; padding: 2rem; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
h1 { text-align: center; color: #2c3e50; margin-bottom: 0.5rem; }
.subtitle { text-align: center; color: #7f8c8d; margin-bottom: 2rem; font-size: 1.1rem; }

.spinner { text-align: center; font-size: 1.2rem; color: #3498db; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity:0.6; } 50% { opacity:1; } }

.tech { background: #f8f9fa; padding: 1rem; margin: 1rem 0; border-radius: 8px; border-left: 4px solid #ddd; }
.tech h4 { margin: 0 0 0.5rem; color: #2c3e50; }
.status { float: right; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }
.status.old, .status.missing-apis, .status.used, .status.visited-before, .status.hsts-present, .status.accumulated { background: #e74c3c; color: white; }
.status.recent, .status.modern, .status.fresh, .status.default-set, .status.empty, .status.first-visit, .status.no-hsts, .status.fresh-pattern, .status.clean { background: #27ae60; color: white; }

.verdict-box { margin-top: 2rem; padding: 1.5rem; background: #ecf0f1; border-radius: 10px; text-align: center; }
.verdict-box h3 { color: #2c3e50; }
#final-result { font-size: 1.5rem; margin: 1rem 0; }
#reasons { text-align: left; margin: 1rem auto; max-width: 600px; }

.hidden { display: none; }

@media (max-width: 600px) {
  .container { margin: 1rem; padding: 1.5rem; }
  .status { float: none; display: inline-block; margin-top: 0.5rem; }
}