:root {
    --np-green: #063f32;
    --np-green-dark: #032b23;
    --np-gold: #f2c230;
    --np-gold-hover: #e2b21a;
    --np-white: #ffffff;
    --np-soft: #f7f9f7;
    --np-text: #17221f;
    --np-muted: #66736f;
    --np-line: #e5e7eb;
    --np-success: #15803d;
    --np-error: #b42318;
    --np-font: "DM Sans", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

.np-auth-body {
    min-height: 100vh;
    font-family: var(--np-font);
    color: var(--np-text);
    background: var(--np-soft);
    overflow-x: hidden;
}

.np-skip {
    position: absolute;
    left: 12px;
    top: -40px;
    background: var(--np-white);
    color: var(--np-text);
    padding: 8px 12px;
    z-index: 5;
}
.np-skip:focus { top: 12px; }

.np-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(420px, 48%) minmax(0, 1fr);
}

.np-auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 28px 40px 88px;
    color: #fff;
    background-color: #063f32;
    background-image:
        linear-gradient(180deg, #063f32 0%, #063f32 46%, rgba(6, 63, 50, 0.78) 62%, rgba(6, 63, 50, 0.28) 78%, rgba(3, 43, 35, 0.55) 100%),
        var(--np-photo);
    background-repeat: no-repeat;
    background-size: cover, cover;
    background-position: center, center bottom;
    overflow: hidden;
}

.np-auth-aside-top { position: relative; z-index: 1; max-width: 520px; }

.np-crests {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}
.np-crests img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.np-kicker {
    margin: 0 0 8px;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.88);
}

.np-portal-title {
    margin: 0;
    font-size: 32px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.np-portal-sub {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
}

.np-portal-lead {
    margin: 14px 0 0;
    max-width: 36ch;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
}

.np-features {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.np-features li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.82);
}
.np-features strong {
    display: block;
    margin-bottom: 1px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
}
.np-feature-mark {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
}
.np-feature-mark svg { width: 15px; height: 15px; }

.np-aside-foot {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 16px;
    margin: 0;
    min-height: 22px;
}
.np-version {
    position: absolute;
    left: 22px;
    bottom: 0;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.82);
}
.np-motto {
    display: block;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.np-auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 40px 28px;
    background: #f4f6f5;
}

.np-mobile-brand,
.np-mobile-foot { display: none; }

.np-auth-card {
    width: min(100%, 420px);
    background: #fff;
    border: 1px solid rgba(226, 232, 229, 0.9);
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(17, 36, 31, 0.08);
    padding: 32px 32px 26px;
}

.np-auth-card h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--np-text);
}

.np-auth-card .np-sub {
    margin: 8px 0 22px;
    color: var(--np-muted);
    font-size: 15px;
    line-height: 1.45;
}

.np-success-mark {
    width: 72px;
    height: 72px;
    margin: 4px auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f6ee;
    color: var(--np-success);
}
.np-halo {
    position: relative;
    width: 132px;
    height: 132px;
    margin: 0 auto 8px;
}
.np-halo-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 58px, #d8f3e4 59px 61px, transparent 62px);
}
.np-halo-ring::before,
.np-halo-ring::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, #86efac 0 4deg, transparent 4deg 16deg);
    -webkit-mask: radial-gradient(circle, transparent 52px, #000 53px 56px, transparent 57px);
    mask: radial-gradient(circle, transparent 52px, #000 53px 56px, transparent 57px);
}
.np-halo-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 86px;
    height: 86px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1f9d55;
    color: #fff;
    box-shadow: 0 0 0 10px rgba(31, 157, 85, 0.12);
}
.np-center { text-align: center; }
.np-center .np-sub { margin-left: auto; margin-right: auto; }

.np-field { margin: 0 0 14px; }
.np-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--np-text);
}
.np-input { position: relative; }
.np-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    display: flex;
    color: #8b9692;
    pointer-events: none;
}
.np-input-icon svg { width: 18px; height: 18px; }
.np-field input,
.np-field select,
.np-field textarea {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #e3e8e6;
    border-radius: 10px;
    background: #fff;
    color: var(--np-text);
    font: inherit;
    font-size: 15px;
}
.np-input input { padding-left: 42px; }
.np-field textarea { height: auto; padding: 12px 14px; }
.np-field input:focus,
.np-field select:focus,
.np-field textarea:focus {
    outline: 2px solid var(--np-gold);
    outline-offset: 1px;
    border-color: #d7b44a;
}
.np-field input[aria-invalid="true"] { border-color: var(--np-error); }
.np-field-error {
    margin: 6px 0 0;
    color: var(--np-error);
    font-size: 13px;
}
.np-hint { margin: 6px 0 0; color: var(--np-muted); font-size: 13px; line-height: 1.4; }
.np-auth-card .form-group { margin: 0 0 14px; }
.np-auth-card .hint { margin: 6px 0 0; color: var(--np-muted); font-size: 13px; line-height: 1.4; }

.np-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 16px;
    font-size: 14px;
}
.np-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--np-text);
}
.np-check input { width: 18px; height: 18px; accent-color: var(--np-green); }
.np-text-link {
    color: #0d5c49;
    font-weight: 600;
    text-decoration: none;
}
.np-text-link:hover { text-decoration: underline; }

.np-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.np-btn-ico { display: inline-flex; }
.np-btn-ico svg { width: 18px; height: 18px; }
.np-btn:disabled { opacity: 0.7; cursor: progress; }
.np-btn-primary { background: var(--np-gold); color: #1c1403; }
.np-btn-primary:hover { background: var(--np-gold-hover); }
.np-btn-outline { background: #fff; color: var(--np-text); border-color: #d5ddd9; margin-top: 10px; }
.np-btn-outline:hover { border-color: #b7c4be; background: #fbfcfb; }
.np-btn-ghost {
    width: auto;
    min-height: 44px;
    margin-top: 14px;
    padding: 0;
    background: transparent;
    color: #0d5c49;
    font-weight: 600;
}
.np-stack { display: grid; gap: 0; }
.np-stack .np-btn + .np-btn { margin-top: 10px; }

.np-or {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 16px 0 6px;
    color: var(--np-muted);
    font-size: 12px;
    letter-spacing: 0.08em;
}
.np-or::before,
.np-or::after { content: ""; height: 1px; background: var(--np-line); }

.np-alert {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.45;
}
.np-alert-error { background: #fdecec; color: var(--np-error); border: 1px solid #f3c7c3; }
.np-alert-success { background: #e8f6ee; color: #146c36; border: 1px solid #b7e4c7; }

.np-secure-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 0;
    color: var(--np-muted);
    font-size: 12.5px;
    line-height: 1.4;
    text-align: center;
}
.np-secure-note svg { flex: 0 0 16px; margin-top: 2px; }

.np-steps {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
}
.np-steps li {
    flex: 1;
    text-align: center;
    color: var(--np-muted);
    font-size: 12px;
    position: relative;
}
.np-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 13px;
    left: calc(50% + 18px);
    width: calc(100% - 36px);
    height: 2px;
    background: #e5e7eb;
}
.np-step-num {
    width: 28px;
    height: 28px;
    margin: 0 auto 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5ddd9;
    background: #fff;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.np-steps .is-active { color: var(--np-text); font-weight: 700; }
.np-steps .is-active .np-step-num,
.np-steps .is-done .np-step-num {
    background: var(--np-green);
    border-color: var(--np-green);
    color: #fff;
}
.np-steps .is-done { color: var(--np-green); }

.np-reqs { margin: 8px 0 0; padding-left: 18px; color: var(--np-muted); font-size: 13px; line-height: 1.45; }
.np-strength { margin-top: 8px; }
.np-strength-bar {
    height: 6px;
    border-radius: 99px;
    background: #e5e7eb;
    overflow: hidden;
}
.np-strength-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--np-error);
}
.np-strength-bar[data-level="1"] span { width: 25%; background: var(--np-error); }
.np-strength-bar[data-level="2"] span { width: 50%; background: #b7791f; }
.np-strength-bar[data-level="3"] span { width: 75%; background: #3f7d1a; }
.np-strength-bar[data-level="4"] span { width: 100%; background: var(--np-success); }
.np-strength-label { display: block; margin-top: 4px; font-size: 12px; color: var(--np-muted); }

.np-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.np-check-block { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.np-check-block input { margin-top: 3px; width: 18px; height: 18px; }

.np-auth-body .password-field-wrap { position: relative; }
.np-auth-body .password-field-wrap input { padding-left: 42px; padding-right: 48px; }
.np-auth-body .password-toggle-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--np-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.np-btn.is-loading .np-btn-arrow { display: none; }
.np-btn.is-loading::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(28, 20, 3, 0.25);
    border-top-color: #1c1403;
    animation: np-spin 0.7s linear infinite;
}

@media (max-width: 900px) {
    .np-auth { grid-template-columns: 1fr; }
    .np-auth-aside { display: none; }
    .np-mobile-brand,
    .np-mobile-foot { display: block; width: min(100%, 440px); text-align: center; }
    .np-mobile-brand .np-crests { justify-content: center; margin-bottom: 8px; }
    .np-mobile-brand .np-crests img { width: 56px; height: 56px; background: #fff; border-radius: 50%; padding: 3px; }
    .np-mobile-brand .np-kicker { color: var(--np-muted); font-size: 12px; }
    .np-mobile-title { margin: 0; font-weight: 700; font-size: 18px; letter-spacing: 0.03em; text-transform: uppercase; }
    .np-mobile-lead { margin: 4px 0 0; color: var(--np-muted); font-size: 13px; }
    .np-mobile-foot { color: var(--np-muted); font-size: 12px; line-height: 1.5; }
    .np-mobile-foot p { margin: 0; }
    .np-auth-main { justify-content: flex-start; padding: 24px 16px 32px; }
    .np-auth-card { padding: 22px 18px 18px; }
    .np-auth-card h2 { font-size: 24px; }
    .np-field input,
    .np-btn { font-size: 14px; }
    .np-btn-outline { gap: 6px; padding-left: 10px; padding-right: 10px; }
    .np-form-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .np-btn.is-loading::before { animation: none; }
}

@keyframes np-spin { to { transform: rotate(360deg); } }