:root {
    color-scheme: dark;
    --login-cyan: #35dbff;
    --login-blue: #4388ff;
    --login-violet: #8b5cf6;
    --login-green: #35e4a5;
}

html, body.login-body { min-height: 100%; }
body.login-body {
    margin: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 8%, rgba(59, 130, 246, .18), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(139, 92, 246, .15), transparent 28%),
        linear-gradient(145deg, #020611, #061324 54%, #020711) !important;
    font-family: Cairo, Tahoma, Arial, sans-serif;
    color: #f5fbff;
}

.bcc-login-shell {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
    position: relative;
    isolation: isolate;
}
.bcc-login-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(92, 171, 239, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(92, 171, 239, .045) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 88%);
}
.bcc-login-shell::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 560px;
    height: 560px;
    inset-inline-start: 13%;
    top: 14%;
    border-radius: 50%;
    border: 1px solid rgba(65, 178, 255, .12);
    box-shadow: 0 0 0 80px rgba(62, 135, 255, .025), 0 0 0 160px rgba(139, 92, 246, .018);
}

.bcc-login-stage {
    display: grid;
    align-content: center;
    padding: clamp(34px, 6vw, 100px);
    min-width: 0;
}
.bcc-login-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    border: 1px solid rgba(52, 219, 255, .22);
    border-radius: 999px;
    background: rgba(7, 31, 52, .58);
    color: #9beeff;
    padding: 7px 11px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.bcc-login-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--login-green); box-shadow: 0 0 14px var(--login-green); }
.bcc-login-brand { margin-top: 25px; display: flex; align-items: center; gap: 18px; }
.bcc-login-logo {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #1675df, #6551e8 70%, #1ed6aa);
    box-shadow: 0 24px 65px rgba(51, 117, 231, .34), inset 0 1px 0 rgba(255,255,255,.34);
    color: #fff;
    font: 1000 42px/1 Arial, sans-serif;
}
.bcc-login-brand strong { display: block; color: #fff; font: 1000 clamp(34px, 4.5vw, 64px)/1 Arial, sans-serif; letter-spacing: 3px; }
.bcc-login-brand span { display: block; margin-top: 7px; color: #7f9db9; font-size: 11px; font-weight: 900; letter-spacing: 3px; }
.bcc-login-stage h1 { max-width: 720px; margin: 34px 0 10px; color: #fff; font-size: clamp(26px, 3.4vw, 49px); line-height: 1.3; }
.bcc-login-stage > p { max-width: 680px; margin: 0; color: #8fa9c1; font-size: clamp(13px, 1.35vw, 17px); font-weight: 700; line-height: 1.9; }

.bcc-system-strip { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.bcc-system-chip {
    min-width: 135px;
    min-height: 52px;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(86, 167, 232, .16);
    border-radius: 12px;
    background: rgba(5, 20, 38, .66);
    padding: 7px 11px;
}
.bcc-system-chip i { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 12px rgba(245,158,11,.66); }
.bcc-system-chip.ok i { background: var(--login-green); box-shadow: 0 0 13px rgba(53,228,165,.7); }
.bcc-system-chip b { display: block; color: #dceeff; font-size: 11px; }
.bcc-system-chip small { display: block; margin-top: 2px; color: #66839d; font-size: 9px; font-weight: 800; }

.bcc-login-panel {
    display: grid;
    place-items: center;
    padding: clamp(22px, 4vw, 64px);
    background: linear-gradient(180deg, rgba(4, 14, 29, .64), rgba(2, 8, 18, .86));
    border-inline-start: 1px solid rgba(89, 171, 237, .12);
    backdrop-filter: blur(12px);
}
.bcc-login-card {
    width: min(430px, 100%);
    border: 1px solid rgba(92, 184, 255, .22);
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(9, 30, 52, .96), rgba(4, 13, 27, .985));
    box-shadow: 0 35px 95px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.05);
    padding: clamp(24px, 3vw, 38px);
}
.bcc-login-card-header { margin-bottom: 26px; }
.bcc-login-card-header span { color: var(--login-cyan); font-size: 10px; font-weight: 900; letter-spacing: 1.4px; }
.bcc-login-card-header h2 { margin: 7px 0 5px; color: #fff; font-size: 27px; }
.bcc-login-card-header p { margin: 0; color: #7892ab; font-size: 12px; font-weight: 700; }
.bcc-login-card form { display: grid; gap: 15px; }
.bcc-login-field { display: grid; gap: 7px; color: #b9d0e4; font-size: 11px; font-weight: 900; }
.bcc-login-input { position: relative; }
.bcc-login-input i { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: #5d7b97; }
.bcc-login-input input {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    border: 1px solid rgba(87, 157, 214, .23) !important;
    border-radius: 11px !important;
    background: rgba(2, 11, 24, .84) !important;
    color: #f6fbff !important;
    padding: 0 42px 0 13px !important;
    outline: 0;
    text-align: start;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.bcc-login-input input:focus { border-color: rgba(53, 219, 255, .68) !important; box-shadow: 0 0 0 3px rgba(53,219,255,.09) !important; }
.bcc-login-submit {
    height: 52px;
    border: 1px solid rgba(158, 220, 255, .25) !important;
    border-radius: 11px !important;
    background: linear-gradient(110deg, #1b82ec, #6552e7 62%, #28b99d) !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 16px 35px rgba(47, 104, 222, .28);
}
.bcc-login-submit:disabled { opacity: .72; cursor: wait; }
.bcc-login-footer { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bcc-login-footer a { color: #80dfff !important; font-size: 11px; font-weight: 900; text-decoration: none; }
.bcc-login-footer span { color: #49657e; font-size: 9px; font-weight: 800; }
.bcc-login-card .alert { margin: 0 0 16px; border-radius: 10px !important; }

.bcc-splash {
    position: fixed;
    inset: 0;
    z-index: 900000;
    display: grid;
    place-items: center;
    background: #020610;
    transition: opacity .3s ease, visibility .3s ease;
}
.bcc-splash.skip, .bcc-splash.done { opacity: 0; visibility: hidden; pointer-events: none; }
.bcc-splash-mark { text-align: center; }
.bcc-splash-logo {
    width: 92px;
    height: 92px;
    margin: 0 auto 20px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #1675df, #6551e8 70%, #1ed6aa);
    color: #fff;
    font: 1000 52px/1 Arial, sans-serif;
    box-shadow: 0 0 70px rgba(55, 140, 255, .3);
}
.bcc-splash-logo::after {
    content: "";
    position: absolute;
    inset: -50%;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%);
    transform: translateX(-120%) rotate(12deg);
    animation: bcc-splash-light 1s .08s ease forwards;
}
.bcc-splash strong { display: block; color: #fff; font: 1000 32px/1 Arial, sans-serif; letter-spacing: 5px; }
.bcc-splash span { display: block; margin-top: 9px; color: #5e7d9b; font-size: 9px; font-weight: 900; letter-spacing: 3px; }
@keyframes bcc-splash-light { to { transform: translateX(120%) rotate(12deg); } }

@media (max-width: 960px) {
    body.login-body { overflow: auto; }
    .bcc-login-shell { grid-template-columns: 1fr; }
    .bcc-login-stage { display: none; }
    .bcc-login-panel { min-height: 100dvh; border: 0; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .bcc-splash-logo::after { animation: none; }
    .bcc-splash { transition: none; }
}