.npik-app {
    --npik-ink: #172936;
    --npik-muted: #5b6b75;
    --npik-primary: #0e5570;
    --npik-primary-dark: #08394d;
    --npik-primary-soft: #e7f3f6;
    --npik-accent: #d99b28;
    --npik-accent-soft: #fff5df;
    --npik-border: #cbd8de;
    --npik-border-strong: #9fb4bd;
    --npik-surface: #ffffff;
    --npik-canvas: #f4f7f8;
    --npik-success: #17623f;
    --npik-success-soft: #eaf7f0;
    --npik-warning: #7b4c08;
    --npik-warning-soft: #fff7e8;
    --npik-danger: #a52323;
    --npik-danger-soft: #fff0f0;
    --npik-radius: 16px;
    width: 100%;
    max-width: 1180px;
    margin: 1.5rem auto;
    color: var(--npik-ink);
    font-family: inherit;
    line-height: 1.55;
}

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

.npik-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
}

.npik-app [hidden] {
    display: none !important;
}

.npik-app h2,
.npik-app h3,
.npik-app p,
.npik-app ul,
.npik-app dl,
.npik-app fieldset {
    margin-top: 0;
}

.npik-app button,
.npik-app input,
.npik-app select {
    font: inherit;
}

.npik-calculator {
    overflow: hidden;
    border: 1px solid var(--npik-border);
    border-radius: var(--npik-radius);
    background: var(--npik-canvas);
    box-shadow: 0 16px 42px rgba(18, 54, 70, 0.1);
}

.npik-header {
    position: relative;
    overflow: hidden;
    padding: clamp(1.45rem, 3.5vw, 2.45rem);
    color: #fff;
    background:
        linear-gradient(115deg, rgba(217, 155, 40, 0.16), transparent 45%),
        linear-gradient(135deg, var(--npik-primary-dark), var(--npik-primary));
}

.npik-header::before,
.npik-header::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.npik-header::before {
    top: -5.5rem;
    right: -2.5rem;
    width: 18rem;
    height: 18rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
}

.npik-header::after {
    right: 9rem;
    bottom: -5rem;
    width: 11rem;
    height: 11rem;
    border: 2rem solid rgba(255, 255, 255, 0.04);
    border-radius: 50%;
}

.npik-header__meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;
    align-items: center;
    margin-bottom: 0.8rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
}

.npik-year {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.npik-title {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin-bottom: 0.5rem;
    color: #fff;
    font-size: clamp(1.65rem, 4vw, 2.55rem);
    line-height: 1.13;
}

.npik-lead {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.98rem, 1.6vw, 1.08rem);
}

.npik-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.13fr) minmax(330px, 0.87fr);
    gap: 1.15rem;
    align-items: start;
    padding: clamp(0.85rem, 2.5vw, 1.4rem);
}

.npik-form {
    display: grid;
    gap: 0.95rem;
    min-width: 0;
    margin: 0;
}

.npik-card {
    min-width: 0;
    margin: 0;
    border: 1px solid var(--npik-border);
    border-radius: 13px;
    padding: clamp(1rem, 2.4vw, 1.25rem);
    background: var(--npik-surface);
}

.npik-card--primary {
    border-top: 4px solid var(--npik-accent);
}

.npik-card__heading {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    margin-bottom: 1.05rem;
}

.npik-card__heading h3 {
    margin-bottom: 0.1rem;
    color: var(--npik-primary-dark);
    font-size: 1.08rem;
    line-height: 1.3;
}

.npik-card__heading p {
    margin-bottom: 0;
    color: var(--npik-muted);
    font-size: 0.85rem;
}

.npik-step {
    display: inline-flex;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background: var(--npik-primary-soft);
    color: var(--npik-primary-dark);
    font-size: 0.85rem;
    font-weight: 900;
}

.npik-property-types {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0 0 1.05rem;
    border: 0;
    padding: 0;
}

.npik-property-types legend {
    width: 100%;
    margin-bottom: 0.45rem;
    color: var(--npik-ink);
    font-size: 0.88rem;
    font-weight: 800;
}

.npik-choice {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
}

.npik-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.npik-choice > span {
    display: flex;
    min-height: 88px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--npik-border);
    border-radius: 11px;
    padding: 0.75rem;
    background: #fff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.npik-choice strong {
    color: var(--npik-primary-dark);
    font-size: 0.9rem;
    line-height: 1.25;
}

.npik-choice small {
    margin-top: 0.2rem;
    color: var(--npik-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.npik-choice input:checked + span {
    border-color: var(--npik-primary);
    background: var(--npik-primary-soft);
    box-shadow: inset 0 0 0 1px var(--npik-primary);
}

.npik-choice input:focus-visible + span {
    outline: 3px solid rgba(14, 85, 112, 0.22);
    outline-offset: 2px;
}

.npik-field {
    display: grid;
    gap: 0.38rem;
    min-width: 0;
}

.npik-field--spaced {
    margin-top: 1rem;
}

.npik-field > label {
    color: var(--npik-ink);
    font-size: 0.89rem;
    font-weight: 800;
}

.npik-field > small,
.npik-switch-row small {
    color: var(--npik-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.npik-input,
.npik-select {
    width: 100%;
    min-width: 0;
    min-height: 45px;
    border: 1px solid var(--npik-border-strong);
    border-radius: 9px;
    padding: 0.66rem 0.72rem;
    background: #fff;
    color: var(--npik-ink);
    box-shadow: none;
}

.npik-input:focus,
.npik-select:focus {
    border-color: var(--npik-primary);
    outline: 3px solid rgba(14, 85, 112, 0.15);
}

.npik-money-wrap,
.npik-percent-wrap,
.npik-age-wrap {
    position: relative;
}

.npik-money-wrap .npik-input,
.npik-percent-wrap .npik-input,
.npik-age-wrap .npik-input {
    padding-right: 3.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

.npik-money-wrap > span,
.npik-percent-wrap > span,
.npik-age-wrap > span {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    color: var(--npik-muted);
    font-size: 0.84rem;
    font-weight: 800;
    transform: translateY(-50%);
    pointer-events: none;
}

.npik-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin: 0.55rem 0 1rem;
}

.npik-quick button,
.npik-reset {
    min-height: 37px;
    cursor: pointer;
    border: 1px solid var(--npik-border);
    border-radius: 999px;
    padding: 0.35rem 0.72rem;
    background: #fff;
    color: var(--npik-primary-dark);
    font-size: 0.79rem;
    font-weight: 800;
}

.npik-quick button:hover,
.npik-reset:hover {
    border-color: var(--npik-primary);
    background: var(--npik-primary-soft);
}

.npik-switch-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    cursor: pointer;
    border-top: 1px solid #e6ecef;
    padding: 0.85rem 0;
}

.npik-card__heading + .npik-switch-row {
    border-top: 0;
    padding-top: 0.15rem;
}

.npik-switch-row > span:first-child {
    display: grid;
    gap: 0.14rem;
}

.npik-switch-row strong {
    color: var(--npik-primary-dark);
    font-size: 0.9rem;
    line-height: 1.3;
}

.npik-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 48px;
    width: 48px;
    height: 27px;
}

.npik-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.npik-switch > span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #b6c4ca;
    transition: background 0.16s ease;
}

.npik-switch > span::after {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    content: "";
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    transition: transform 0.16s ease;
}

.npik-switch input:checked + span {
    background: var(--npik-primary);
}

.npik-switch input:checked + span::after {
    transform: translateX(21px);
}

.npik-switch input:focus-visible + span {
    outline: 3px solid rgba(14, 85, 112, 0.22);
    outline-offset: 2px;
}

.npik-subcard {
    display: grid;
    gap: 0.9rem;
    margin: 0.15rem 0 0.65rem;
    border: 1px solid #bdd3db;
    border-radius: 11px;
    padding: 1rem;
    background: #f4fafb;
}

.npik-subcard--compact {
    margin-top: 0;
}

.npik-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.npik-inline-note {
    margin-bottom: 0;
    border-left: 3px solid var(--npik-accent);
    padding-left: 0.75rem;
    color: var(--npik-muted);
    font-size: 0.8rem;
}

.npik-inline-note strong {
    color: var(--npik-warning);
}

.npik-reset {
    margin-top: 1rem;
}

.npik-results {
    position: sticky;
    top: 1.2rem;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #aac1ca;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(12, 57, 74, 0.09);
}

.npik-result-hero {
    padding: 1.3rem;
    color: #fff;
    background:
        radial-gradient(circle at 95% 5%, rgba(217, 155, 40, 0.28), transparent 38%),
        linear-gradient(135deg, var(--npik-primary-dark), var(--npik-primary));
}

.npik-result-label {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.npik-result-hero > strong {
    display: block;
    margin: 0.25rem 0 0.45rem;
    color: #fff;
    font-size: clamp(1.85rem, 4vw, 2.55rem);
    line-height: 1.12;
    font-variant-numeric: tabular-nums;
}

.npik-status {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 800;
}

.npik-results--exempt .npik-result-hero {
    background: linear-gradient(135deg, #124c34, var(--npik-success));
}

.npik-results--error .npik-result-hero {
    background: linear-gradient(135deg, #721818, var(--npik-danger));
}

.npik-results--review .npik-result-hero {
    background: linear-gradient(135deg, #664600, #815900);
}

.npik-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--npik-border);
}

.npik-result-grid > div {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.8rem 0.9rem;
    border-right: 1px solid #e5ecef;
    border-bottom: 1px solid #e5ecef;
}

.npik-result-grid > div:nth-child(even) {
    border-right: 0;
}

.npik-result-grid > div:nth-last-child(-n+2) {
    border-bottom: 0;
}

.npik-result-grid span {
    color: var(--npik-muted);
    font-size: 0.72rem;
}

.npik-result-grid strong {
    overflow-wrap: anywhere;
    color: var(--npik-primary-dark);
    font-size: 0.94rem;
    font-variant-numeric: tabular-nums;
}

.npik-breakdown,
.npik-reliefs,
.npik-errors,
.npik-notes,
.npik-actions {
    padding: 1rem 1.05rem;
    border-bottom: 1px solid var(--npik-border);
}

.npik-breakdown h3,
.npik-reliefs h3,
.npik-errors h3,
.npik-notes h3 {
    margin-bottom: 0.7rem;
    color: var(--npik-primary-dark);
    font-size: 0.91rem;
}

.npik-breakdown dl {
    display: grid;
    gap: 0;
    margin-bottom: 0;
}

.npik-breakdown dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 0.8rem;
    align-items: start;
    border-top: 1px solid #e8edef;
    padding: 0.52rem 0;
}

.npik-breakdown dl > div:first-child {
    border-top: 0;
    padding-top: 0;
}

.npik-breakdown dt {
    color: var(--npik-muted);
    font-size: 0.78rem;
}

.npik-breakdown dd {
    margin: 0;
    text-align: right;
    color: var(--npik-ink);
    font-size: 0.8rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.npik-reliefs {
    background: var(--npik-success-soft);
}

.npik-reliefs h3 {
    color: var(--npik-success);
}

.npik-reliefs ul,
.npik-errors ul,
.npik-notes ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.npik-reliefs li {
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
    color: var(--npik-success);
    font-size: 0.78rem;
}

.npik-reliefs li strong {
    flex: 0 0 auto;
}

.npik-errors {
    background: var(--npik-danger-soft);
}

.npik-errors h3,
.npik-errors li {
    color: var(--npik-danger);
}

.npik-errors li,
.npik-note {
    position: relative;
    padding-left: 1rem;
    font-size: 0.76rem;
    line-height: 1.45;
}

.npik-errors li::before,
.npik-note::before {
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.npik-note--info {
    color: var(--npik-muted);
}

.npik-note--warning,
.npik-note--important {
    color: var(--npik-warning);
}

.npik-note--important {
    border-radius: 7px;
    padding: 0.45rem 0.5rem 0.45rem 1.45rem;
    background: var(--npik-warning-soft);
}

.npik-note--important::before {
    top: 1em;
    left: 0.55rem;
}

.npik-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    border-bottom: 0;
}

.npik-button {
    min-height: 43px;
    cursor: pointer;
    border: 1px solid var(--npik-primary);
    border-radius: 9px;
    padding: 0.58rem 0.75rem;
    background: #fff;
    color: var(--npik-primary);
    font-size: 0.82rem;
    font-weight: 850;
}

.npik-button--primary {
    background: var(--npik-primary);
    color: #fff;
}

.npik-button:hover {
    filter: brightness(0.96);
}

.npik-button:focus-visible,
.npik-quick button:focus-visible,
.npik-reset:focus-visible {
    outline: 3px solid rgba(14, 85, 112, 0.2);
    outline-offset: 2px;
}

.npik-privacy {
    margin: 0;
    padding: 0 1.05rem 1rem;
    color: var(--npik-muted);
    font-size: 0.7rem;
    text-align: center;
}

.npik-guide {
    display: grid;
    gap: 1.15rem;
    margin-top: 1.25rem;
}

.npik-guide__intro,
.npik-guide__section,
.npik-faq,
.npik-sources,
.npik-disclaimer {
    border: 1px solid var(--npik-border);
    border-radius: 13px;
    padding: clamp(1rem, 2.7vw, 1.4rem);
    background: #fff;
}

.npik-eyebrow {
    margin-bottom: 0.35rem;
    color: var(--npik-accent);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.npik-guide h2 {
    margin-bottom: 0.55rem;
    color: var(--npik-primary-dark);
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    line-height: 1.25;
}

.npik-guide h3 {
    margin-bottom: 0.3rem;
    color: var(--npik-primary-dark);
    font-size: 1rem;
}

.npik-guide p:last-child,
.npik-guide ul:last-child {
    margin-bottom: 0;
}

.npik-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.npik-rule-card {
    border: 1px solid var(--npik-border);
    border-radius: 12px;
    padding: 1rem;
    background: #fff;
}

.npik-rule-card__value {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--npik-primary);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
}

.npik-rule-card p {
    color: var(--npik-muted);
    font-size: 0.82rem;
}

.npik-example {
    border-left: 4px solid var(--npik-accent);
    background: var(--npik-accent-soft);
}

.npik-faq {
    display: grid;
    gap: 0;
}

.npik-faq details {
    border-top: 1px solid var(--npik-border);
    padding: 0.75rem 0;
}

.npik-faq h2 + details {
    border-top: 0;
}

.npik-faq summary {
    cursor: pointer;
    color: var(--npik-primary-dark);
    font-weight: 850;
}

.npik-faq details p {
    margin: 0.55rem 0 0;
    color: var(--npik-muted);
    font-size: 0.88rem;
}

.npik-sources ul {
    padding-left: 1.15rem;
}

.npik-sources a {
    color: var(--npik-primary);
    overflow-wrap: anywhere;
}

.npik-disclaimer {
    border-color: #e5cc96;
    background: var(--npik-warning-soft);
    color: #654313;
}

@media (max-width: 920px) {
    .npik-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .npik-results {
        position: static;
    }
}

@media (max-width: 680px) {
    .npik-app {
        margin: 0.8rem auto;
    }

    .npik-header {
        padding: 1.25rem 1rem;
    }

    .npik-workspace {
        gap: 0.85rem;
        padding: 0.7rem;
    }

    .npik-property-types,
    .npik-rule-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .npik-choice > span {
        min-height: 68px;
    }

    .npik-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .npik-switch-row {
        align-items: flex-start;
    }

    .npik-result-hero {
        padding: 1.05rem;
    }
}

@media (max-width: 430px) {
    .npik-card {
        padding: 0.9rem;
    }

    .npik-result-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .npik-result-grid > div,
    .npik-result-grid > div:nth-child(even),
    .npik-result-grid > div:nth-last-child(-n+2) {
        border-right: 0;
        border-bottom: 1px solid #e5ecef;
    }

    .npik-result-grid > div:last-child {
        border-bottom: 0;
    }

    .npik-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .npik-breakdown dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

    .npik-breakdown dd {
        text-align: left;
    }
}

@media print {
    .npik-app {
        max-width: none;
        color: #000;
    }

    .npik-calculator,
    .npik-card,
    .npik-results,
    .npik-guide > * {
        box-shadow: none;
    }

    .npik-form,
    .npik-actions,
    .npik-privacy {
        display: none !important;
    }

    .npik-workspace {
        display: block;
    }

    .npik-results {
        position: static;
        break-inside: avoid;
    }

    .npik-header,
    .npik-result-hero {
        background: #184f63 !important;
        print-color-adjust: exact;
    }
}