html, body {
	height: 100%;
	overflow: hidden;
}
.mode-group {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin: 6px 0 2px 0;
	color: #444;
}
.mode-group label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.95rem;
}
body {
	background: #f4f6fb;
	font-family: 'Segoe UI', Arial, sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	height: 100vh;
    box-sizing: border-box;
}

.calculator-container {
	width: 100%;
	max-width: min(92vw, 500px);
	padding: clamp(8px, 2vw, 16px);
	box-sizing: border-box;
}

.calculator {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.12);
	padding: clamp(8px, 2.5vh, 16px);
	display: flex;
	flex-direction: column;
	gap: clamp(4px, 1.5vh, 12px);
}

.calculator-display {
	background: #222;
	color: #fff;
	font-size: clamp(1.2rem, 5.5vw, 2.2rem);
	border-radius: 8px;
	padding: clamp(8px, 2vh, 16px);
	text-align: right;
	min-height: clamp(36px, 6vh, 56px);
	letter-spacing: 1px;
	overflow-x: auto;
}

.calculator-buttons {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(6px, 1.2vh, 12px);
}



.btn {
	font-size: clamp(0.9rem, 2.2vw, 1.1rem);
	padding: clamp(8px, 2vh, 16px) 0;
	border: none;
	border-radius: 8px;
	background: #e9eaf3;
	color: #222;
	cursor: pointer;
	transition: background 0.2s, box-shadow 0.2s;
	box-shadow: 0 2px 6px rgba(0,0,0,0.04);
	min-width: 40px;
	min-height: clamp(36px, 6vh, 56px);
	outline: none;
}
.btn:active, .btn:focus {
	background: #d1d3e0;
}
.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}
.btn.memory {
	background: #f7e9c7;
}
.btn.control {
	background: #f8d7da;
	color: #b71c1c;
}
.btn.eq {
	background: #c7eaf7;
	color: #1565c0;
	font-weight: bold;
}
.btn.adv, .btn.constant, .btn.paren {
	background: #e0f7fa;
	color: #006064;
}
.btn.op {
	background: #e1bee7;
	color: #6a1b9a;
}
.btn.num {
	background: #e9eaf3;
	color: #222;
}

.calculator-history {
	font-size: clamp(0.85rem, 2.5vw, 1rem);
	color: #888;
	min-height: clamp(18px, 3vh, 28px);
	text-align: right;
	padding: clamp(2px, 0.8vh, 6px) clamp(4px, 1vw, 8px);
	border-radius: 4px;
	background: #f4f6fb;
}

@media (max-height: 700px) {
	.calculator {
		gap: clamp(2px, 1vh, 8px);
	}
	.calculator-display {
		font-size: clamp(1rem, 4.5vw, 1.6rem);
	}
	.btn {
		padding: clamp(6px, 1.6vh, 12px) 0;
		font-size: clamp(0.85rem, 2vw, 1rem);
	}
}


/* For screens 560px or shorter, allow vertical scroll */
@media (max-height: 560px) {
    html, body {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }
    body {
        align-items: flex-start;
    }
	.calculator-display {
		font-size: clamp(0.95rem, 4vw, 1.4rem);
		padding: clamp(6px, 1.4vh, 10px);
	}
	.btn {
		padding: clamp(4px, 1.2vh, 10px) 0;
	}
    .calculator-container {
        padding-bottom: 24px; /* extra space for scroll */
    }
}

/* Optional: For very small landscape screens, ensure scroll */
@media (max-width: 700px) and (max-height: 560px) and (orientation: landscape) {
    html, body {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }
    body {
        align-items: flex-start;
    }
    .calculator-container {
        padding-bottom: 32px;
    }
}