/* ==========================================
   PARCEL EMPIRE LOGIN - RESPONSIVE
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background:#000814;
    color:white;
}

body{
    min-height:100dvh;
    overflow:auto;
    display:grid;
    place-items:center;
    padding:clamp(18px, 4vh, 44px) 14px;
}

.background{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 50% 38%, rgba(0,180,255,.58), transparent 18%),
        radial-gradient(circle at 60% 55%, rgba(0,255,180,.30), transparent 25%),
        linear-gradient(140deg,#020712,#071a34 55%,#000 100%);
    transform:scale(1.08);
    animation:backgroundZoom 25s ease-in-out infinite alternate;
}

@keyframes backgroundZoom{
    from{ transform:scale(1.08); }
    to{ transform:scale(1.18); }
}

.overlay{
    position:fixed;
    inset:0;
    background:linear-gradient(rgba(5,15,35,.65),rgba(0,0,0,.88));
    backdrop-filter:blur(6px);
}

.login-card{
    position:relative;
    z-index:5;
    width:min(420px, 100%);
    padding:clamp(22px, 4vw, 40px);
    border-radius:28px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(20px);
    box-shadow:0 0 80px rgba(0,180,255,.20);
    animation:fadeUp .65s ease both;
}

@keyframes fadeUp{
    from{ opacity:0; transform:translateY(20px); }
    to{ opacity:1; transform:translateY(0); }
}

.logo{
    width:clamp(68px, 10vh, 90px);
    height:clamp(68px, 10vh, 90px);
    border-radius:50%;
    margin:0 auto 18px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:clamp(34px, 5vh, 48px);
    background:linear-gradient(135deg,#00b4ff,#00ffb3);
    box-shadow:0 0 35px rgba(0,255,180,.45);
}

h1{
    text-align:center;
    font-size:clamp(30px, 5vw, 40px);
    letter-spacing:4px;
    font-weight:800;
}

.subtitle{
    text-align:center;
    opacity:.8;
    margin-top:8px;
    margin-bottom:clamp(22px, 4vh, 35px);
}

.input-group{
    margin-bottom:16px;
}

label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    opacity:.9;
}

input{
    width:100%;
    height:clamp(48px, 7vh, 55px);
    border:0;
    outline:0;
    border-radius:14px;
    padding:0 18px;
    color:white;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    font-size:15px;
    transition:.25s;
}

input::placeholder{
    color:rgba(255,255,255,.45);
}

input:focus{
    border-color:#00c8ff;
    box-shadow:0 0 20px rgba(0,200,255,.35);
}

.login-button,
.social,
.guest{
    width:100%;
    min-height:clamp(48px, 7vh, 58px);
    border-radius:16px;
    cursor:pointer;
    font-weight:800;
    transition:.2s;
}

.login-button{
    border:0;
    margin-top:8px;
    font-size:17px;
    color:white;
    background:linear-gradient(90deg,#00a8ff,#00ffd0);
}

.login-button:hover,
.social:hover{
    transform:translateY(-2px);
}

.divider{
    margin:clamp(18px, 3vh, 30px) 0;
    text-align:center;
    position:relative;
}

.divider span{
    background:rgba(12,18,32,.95);
    padding:0 18px;
    position:relative;
    z-index:5;
    opacity:.7;
}

.divider:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:rgba(255,255,255,.15);
}

.social{
    margin-bottom:12px;
    border:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-size:15px;
}

.social img{
    width:21px;
}

.google{
    background:white;
    color:#111;
}

.apple{
    background:#111;
    color:white;
}

.guest{
    margin-top:4px;
    background:transparent;
    border:2px solid #00d8ff;
    color:#00d8ff;
}

.guest:hover{
    background:#00d8ff;
    color:black;
}

.bottom-links{
    margin-top:20px;
    display:flex;
    justify-content:center;
    gap:12px;
    font-size:14px;
    flex-wrap:wrap;
}

.bottom-links a{
    color:#7fdfff;
    text-decoration:none;
}

.bottom-links a:hover{
    color:white;
}

#loadingScreen{
    position:fixed;
    inset:0;
    background:#000814;
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:white;
    z-index:999;
    padding:24px;
    text-align:center;
}

.spinner{
    width:64px;
    height:64px;
    border-radius:50%;
    border:6px solid rgba(255,255,255,.15);
    border-top:6px solid #00d8ff;
    animation:spin .8s linear infinite;
    margin-bottom:24px;
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}

@media(max-height:700px){
    body{
        align-items:start;
        padding-top:16px;
        padding-bottom:16px;
    }

    .login-card{
        padding:20px;
    }

    .logo{
        width:58px;
        height:58px;
        font-size:30px;
        margin-bottom:10px;
    }

    .subtitle{
        margin-bottom:16px;
    }

    .input-group{
        margin-bottom:12px;
    }

    .divider{
        margin:14px 0;
    }

    .bottom-links{
        margin-top:14px;
    }
}

/* ==========================================
   PHASE 2.0 CLOUD LOGIN STATUS
========================================== */

.login-status{
    margin:10px auto 22px;
    width:max-content;
    max-width:100%;
    padding:7px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    color:#bfefff;
    background:rgba(0,216,255,.10);
    border:1px solid rgba(0,216,255,.22);
}

.login-status[data-type="online"],
.login-status[data-type="ready"]{
    color:#baffdc;
    background:rgba(0,255,136,.10);
    border-color:rgba(0,255,136,.28);
}

.login-status[data-type="error"],
.login-status[data-type="warning"]{
    color:#ffd6a8;
    background:rgba(255,160,64,.12);
    border-color:rgba(255,160,64,.30);
}

/* =====================================================
   PHASE 2.7 - PWA / MOBILE APP POLISH
===================================================== */

.pwaStatusPill,
.installAppButton,
.updateAppButton{
    position:fixed;
    z-index:1400;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(10,16,29,.82);
    color:white;
    backdrop-filter:blur(18px);
    box-shadow:0 12px 36px rgba(0,0,0,.36);
}

.pwaStatusPill{
    right:calc(16px + env(safe-area-inset-right, 0px));
    top:calc(16px + env(safe-area-inset-top, 0px));
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:800;
    pointer-events:none;
}

.pwaDot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:#00d084;
    box-shadow:0 0 14px rgba(0,208,132,.85);
}

.pwaStatusPill.offline .pwaDot{
    background:#ffb020;
    box-shadow:0 0 14px rgba(255,176,32,.85);
}

.installAppButton,
.updateAppButton{
    right:calc(16px + env(safe-area-inset-right, 0px));
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    min-height:46px;
    padding:0 16px;
    border-radius:16px;
    cursor:pointer;
    font-size:14px;
    font-weight:900;
}

.installAppButton{
    background:linear-gradient(135deg,#00d084,#00b4ff);
}

.updateAppButton{
    bottom:calc(72px + env(safe-area-inset-bottom, 0px));
    color:#59e6ff;
}

.pwaToast{
    position:fixed;
    left:50%;
    bottom:calc(90px + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%) translateY(18px);
    z-index:1600;
    max-width:min(460px, calc(100vw - 32px));
    padding:13px 16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(10,16,29,.92);
    color:white;
    box-shadow:0 18px 55px rgba(0,0,0,.45);
    backdrop-filter:blur(16px);
    opacity:0;
    transition:.25s ease;
    text-align:center;
    font-weight:700;
}

.pwaToast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

@media(max-width:900px){
    .pwaStatusPill{
        top:calc(10px + env(safe-area-inset-top, 0px));
        right:calc(10px + env(safe-area-inset-right, 0px));
        font-size:11px;
    }

    .installAppButton,
    .updateAppButton{
        left:calc(12px + env(safe-area-inset-left, 0px));
        right:calc(12px + env(safe-area-inset-right, 0px));
        bottom:calc(88px + env(safe-area-inset-bottom, 0px));
        width:auto;
    }

    .updateAppButton{
        bottom:calc(142px + env(safe-area-inset-bottom, 0px));
    }
}

@media(display-mode:standalone){
    body{
        user-select:none;
        -webkit-user-select:none;
    }

    .installAppButton{
        display:none !important;
    }
}


/* =====================================================
   PHASE 7.6 - MOBILE LOGIN FIT FIX
   Prevents the login card/buttons from being wider than the phone screen.
===================================================== */
html, body{
    max-width:100%;
    overflow-x:hidden;
}
body{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100dvh;
    padding:calc(10px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));
}
.login-card{
    width:min(420px, calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    padding:clamp(16px, 4vw, 34px)!important;
    margin:0 auto;
    overflow:hidden;
}
.login-card h1,
h1{
    font-size:clamp(28px, 9.2vw, 40px)!important;
    letter-spacing:clamp(2px, .9vw, 4px)!important;
    line-height:1.05;
}
.logo{
    width:clamp(58px, 9vh, 84px)!important;
    height:clamp(58px, 9vh, 84px)!important;
    margin-bottom:12px!important;
}
.subtitle{margin-bottom:18px!important;}
.input-group{margin-bottom:12px!important;}
input{height:52px!important;font-size:16px!important;}
.login-button,.social,.guest{min-height:52px!important;}
.bottom-links{margin-top:14px!important;}
.pwaStatusPill{max-width:calc(100vw - 24px);}
@media(max-height:760px){
    body{align-items:flex-start;padding-top:10px;}
    .login-card{padding:14px 16px!important;border-radius:22px;}
    .logo{width:52px!important;height:52px!important;font-size:28px!important;margin-bottom:8px!important;}
    .subtitle{margin-top:4px!important;margin-bottom:12px!important;}
    input{height:48px!important;}
    .login-button,.social,.guest{min-height:48px!important;}
    .divider{margin:10px 0!important;}
    .bottom-links{margin-top:10px!important;font-size:13px;}
}