html {
            min-height: 100%;
            box-sizing: border-box;
        }
        *, *::before, *::after {
            box-sizing: inherit;
        }
        body {
            margin: 0;
            min-height: 100vh;
            min-height: 100dvh;
            display: grid;
            place-items: center;
            padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
            overflow: auto;
            background:
                radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 30%),
                linear-gradient(180deg, #efe9dd, #e5dece);
            font-family: "Segoe UI", Inter, Arial, sans-serif;
            color: #172b42;
        }
        .ortomap-login {
            width: min(100%, 460px);
            background: rgba(255, 255, 255, 0.94);
            border: 1px solid rgba(29, 38, 39, 0.12);
            border-radius: 26px;
            box-shadow: 0 16px 46px rgba(47, 43, 37, 0.12);
            padding: 28px;
        }
        .ortomap-brand-logo {
            display: block;
            width: min(220px, 70vw);
            height: auto;
            margin: 0 0 12px;
        }
        .ortomap-login p {
            color: #657487;
        }
        .ortomap-login form {
            display: grid;
            gap: 14px;
            margin-top: 18px;
        }
        .ortomap-login label {
            display: grid;
            gap: 6px;
            font-size: 14px;
        }
        .ortomap-login input[type="text"],
        .ortomap-login input[type="email"],
        .ortomap-login input[type="password"] {
            width: 100%;
            border: 1px solid rgba(29, 38, 39, 0.12);
            border-radius: 12px;
            padding: 11px 12px;
            background: rgba(255, 255, 255, 0.88);
            font-size: 16px;
        }
        .ortomap-login .ortomap-remember {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 14px;
            color: #172b42;
        }
        .ortomap-login .ortomap-remember input {
            width: 18px;
            height: 18px;
            accent-color: #2563eb;
        }
        .ortomap-login .ortomap-saved-login {
            margin-top: 14px;
        }
        .ortomap-login button {
            border: 0;
            border-radius: 999px;
            background: #2563eb;
            color: #fff;
            padding: 12px 16px;
            min-height: 44px;
            font-weight: 700;
            cursor: pointer;
            font-size: 15px;
        }
        .ortomap-error {
            color: #9b2a15;
            font-weight: 700;
            min-height: 20px;
        }
        .ortomap-success {
            color: #2f7d32;
            font-weight: 700;
            min-height: 20px;
        }
        .ortomap-login-links {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin-top: 14px;
            font-size: 14px;
        }
        .ortomap-login-links a {
            color: #9b3d24;
            font-weight: 700;
            text-decoration: none;
        }
        @media (max-width: 520px) {
            body {
                align-items: start;
                padding-top: max(18px, env(safe-area-inset-top));
            }
            .ortomap-login {
                padding: 20px;
                border-radius: 18px;
            }
            .ortomap-login-links {
                flex-direction: column;
                align-items: flex-start;
            }
            .ortomap-login button {
                width: 100%;
            }
        }