/* ===== Dark theme (UIKit-friendly) ===== */
        :root{
            --cd-bg: #0b0f14;
            --cd-surface: #111827;
            --cd-surface-2: #0f172a;
            --cd-text: #e5e7eb;
            --cd-muted: #9ca3af;
            --cd-border: rgba(255,255,255,.10);
            --cd-input: rgba(255,255,255,.06);
            --cd-input-focus: rgba(255,255,255,.10);
        }

        body.cd-dark {
            background: radial-gradient(1200px 800px at 20% 0%, rgba(99,102,241,.18), transparent 60%),
                        radial-gradient(900px 600px at 90% 10%, rgba(16,185,129,.12), transparent 55%),
                        var(--cd-bg);
            color: var(--cd-text);
            min-height: 100vh;
        }

        /* Card */
        .cd-card {
            background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
            border: 1px solid var(--cd-border);
            box-shadow: 0 12px 30px rgba(0,0,0,.45);
            border-radius: 14px;
        }

        /* Titles / text */
        .cd-card .uk-card-title,
        .cd-card .uk-text-center,
        .cd-card .uk-text-small {
            color: var(--cd-text);
        }
        .cd-card .uk-text-small { color: var(--cd-muted); }

        /* Labels */
        .cd-card .uk-form-label { color: var(--cd-muted); }

        /* Inputs */
        .cd-card .uk-input {
            background: var(--cd-input);
            border: 1px solid var(--cd-border);
            color: var(--cd-text);
        }
        .cd-card .uk-input::placeholder { color: rgba(229,231,235,.55); }
        .cd-card .uk-input:focus {
            background: var(--cd-input-focus);
            border-color: rgba(99,102,241,.55);
            box-shadow: 0 0 0 3px rgba(99,102,241,.18);
        }

        /* Buttons */
        .cd-card .uk-button-primary {
            background: #4f46e5;
            border: 1px solid rgba(255,255,255,.10);
        }
        .cd-card .uk-button-primary:hover { background: #4338ca; }

        .cd-card .uk-button-default {
            background: rgba(255,255,255,.04);
            border: 1px solid var(--cd-border);
            color: var(--cd-text);
        }
        .cd-card .uk-button-default:hover {
            background: rgba(255,255,255,.07);
        }

        /* Links */
        .cd-card a { color: #a5b4fc; }
        .cd-card a:hover { color: #c7d2fe; }

        /* Dividers */
        .cd-card hr,
        .cd-card .uk-hr,
        .cd-card .uk-divider-icon {
            border-color: var(--cd-border) !important;
        }

        /* Alerts (UIKit default ok, but tweak contrast) */
        .cd-card .uk-alert-danger,
        .cd-card .uk-alert-success{
            border: 1px solid var(--cd-border);
        }

        /* Logo spacing tweak */
        .cd-logo img { filter: drop-shadow(0 10px 20px rgba(0,0,0,.45)); }
        
        /* ===== Sticky App Footer ===== */

.page-wrapper{
    padding-bottom:80px;
}

.app-footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:70px;

    background:rgba(15,23,42,.95);
    backdrop-filter:blur(10px);

    border-top:1px solid var(--cd-border);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:999;
}

.app-footer .footer-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    color:var(--cd-muted);
    text-decoration:none;

    font-size:12px;
    width:70px;
}

.app-footer .footer-item span{
    margin-bottom:4px;
}

.app-footer .footer-item:hover{
    color:#a5b4fc;
}
/* Select (same style as inputs) */

.cd-card .uk-select {
    background: var(--cd-input);
    border: 1px solid var(--cd-border);
    color: var(--cd-text);
}

.cd-card .uk-select:focus {
    background: var(--cd-input-focus);
    border-color: rgba(99,102,241,.55);
    box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}

/* fix arrow visibility */
.cd-card .uk-select option {
    background: var(--cd-surface);
    color: var(--cd-text);
}

/* Headings visibility */

.cd-card h1,
.cd-card h2,
.cd-card h3,
.cd-card h4 {
    color: var(--cd-text);
    font-weight: 600;
}
/* Logout button */

.cd-card .uk-button-danger{
    background: #dc2626;
    border: 1px solid rgba(255,255,255,.10);
    color: #ffffff;
}

.cd-card .uk-button-danger:hover{
    background: #b91c1c;
    color: #ffffff;
}

.cd-card .uk-button-danger:focus{
    box-shadow: 0 0 0 3px rgba(220,38,38,.35);
}

.inventory-item{
padding:6px;
border:1px solid var(--cd-border);
border-radius:8px;
text-align:center;
cursor:pointer;
transition:.2s;
}

.inventory-item:hover{
background:rgba(255,255,255,.05);
transform:scale(1.05);
}
.equipment-slot{

border:1px dashed var(--cd-border);
border-radius:10px;
padding:20px;
font-size:12px;
color:var(--cd-muted);

}

.avatar-option{

padding:10px;

border-radius:22px;

border:1px solid var(--cd-border);

background:rgba(255,255,255,.02);

transition:.2s;

cursor:pointer;

display:flex;
align-items:center;
justify-content:center;

}

.avatar-option img{

width:150px;
height:214px;

object-fit:cover;

border-radius:20px;

box-shadow:0 12px 30px rgba(0,0,0,.6);

}

.avatar-option:hover{

transform:translateY(-4px) scale(1.03);

background:rgba(255,255,255,.05);

border-color:rgba(99,102,241,.45);

}

.avatar-selected{

border:2px solid #4f46e5;

box-shadow:
0 0 0 2px rgba(99,102,241,.35),
0 15px 35px rgba(0,0,0,.7);

}



.hero-avatar{

width:120px;
height:214px;

object-fit:cover;

border-radius:22px;

border:2px solid var(--cd-border);

box-shadow:
0 10px 25px rgba(0,0,0,.5),
0 0 0 2px rgba(255,255,255,.03) inset;

transition:.2s;

}

.hero-avatar:hover{

transform:scale(1.05);

box-shadow:
0 12px 30px rgba(0,0,0,.6),
0 0 0 2px rgba(99,102,241,.35);

}

.uk-modal{

background:rgba(0,0,0,.5);

}

.uk-modal-dialog.cd-card{

background:var(--cd-surface);

border:1px solid var(--cd-border);

box-shadow:0 20px 50px rgba(0,0,0,.7);

backdrop-filter:none;

}

.uk-modal-dialog.cd-card{

background:var(--cd-surface);

border:1px solid var(--cd-border);

box-shadow:0 20px 50px rgba(0,0,0,.7);

backdrop-filter:none;

}