* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; background: #f5f5f5; color: #222; }
main { max-width: 900px; margin: 30px auto; padding: 0 16px; }
.card { background: white; border-radius: 12px; padding: 20px; margin: 16px 0; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.warn { padding: 12px; background: #fff4d6; border: 1px solid #e2b84a; border-radius: 8px; }
label { display: block; margin: 12px 0; font-weight: 600; }
input, select { display: block; width: 100%; padding: 10px; margin-top: 6px; border: 1px solid #ccc; border-radius: 8px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
button { padding: 12px 14px; border: 0; border-radius: 8px; cursor: pointer; background: #222; color: white; }
button:hover { opacity: .86; }
pre { overflow: auto; padding: 14px; background: #111; color: #eee; border-radius: 8px; min-height: 160px; }
.small { font-size: 14px; }
@media (max-width: 760px) { .grid { grid-template-columns: 1fr 1fr; } }