:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1d2433;
  background: #eef2f7;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.card { width: min(36rem, 100%); background: Canvas; color: CanvasText; border: 1px solid color-mix(in srgb, CanvasText 18%, transparent); border-radius: 1rem; padding: 1.25rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.12); }
header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.mark { width: 3rem; height: 3rem; border-radius: .8rem; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; background: #263a63; color: white; }
h1 { margin: 0; font-size: 1.6rem; }
header p { margin: .3rem 0 0; color: color-mix(in srgb, CanvasText 67%, transparent); }
label { display: block; font-weight: 650; margin-top: 1rem; }
input, select, button { width: 100%; font: inherit; border-radius: .65rem; }
input, select { margin-top: .4rem; padding: .8rem; border: 1px solid color-mix(in srgb, CanvasText 28%, transparent); background: Canvas; color: CanvasText; }
.check { display: flex; gap: .6rem; align-items: center; font-weight: 500; }
.check input { width: auto; margin: 0; }
.warning { font-size: .85rem; line-height: 1.4; color: color-mix(in srgb, CanvasText 68%, transparent); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.1rem; }
button { cursor: pointer; border: 0; padding: .85rem 1rem; font-weight: 700; background: #263a63; color: white; }
button.secondary { background: transparent; color: CanvasText; border: 1px solid color-mix(in srgb, CanvasText 30%, transparent); }
button:disabled { opacity: .55; cursor: wait; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 4.5rem; padding: .8rem; border-radius: .65rem; background: color-mix(in srgb, CanvasText 8%, transparent); font-size: .85rem; }
@media (max-width: 34rem) { .actions { grid-template-columns: 1fr; } }