.marks-calculator { min-height: calc(100vh - 24px); padding: 24px; border: 1px solid #dce1d0; border-radius: 16px; background: #fafbf7; }
.marks-calculator h2 { margin: 0 0 1rem; line-height: 1.25; }
.eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
#marks-form label { display: block; margin: 1rem 0; font-size: .9rem; font-weight: 700; }
#marks-form input { display: block; width: 100%; margin-top: .5rem; padding: .75rem; min-height: 48px; border: 1px solid #8d9884; border-radius: 8px; font: inherit; background: white; }
.marks-calculator button { min-height: 48px; padding: .75rem 1rem; border: 0; border-radius: 8px; color: white; background: #20281d; font: inherit; font-weight: 700; cursor: pointer; }
#marks-value { display: block; font-size: 2rem; }
@media(max-width:520px) { .marks-calculator { padding: 16px; } }