body { font-family: system-ui, Arial; margin: 0; background: #0b0f14; color: #e9eef5; }
a { color: #9cc3ff; text-decoration: none; margin-left: 12px; }
.container { max-width: 1100px; margin: 20px auto; padding: 0 14px; }
.topnav { display:flex; justify-content:space-between; align-items:center; padding: 14px 16px; background:#0f1622; border-bottom: 1px solid #1f2a3a; position: sticky; top:0; }
.card { background:#0f1622; border:1px solid #1f2a3a; border-radius: 14px; padding: 16px; margin-bottom: 16px; }
input, select { width: 100%; padding: 10px; border-radius: 10px; border:1px solid #243247; background:#0b0f14; color:#e9eef5; }
label { display:block; margin: 10px 0 6px; opacity:.9; }
button { padding: 10px 12px; border-radius: 10px; border: 1px solid #2b3b55; background:#15243a; color:#e9eef5; cursor:pointer; }
button:hover { filter: brightness(1.15); }
table { width:100%; border-collapse: collapse; margin-top: 10px; }
th, td { padding: 10px; border-bottom: 1px solid #1f2a3a; text-align:left; }
.grid { display:grid; grid-template-columns: 1fr 1fr auto; gap: 12px; }
.inline { display:inline; }
.error { background:#3a1414; border:1px solid #6b2a2a; padding:10px; border-radius:10px; margin-bottom: 10px; }
.hint { opacity: .75; font-size: .92rem; margin-top: 10px; }
.summary { display:grid; gap: 6px; margin: 10px 0 14px; }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } }