:root { font-family: "Segoe UI", Arial, sans-serif; color: #172033; background: #f4f6f9; }
body { margin: 0; }
main { padding: 18px; }
header { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #125fca; color: white; font-size: 25px; font-weight: 700; }
h1 { margin: 0; font-size: 22px; }
h2 { margin: 0 0 12px; font-size: 17px; }
header p { margin: 2px 0 0; color: #606b7c; font-size: 12px; }
.card, .status { background: white; border: 1px solid #dce2ea; border-radius: 10px; padding: 15px; box-shadow: 0 2px 8px rgb(25 40 70 / 7%); }
.card p { margin-top: 0; line-height: 1.45; color: #48556a; }
.card + .card { margin-top: 12px; }
label { display: block; margin-top: 10px; color: #48556a; font-size: 13px; font-weight: 600; }
input { box-sizing: border-box; width: 100%; min-height: 38px; margin-top: 4px; padding: 7px 9px; border: 1px solid #b8c2d1; border-radius: 6px; font: inherit; }
.hidden { display: none !important; }
button { width: 100%; min-height: 42px; margin-top: 10px; border-radius: 7px; border: 1px solid #125fca; font: inherit; font-weight: 600; cursor: pointer; }
.primary { background: #125fca; color: white; }
.secondary { background: white; color: #125fca; }
button:disabled { opacity: .55; cursor: wait; }
.status { margin-top: 14px; font-size: 13px; }
.status.success { border-left: 4px solid #16823b; }
.status.error { border-left: 4px solid #c72b2b; color: #8e1c1c; }