/* Allianz Neo, served from wwwroot/fonts/AllianzNeo - no external request.
   Regular covers 400/500, SemiBold 600, Bold 700/800: the weights the pages use.
   font-display:swap draws the text at once with the fallback and swaps it when the font arrives. */
@font-face {
    font-family: "Allianz Neo";
    src: url("../fonts/AllianzNeo/AllianzNeoW04-Light.woff2") format("woff2"), url("../fonts/AllianzNeo/AllianzNeoW04-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Allianz Neo";
    src: url("../fonts/AllianzNeo/AllianzNeoW04-Regular.woff2") format("woff2");
    font-weight: 400 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Allianz Neo";
    src: url("../fonts/AllianzNeo/AllianzNeoW04-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Allianz Neo";
    src: url("../fonts/AllianzNeo/AllianzNeoW04-Bold.woff2") format("woff2");
    font-weight: 700 800;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Allianz Neo";
    src: url("../fonts/AllianzNeo/AllianzNeoW04-LightItalic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Allianz Neo";
    src: url("../fonts/AllianzNeo/AllianzNeoW04-Italic.woff2") format("woff2");
    font-weight: 400 500;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Allianz Neo";
    src: url("../fonts/AllianzNeo/AllianzNeoW04-SemiBoldIt.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Allianz Neo";
    src: url("../fonts/AllianzNeo/AllianzNeoW04-BoldItalic.woff2") format("woff2");
    font-weight: 700 800;
    font-style: italic;
    font-display: swap
}

/* ==== Applications portal - additional styles (all classes use the ap- prefix to avoid clashes with MDB5) ==== */

:root {
    --ink: #1f3347;
    --muted: #5b6b7c;
    --brand: #003781;
    --bg: #f3f5f8;
    --line: #dfe4ea;
    --surface: #fff;
    --surface2: #f6f8fa;
    --hdr: rgba(255,255,255,.88);
    --title: #152535;
    --glass: rgba(255,255,255,.55);
    --glass2: rgba(255,255,255,.82);
    --blob1: #e3ecf8;
    --blob2: #e8f3ec;
    --mixc: #000;
    --cardline: rgba(255,255,255,.7);
    --sh: rgba(20,40,60,.18);
    color-scheme: light
}

    :root[data-theme="dark"] {
        --ink: #e6eef8;
        --muted: #a3b9d8;
        --brand: #7fd0f2;
        --bg: #001b42;
        --line: #173f78;
        --surface: #00295f;
        --surface2: #03306b;
        --hdr: rgba(0,31,74,.94);
        --title: #ffffff;
        --glass: rgba(0,16,42,.45);
        --glass2: rgba(0,16,42,.7);
        --blob1: #003781;
        --blob2: #00285e;
        --mixc: #fff;
        --cardline: rgba(255,255,255,.1);
        --sh: rgba(0,6,20,.6);
        color-scheme: dark
    }

:where(.ap-header,.ap-main,.ap-footer,.ap-modal-backdrop), :where(.ap-header,.ap-main,.ap-footer,.ap-modal-backdrop) * {
    box-sizing: border-box
}

:where(.ap-header,.ap-main,.ap-footer,.ap-modal) :where(h1,h2,h3,h5,p,ul,li) {
    margin: 0;
    padding: 0
}

body {
    background: radial-gradient(1200px 500px at 85% -10%,var(--blob1) 0,transparent 60%), radial-gradient(900px 500px at -10% 110%,var(--blob2) 0,transparent 60%),var(--bg) !important;
    background-attachment: fixed !important;
    transition: background-color .3s
}

.ap-main, .ap-footer {
    font-family: "Allianz Neo","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color: var(--ink)
}

:where(.ap-header,.ap-main,.ap-footer) a {
    color: inherit;
    text-decoration: none
}

:where(.ap-header,.ap-main,.ap-footer,.ap-modal) button {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal
}

/* HEADER (menu from the new design) */
.ap-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 72px;
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--hdr);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 20px rgba(0,0,0,.03);
    font-family: "Allianz Neo","Segoe UI",Roboto,Arial,sans-serif;
    transition: background .3s,box-shadow .2s
}

    .ap-header.ap-scrolled {
        box-shadow: 0 8px 24px -10px rgba(20,40,60,.28)
    }

.ap-logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--brand);
    white-space: nowrap
}

.ap-logo-img {
    height: 38px;
    width: auto;
    display: block
}
/* light theme shows the blue logo, dark theme shows the white one */
.ap-logo-dark {
    display: none
}

:root[data-theme="dark"] .ap-logo-light {
    display: none
}

:root[data-theme="dark"] .ap-logo-dark {
    display: block
}

.ap-search-container {
    position: relative;
    width: 340px;
    flex: 0 1 380px
}

    .ap-search-container input {
        width: 100%;
        padding: 11px 44px 11px 45px;
        border-radius: 30px;
        border: 1.5px solid var(--line);
        background: var(--surface2);
        color: var(--ink);
        font: 500 1rem "Allianz Neo","Segoe UI",sans-serif;
        outline: none;
        transition: all .3s ease
    }

        .ap-search-container input::placeholder {
            color: var(--muted)
        }

        .ap-search-container input:focus {
            background: var(--surface);
            border-color: #0072ed;
            box-shadow: 0 0 0 4px rgba(0,114,237,.12)
        }

    .ap-search-container .ap-ico {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        stroke: var(--muted);
        fill: none;
        stroke-width: 2.2
    }

    .ap-search-container kbd {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        font: 600 12px/1 inherit;
        white-space: nowrap;
        color: var(--muted);
        border: 1px solid var(--line);
        border-radius: 5px;
        padding: 3px 6px;
        background: var(--surface)
    }

.ap-nav-links {
    display: flex;
    align-items: center;
    gap: 2rem
}

.ap-external-link {
    color: var(--muted);
    font-weight: 600;
    font-size: .98rem;
    white-space: nowrap;
    transition: color .2s
}

    .ap-external-link:hover {
        color: #0072ed
    }

.ap-user-dropdown-container {
    position: relative
}

.ap-user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: 30px;
    cursor: pointer;
    user-select: none;
    background: var(--surface2);
    border: 1px solid var(--line);
    transition: all .2s ease;
    white-space: nowrap
}

    .ap-user-btn:hover, .ap-user-btn.ap-active {
        background: color-mix(in srgb,var(--surface2) 80%,var(--muted));
        border-color: color-mix(in srgb,var(--line) 70%,var(--muted))
    }

.ap-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #003781;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem
}

.ap-user-btn .ap-chev {
    width: 12px;
    height: 12px;
    stroke: var(--muted);
    fill: none;
    stroke-width: 2.6;
    transition: transform .25s
}

.ap-user-btn.ap-active .ap-chev {
    transform: rotate(180deg)
}

.ap-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 180px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,.18);
    padding: 8px 0;
    display: none;
    flex-direction: column;
    z-index: 1001;
    animation: ap-ddIn .2s ease
}

    .ap-dropdown-menu.ap-show {
        display: flex
    }

.ap-dropdown-item {
    width: 100%;
    text-align: left;
    text-decoration: none;
    padding: 10px 18px;
    color: var(--ink);
    font-size: .98rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background .2s,color .2s
}

    .ap-dropdown-item svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .ap-dropdown-item:hover {
        background: var(--surface2);
        color: #0072ed
    }

    .ap-dropdown-item.ap-logout {
        color: #ef4444;
        border-top: 1px solid var(--line)
    }

        .ap-dropdown-item.ap-logout:hover {
            background: color-mix(in srgb,#ef4444 10%,var(--surface));
            color: #ef4444
        }

@keyframes ap-ddIn {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.ap-theme {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    background: var(--surface2);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
    transition: background .3s,border-color .3s
}

    .ap-theme::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #f5b301;
        box-shadow: 0 2px 6px rgba(245,179,1,.5);
        transition: transform .35s cubic-bezier(.3,1.4,.5,1),background .3s,box-shadow .3s
    }

:root[data-theme="dark"] .ap-theme::after {
    transform: translateX(24px);
    background: #13a0d3;
    box-shadow: 0 2px 8px rgba(19,160,211,.6)
}

.ap-theme svg {
    position: absolute;
    top: 6px;
    width: 14px;
    height: 14px;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    z-index: 1;
    transition: opacity .3s,transform .5s
}

.ap-theme .ap-sun {
    left: 6px;
    stroke: #fff
}

.ap-theme .ap-moon {
    right: 6px;
    stroke: var(--muted);
    fill: none
}

:root[data-theme="dark"] .ap-theme .ap-sun {
    stroke: var(--muted);
    transform: rotate(90deg)
}

:root[data-theme="dark"] .ap-theme .ap-moon {
    stroke: #fff;
    fill: #fff
}

.ap-theme:hover {
    border-color: var(--brand)
}

/* TOOLBAR */
.ap-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 24px 60px
}

.ap-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px
}

.ap-main h2 {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -.4px
}

    .ap-main h2 small {
        font-size: 15.5px;
        color: var(--muted);
        font-weight: 400;
        margin-left: 8px
    }

.ap-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 340px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 12px;
    box-shadow: 0 1px 2px rgba(20,40,60,.05);
    transition: border-color .2s,box-shadow .2s
}

    .ap-search:focus-within {
        border-color: #6f9bd6;
        box-shadow: 0 0 0 4px rgba(58,120,189,.15)
    }

    .ap-search svg {
        width: 16px;
        height: 16px;
        stroke: #7a8796;
        fill: none;
        stroke-width: 2;
        flex: none
    }

    .ap-search input {
        border: 0;
        outline: 0;
        font-size: 15.5px;
        width: 100%;
        background: transparent;
        color: var(--ink)
    }

    .ap-search kbd {
        font: 600 12px/1 inherit;
        white-space: nowrap;
        color: #7a8796;
        border: 1px solid #d5dbe2;
        border-radius: 4px;
        padding: 3px 5px;
        background: var(--surface2);
        border-color: var(--line)
    }

.ap-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px
}

    .ap-filters button {
        padding: 7px 14px;
        border-radius: 999px;
        background: var(--surface);
        border: 1px solid var(--line);
        font-size: 14.5px;
        color: var(--muted);
        box-shadow: 0 1px 2px rgba(20,40,60,.05);
        transition: all .2s
    }

        .ap-filters button:hover {
            color: var(--brand);
            border-color: #a9c0de;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px -4px rgba(20,40,60,.2)
        }

        .ap-filters button.ap-on {
            background: var(--brand);
            border-color: var(--brand);
            color: #fff;
            box-shadow: 0 6px 14px -6px rgba(0,55,129,.6)
        }

        .ap-filters button b {
            font-weight: 600;
            opacity: .7;
            margin-left: 4px
        }

/* CARDS */
.ap-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px;
    perspective: 1200px
}

.ap-card {
    --ac: #3a78bd;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 308px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cardline);
    outline: 1px solid rgba(20,40,60,.07);
    box-shadow: 0 1px 2px rgba(20,40,60,.06),0 6px 16px -6px var(--sh),inset 0 1px 0 rgba(255,255,255,.6);
    transform: translateY(0);
    transition: transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,outline-color .35s,background .3s;
    will-change: transform
}

    .ap-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        z-index: 5;
        background: linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 35%,#fff),var(--ac));
        background-size: 200% 100%;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .5s cubic-bezier(.2,.8,.2,1)
    }

    .ap-card:hover::before {
        transform: scaleX(1);
        animation: ap-barflow 2.5s linear infinite
    }

@keyframes ap-barflow {
    to {
        background-position: -200% 0
    }
}

.ap-ripple {
    position: absolute;
    z-index: 4;
    border-radius: 50%;
    pointer-events: none;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    background: color-mix(in srgb,var(--ac) 45%,transparent);
    animation: ap-ripple .6s ease-out forwards
}

@keyframes ap-ripple {
    to {
        transform: scale(40);
        opacity: 0
    }
}

.ap-card:hover {
    transform: translateY(-8px);
    outline-color: color-mix(in srgb,var(--ac) 45%,transparent);
    box-shadow: 0 2px 4px rgba(20,40,60,.06),0 24px 44px -16px color-mix(in srgb,var(--ac) 65%,transparent),0 0 0 4px color-mix(in srgb,var(--ac) 12%,transparent)
}

.ap-card:active {
    transform: translateY(-3px) scale(.99)
}

.ap-card:focus-visible {
    outline: 3px solid var(--ac);
    outline-offset: 3px
}

.ap-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
    z-index: 3;
    background: radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.3),transparent 45%)
}

.ap-card:hover .ap-shine {
    opacity: 1
}

.ap-card .ap-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 50px 0 16px
}

.ap-card .ap-ic {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--ac);
    box-shadow: 0 4px 10px -3px color-mix(in srgb,var(--ac) 80%,transparent),inset 0 -2px 0 rgba(0,0,0,.12);
    transition: transform .4s cubic-bezier(.3,1.6,.5,1),box-shadow .3s
}

.ap-card:hover .ap-ic {
    transform: rotate(-12deg) scale(1.12);
    box-shadow: 0 0 0 5px rgba(255,255,255,.6),0 8px 16px -4px color-mix(in srgb,var(--ac) 80%,transparent)
}

.ap-card .ap-ic svg {
    width: 19px;
    height: 19px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ap-card .ap-title {
    font-size: 21px;
    font-weight: 500;
    color: var(--title);
    line-height: 1.2;
    transition: transform .35s
}

.ap-card:hover .ap-title {
    transform: translateX(3px)
}

.ap-card .ap-ill {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px 6px;
    position: relative;
    z-index: 1
}

    .ap-card .ap-ill::before {
        content: "";
        position: absolute;
        left: 18%;
        right: 18%;
        bottom: 10px;
        height: 16px;
        border-radius: 50%;
        background: rgba(20,40,60,.14);
        filter: blur(8px);
        transition: all .4s
    }

.ap-card:hover .ap-ill::before {
    left: 12%;
    right: 12%;
    background: rgba(20,40,60,.2);
    filter: blur(10px)
}

.ap-card .ap-ill svg {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 140px;
    filter: drop-shadow(0 3px 3px rgba(20,40,60,.14));
    transition: transform .45s cubic-bezier(.2,.8,.2,1),filter .45s
}

.ap-card:hover .ap-ill svg {
    transform: scale(1.06) translateY(-3px);
    filter: drop-shadow(0 8px 8px rgba(20,40,60,.2))
}

.ap-card .ap-foot {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--glass);
    backdrop-filter: blur(4px);
    border-top: 1px solid var(--cardline);
    transition: background .3s
}

.ap-card:hover .ap-foot {
    background: var(--glass2)
}

.ap-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb,var(--ac) 16%,var(--surface));
    color: color-mix(in srgb,var(--ac) 70%,var(--mixc));
    border: 1px solid color-mix(in srgb,var(--ac) 25%,transparent)
}

    .ap-chip svg {
        width: 12px;
        height: 12px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2
    }

    .ap-chip.ap-link {
        background: var(--surface);
        transition: background .2s
    }

        .ap-chip.ap-link:hover {
            background: color-mix(in srgb,var(--ac) 22%,var(--surface))
        }

.ap-open {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14.5px;
    font-weight: 600;
    color: color-mix(in srgb,var(--ac) 75%,var(--mixc));
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .3s,transform .3s
}

    .ap-open svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .3s
    }

.ap-card:hover .ap-open {
    opacity: 1;
    transform: none
}

    .ap-card:hover .ap-open svg {
        transform: translateX(3px)
    }

.ap-star {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--glass2);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px -2px rgba(20,40,60,.25);
    opacity: .0;
    transform: scale(.8);
    transition: opacity .25s,transform .25s,background .2s
}

    .ap-card:hover .ap-star, .ap-star[aria-pressed="true"] {
        opacity: 1;
        transform: none
    }

    .ap-star:hover {
        background: var(--surface);
        transform: scale(1.1) !important
    }

    .ap-star svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: #6b7a8a;
        stroke-width: 1.8;
        stroke-linejoin: round;
        transition: fill .2s,stroke .2s,transform .3s
    }

    .ap-star[aria-pressed="true"] svg {
        fill: #f5b301;
        stroke: #d99a00
    }

    .ap-star.ap-bump svg {
        animation: ap-bump .45s
    }

@keyframes ap-bump {
    40% {
        transform: scale(1.45) rotate(15deg)
    }
}

.ap-empty {
    display: none;
    text-align: center;
    padding: 60px 0;
    color: var(--muted)
}

    .ap-empty.ap-show {
        display: block
    }

.ap-card.ap-hide {
    display: none
}

/* card colors come from the landing page JSON: --ac (accent), --c1/--c2 (background); defaults are derived from --ac */
.ap-card {
    background: linear-gradient(160deg,var(--c1,color-mix(in srgb,var(--ac) 12%,#fff)),var(--c2,color-mix(in srgb,var(--ac) 26%,#fff)))
}

:root[data-theme="dark"] .ap-card {
    background: linear-gradient(160deg,color-mix(in srgb,var(--ac) 20%,#003781),color-mix(in srgb,var(--ac) 7%,#00265c));
    outline-color: rgba(255,255,255,.1)
}

    :root[data-theme="dark"] .ap-card .ap-ill {
        background: radial-gradient(ellipse 60% 55% at 50% 55%,rgba(255,255,255,.13),transparent 70%)
    }

        :root[data-theme="dark"] .ap-card .ap-ill::before {
            background: rgba(0,0,0,.45)
        }

:root[data-theme="dark"] .ap-ill svg [stroke="#1f3347"][fill="none"],
:root[data-theme="dark"] .ap-ill svg path[stroke="#1f3347"]:not([fill]) {
    stroke: #c3d0dd
}

:root[data-theme="dark"] .ap-star svg {
    stroke: #9fb0c2
}

:root[data-theme="dark"] .ap-shine {
    background: radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.09),transparent 45%)
}

:root[data-theme="dark"] .ap-filters button.ap-on {
    background: #13a0d3;
    border-color: #13a0d3;
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(19,160,211,.8)
}

:root[data-theme="dark"] .ap-card:hover {
    box-shadow: 0 2px 4px rgba(0,8,24,.3),0 24px 44px -16px color-mix(in srgb,var(--ac) 55%,#000),0 0 0 4px rgba(19,160,211,.25)
}

:root[data-theme="dark"] .ap-header {
    border-bottom-color: #12386e
}

:root[data-theme="dark"] .ap-logo-container {
    color: #fff
}

:root[data-theme="dark"] .ap-avatar {
    background: #0072ed
}


/* ---------- MODAL "LOGIN AS" ---------- */
.ap-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8,22,45,.45);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s,visibility .25s
}

:root[data-theme="dark"] .ap-modal-backdrop {
    background: rgba(0,8,24,.65)
}

.ap-modal-backdrop.ap-is-open {
    opacity: 1;
    visibility: visible
}

.ap-modal {
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    font-family: "Allianz Neo","Segoe UI",Roboto,Arial,sans-serif;
    box-shadow: 0 30px 60px -20px rgba(0,20,60,.45),0 0 0 1px rgba(255,255,255,.04);
    transform: translateY(16px) scale(.97);
    transition: transform .3s cubic-bezier(.2,.9,.3,1.2)
}

.ap-modal-backdrop.ap-is-open .ap-modal {
    transform: none
}

.ap-modal-head {
    position: relative;
    padding: 22px 24px 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: linear-gradient(135deg,#003781,#0072ed);
    color: #fff
}

.ap-modal-head {
    overflow: hidden
}

    .ap-modal-head::after {
        content: "";
        position: absolute;
        right: -59px;
        top: -59px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        pointer-events: none;
        background: rgba(255,255,255,.09);
        transition: transform .45s cubic-bezier(.3,1.3,.5,1),background .3s
    }

    .ap-modal-head:has(.ap-modal-x:hover)::after, .ap-modal-head:has(.ap-modal-x:focus-visible)::after {
        transform: scale(.19);
        background: rgba(255,255,255,.28)
    }

    .ap-modal-head .ap-mi {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(255,255,255,.16);
        display: grid;
        place-items: center;
        flex: none
    }

        .ap-modal-head .ap-mi svg {
            width: 22px;
            height: 22px;
            stroke: #fff;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round
        }

    .ap-modal-head h3 {
        font-size: 1.25rem;
        font-weight: 800;
        margin-bottom: 3px
    }

    .ap-modal-head p {
        font-size: .94rem;
        opacity: .85;
        line-height: 1.4
    }

.ap-modal-x {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255,255,255,.12);
    transition: background .2s,transform .2s
}

    .ap-modal-x:hover {
        background: rgba(255,255,255,.25);
        transform: rotate(90deg)
    }

    .ap-modal-x svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 2.4;
        fill: none;
        stroke-linecap: round
    }

.ap-modal-body {
    padding: 20px 24px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.ap-field label {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 7px
}

.ap-inp {
    position: relative
}

    .ap-inp svg {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        stroke: var(--muted);
        fill: none;
        stroke-width: 2.2
    }

    .ap-inp input, .ap-field select, .ap-field textarea {
        width: 100%;
        padding: 11px 14px;
        border-radius: 12px;
        border: 1.5px solid var(--line);
        background: var(--surface2);
        color: var(--ink);
        font: 500 1rem inherit;
        font-family: inherit;
        outline: none;
        transition: border-color .2s,box-shadow .2s,background .2s
    }

    .ap-inp input {
        padding-left: 40px
    }

.ap-field textarea {
    resize: vertical;
    min-height: 64px
}

    .ap-inp input:focus, .ap-field select:focus, .ap-field textarea:focus {
        border-color: #0072ed;
        background: var(--surface);
        box-shadow: 0 0 0 4px rgba(0,114,237,.14)
    }

.ap-modal-foot {
    display: flex;
    gap: 10px;
    justify-content: stretch;
    padding: 16px 24px;
    border-top: 1px solid var(--line);
    background: var(--surface2)
}

.ap-btn {
    padding: 11px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: .98rem;
    font-family: inherit;
    transition: all .2s
}

    .ap-btn.ap-primary {
        flex: 1;
        justify-content: center;
        padding: 13px 18px;
        color: #fff;
        background: linear-gradient(135deg,#003781,#0072ed);
        box-shadow: 0 8px 18px -8px rgba(0,114,237,.8);
        display: flex;
        align-items: center;
        gap: 8px
    }

        .ap-btn.ap-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 12px 24px -8px rgba(0,114,237,.9)
        }

        .ap-btn.ap-primary:disabled {
            opacity: .45;
            cursor: not-allowed;
            transform: none;
            box-shadow: none
        }

        .ap-btn.ap-primary svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-linejoin: round
        }

body.ap-modal-open {
    overflow: hidden
}

@media (max-width:560px) {
    .ap-modal-backdrop {
        align-items: flex-end;
        padding: 0
    }

    .ap-modal {
        max-width: none;
        border-radius: 22px 22px 0 0;
        max-height: 92vh;
        transform: translateY(100%)
    }

    .ap-modal-head {
        padding-top: 26px
    }

        .ap-modal-head::before {
            content: "";
            position: absolute;
            top: 8px;
            left: 50%;
            width: 40px;
            height: 4px;
            margin-left: -20px;
            border-radius: 4px;
            background: rgba(255,255,255,.45)
        }

    .ap-modal-foot {
        flex-direction: column-reverse
    }

        .ap-modal-foot .ap-btn {
            width: 100%;
            justify-content: center
        }
}

@media (prefers-reduced-motion:reduce) {
    .ap-modal, .ap-modal-backdrop {
        transition: none
    }
}


/* ---------- FOOTER / TERMS ---------- */
.ap-site-foot {
    max-width: 1180px;
    margin: 10px auto 0;
    padding: 0 24px 36px;
    font-family: "Allianz Neo","Segoe UI",Roboto,Arial,sans-serif
}

.ap-foot-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20,40,60,.05),0 10px 26px -14px var(--sh);
    overflow: hidden
}

.ap-terms-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    text-align: left;
    color: #c62828;
    font-weight: 800;
    font-size: .96rem;
    letter-spacing: .4px;
    text-transform: uppercase;
    transition: background .2s
}

:root[data-theme="dark"] .ap-terms-btn {
    color: #ff8a80
}

.ap-terms-btn:hover {
    background: color-mix(in srgb,#e53935 7%,var(--surface))
}

.ap-terms-btn .ap-ti {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
    background: color-mix(in srgb,#e53935 14%,var(--surface))
}

    .ap-terms-btn .ap-ti svg {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.ap-terms-btn .ap-hint {
    margin-left: auto;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted)
}

.ap-terms-btn .ap-chev {
    width: 18px;
    height: 18px;
    stroke: var(--muted);
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .35s
}

.ap-terms-btn[aria-expanded="true"] .ap-chev {
    transform: rotate(180deg)
}

.ap-terms-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .45s cubic-bezier(.2,.8,.2,1),opacity .35s
}

    .ap-terms-panel.ap-is-open {
        opacity: 1
    }

.ap-terms-text {
    margin: 0 20px 18px;
    padding: 14px 16px 14px 18px;
    border-left: 4px solid #e53935;
    border-radius: 10px;
    background: color-mix(in srgb,#e53935 6%,var(--surface2));
    font-size: .96rem;
    line-height: 1.7;
    color: var(--ink);
    text-align: justify
}

    .ap-terms-text strong {
        color: #c62828
    }

:root[data-theme="dark"] .ap-terms-text strong {
    color: #ff8a80
}

.ap-foot-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--line)
}

    .ap-foot-info p {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: .96rem;
        color: var(--ink);
        line-height: 1.5
    }

    .ap-foot-info svg {
        width: 17px;
        height: 17px;
        flex: none;
        margin-top: 2px;
        stroke: #0072ed;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

:root[data-theme="dark"] .ap-foot-info svg {
    stroke: #7fd0f2
}

.ap-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--surface2);
    font-size: .9rem;
    color: var(--muted)
}

    .ap-copy b {
        color: var(--brand);
        font-weight: 800
    }

:root[data-theme="dark"] .ap-terms-btn, :root[data-theme="dark"] .ap-terms-text, :root[data-theme="dark"] .ap-terms-text strong,
:root[data-theme="dark"] .ap-foot-info p, :root[data-theme="dark"] .ap-copy, :root[data-theme="dark"] .ap-copy b {
    color: #fff
}

    :root[data-theme="dark"] .ap-terms-btn .ap-ti {
        color: #ff8a80
    }

    :root[data-theme="dark"] .ap-terms-btn .ap-hint {
        color: rgba(255,255,255,.7)
    }

@media (max-width:680px) {
    .ap-site-foot {
        padding: 0 16px 28px
    }

    .ap-terms-btn .ap-hint {
        display: none
    }

    .ap-terms-text {
        text-align: left;
        margin: 0 14px 14px
    }
}

.ap-card .ap-head > div:last-child {
    min-width: 0
}

.ap-card .ap-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 7px
}

.ap-card .ap-foot-row {
    display: flex;
    align-items: center;
    gap: 8px
}

.ap-card .ap-desc {
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--title);
    opacity: .8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.ap-ill img.ap-app-icon {
    max-width: 70%;
    max-height: 110px;
    object-fit: contain;
    position: relative;
    filter: drop-shadow(0 6px 10px rgba(20,40,60,.2));
    transition: transform .45s
}

.ap-card:hover .ap-ill img.ap-app-icon {
    transform: scale(1.06) translateY(-3px)
}

.ap-skeleton {
    height: 292px;
    border-radius: 16px;
    background: linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);
    background-size: 200% 100%;
    animation: ap-sk 1.2s linear infinite;
    border: 1px solid var(--line)
}

@keyframes ap-sk {
    to {
        background-position: -200% 0
    }
}

/* ---------- SVG: static state ---------- */
.ap-ill svg * {
    transform-box: fill-box
}

.ap-ill svg .ap-vb {
    transform-box: view-box
}

.ap-ill svg [transform]:not([class]) {
    transform-box: view-box;
    transform-origin: 0 0
}

.ap-ill .ap-wheel, .ap-ill .ap-spin, .ap-ill .ap-spinr, .ap-ill .ap-beat, .ap-ill .ap-pop, .ap-ill .ap-shake, .ap-ill .ap-wobble, .ap-ill .ap-pulse, .ap-ill .ap-stamp {
    transform-origin: center
}

.ap-ill .ap-grow, .ap-ill .ap-sway {
    transform-origin: bottom center
}

.ap-ill .ap-swing {
    transform-origin: left center
}

.ap-ill .ap-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 0
}

.ap-ill .ap-smoke {
    opacity: 0
}

.ap-ill .ap-glow {
    opacity: .35
}

.ap-ill .ap-stamp {
    transform: rotate(-10deg)
}

/* ---------- SVG: animations only on hover ---------- */
.ap-card:hover .ap-wheel {
    animation: ap-spin .9s linear infinite
}

.ap-card:hover .ap-spin {
    animation: ap-spin 6s linear infinite
}

.ap-card:hover .ap-spinr {
    animation: ap-spin 4s linear infinite reverse
}

.ap-card:hover .ap-bob {
    animation: ap-bob 2.4s ease-in-out infinite
}

.ap-card:hover .ap-bob2 {
    animation: ap-bob 2.4s ease-in-out .3s infinite
}

.ap-card:hover .ap-bob3 {
    animation: ap-bob 2.4s ease-in-out .6s infinite
}

.ap-card:hover .ap-drive {
    animation: ap-bob .5s ease-in-out infinite
}

.ap-card:hover .ap-grow {
    animation: ap-grow 2.4s ease-in-out infinite
}

.ap-card:hover .ap-beat {
    animation: ap-beat 1.4s ease-in-out infinite
}

.ap-card:hover .ap-draw {
    animation: ap-draw 3.2s ease-in-out infinite
}

.ap-card:hover .ap-sway {
    animation: ap-sway 3s ease-in-out infinite
}

.ap-card:hover .ap-smoke {
    animation: ap-smoke 2.4s ease-out infinite
}

.ap-card:hover .ap-pop {
    animation: ap-pop 3.2s ease-in-out infinite
}

.ap-card:hover .ap-blink {
    animation: ap-blink 1.6s steps(1) infinite
}

.ap-card:hover .ap-glow {
    animation: ap-glow 2.5s ease-in-out infinite
}

.ap-card:hover .ap-shake {
    animation: ap-shake 3s ease-in-out infinite
}

.ap-card:hover .ap-stamp {
    animation: ap-stamp 3s ease-out infinite
}

.ap-card:hover .ap-hit {
    animation: ap-hit 3s cubic-bezier(.3,.7,.4,1) infinite
}

.ap-card:hover .ap-wobble {
    animation: ap-wobble 3s ease-in-out infinite
}

.ap-card:hover .ap-fly {
    animation: ap-fly 4s ease-in-out infinite
}

.ap-card:hover .ap-cross {
    animation: ap-cross 5s linear infinite
}

.ap-card:hover .ap-cloud {
    animation: ap-cloud 8s ease-in-out infinite
}

.ap-card:hover .ap-road {
    animation: ap-road .6s linear infinite
}

.ap-card:hover .ap-tilt {
    animation: ap-tilt 3.2s ease-in-out infinite
}

.ap-card:hover .ap-scan {
    animation: ap-scan 3s ease-in-out infinite
}

.ap-card:hover .ap-swing {
    animation: ap-swing 2.2s ease-in-out infinite
}

.ap-card:hover .ap-pulse {
    animation: ap-pulse 2s ease-in-out infinite
}
/* every keyframe starts from the resting pose, so hover never "jumps" */
@keyframes ap-spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes ap-bob {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-3px)
    }
}

@keyframes ap-grow {
    0%,100% {
        transform: scaleY(1)
    }

    50% {
        transform: scaleY(.55)
    }
}

@keyframes ap-beat {
    0%,60%,100% {
        transform: scale(1)
    }

    15% {
        transform: scale(1.2)
    }

    30% {
        transform: scale(1)
    }

    45% {
        transform: scale(1.12)
    }
}

@keyframes ap-draw {
    0% {
        stroke-dashoffset: 0
    }

    12% {
        stroke-dashoffset: 1
    }

    55%,100% {
        stroke-dashoffset: 0
    }
}

@keyframes ap-sway {
    0%,100% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(-3deg)
    }

    75% {
        transform: rotate(3deg)
    }
}

@keyframes ap-smoke {
    0% {
        opacity: 0;
        transform: translateY(4px) scale(.6)
    }

    30% {
        opacity: .9
    }

    100% {
        opacity: 0;
        transform: translateY(-14px) scale(1.3)
    }
}

@keyframes ap-pop {
    0%,100% {
        transform: scale(1)
    }

    10% {
        transform: scale(0)
    }

    22% {
        transform: scale(1.15)
    }

    30% {
        transform: scale(1)
    }
}

@keyframes ap-blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: .25
    }
}

@keyframes ap-glow {
    0%,100% {
        opacity: .35
    }

    50% {
        opacity: 1
    }
}

@keyframes ap-shake {
    0%,40%,100% {
        transform: translate(0,0) rotate(0)
    }

    44% {
        transform: translate(-2px,0) rotate(-1deg)
    }

    48% {
        transform: translate(2px,-1px) rotate(1deg)
    }

    52% {
        transform: translate(-1px,0) rotate(-.5deg)
    }

    56% {
        transform: translate(0,0)
    }
}

@keyframes ap-stamp {
    0% {
        transform: scale(1) rotate(-10deg);
        opacity: 1
    }

    10% {
        transform: scale(2.4) rotate(-10deg);
        opacity: 0
    }

    24% {
        transform: scale(.92) rotate(-10deg);
        opacity: 1
    }

    30%,100% {
        transform: scale(1) rotate(-10deg);
        opacity: 1
    }
}

@keyframes ap-hit {
    0% {
        transform: translate(0,0);
        opacity: 1
    }

    8% {
        transform: translate(40px,-40px);
        opacity: 0
    }

    12% {
        opacity: 1
    }

    32% {
        transform: translate(0,0)
    }

    35% {
        transform: translate(1.5px,-1.5px)
    }

    38%,100% {
        transform: translate(0,0)
    }
}

@keyframes ap-wobble {
    0%,100% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(-4deg)
    }

    75% {
        transform: rotate(4deg)
    }
}

@keyframes ap-fly {
    0%,100% {
        transform: translate(0,0)
    }

    25% {
        transform: translate(-6px,5px)
    }

    75% {
        transform: translate(6px,-5px)
    }
}

@keyframes ap-cross {
    0% {
        transform: translate(0,0)
    }

    45% {
        transform: translate(120px,-40px);
        opacity: 1
    }

    46% {
        opacity: 0;
        transform: translate(-90px,30px)
    }

    55% {
        opacity: 1
    }

    100% {
        transform: translate(0,0)
    }
}

@keyframes ap-cloud {
    0%,100% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-8px)
    }

    75% {
        transform: translateX(8px)
    }
}

@keyframes ap-road {
    to {
        transform: translateX(-24px)
    }
}

@keyframes ap-tilt {
    0%,100% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(-7deg)
    }

    75% {
        transform: rotate(7deg)
    }
}

@keyframes ap-scan {
    0%,100% {
        transform: translate(0,0)
    }

    33% {
        transform: translate(22px,10px)
    }

    66% {
        transform: translate(8px,24px)
    }
}

@keyframes ap-swing {
    0%,100% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(-6deg)
    }

    75% {
        transform: rotate(6deg)
    }
}

@keyframes ap-pulse {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }
}

@media (prefers-reduced-motion:reduce) {
    .ap-card, .ap-card:hover {
        transform: none !important
    }

        .ap-card:hover .ap-ill * {
            animation: none !important
        }
}

@media (max-width:1100px) {
    .ap-external-link {
        display: none
    }
}

@media (max-width:1000px) {
    .ap-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:820px) {
    .ap-header {
        padding: 0 16px;
        gap: 12px
    }

    .ap-logo-img {
        height: 30px
    }

    .ap-user-btn .ap-user-name {
        display: none
    }

    .ap-user-btn {
        padding: 4px 8px 4px 4px
    }

    .ap-nav-links {
        gap: 12px
    }

    .ap-search-container kbd {
        display: none
    }
}

@media (max-width:680px) {
    .ap-main {
        padding: 16px 16px 40px
    }

    .ap-grid {
        grid-template-columns: 1fr
    }

    .ap-open {
        opacity: 1;
        transform: none
    }

    .ap-star {
        opacity: 1;
        transform: none
    }
}

/* the form inside the modal (Html.BeginForm) */
.ap-modal form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0
}
/* space below the content, before the footer */
.body-content {
    padding-bottom: 10px
}
/* MDB5 adds margins to p/h2/label - reset them inside our components */
.ap-card .ap-desc, .ap-foot-info p, .ap-modal-head p, .ap-modal-head h3, .ap-main h2 {
    margin: 0
}

.ap-field label {
    margin-top: 0
}

/* Placeholder while a card illustration (wwwroot/Content/svg/hover/*.svg) is loading: same box as the SVG, soft shimmer */
.ap-ill-slot {
    display: block;
    width: 100%;
    max-width: 250px;
    aspect-ratio: 2/1;
    border-radius: 14px;
    background: linear-gradient(90deg,transparent,rgba(127,160,200,.14),transparent) 0 0/200% 100%;
    animation: ap-ill-load 1.2s linear infinite
}

@keyframes ap-ill-load {
    to {
        background-position: -200% 0
    }
}

@media (prefers-reduced-motion:reduce) {
    .ap-ill-slot {
        animation: none
    }
}