:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { margin: 0; background: #0b0c10; color: #e6e6e6; }
a { color: #7dd3fc; text-decoration: none; }
header { padding: 16px 20px; border-bottom: 1px solid #222; position: sticky; top: 0; background: #0b0c10; }
.container { max-width: 980px; margin: 0 auto; padding: 16px 20px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.card { border: 1px solid #222; border-radius: 12px; padding: 14px; background: #0f1117; }
.card + .card { margin-top: 12px; }
.badge { font-size: 12px; padding: 2px 8px; border: 1px solid #2a2a2a; border-radius: 999px; opacity: 0.9; }
.btn { background: #1f2937; color: #fff; border: 1px solid #2a2a2a; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.btn:hover { filter: brightness(1.1); }
.input, select, textarea { background: #0b0c10; color: #e6e6e6; border: 1px solid #2a2a2a; border-radius: 10px; padding: 10px; }
textarea { min-height: 110px; width: 100%; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px){ .grid { grid-template-columns: 1fr; } }
.small { font-size: 12px; opacity: 0.8; }
.score { font-weight: 700; }
hr { border: 0; border-top: 1px solid #222; margin: 16px 0; }