
:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #172033; background: #f4f6fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
a { color: #174ea6; }
header { background: #14213d; color: white; padding: 1rem max(1.25rem, calc((100vw - 70rem) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
header a { color: white; text-decoration: none; }
main { width: min(70rem, calc(100% - 2rem)); margin: 2rem auto 4rem; }
.hero, .card { background: white; border: 1px solid #dfe4ee; border-radius: 1rem; box-shadow: 0 0.4rem 1.4rem rgb(20 33 61 / 8%); padding: clamp(1.25rem, 3vw, 2rem); }
.hero { max-width: 48rem; margin: 5vh auto; }
.stack { display: grid; gap: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
label { display: grid; gap: 0.35rem; font-weight: 650; }
input, select, button { font: inherit; }
input, select { width: 100%; border: 1px solid #aab4c7; border-radius: 0.55rem; padding: 0.7rem 0.8rem; background: white; }
button, .button { border: 0; border-radius: 0.55rem; padding: 0.72rem 1rem; background: #176b55; color: white; font-weight: 750; cursor: pointer; text-decoration: none; display: inline-block; }
button.secondary, .button.secondary { background: #33405d; }
button:disabled { opacity: 0.55; cursor: wait; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.muted { color: #59647a; }
.message { min-height: 1.5rem; padding: 0.5rem 0; }
.message.error { color: #a2182a; }
.message.success { color: #176b55; }
.checks { display: grid; gap: 0.5rem; }
.checks label { display: flex; gap: 0.55rem; align-items: center; font-weight: 500; }
.checks input { width: auto; }
.organization { display: grid; gap: 1rem; }
.organization h2 { margin-bottom: 0; }
.tag { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; background: #e7ecf5; font-size: 0.85rem; }
.url-result { overflow-wrap: anywhere; border: 1px dashed #8b96aa; padding: 0.75rem; border-radius: 0.5rem; background: #f8f9fc; }
.hidden { display: none !important; }
@media (max-width: 40rem) { main { width: min(100% - 1rem, 70rem); margin-top: 0.5rem; } header { align-items: flex-start; } }
