:root {
    font-family: Inter, Segoe UI, Arial, sans-serif;
    color: #101828;
    background: #f4f7fb;
}
* { box-sizing: border-box; }
body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 2rem;
}
.card {
    width: min(440px, 100%);
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 10px 35px rgba(16, 24, 40, .08);
}
.card.wide { width: min(700px, 100%); }
h1 { margin: .4rem 0 1rem; font-size: 2rem; }
h2 { margin: 1.8rem 0 .8rem; font-size: 1rem; }
p { color: #475467; line-height: 1.55; }
.badge {
    display: inline-block;
    border-radius: 999px;
    padding: .3rem .65rem;
    background: #eef4ff;
    color: #3538cd;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
}
label { display: block; font-weight: 600; margin: 1rem 0 .4rem; }
input {
    width: 100%;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    padding: .75rem .85rem;
    font-size: 1rem;
}
.validation { color: #b42318; font-size: .9rem; display: block; margin-top: .35rem; }
.error {
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
    border-radius: 10px;
    padding: .75rem;
    margin-bottom: 1rem;
}
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
button, a.primary, a.secondary {
    display: inline-block;
    border-radius: 10px;
    padding: .7rem 1rem;
    text-decoration: none;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
}
button, a.primary { background: #155eef; color: #fff; border: 1px solid #155eef; }
a.secondary { background: #fff; color: #344054; border: 1px solid #d0d5dd; }
.info code {
    display: block;
    padding: .5rem .75rem;
    background: #f8fafc;
    border-radius: 8px;
    margin: .45rem 0;
}
.muted { color: #667085; font-size: .92rem; }
pre {
    overflow: auto;
    background: #101828;
    color: #f2f4f7;
    padding: 1rem;
    border-radius: 10px;
    min-height: 3rem;
}