:root {
    --brand-600: #11496e;
    --brand-700: #0e3d5d;
    --brand-500: #195f90;
    --brand-100: #e6eff5;
    --text-900: #0f172a;
    --text-700: #334155;
    --muted-500: #94a3b8;
    --success-600: #15803d;
    --danger-600: #b91c1c;
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 8px;
    --shadow-lg: 0 20px 40px rgba(17,73,110,0.12);
    --shadow-md: 0 10px 20px rgba(17,73,110,0.10);
}

body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text-900);
    background: linear-gradient(180deg, #f8fbfd 0%, #f4f8fb 100%);
}

.header {
    background: #ffffff;
    border-bottom: 1px solid rgba(17,73,110,0.06);
    position: sticky;
    top: 0;
    z-index: 1020;
    backdrop-filter: saturate(180%) blur(8px);
}

    .header .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 0;
    }

        .header .brand .logo {
            width: 100px;
        }

        .header .brand .title {
            font-weight: 700;
            letter-spacing: 0.2px;
            color: var(--brand-700);
        }

.footer-minimal {
    background: #ffffff;
    border-top: 1px solid rgba(17,73,110,0.06);
    color: var(--text-700);
    font-size: 0.95rem;
}

.hero {
    padding: 34px 0 10px 0;
}

.card-modern {
    border: 1px solid rgba(17,73,110,0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.input-modern {
    border-radius: var(--radius-md);
    border: 1px solid rgba(17,73,110,0.18);
    padding: 12px 14px;
    height: 48px;
    transition: box-shadow 200ms ease, border-color 200ms ease, transform 120ms ease;
}

    .input-modern:focus {
        border-color: var(--brand-500);
        box-shadow: 0 0 0 4px rgba(17,73,110,0.12);
    }

    .input-modern.is-invalid {
        border-color: var(--danger-600) !important;
        box-shadow: 0 0 0 4px rgba(185,28,28,0.10);
    }

.btn-brand {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 0 18px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: box-shadow 200ms ease, filter 200ms ease;
}

    .btn-brand:hover {
        box-shadow: var(--shadow-md);
        color: #fff;
        filter: brightness(1.03);
    }


    .btn-brand::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
        transform: translateX(-100%);
        transition: transform 450ms ease;
    }

    .btn-brand:active {
        box-shadow: none;
    }

    .btn-brand:focus {
        box-shadow: none;
    }


    .btn-brand:hover::after {
        transform: translateX(100%);
    }

    .btn-brand:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

.btn-danger {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 0 18px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: box-shadow 200ms ease, filter 200ms ease;
}

    .btn-danger:hover {
        box-shadow: var(--shadow-md);
        color: #fff;
        filter: brightness(1.03);
    }


    .btn-danger::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
        transform: translateX(-100%);
        transition: transform 450ms ease;
    }

    .btn-danger:active {
        box-shadow: none;
    }

    .btn-danger:focus {
        box-shadow: none;
    }


    .btn-danger:hover::after {
        transform: translateX(100%);
    }

    .btn-danger:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }



.inline-hint {
    font-size: 0.9rem;
    color: var(--text-700);
}

.inline-error {
    font-size: 0.9rem;
    color: var(--danger-600);
    min-height: 20px;
    visibility: hidden;
}

.result-card {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(17,73,110,0.08);
    background: #fff;
    box-shadow: var(--shadow-md);
}

.person-card {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(17,73,110,0.08);
    background: #fff;
    box-shadow: var(--shadow-md);
}

.contract-card {
    border-radius: var(--radius-md);
    border: 1px solid rgba(17,73,110,0.1);
    background: #fff;
    transition: border-color 160ms ease, box-shadow 200ms ease, transform 120ms ease;
    cursor: pointer;
    position: relative;
}

    .contract-card:hover {
        border-color: var(--brand-500);
        box-shadow: 0 6px 16px rgba(17,73,110,0.1);
        transform: translateY(-2px);
    }

    .contract-card.selected {
        border-color: var(--brand-600);
        box-shadow: 0 8px 20px rgba(17,73,110,0.14);
    }

    /* Chevron indicator */
    .contract-card .chevron {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        line-height: 1;
        color: var(--brand-600);
        opacity: 0.7;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    .contract-card:hover .chevron {
        transform: translateY(-50%) translateX(4px);
        opacity: 1;
    }

    .contract-card.selected .chevron {
        opacity: 0;
    }

.metric {
    display: grid;
    gap: 2px;
}

    .metric .label {
        color: var(--text-700);
        font-size: 0.85rem;
    }

    .metric .value {
        font-weight: 700;
    }

/* Responsive metrics grid for contracts */
.metrics-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    width: 100%;
}

.metric .value.danger {
    color: var(--danger-600);
}

.contract-actions {
    border-top: 1px dashed rgba(17,73,110,0.15);
}

    .contract-actions .amount-input {
        height: 44px;
    }

/* Contract header typography */
.contract-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-900);
}

.contract-amount {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-900);
}

@media (min-width: 768px) {
    .contract-title, .contract-amount {
        font-size: 1.25rem;
    }
}

.contract-icon svg {
    height: 42px;
    width: auto;
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255,255,255,0.6);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.fade-in {
    animation: fadeIn 280ms ease forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.badge-soft {
    background: var(--brand-100);
    color: var(--brand-700);
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 600;
}

.nav-link-modern {
    color: var(--text-700);
    font-weight: 500;
}

    .nav-link-modern:hover {
        color: var(--brand-600);
    }

/* Button loader: three bouncing dots */
.loader-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .loader-dots .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #ffffff;
        opacity: 0.9;
        animation: dotBounce 900ms ease-in-out infinite;
    }

        .loader-dots .dot:nth-child(2) {
            animation-delay: 0.12s;
        }

        .loader-dots .dot:nth-child(3) {
            animation-delay: 0.24s;
        }

@keyframes dotBounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }

    40% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* Secure chip */
.secure-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-100);
    color: var(--brand-700);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
}

    .secure-chip i {
        color: var(--brand-700);
    }

    .secure-chip::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
        transform: translateX(-120%);
        animation: chipShimmer 3.2s ease-in-out infinite;
    }

@keyframes chipShimmer {
    0% {
        transform: translateX(-120%);
    }

    60% {
        transform: translateX(120%);
    }

    100% {
        transform: translateX(120%);
    }
}

/* Success check animation */
.success-check {
    width: 84px;
    height: 84px;
}

    .success-check svg {
        width: 100%;
        height: 100%;
    }

.success-check-circle {
    fill: none;
    stroke: var(--brand-100);
    stroke-width: 2;
}

.success-check-mark {
    stroke: var(--success-600);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: checkDraw 700ms ease forwards 300ms;
}

@keyframes checkDraw {
    to {
        stroke-dashoffset: 0;
    }
}