/* Accés UrbanCops: composició única, sense alçades fixes ni retalls. */
html, body { background:#043659; }
.premium-bg-glow {
    background:
        radial-gradient(circle at 14% 6%, #197ea2 0, transparent 31%),
        linear-gradient(145deg,#075d82 0%,#043956 47%,#021f3f 100%);
}
.premium-bg-glow::before { background:none; }
.premium-bg-glow::after { display:none; }
.auth-bg-icons {
    position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none;
}
.auth-bg-icons > * {
    position:absolute; display:block; color:rgba(176,218,255,.22);
    filter:drop-shadow(0 8px 14px rgba(0,18,55,.16));
    animation:ucAuthAmbientDrift var(--auth-drift-time,8s) ease-in-out var(--auth-drift-delay,0s) infinite alternate;
}
.auth-bg-icons i:nth-child(1) { left:-4%; top:5%; font-size:clamp(68px,17vw,132px); --auth-drift-angle:-12deg; --auth-drift-time:6.5s; --auth-drift-delay:-2s; }
.auth-bg-icons i:nth-child(2) { right:-5%; top:3%; font-size:clamp(72px,18vw,140px); --auth-drift-angle:10deg; --auth-drift-time:7.5s; --auth-drift-delay:-5s; }
.auth-bg-icons i:nth-child(3) { left:-7%; top:35%; font-size:clamp(78px,19vw,148px); --auth-drift-angle:9deg; --auth-drift-time:7s; --auth-drift-delay:-7s; }
.auth-bg-icons i:nth-child(4) { right:-6%; top:31%; font-size:clamp(74px,18vw,142px); --auth-drift-angle:-10deg; --auth-drift-time:8s; --auth-drift-delay:-3s; }
.auth-bg-icons i:nth-child(5) { left:-5%; bottom:3%; font-size:clamp(70px,17.5vw,136px); --auth-drift-angle:-8deg; --auth-drift-time:7.5s; --auth-drift-delay:-4s; }
.auth-bg-icons i:nth-child(6) { right:-6%; bottom:1%; font-size:clamp(72px,18vw,140px); --auth-drift-angle:8deg; --auth-drift-time:8.5s; --auth-drift-delay:-6s; }
.auth-bg-icons > :nth-child(7) { left:18%; top:21%; font-size:clamp(66px,16vw,126px); --auth-drift-angle:8deg; --auth-drift-time:6.8s; --auth-drift-delay:-5s; }
@keyframes ucAuthAmbientDrift {
    from { transform:translate3d(0,-12px,0) rotate(var(--auth-drift-angle,0deg)); }
    to { transform:translate3d(0,13px,0) rotate(var(--auth-drift-angle,0deg)); }
}
@media (prefers-reduced-motion:reduce) {
    .auth-bg-icons > * { animation:none; }
}
.google-auth-transition {
    position:fixed; inset:0; z-index:100000; display:grid; place-items:center;
    padding:24px; background:linear-gradient(145deg,#075d82 0%,#043956 48%,#021f3f 100%);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease;
}
html.google-auth-returning .google-auth-transition {
    opacity:1; visibility:visible; pointer-events:auto;
}
.google-auth-transition-card {
    width:min(320px,100%); display:flex; flex-direction:column; align-items:center;
    color:#fff; text-align:center;
}
.google-auth-transition-card img {
    width:112px; height:112px; object-fit:contain;
    filter:drop-shadow(0 18px 25px rgba(0,15,45,.30)); margin-bottom:22px;
}
.google-auth-transition-loader {
    width:34px; height:34px; border:3px solid rgba(255,255,255,.22);
    border-top-color:#fff; border-radius:50%; animation:ucGoogleAuthSpin .8s linear infinite;
}
.google-auth-transition-card strong { margin-top:18px; font-size:21px; font-weight:850; letter-spacing:-.35px; }
.google-auth-transition-card p { margin-top:7px; color:rgba(255,255,255,.72); font-size:14px; }
@keyframes ucGoogleAuthSpin { to { transform:rotate(360deg); } }
#app-viewport {
    display:block; width:100%; height:auto; min-height:100svh;
    transform:none !important; overflow:visible; isolation:isolate;
}
#app-viewport::before, #app-viewport::after { content:none; }
#app-viewport > .screen {
    display:none !important; width:100%; height:auto; min-height:100svh;
    padding:calc(clamp(158px,26vw,205px) + env(safe-area-inset-top,0px)) clamp(20px,7vw,40px) calc(36px + env(safe-area-inset-bottom,0px)) !important;
    overflow:visible; align-items:start;
}
#app-viewport[data-auth-screen="0"] > .screen:first-child,
#app-viewport[data-auth-screen="1"] > .screen:nth-child(2) { display:grid !important; }
#app-viewport .auth-shell {
    display:block !important; width:min(100%,480px) !important; max-width:480px !important;
    min-height:0 !important; height:auto; margin:0 auto !important; padding:0; gap:0 !important;
}
#app-viewport .form-panel-white {
    position:relative; display:flex; width:100% !important; max-width:none !important;
    height:auto; max-height:none; min-height:0; overflow:visible; margin:0 !important;
    padding:clamp(54px,10vw,70px) clamp(22px,7vw,38px) 30px;
    gap:23px; border:1px solid #dce8fb; border-radius:clamp(32px,8.5vw,46px);
    background:linear-gradient(155deg,#ffffff 8%,#fbfcff 57%,#eef5ff 100%); box-shadow:0 26px 68px #001b3b42,0 2px 0 #ffffffb8 inset;
    animation:none; color:#071a3e;
}
#app-viewport .auth-card-mascot {
    position:absolute; width:clamp(168px,47vw,228px); height:auto;
    left:50%; top:0; transform:translate(-50%,-67%); object-fit:contain;
    filter:drop-shadow(0 12px 9px #062b4e2e); pointer-events:none;
}
#app-viewport .auth-card-topline { display:block; margin:0 0 3px; }
#app-viewport .form-header-area { display:block; position:relative; }
#app-viewport .form-header-title {
    text-align:center; color:#071c43; font-size:clamp(25px,6.8vw,35px);
    font-weight:850; letter-spacing:-1.25px; line-height:1.16;
}
#app-viewport .form-fields-stack { gap:13px; }
#app-viewport .input-group {
    background:#ffffff; border:1.5px solid #dbe5f3; border-radius:999px;
    min-height:52px; padding:14px 42px 14px 15px;
}
#app-viewport #signin-form .input-group { padding-left:46px; display:flex; align-items:center; }
#app-viewport .input-group:focus-within { border-color:#367fee; box-shadow:0 0 0 3px #1664e511,0 5px 14px #376fc711; }
#app-viewport .input-field { color:#122749; font-size:16px; font-weight:450; line-height:1.4; }
#app-viewport .input-field::placeholder { color:#6e7895; opacity:1; }
#app-viewport #signin-form .input-label { position:absolute; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
#app-viewport .input-label { color:#61718b; }
#app-viewport .auth-field-icon { position:absolute; width:22px;height:22px;left:16px;top:50%;transform:translateY(-50%);color:#4a83ea; }
#app-viewport .auth-password-toggle { position:absolute;right:2px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;background:none;border:0;color:#4a83ea;cursor:pointer; }
.auth-eye-icon { width:22px;height:22px; }
#app-viewport .auth-login-options { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px; }
#app-viewport .auth-remember { display:inline-flex;align-items:center;gap:9px;font-size:14px;white-space:nowrap;cursor:pointer; }
#app-viewport .auth-remember input { width:21px;height:21px;accent-color:#0862ef;cursor:pointer; }
#app-viewport .forgot-password-link { color:#0862ef;font-size:13px;font-weight:500;max-width:150px;margin:0;line-height:1.35; }
#app-viewport .action-area-bottom { gap:18px; }
#app-viewport .btn-action-gradient { position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px;border:1px solid #4e9cff;background:linear-gradient(135deg,#1478f3 0%,#1459d7 58%,#193d9e 100%);border-radius:999px;box-shadow:0 10px 21px #0c58c94a,inset 0 1px #ffffff4f;color:white;text-transform:none;letter-spacing:0;font-size:19px;font-weight:750;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
#app-viewport .btn-action-gradient::before { content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,#ffffff33 49%,transparent 68%);transform:translateX(-115%);transition:transform .55s ease; }
#app-viewport .btn-action-gradient:hover { transform:translateY(-2px);box-shadow:0 14px 25px #0c58c957,inset 0 1px #ffffff59;filter:saturate(1.06); }
#app-viewport .btn-action-gradient:hover::before { transform:translateX(115%); }
#app-viewport .btn-action-gradient:active { transform:translateY(1px) scale(.985);box-shadow:0 6px 14px #0c58c93d; }
.auth-button-arrow { width:23px;height:23px; }
#app-viewport .auth-divider { margin:0;width:100%;color:#7987a7;gap:17px; }
#app-viewport .auth-divider::before, #app-viewport .auth-divider::after { background:#dce1ec; }
#app-viewport .google-auth-button { min-height:50px;padding:12px 10px;background:#f9fbff;border:1.5px solid #dbe5f3;border-radius:999px;box-shadow:0 3px 9px #1830560a;gap:12px;color:#071a3e;font-size:16px;font-weight:700;transition:background .18s ease,border-color .18s ease,transform .18s ease; }
#app-viewport .google-auth-button:hover { background:#ffffff;border-color:#b9d1f4;transform:translateY(-1px); }
#app-viewport .google-auth-button svg { width:24px;height:24px;flex-shrink:0; }
#app-viewport .form-footer-hint { margin-top:3px;padding-top:21px;border-top:1px solid #e1e6ee;align-items:baseline;flex-wrap:wrap;gap:5px 9px;color:#627396;font-size:13px;line-height:1.5; }
#app-viewport .footer-action-link { background:none;border:0;padding:0;font:inherit;font-weight:750;color:#0862ef;text-decoration:underline;text-underline-offset:3px; }
#app-viewport .back-btn { position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:30px;height:36px;background:none;color:#336abb;box-shadow:none; }
#app-viewport button:focus-visible, #app-viewport a:focus-visible, #app-viewport input:focus-visible { outline:3px solid #75aafa;outline-offset:3px; }
#scroll-cue {
    position:fixed !important; z-index:12; left:50% !important; right:auto !important;
    top:auto !important; bottom:18px !important; display:flex; margin:0 !important;
    transform:translateX(-50%) !important; animation:none;
}
@media (max-width:360px) {
 #app-viewport .form-panel-white { padding-inline:19px; }
 #app-viewport .form-header-title { font-size:24px; }
 #app-viewport .google-auth-button { font-size:14px;gap:8px; }
 #app-viewport .auth-login-options { gap:8px; }
 #app-viewport .auth-remember { font-size:12px;gap:6px; }
 #app-viewport .forgot-password-link { font-size:12px;max-width:128px; }
}