Improve logo, status badge, and risk colors

- New logo: gradient background, subtle circle, cleaner checkmark
- Status badge: emerald green for connected, amber for checking,
backdrop blur, slightly larger
- Risk colors: updated to use modern Tailwind-style palette that
matches the indigo/coral website scheme
- Brand mark: slightly larger (42px)

Co-authored-by: Codex <codex@openai.com>

static/styles.css

@@ -54,9 +54,9 @@ button { color: inherit; }
 }
 .language-option.active { background: var(--coral); color: #fff; }
 .urdu-option { font-family: var(--urdu-font); font-size: 13px; line-height: 1.6; }
-.brand { color: white; text-decoration: none; display: flex; align-items: center; gap: 12px; font-weight: 800; }
+.brand { color: white; text-decoration: none; display: flex; align-items: center; gap: 14px; font-weight: 800; }
 .brand-mark {
-  width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden;
+  width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden;
 }
 .brand-mark img {
   width: 100%; height: 100%; object-fit: contain; display: block;
@@ -64,11 +64,12 @@ button { color: inherit; }
 .brand-name { letter-spacing: -.02em; }
 .status-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
 .status-badge {
-  padding: 8px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
-  font-size: 12px; background: rgba(255,255,255,.08);
+  padding: 8px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
+  font-size: 12px; font-weight: 600; background: rgba(255,255,255,.06);
+  backdrop-filter: blur(8px); transition: all .2s;
 }
-.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #f2b84b; }
-.status-badge.connected .status-dot { background: #fb7185; box-shadow: 0 0 0 4px rgba(251,113,133,.15); }
+.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
+.status-badge.connected .status-dot { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
 
 main { overflow: hidden; }
 .hero {
@@ -241,11 +242,11 @@ textarea:disabled { opacity: .45; background: #f5f3ff; cursor: not-allowed; }
 .results { padding: 42px 0 50px; }
 .result-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 8px; }
 .risk-badge { padding: 13px 20px; border-radius: 999px; font-size: clamp(17px, 3vw, 25px); font-weight: 900; }
-.risk-looks-normal { background: #dff6e8; color: #12613a; }
-.risk-verify-first { background: #fff1c9; color: #825b00; }
-.risk-suspicious { background: #ffe0bd; color: #934500; }
-.risk-likely-scam { background: #ffe0df; color: #9b2924; }
-.risk-inappropriate { background: #ffe0df; color: #9b2924; }
+.risk-looks-normal { background: #d1fae5; color: #065f46; }
+.risk-verify-first { background: #fef3c7; color: #92400e; }
+.risk-suspicious { background: #fed7aa; color: #9a3412; }
+.risk-likely-scam { background: #ffe4e6; color: #9f1239; }
+.risk-inappropriate { background: #e0e7ff; color: #3730a3; }
 .result-source { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
 .result-source.cached-result {
   display: inline-flex; width: fit-content; padding: 6px 10px; border-radius: 999px;