:root{
	--card-padding:1.25rem;
}

.entry_area{
	max-width:720px;
	margin:2.5rem auto;
	padding:var(--card-padding);
	background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border:1px solid rgba(255,255,255,0.04);
	border-radius:12px;
	box-shadow:0 8px 30px rgba(2,6,23,0.55);
	color:#eaf6ff;
}

.entry_area h1{
	margin:0 0 1rem;
	font-size:1.4rem;
	color:#fff;
}

.entry_area p{
	margin:0.6rem 0 0.35rem;
	color:var(--muted);
}

select[id], input[type="text"]{
	width:100%;
	padding:0.6rem 0.75rem;
	border-radius:8px;
	border:1px solid rgba(255,255,255,0.04);
	background:rgba(255,255,255,0.02);
	color:#eaf6ff;
	font-size:1rem;
	outline:none;
}

select[id]:focus, input[type="text"]:focus{
	border-color:var(--primary);
	box-shadow:0 6px 18px rgba(30,144,255,0.08);
}

/* Improve dropdown readability when opened/selected */
select[id] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* When the select has focus, make the selected text high-contrast */
select[id]:focus {
	color: #072133; /* dark text */
	background: #ffffff; /* white background for the control */
}

/* Options styling - note: some UAs limit option styling; this improves appearance in modern browsers */
select[id] option {
	color: #072133; /* dark text for readability */
	background: #ffffff;
}

select[id] option:checked,
select[id] option[selected] {
	background: var(--primary);
	color: #ffffff;
}

select[id] option:hover {
	background: rgba(30,144,255,0.12);
	color: #ffffff;
}

.entry_area button#convert{
	margin-top:1rem;
	display:inline-block;
	background:linear-gradient(90deg,var(--primary),var(--primary-600));
	color:#fff;
	padding:0.7rem 1.1rem;
	border-radius:10px;
	border:none;
	font-weight:700;
	cursor:pointer;
}
.entry_area button#convert:hover{transform:translateY(-2px)}

#res{
	max-width:720px;
	margin:1rem auto;
	padding:1rem;
	color:var(--muted);
	text-align:center;
}

#res h1{margin:0;color:var(--primary)}
#res h2{margin:0.5rem 0 0;color:#eaf6ff;font-size:1.5rem}

/* small screens */
@media (max-width:640px){
	.entry_area{margin:1rem;padding:1rem}
	select[id], input[type="text"]{font-size:0.95rem}
}

/* accessibility */
select[id]:focus, input[type="text"]:focus, .entry_area button:focus{outline:3px solid rgba(30,144,255,0.18);outline-offset:3px}