body {
			font-family: sans-serif;
			padding: 10px;
			margin: 0;
			background: #f9f9f9;
		}

		.header {
			background: orange;
			color: #fff;
			padding: 5px;
			text-align: center;
			font-size: 1.2rem;
			font-weight: bold;
			border-radius: 5px;
			margin-bottom: 10px;
		}

		.input-group {
			display: flex;
			flex-direction: column;
			gap: 8px;
			margin-bottom: 10px;
		}

		input,
		select {
			padding: 10px;
			font-size: 1rem;
			border: 1px solid #ccc;
			border-radius: 5px;
			width: 100%;
			box-sizing: border-box;
		}

		button {
			padding: 10px;
			font-size: 1rem;
			border: none;
			border-radius: 5px;
			background: #007bff;
			color: #fff;
			width: 100%;
			margin-top: 5px;
		}

		table {
			border-collapse: collapse;
			width: 100%;
			font-size: 0.95rem;
			background: #fff;
		}

		th,
		td {
			border: 1px solid #ccc;
			padding: 6px;
			word-break: break-all;
			text-align: left;
		}

		th:nth-child(1),
		td:nth-child(1) {
			white-space: nowrap;
			word-break: normal;
		}

		thead {
			background: #eee;
		}

		@media (max-width: 600px) {
			h1 {
				font-size: 1rem;
			}

			th,
			td {
				padding: 4px;
				font-size: 0.85rem;
			}

			input,
			button {
				font-size: 0.95rem;
				padding: 8px;
			}
		}