:root{
    --proxmox-orange:#E57000;
    --proxmox-blue:#A7C7FF;
    --glass-bg:rgba(30, 41, 59, 0.55);
    --glass-border:rgba(255, 255, 255, 0.15);
    --text:#e2e8f0;
    --text-muted:#94a3b8;
    --bad:#ef4444;
}
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body {
    display:flex; align-items:center; justify-content:center;
    font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color:var(--text);
    background:
        radial-gradient(ellipse at 20% 0%, rgba(229, 112, 0, 0.22), transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(167, 199, 255, 0.15), transparent 55%),
        linear-gradient(135deg, #0a0e1a 0%, #111827 50%, #0a0e1a 100%);
    background-attachment:fixed;
    padding:20px;
}
body::before, body::after {
    content:''; position:fixed; border-radius:50%;
    filter:blur(80px); z-index:0; pointer-events:none;
}
body::before {
    width:420px; height:420px;
    background:radial-gradient(circle, rgba(229,112,0,0.28), transparent 70%);
    top:-140px; left:-120px;
}
body::after {
    width:380px; height:380px;
    background:radial-gradient(circle, rgba(167,199,255,0.2), transparent 70%);
    bottom:-120px; right:-100px;
}
.card {
    position:relative; z-index:1;
    width:100%; max-width:420px;
    padding:36px 32px;
    background:var(--glass-bg);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid var(--glass-border);
    border-radius:20px;
    box-shadow:0 24px 60px rgba(0,0,0,0.5), 0 0 40px rgba(229,112,0,0.1);
}
.card::before {
    content:''; position:absolute; top:0; left:24px; right:24px; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}
.brand { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:24px; }
.brand img {
    width:64px; height:64px;
    filter:drop-shadow(0 0 16px rgba(229,112,0,0.7))
           brightness(0) saturate(100%) invert(48%) sepia(88%)
           saturate(1478%) hue-rotate(2deg) brightness(93%) contrast(101%);
}
.brand h1 {
    margin:0; font-size:1.35em; font-weight:700;
    background:linear-gradient(135deg, #fff 0%, var(--proxmox-orange) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    text-align:center;
}
.brand p { margin:0; color:var(--text-muted); font-size:.9em; text-align:center; }
.brand .shield {
    display:inline-block; padding:3px 12px;
    background:rgba(229,112,0,0.15);
    border:1px solid rgba(229,112,0,0.4);
    border-radius:12px;
    color:var(--proxmox-orange);
    font-size:.72em; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em;
}
.form-group { margin-bottom:16px; }
label {
    display:block; margin-bottom:6px;
    color:var(--text-muted); font-size:.85em;
    text-transform:uppercase; letter-spacing:.05em; font-weight:600;
}
input {
    width:100%; padding:12px 16px;
    background:rgba(0,0,0,0.35);
    border:1px solid var(--glass-border);
    border-radius:10px;
    color:var(--text); font-size:1em;
}
input:focus {
    outline:none;
    border-color:rgba(229,112,0,0.6);
    box-shadow:0 0 0 3px rgba(229,112,0,0.15);
}
input.code-input {
    font-size:1.4em; text-align:center;
    letter-spacing:.3em;
    font-family:ui-monospace, monospace;
    padding:14px 16px;
}
.cf-turnstile { margin:18px 0; display:flex; justify-content:center; }
.btn {
    width:100%; padding:13px;
    background:linear-gradient(135deg, #E57000 0%, #C75E00 100%);
    color:#fff; border:none; border-radius:10px;
    font-size:1em; font-weight:700; cursor:pointer;
    box-shadow:0 8px 20px rgba(229,112,0,0.35);
    transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(229,112,0,0.5); }
.error {
    padding:12px 16px; margin-bottom:18px;
    background:rgba(239,68,68,0.15);
    border:1px solid rgba(239,68,68,0.4);
    border-radius:10px;
    color:#fca5a5; font-size:.9em;
}
.brand-link {
    margin-top:20px; padding-top:18px;
    border-top:1px solid rgba(255,255,255,0.08);
    text-align:center;
}
.brand-link a {
    color:var(--text-muted); text-decoration:none;
    font-size:.85em;
}
.brand-link a:hover { color:var(--proxmox-orange); }
.timer { margin-top:20px; color:var(--text-muted); font-size:.85em; text-align:center; }
.timer strong { color:var(--proxmox-orange); }
.back-link {
    display:inline-block; margin-top:16px;
    color:var(--text-muted); font-size:.85em; text-decoration:none;
    text-align:center; width:100%;
}
.back-link:hover { color:var(--proxmox-orange); }
.icon-2fa {
    width:72px; height:72px; margin:0 auto 20px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(229,112,0,0.15);
    border:1px solid rgba(229,112,0,0.4);
    border-radius:50%; font-size:2.2em;
    box-shadow:0 0 24px rgba(229,112,0,0.25);
}
.lang-switcher-top {
    position:absolute; top:14px; right:16px;
    display:flex; gap:4px; z-index:2;
}
.lang-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:8px;
    background:rgba(0,0,0,0.3);
    border:1px solid var(--glass-border);
    text-decoration:none; font-size:1.05em;
    transition:background .2s ease, transform .2s ease;
}
.lang-btn:hover { background:rgba(255,255,255,0.1); transform:translateY(-1px); }
.lang-btn.active {
    background:rgba(229,112,0,0.25);
    border-color:rgba(229,112,0,0.5);
    box-shadow:0 0 12px rgba(229,112,0,0.3);
}