#app
{
    background-attachment: fixed;
    background-color: var(--kfw-background);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    --rz-text-font-family: Inter, "Segoe UI", Arial, sans-serif;
}

[data-theme="dark"] #app
{
    background-color: #030914;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.23) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(73, 163, 255, 0.14) 0 1px, transparent 1.4px), radial-gradient(circle at 20% 9%, rgba(24, 101, 169, 0.12), transparent 25%), radial-gradient(circle at 78% 18%, rgba(21, 92, 153, 0.09), transparent 25%), linear-gradient(180deg, #020812 0%, #030914 48%, #020710 100%);
    background-position: 30px 50px, 145px 115px, 0 0, 0 0, 0 0;
    background-size: 190px 190px, 265px 265px, auto, auto, auto;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
}

:root
{
    --ko-blue: #2688ff;
    --ko-blue-soft: #45a5ff;
    --ko-cyan: #29d8ee;
    --ko-danger: #ff4d45;
    --ko-danger-soft: #ff9d9d;
    --ko-orange: #ff9a32;
    --ko-orange-dark: #d97a1f;
    --ko-red-dark: #c0392b;
    --ko-purple: #b856ff;
    --ko-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    --ko-success: #4bdd63;
    --ko-yellow: #ffc72c;
    --ko-text-strong: #ffffff;
    --ko-text: #f1f6fc;
    --ko-text-soft: #cfdae8;
    --ko-text-mid: #9fb0c4;
    --ko-text-muted: #8f9caf;
    --ko-text-faint: #5f7186;
}

.ko-building-tile
{
    min-height: 402px;
    overflow: hidden;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--ko-accent, var(--ko-blue)) 44%, transparent);
    border-radius: 16px;
    background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--ko-accent, var(--ko-blue)) 7%, transparent), transparent 34%), linear-gradient(180deg, rgba(7, 19, 33, 0.99), rgba(3, 13, 24, 0.99));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.025);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

    .ko-building-tile:hover
    {
        transform: translateY(-5px);
        border-color: color-mix(in srgb, var(--ko-accent, var(--ko-blue)) 70%, transparent);
        box-shadow: 0 22px 42px rgba(0, 0, 0, 0.46), 0 0 30px color-mix(in srgb, var(--ko-accent, var(--ko-blue)) 19%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .ko-building-tile::after
    {
        position: absolute;
        inset: 0;
        pointer-events: none;
        content: "";
        opacity: 0.55;
        background: linear-gradient(120deg, transparent 0 44%, rgba(255, 255, 255, 0.035) 50%, transparent 56%);
        transform: translateX(-100%);
        transition: transform 550ms ease;
    }

    .ko-building-tile:hover::after
    {
        transform: translateX(100%);
    }

.ko-building-tile-image
{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.015);
    transition: transform 320ms ease, filter 320ms ease;
}

.ko-building-tile:hover .ko-building-tile-image
{
    transform: scale(1.06);
    filter: saturate(1.08) brightness(1.05);
}

.ko-building-tile-visual::after
{
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(180deg, transparent 48%, rgba(3, 13, 24, 0.35) 68%, rgba(3, 13, 24, 0.98) 100%), radial-gradient(circle at 50% 60%, transparent 0, color-mix(in srgb, var(--ko-accent, var(--ko-blue)) 7%, transparent) 56%, transparent 80%);
}

.ko-building-tile-banner::before
{
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(110deg, transparent 25%, rgba(255, 236, 158, 0.10) 47%, transparent 67%);
    transform: translateX(-100%);
    animation: ko-shimmer 2.8s infinite;
}

.ko-building-tile-banner-progress
{
    height: 8px !important;
    margin: 10px 0 7px;
    overflow: hidden;
    border: 1px solid rgba(255, 200, 35, 0.48);
    border-radius: 999px !important;
    background: rgba(24, 19, 8, 0.92) !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 193, 31, 0.09);
}

    .ko-building-tile-banner-progress .rz-progressbar-value
    {
        position: relative;
        overflow: hidden;
        border-radius: inherit;
        background: linear-gradient(90deg, #f7a411 0%, #ffd72f 58%, #fff1a0 100%) !important;
        box-shadow: 0 0 10px rgba(255, 206, 36, 0.95), 0 0 22px rgba(255, 180, 17, 0.55);
    }

        .ko-building-tile-banner-progress .rz-progressbar-value::after
        {
            position: absolute;
            inset: 0;
            content: "";
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent);
            animation: ko-progress-shine 1.8s linear infinite;
        }

.ko-action-button
{
    width: 100%;
    padding: 11px !important;
    border: 1px solid #3698ff !important;
    border-radius: 8px !important;
    color: var(--ko-text-strong) !important;
    font-weight: 850 !important;
    letter-spacing: 0.25px;
    text-transform: uppercase;
    background: radial-gradient(circle at 50% -40%, rgba(255, 255, 255, 0.32), transparent 50%), linear-gradient(180deg, #2d8ef8 0%, #1a65c8 58%, #11499c 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 7px 18px rgba(25, 108, 216, 0.34), 0 0 22px rgba(34, 130, 245, 0.12);
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

    .ko-action-button:hover:not(:disabled)
    {
        transform: translateY(-1px);
        filter: brightness(1.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 9px 22px rgba(25, 108, 216, 0.43), 0 0 28px rgba(34, 130, 245, 0.23);
    }

.ko-action-button-locked
{
    border-color: color-mix(in srgb, var(--ko-danger) 45%, transparent) !important;
    color: var(--ko-danger) !important;
    text-transform: none;
    background: linear-gradient(180deg, rgba(31, 52, 75, 0.78), rgba(13, 27, 43, 0.83)) !important;
    box-shadow: none;
    opacity: 1 !important;
}

    .ko-action-button-locked:hover
    {
        transform: none;
        filter: none;
    }

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

    60%, 100%
    {
        transform: translateX(130%);
    }
}

@keyframes ko-progress-shine
{
    from
    {
        transform: translateX(-100%);
    }

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