:root {
    --security-ink: #17324d;
    --security-muted: #718096;
    --security-line: #dce7ee;
    --security-teal: #087f78;
    --security-teal-dark: #06645f;
    --security-wash: #eef8f6;
}

.security-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 20%, rgba(8, 127, 120, .13), transparent 30%),
        linear-gradient(135deg, #f2f7f8, #eaf2f4);
}

.security-card {
    width: min(100%, 470px);
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 24px 65px rgba(23, 50, 77, .14);
}

.security-brand { display: flex; align-items: center; gap: 10px; color: var(--security-teal); font-weight: 800; }
.security-brand-icon, .security-setup-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--security-wash); }
.security-step, .security-kicker { display: inline-block; margin-top: 24px; padding: 5px 10px; border-radius: 20px; background: #edf3f7; color: #557085; font-size: 12px; font-weight: 700; }
.security-card h1 { margin: 14px 0 8px; color: var(--security-ink); font-size: 25px; font-weight: 900; }
.security-card p, .security-setup-form p { color: var(--security-muted); line-height: 1.9; }
.security-question { margin: 22px 0; padding: 18px; border-right: 4px solid var(--security-teal); border-radius: 12px; background: var(--security-wash); color: var(--security-ink); font-weight: 800; }
.security-field { margin-top: 18px; }
.security-field label { display: block; margin-bottom: 8px; color: var(--security-ink); font-weight: 800; }
.security-field input, .security-field select { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--security-line); border-radius: 12px; background: #fff; color: var(--security-ink); outline: none; }
.security-field input:focus, .security-field select:focus { border-color: var(--security-teal); box-shadow: 0 0 0 3px rgba(8, 127, 120, .1); }
.security-field > span { display: block; margin-top: 5px; color: #c53030; font-size: 12px; }
.security-input { position: relative; }
.security-input input { padding-left: 44px; }
.security-input i { position: absolute; left: 16px; top: 17px; color: #9aabb8; }
.security-primary { width: 100%; min-height: 49px; margin-top: 24px; border: 0; border-radius: 13px; background: linear-gradient(135deg, var(--security-teal), var(--security-teal-dark)); color: #fff; font-weight: 800; box-shadow: 0 10px 24px rgba(8, 127, 120, .22); }
.security-primary i { margin-right: 7px; }
.security-back { display: block; margin-top: 18px; color: #607487; text-align: center; font-weight: 700; }
.security-alert:not(:empty) { margin-top: 16px; padding: 12px; border-radius: 10px; background: #fff3f3; color: #a92929; }
.security-alert ul { margin: 0; padding-right: 18px; }

.security-setup-shell { padding: 22px; }
.security-setup-card { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(420px, 1.3fr); max-width: 1080px; margin: 30px auto; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 18px 55px rgba(23, 50, 77, .12); }
.security-setup-aside { padding: 48px 38px; background: linear-gradient(145deg, #0b746e, #164c68); color: #fff; }
.security-setup-aside .security-setup-icon { width: 62px; height: 62px; background: rgba(255, 255, 255, .14); font-size: 25px; }
.security-setup-aside h1 { margin-top: 24px; font-size: 28px; font-weight: 900; }
.security-setup-aside p { line-height: 2; color: rgba(255, 255, 255, .82); }
.security-privacy { margin-top: 32px; padding: 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(255, 255, 255, .08); line-height: 1.8; }
.security-setup-form { padding: 42px; }
.security-setup-form h2 { margin: 12px 0 6px; color: var(--security-ink); font-size: 24px; font-weight: 900; }
.security-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 767px) {
    .security-shell { padding: 14px; }
    .security-card { padding: 25px 20px; border-radius: 18px; }
    .security-setup-shell { padding: 10px; }
    .security-setup-card { grid-template-columns: 1fr; margin: 10px auto; border-radius: 18px; }
    .security-setup-aside { padding: 28px 22px; }
    .security-setup-form { padding: 26px 20px; }
    .security-two-column { grid-template-columns: 1fr; gap: 0; }
}