:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #173d31; background: #f4f7ef; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 8% 8%, #dff08a 0, transparent 24rem), radial-gradient(circle at 98% 98%, #bbdfbe 0, transparent 25rem), #f4f7ef; } .shell { width: min(1060px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 60px; } header { display: flex; align-items: center; gap: 11px; margin-bottom: 42px; } .mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px 12px 12px 3px; background: #063b2f; color: #dff08a; font: 700 21px Georgia, serif; } header strong, header small { display: block; } header small { color: #688075; font-size: 12px; margin-top: 2px; } .card { border: 1px solid #d7e5d3; border-radius: 20px 20px 20px 5px; background: #fffdf8e8; box-shadow: 0 16px 42px #193a2412; } .login-card { width: min(480px, 100%); padding: 34px; } h1, h2 { font-family: Georgia, 'Times New Roman', serif; letter-spacing: -.025em; } h1 { margin: 8px 0 12px; font-size: clamp(29px, 5vw, 42px); line-height: 1.02; } h2 { margin: 8px 0 10px; font-size: 22px; } p { color: #698075; line-height: 1.5; } .eyebrow { color: #4d7754; font-size: 10px; font-weight: 800; letter-spacing: .13em; } form { display: grid; gap: 14px; margin-top: 25px; } label { color: #416357; font-size: 12px; font-weight: 800; } input { display: block; width: 100%; margin-top: 6px; border: 1px solid #c9dbcb; border-radius: 10px; padding: 11px; background: #fff; font: inherit; } button { border: 0; border-radius: 10px 14px 14px 10px; padding: 12px 16px; background: #087b4b; color: #fff; cursor: pointer; font: 800 13px inherit; } button:disabled { opacity: .6; cursor: progress; } .quiet { background: #eff7e9; color: #286044; } .error { min-height: 1.4em; margin: 0; color: #a8372c; font-size: 12px; font-weight: 700; } .portal-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .portal-heading h1 { margin-bottom: 6px; } .portal-heading p { margin: 0; } .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; } .metrics article { border-left: 3px solid #8ecb76; border-radius: 3px 14px 14px 3px; background: #fffdf8; padding: 15px; } .metrics small, .metrics b { display: block; } .metrics small { color: #688075; font-size: 11px; } .metrics b { margin-top: 6px; font-size: 15px; } .grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; } .grid .card { padding: 22px; } dl { margin: 22px 0 0; } dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #edf0e8; } dt { color: #668074; font-size: 12px; } dd { margin: 0; color: #173d31; font-size: 12px; font-weight: 800; text-align: right; } .backup-list { display: grid; gap: 8px; margin-top: 18px; color: #688075; font-size: 12px; } .backup { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px; border: 1px solid #deead8; border-radius: 11px 11px 11px 3px; color: inherit; text-decoration: none; } .backup:hover { border-color: #9abf98; background: #f6fbed; } .backup b, .backup small { display: block; } .backup b { color: #214c3b; font-size: 12px; } .backup small { margin-top: 3px; } .backup em { color: #087b4b; font-size: 11px; font-style: normal; font-weight: 800; } @media (max-width: 720px) { .shell { width: min(100% - 22px, 1060px); padding-top: 20px; } .metrics, .grid { grid-template-columns: 1fr; } .portal-heading { flex-direction: column; } }