body { font-family: -apple-system, sans-serif; max-width: 900px; margin: 40px auto; padding: 0 20px; background: #0f1115; color: #e6e6e6; }
h1 { font-size: 1.4rem; }
.lead { color: #888; font-size: 0.9rem; }
nav { margin-bottom: 20px; }
nav a { color: #4a7fff; text-decoration: none; margin-right: 16px; }
form { display: grid; gap: 12px; background: #1a1d24; padding: 20px; border-radius: 8px; max-width: 500px; }
label { font-size: 0.85rem; color: #aaa; }
select, input { padding: 8px; border-radius: 4px; border: 1px solid #333; background: #0f1115; color: #eee; width: 100%; box-sizing: border-box; }
button { padding: 10px; background: #4a7fff; border: none; border-radius: 4px; color: white; font-weight: bold; cursor: pointer; }
.result { margin-top: 20px; padding: 20px; background: #1a1d24; border-radius: 8px; border-left: 4px solid #4a7fff; max-width: 500px; }
.result.warn { border-left-color: #ff9f4a; }
.metric { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #2a2d34; }
.metric b { color: #4affb0; }
.note { color: #ff9f4a; font-size: 0.85rem; margin-top: 8px; }