body { font-family: Arial, sans-serif; background: #0f1523; color: #d7deef; margin: 0; }
.container { max-width: 1100px; margin: 20px auto; padding: 0 16px; }
.card { background: #17233a; border: 1px solid #2b3d64; border-radius: 10px; padding: 16px; margin-bottom: 14px; }
h1, h2, h3 { margin: 0 0 12px; color: #f0f5ff; }
label { display: block; margin-bottom: 6px; font-size: 13px; color: #a9bbdf; }
input, textarea, select, button { border-radius: 6px; border: 1px solid #355087; background: #0f1d36; color: #e7efff; padding: 8px 10px; width: 100%; box-sizing: border-box; }
textarea { min-height: 88px; resize: vertical; }
button { width: auto; cursor: pointer; background: #215fc7; border-color: #2d6ddb; }
button.secondary { background: #30415f; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.alert { padding: 10px; border-radius: 8px; margin-bottom: 12px; }
.alert.ok { background: #153720; border: 1px solid #23683a; }
.alert.err { background: #3a1616; border: 1px solid #8c2b2b; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { border: 1px solid #2b3d64; padding: 8px; text-align: left; }
.muted { color: #9ab0d8; font-size: 12px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #263b66; font-size: 12px; }
a { color: #8eb5ff; }
@media (max-width: 820px) { .row, .row3 { grid-template-columns: 1fr; } }