:root{
	--bg:#f2f4f8;
	--panel:#ffffff;
	--accent:#4b6ef6;
	--muted:#9aa6c0;
	--shadow: 0 8px 20px rgba(35,47,63,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(180deg,var(--bg),#e9eef8);
	font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
	padding:24px;
}
.calculator{
	width:340px;
	background:var(--panel);
	border-radius:16px;
	padding:18px;
	box-shadow:var(--shadow);
}
.display{
	height:72px;
	background:linear-gradient(180deg,#f8fafc,#ffffff);
	border-radius:12px;
	padding:14px 16px;
	font-size:28px;
	color:#111827;
	text-align:right;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	margin-bottom:12px;
	display:flex;
	align-items:center;
	justify-content:flex-end;
}
.buttons{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:10px;
}
.btn{
	background:#f6f8fb;
	border:0;
	padding:18px;
	border-radius:10px;
	font-size:18px;
	cursor:pointer;
	transition:transform .06s ease, box-shadow .06s ease;
	box-shadow:0 4px 12px rgba(16,24,40,0.04);
}
.btn:active{transform:translateY(1px)}
.operator{background:#eef2ff;color:var(--accent);font-weight:600}
.equal{grid-column:3 / 4; background:var(--accent); color:white; font-weight:700; box-shadow:0 8px 18px rgba(75,110,246,0.28)}
.function{background:#fff4e6;color:#b25b00}
.dot{font-weight:700}
@media (max-width:380px){
	.calculator{width:100%}
	.display{font-size:24px; height:64px}
	.btn{padding:14px; font-size:16px}
}